perf(angular): remove duplicated code in value-accessor

ionic-team · Nov 14, 2018 · bfbbeca · bfbbeca
1 parent 3ac0521
commit bfbbeca
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 257 deletions.
diff --git a/angular/src/directives/control-value-accessors/boolean-value-accessor.ts b/angular/src/directives/control-value-accessors/boolean-value-accessor.ts
@@ -1,7 +1,7 @@
 import { Directive, ElementRef, HostListener } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { setIonicClasses } from './util/set-ionic-classes';
+import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
@@ -14,52 +14,14 @@ import { setIonicClasses } from './util/set-ionic-classes';
     }
   ]
 })
-export class BooleanValueAccessor implements ControlValueAccessor {
+export class BooleanValueAccessor extends ValueAccessor {
 
-  constructor(private element: ElementRef) {
-    this.onChange = () => {/**/};
-    this.onTouched = () => {/**/};
-  }
-
-  onChange: (value: any) => void;
-  onTouched: () => void;
-  private lastValue: any;
-
-  writeValue(value: any) {
-    this.element.nativeElement.checked = this.lastValue = value;
-    setIonicClasses(this.element);
+  constructor(el: ElementRef) {
+    super(el);
   }
 
   @HostListener('ionChange', ['$event.target.checked'])
   _handleIonChange(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value;
-      this.onChange(value);
-    }
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  @HostListener('ionBlur')
-  _handleBlurEvent() {
-    this.onTouched();
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  registerOnChange(fn: (value: any) => void) {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void) {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean) {
-    this.element.nativeElement.disabled = isDisabled;
+    this.handleChangeEvent(value);
   }
 }
diff --git a/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts b/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts
@@ -1,7 +1,6 @@
 import { Directive, ElementRef, HostListener } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-import { setIonicClasses } from './util/set-ionic-classes';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
@@ -14,56 +13,20 @@ import { setIonicClasses } from './util/set-ionic-classes';
     }
   ]
 })
-export class NumericValueAccessor implements ControlValueAccessor {
-
-  constructor(private element: ElementRef) {
-    this.onChange = () => {/**/};
-    this.onTouched = () => {/**/};
-  }
-
-  onChange: (value: any) => void;
-  onTouched: () => void;
-  private lastValue: any;
+export class NumericValueAccessor extends ValueAccessor {
 
-  writeValue(value: any) {
-    // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
-    // Probably not an issue for us, but it doesn't really cost anything either
-    this.element.nativeElement.value = this.lastValue = value == null ? '' : value;
-    setIonicClasses(this.element);
+  constructor(el: ElementRef) {
+    super(el);
   }
 
   @HostListener('ionChange', ['$event.target.value'])
-  _handleInputEvent(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value;
-      this.onChange(value);
-    }
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  @HostListener('ionBlur')
-  _handleBlurEvent() {
-    this.onTouched();
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
+  _handleIonChange(value: any) {
+    this.handleChangeEvent(value);
   }
 
   registerOnChange(fn: (_: number | null) => void) {
-    this.onChange = value => {
+    super.registerOnChange(value => {
       fn(value === '' ? null : parseFloat(value));
-    };
-  }
-
-  registerOnTouched(fn: () => void) {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean) {
-    this.element.nativeElement.disabled = isDisabled;
+    });
   }
 }
diff --git a/angular/src/directives/control-value-accessors/radio-value-accessor.ts b/angular/src/directives/control-value-accessors/radio-value-accessor.ts
@@ -1,7 +1,7 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
-import { setIonicClasses } from './util/set-ionic-classes';
+import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
@@ -14,58 +14,14 @@ import { setIonicClasses } from './util/set-ionic-classes';
     }
   ]
 })
-export class RadioValueAccessor implements ControlValueAccessor {
-  @Input() value: any;
+export class RadioValueAccessor extends ValueAccessor {
 
-  onChange: (value: any) => void;
-  onTouched: () => void;
-  private lastValue: any;
-
-  constructor(private element: ElementRef) {
-    this.onChange = () => {/**/};
-    this.onTouched = () => {/**/};
-  }
-
-  writeValue(value: any) {
-    this.element.nativeElement.checked = this.lastValue = this.value = value;
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
+  constructor(el: ElementRef) {
+    super(el);
   }
 
   @HostListener('ionSelect', ['$event.target.checked'])
   _handleIonSelect(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value;
-      this.onChange(value);
-    }
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  @HostListener('ionBlur')
-  _handleBlurEvent() {
-    this.onTouched();
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  registerOnChange(fn: (value: any) => void) {
-    this.onChange = () => {
-      fn(this.value);
-    };
-  }
-
-  registerOnTouched(fn: () => void) {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean) {
-    this.element.nativeElement.disabled = isDisabled;
+    this.handleChangeEvent(value);
   }
 }
diff --git a/angular/src/directives/control-value-accessors/select-value-accessor.ts b/angular/src/directives/control-value-accessors/select-value-accessor.ts
@@ -1,7 +1,6 @@
 import { Directive, ElementRef, HostListener } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-import { setIonicClasses } from './util/set-ionic-classes';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
@@ -14,55 +13,14 @@ import { setIonicClasses } from './util/set-ionic-classes';
     }
   ]
 })
-export class SelectValueAccessor implements ControlValueAccessor {
-
-  constructor(private element: ElementRef) {
-    this.onChange = () => {/**/};
-    this.onTouched = () => {/**/};
-  }
-
-  onChange: (value: any) => void;
-  onTouched: () => void;
-  private lastValue: any;
+export class SelectValueAccessor extends ValueAccessor {
 
-  writeValue(value: any) {
-    this.element.nativeElement.value = this.lastValue = value;
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
+  constructor(el: ElementRef) {
+    super(el);
   }
 
   @HostListener('ionChange', ['$event.target.value'])
   _handleChangeEvent(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value;
-      this.onChange(value);
-    }
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  @HostListener('ionBlur')
-  _handleBlurEvent() {
-    this.onTouched();
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  registerOnChange(fn: (value: any) => void) {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void) {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean) {
-    this.element.nativeElement.disabled = isDisabled;
+    this.handleChangeEvent(value);
   }
 }
diff --git a/angular/src/directives/control-value-accessors/text-value-accessor.ts b/angular/src/directives/control-value-accessors/text-value-accessor.ts
@@ -1,7 +1,6 @@
 import { Directive, ElementRef, HostListener } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-import { setIonicClasses } from './util/set-ionic-classes';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessor } from './value-accessor';
 
 @Directive({
   /* tslint:disable-next-line:directive-selector */
@@ -14,55 +13,14 @@ import { setIonicClasses } from './util/set-ionic-classes';
     }
   ]
 })
-export class TextValueAccessor implements ControlValueAccessor {
-
-  constructor(private element: ElementRef) {
-    this.onChange = () => {/**/};
-    this.onTouched = () => {/**/};
-  }
-
-  onChange: (value: any) => void;
-  onTouched: () => void;
-  private lastValue: any;
+export class TextValueAccessor extends ValueAccessor {
 
-  writeValue(value: any) {
-    this.element.nativeElement.value = this.lastValue = value;
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
+  constructor(el: ElementRef) {
+    super(el);
   }
 
   @HostListener('ionChange', ['$event.target.value'])
   _handleInputEvent(value: any) {
-    if (value !== this.lastValue) {
-      this.lastValue = value;
-      this.onChange(value);
-    }
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  @HostListener('ionBlur')
-  _handleBlurEvent() {
-    this.onTouched();
-
-    requestAnimationFrame(() => {
-      setIonicClasses(this.element);
-    });
-  }
-
-  registerOnChange(fn: (value: any) => void) {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void) {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean) {
-    this.element.nativeElement.disabled = isDisabled;
+    this.handleChangeEvent(value);
   }
 }
diff --git a/angular/src/directives/control-value-accessors/util/set-ionic-classes.ts b/angular/src/directives/control-value-accessors/util/set-ionic-classes.ts