-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(disabled): create a disabled mixin to reuse common disabled …
…behavior (#736) * refactor(disabled): create a disabled mixin to reuse common disabled behavior this is the first of many since we need to refactor all common behaviors to centrilize them and make them more reusable. potential mixins could be color, disableRipple, multiple, etc etc) * chore(): polish disabled mixin a bit more make it so its easier to check for boolean changes on its input * *DEPRECATE* feat(chips): rename readOnly to disabled and reuse disabled mixin
- Loading branch information
1 parent
91fb852
commit e07e8e8
Showing
16 changed files
with
181 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,6 +14,8 @@ import 'rxjs/add/observable/timer'; | |
| import 'rxjs/add/operator/toPromise'; | ||
| import 'rxjs/add/operator/debounceTime'; | ||
|
|
||
| import { ICanDisable, mixinDisabled } from '../common/common.module'; | ||
|
|
||
| const noop: any = () => { | ||
| // empty method | ||
| }; | ||
|
|
@@ -36,18 +38,24 @@ export class TdAutocompleteOptionDirective extends TemplatePortalDirective { | |
| } | ||
| } | ||
|
|
||
| class TdChipsBase {} | ||
|
|
||
| /* tslint:disable-next-line */ | ||
| const _TdChipsMixinBase = mixinDisabled(TdChipsBase); | ||
|
|
||
| @Component({ | ||
| providers: [{ | ||
| provide: NG_VALUE_ACCESSOR, | ||
| useExisting: forwardRef(() => TdChipsComponent), | ||
| multi: true, | ||
| }], | ||
| selector: 'td-chips', | ||
| inputs: ['disabled'], | ||
| styleUrls: ['./chips.component.scss' ], | ||
| templateUrl: './chips.component.html', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, AfterViewInit, OnDestroy { | ||
| export class TdChipsComponent extends _TdChipsMixinBase implements ControlValueAccessor, DoCheck, OnInit, AfterViewInit, OnDestroy, ICanDisable { | ||
|
|
||
| private _outsideClickSubs: Subscription; | ||
|
|
||
|
|
@@ -62,7 +70,6 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| private _length: number = 0; | ||
| private _stacked: boolean = false; | ||
| private _requireMatch: boolean = false; | ||
| private _readOnly: boolean = false; | ||
| private _color: 'primary' | 'accent' | 'warn' = 'primary'; | ||
| private _chipAddition: boolean = true; | ||
| private _chipRemoval: boolean = true; | ||
|
|
@@ -133,21 +140,18 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| } | ||
|
|
||
| /** | ||
| * @deprecated [email protected] | ||
| * readOnly?: boolean | ||
| * Disables the chips input and chip removal icon. | ||
| */ | ||
| @Input('readOnly') | ||
| set readOnly(readOnly: boolean) { | ||
| this._readOnly = readOnly; | ||
| this._toggleInput(); | ||
| } | ||
| get readOnly(): boolean { | ||
| return this._readOnly; | ||
| this.disabled = readOnly; | ||
| } | ||
|
|
||
| /** | ||
| * chipAddition?: boolean | ||
| * Disables the ability to add chips. When setting readOnly as true, this will be overriden. | ||
| * Disables the ability to add chips. When setting disabled as true, this will be overriden. | ||
| * Defaults to true. | ||
| */ | ||
| @Input('chipAddition') | ||
|
|
@@ -160,17 +164,17 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| } | ||
|
|
||
| /** | ||
| * Checks if not in readOnly state and if chipAddition is set to 'true' | ||
| * Checks if not in disabled state and if chipAddition is set to 'true' | ||
| * States if a chip can be added and if the input is available | ||
| */ | ||
| get canAddChip(): boolean { | ||
| return this.chipAddition && !this.readOnly; | ||
| return this.chipAddition && !this.disabled; | ||
| } | ||
|
|
||
| /** | ||
| * chipRemoval?: boolean | ||
| * Disables the ability to remove chips. If it doesn't exist chip remmoval defaults to true. | ||
| * When setting readOnly as true, this will be overriden to false. | ||
| * When setting disabled as true, this will be overriden to false. | ||
| */ | ||
| @Input('chipRemoval') | ||
| set chipRemoval(chipRemoval: boolean) { | ||
|
|
@@ -181,11 +185,11 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| } | ||
|
|
||
| /** | ||
| * Checks if not in readOnly state and if chipRemoval is set to 'true' | ||
| * Checks if not in disabled state and if chipRemoval is set to 'true' | ||
| * States if a chip can be removed | ||
| */ | ||
| get canRemoveChip(): boolean { | ||
| return this.chipRemoval && !this.readOnly; | ||
| return this.chipRemoval && !this.disabled; | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -255,13 +259,14 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| */ | ||
| @HostBinding('attr.tabindex') | ||
| get tabIndex(): number { | ||
| return this.readOnly ? -1 : this._tabIndex; | ||
| return this.disabled ? -1 : this._tabIndex; | ||
| } | ||
|
|
||
| constructor(private _elementRef: ElementRef, | ||
| private _renderer: Renderer2, | ||
| private _changeDetectorRef: ChangeDetectorRef, | ||
| @Optional() @Inject(DOCUMENT) private _document: any) { | ||
| super(); | ||
| this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color); | ||
| } | ||
|
|
||
|
|
@@ -359,6 +364,11 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| } | ||
| } | ||
|
|
||
| /** Method executed when the disabled value changes */ | ||
| onDisabledChange(v: boolean): void { | ||
| this._toggleInput(); | ||
| } | ||
|
|
||
| /** | ||
| * Method that is executed when trying to create a new chip from the autocomplete. | ||
| * It check if [requireMatch] is enabled, and tries to add the first active option | ||
|
|
@@ -462,7 +472,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| * Sets focus state of the component | ||
| */ | ||
| setFocusedState(): void { | ||
| if (!this.readOnly) { | ||
| if (!this.disabled) { | ||
| this._focused = true; | ||
| this._tabIndex = -1; | ||
| this._changeDetectorRef.markForCheck(); | ||
|
|
@@ -485,7 +495,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
| focus(): void { | ||
| if (this.canAddChip) { | ||
| this._inputChild.focus(); | ||
| } else if (!this.readOnly) { | ||
| } else if (!this.disabled) { | ||
| this._focusFirstChip(); | ||
| } | ||
| } | ||
|
|
@@ -664,7 +674,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, | |
|
|
||
| /** | ||
| * Method to toggle the disable state of input | ||
| * Checks if not in readOnly state and if chipAddition is set to 'true' | ||
| * Checks if not in disabled state and if chipAddition is set to 'true' | ||
| */ | ||
| private _toggleInput(): void { | ||
| if (this.canAddChip) { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export type Constructor<T> = new (...args: any[]) => T; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { Constructor } from './constructor'; | ||
|
|
||
| import { Observable } from 'rxjs/Observable'; | ||
| import { Subject } from 'rxjs/Subject'; | ||
|
|
||
| /** Interface to implement when applying the disabled mixin */ | ||
| export interface ICanDisable { | ||
| disabled: boolean; | ||
| onDisabledChange(v: boolean): void; | ||
| } | ||
|
|
||
| /** Mixin to augment a component or directive with a `disabled` property. */ | ||
| export function mixinDisabled<T extends Constructor<{}>>(base: T): Constructor<ICanDisable> & T { | ||
| return class extends base { | ||
| private _disabled: boolean = false; | ||
|
|
||
| constructor(...args: any[]) { | ||
| super(...args); | ||
| } | ||
|
|
||
| get disabled(): boolean { | ||
| return this._disabled; | ||
| } | ||
| set disabled(value: boolean) { | ||
| let newValue: boolean = <any>value !== '' ? (<any>value === 'true' || value === true) : true; | ||
| if (this._disabled !== newValue) { | ||
| this._disabled = newValue; | ||
| this.onDisabledChange(this._disabled); | ||
| } | ||
| } | ||
|
|
||
| onDisabledChange(v: boolean): void { | ||
| /** NOT IMPLEMENTED, this needs to be overriden by subclasses if needed */ | ||
| } | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.