refactor: add themeable base class

* Introduces a new `MdThemeable` base class that can be extended by different components to automatically support the `color` input. * This reduces a lot of repeated code in the different components and it also simplifies maintaining. Closes angular#2394.
devversion · Feb 10, 2017 · 827eb0b · 827eb0b
1 parent e908663
commit 827eb0b
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 185 deletions.
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../core';
+import {MdThemeable} from '../core/style/themeable';
 
 
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
@@ -97,8 +98,7 @@ export class MdMiniFabCssMatStyler {}
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdButton {
-  private _color: string;
+export class MdButton extends MdThemeable {
 
   /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */
   _isKeyboardFocused: boolean = false;
@@ -120,12 +120,9 @@ export class MdButton {
   get disabled() { return this._disabled; }
   set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value) ? true : null; }
 
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer) { }
-
-  /** The color of the button. Can be `primary`, `accent`, or `warn`. */
-  @Input()
-  get color(): string { return this._color; }
-  set color(value: string) { this._updateColor(value); }
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
+    super(_renderer, _elementRef);
+  }
 
   _setMousedown() {
     // We only *show* the focus style when focus has come to the button via the keyboard.
@@ -136,18 +133,6 @@ export class MdButton {
     setTimeout(() => { this._isMouseDown = false; }, 100);
   }
 
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color != null && color != '') {
-      this._renderer.setElementClass(this._getHostElement(), `mat-${color}`, isAdd);
-    }
-  }
-
   _setKeyboardFocus() {
     this._isKeyboardFocused = !this._isMouseDown;
   }

diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
@@ -17,6 +17,7 @@ import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 import {MdRippleModule, CompatibilityModule} from '../core';
+import {MdThemeable} from '../core/style/themeable';
 
 
 /** Monotonically increasing integer used to auto-generate unique ids for checkbox components. */
@@ -79,7 +80,7 @@ export class MdCheckboxChange {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MdCheckbox implements ControlValueAccessor {
+export class MdCheckbox extends MdThemeable implements ControlValueAccessor {
   /**
    * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
    * take precedence so this may be omitted.
@@ -168,15 +169,16 @@ export class MdCheckbox implements ControlValueAccessor {
 
   private _indeterminate: boolean = false;
 
-  private _color: string;
-
   private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};
 
   _hasFocus: boolean = false;
 
   constructor(private _renderer: Renderer,
               private _elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef) {
+    super(_renderer, _elementRef);
+
+    // By default set the component color to accent.
     this.color = 'accent';
   }
 
@@ -228,23 +230,6 @@ export class MdCheckbox implements ControlValueAccessor {
     }
   }
 
-  /** The color of the button. Can be `primary`, `accent`, or `warn`. */
-  @Input()
-  get color(): string { return this._color; }
-  set color(value: string) { this._updateColor(value); }
-
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color != null && color != '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
-    }
-  }
-
   _isRippleDisabled() {
     return this.disableRipple || this.disabled;
   }

diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts
@@ -11,6 +11,7 @@ import {
 
 import {Focusable} from '../core/a11y/focus-key-manager';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
+import {MdThemeable} from '../core/style/themeable';
 
 export interface MdChipEvent {
   chip: MdChip;
@@ -35,17 +36,14 @@ export interface MdChipEvent {
     '(click)': '_handleClick($event)'
   }
 })
-export class MdChip implements Focusable, OnInit, OnDestroy {
+export class MdChip extends MdThemeable implements Focusable, OnInit, OnDestroy {
 
   /** Whether or not the chip is disabled. Disabled chips cannot be focused. */
   protected _disabled: boolean = null;
 
   /** Whether or not the chip is selected. */
   protected _selected: boolean = false;
 
-  /** The palette color of selected chips. */
-  protected _color: string = 'primary';
-
   /** Emitted when the chip is focused. */
   onFocus = new EventEmitter<MdChipEvent>();
 
@@ -58,11 +56,15 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
   /** Emitted when the chip is destroyed. */
   @Output() destroy = new EventEmitter<MdChipEvent>();
 
-  constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) { }
+  constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) {
+    super(_renderer, _elementRef);
+
+    // By default the chip elements should use the primary palette.
+    this.color = 'primary';
+  }
 
   ngOnInit(): void {
     this._addDefaultCSSClass();
-    this._updateColor(this._color);
   }
 
   ngOnDestroy(): void {
@@ -108,15 +110,6 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
     return this.selected;
   }
 
-  /** The color of the chip. Can be `primary`, `accent`, or `warn`. */
-  @Input() get color(): string {
-    return this._color;
-  }
-
-  set color(value: string) {
-    this._updateColor(value);
-  }
-
   /** Allows for programmatic focusing of the chip. */
   focus(): void {
     this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus');
@@ -148,17 +141,4 @@ export class MdChip implements Focusable, OnInit, OnDestroy {
     }
   }
 
-  /** Updates the private _color variable and the native element. */
-  private _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  /** Sets the mat-color on the native element. */
-  private _setElementColor(color: string, isAdd: boolean) {
-    if (color != null && color != '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
-    }
-  }
 }
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
@@ -5,6 +5,7 @@ import {
   ElementRef,
   Renderer,
 } from '@angular/core';
+import {MdThemeable} from '../../style/themeable';
 
 export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 
@@ -32,29 +33,12 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',
   },
 })
-export class MdPseudoCheckbox {
+export class MdPseudoCheckbox extends MdThemeable {
   /** Display state of the checkbox. */
   @Input() state: MdPseudoCheckboxState = 'unchecked';
 
-  /** Whether the checkbox is disabled. */
-  @Input() disabled: boolean = false;
-
-  /** Color of the checkbox. */
-  @Input()
-  get color(): string { return this._color; };
-  set color(value: string) {
-    if (value) {
-      let nativeElement = this._elementRef.nativeElement;
-
-      this._renderer.setElementClass(nativeElement, `mat-${this.color}`, false);
-      this._renderer.setElementClass(nativeElement, `mat-${value}`, true);
-      this._color = value;
-    }
-  }
-
-  private _color: string;
-
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
+  constructor(elementRef: ElementRef, renderer: Renderer) {
+    super(renderer, elementRef);
     this.color = 'accent';
   }
 }
diff --git a/src/lib/core/style/themeable.spec.ts b/src/lib/core/style/themeable.spec.ts
@@ -0,0 +1,66 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, ElementRef, Renderer} from '@angular/core';
+import {MdThemeable} from './themeable';
+import {By} from '@angular/platform-browser';
+
+describe('MdThemeable', () => {
+
+  let fixture: ComponentFixture<TestComponent>;
+  let testComponent: TestComponent;
+  let themeableElement: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, ThemeableComponent],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    testComponent = fixture.componentInstance;
+    themeableElement = fixture.debugElement.query(By.css('themeable-test')).nativeElement;
+  });
+
+  it('should support a default component color', () => {
+    expect(themeableElement.classList).toContain('mat-warn');
+  });
+
+  it('should update classes on color change', () => {
+    expect(themeableElement.classList).toContain('mat-warn');
+
+    testComponent.color = 'primary';
+    fixture.detectChanges();
+
+    expect(themeableElement.classList).toContain('mat-primary');
+    expect(themeableElement.classList).not.toContain('mat-warn');
+
+    testComponent.color = 'accent';
+    fixture.detectChanges();
+
+    expect(themeableElement.classList).toContain('mat-accent');
+    expect(themeableElement.classList).not.toContain('mat-warn');
+    expect(themeableElement.classList).not.toContain('mat-primary');
+  });
+
+});
+
+@Component({
+  selector: 'themeable-test',
+  template: '<span>Themeable</span>'
+})
+class ThemeableComponent extends MdThemeable {
+  constructor(renderer: Renderer, elementRef: ElementRef) {
+    super(renderer, elementRef);
+  }
+}
+
+@Component({
+  template: '<themeable-test [color]="color"></themeable-test>'
+})
+class TestComponent {
+  color: string = 'warn';
+}
diff --git a/src/lib/core/style/themeable.ts b/src/lib/core/style/themeable.ts
@@ -0,0 +1,30 @@
+import {ElementRef, Input, Renderer} from '@angular/core';
+
+/** Material components can extend the MdThemeable class to add an Input that can
+ * developers use to switch palettes on the components. */
+export class MdThemeable {
+
+  /** Stored color for the themeable component. */
+  private _color: string;
+
+  constructor(private renderer: Renderer, private elementRef: ElementRef) {}
+
+  /** Color of the component. Values are primary, accent, or warn. */
+  @Input()
+  get color(): string {
+    return this._color;
+  }
+  set color(newColor: string) {
+    this._setElementColor(this._color, false);
+    this._setElementColor(newColor, true);
+    this._color = newColor;
+  }
+
+  /** Toggles a color class on the components host element. */
+  private _setElementColor(color: string, isAdd: boolean) {
+    if (color != null && color != '') {
+      this.renderer.setElementClass(this.elementRef.nativeElement, `mat-${color}`, isAdd);
+    }
+  }
+
+}
diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
@@ -18,6 +18,7 @@ import {HttpModule, Http} from '@angular/http';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MdError, CompatibilityModule} from '../core';
 import {MdIconRegistry} from './icon-registry';
+import {MdThemeable} from '../core/style/themeable';
 export {MdIconRegistry} from './icon-registry';
 
 /** Exception thrown when an invalid icon name is passed to an md-icon component. */
@@ -72,8 +73,7 @@ export class MdIconInvalidNameError extends MdError {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
-  private _color: string;
+export class MdIcon extends MdThemeable implements OnChanges, OnInit, AfterViewChecked {
 
   /** Name of the icon in the SVG icon set. */
   @Input() svgIcon: string;
@@ -90,30 +90,15 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked {
   /** Screenreader label for the icon. */
   @Input('aria-label') hostAriaLabel: string = '';
 
-  /** Color of the icon. */
-  @Input()
-  get color(): string { return this._color; }
-  set color(value: string) { this._updateColor(value); }
-
   private _previousFontSetClass: string;
   private _previousFontIconClass: string;
   private _previousAriaLabel: string;
 
   constructor(
       private _elementRef: ElementRef,
       private _renderer: Renderer,
-      private _mdIconRegistry: MdIconRegistry) { }
-
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color != null && color != '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `mat-${color}`, isAdd);
-    }
+      private _mdIconRegistry: MdIconRegistry) {
+    super(_renderer, _elementRef);
   }
 
   /**