perf(): prevent unnecesary event listener changes

ionic-team · Oct 9, 2018 · a999c1f · a999c1f
1 parent 545db2e
commit a999c1f
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 86 deletions.
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
@@ -108,20 +108,20 @@ export class Button implements ComponentInterface {
     }
   }
 
-  private onFocus() {
+  private onFocus = () => {
     this.ionFocus.emit();
   }
 
-  private onKeyUp() {
+  private onKeyUp = () => {
     this.keyFocus = true;
   }
 
-  private onBlur() {
+  private onBlur = () => {
     this.keyFocus = false;
     this.ionBlur.emit();
   }
 
-  private onClick(ev: Event) {
+  private onClick = (ev: Event) => {
     if (this.type === 'button') {
       return openURL(this.win, this.href, ev, this.routerDirection);
 
@@ -177,10 +177,10 @@ export class Button implements ComponentInterface {
         {...attrs}
         class="button-native"
         disabled={this.disabled}
-        onFocus={this.onFocus.bind(this)}
-        onKeyUp={this.onKeyUp.bind(this)}
-        onBlur={this.onBlur.bind(this)}
-        onClick={this.onClick.bind(this)}
+        onFocus={this.onFocus}
+        onKeyUp={this.onKeyUp}
+        onBlur={this.onBlur}
+        onClick={this.onClick}
       >
         <span class="button-inner">
           <slot name="icon-only"></slot>

diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
@@ -99,19 +99,19 @@ export class Checkbox implements ComponentInterface {
     });
   }
 
-  private onChange() {
+  private onChange = () => {
     this.checked = !this.checked;
   }
 
-  private onKeyUp() {
+  private onKeyUp = () => {
     this.keyFocus = true;
   }
 
-  private onFocus() {
+  private onFocus = () => {
     this.ionFocus.emit();
   }
 
-  private onBlur() {
+  private onBlur = () => {
     this.keyFocus = false;
     this.ionBlur.emit();
   }
@@ -140,10 +140,10 @@ export class Checkbox implements ComponentInterface {
         type="checkbox"
         id={this.inputId}
         aria-labelledby={this.labelId}
-        onChange={this.onChange.bind(this)}
-        onFocus={this.onFocus.bind(this)}
-        onBlur={this.onBlur.bind(this)}
-        onKeyUp={this.onKeyUp.bind(this)}
+        onChange={this.onChange}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+        onKeyUp={this.onKeyUp}
         checked={this.checked}
         name={this.name}
         value={this.value}

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -527,7 +527,6 @@ export class Datetime implements ComponentInterface {
       <button
         type="button"
         aria-haspopup="true"
-        // id={this.datetimeId}
         aria-labelledby={this.labelId}
         aria-disabled={this.disabled ? 'true' : null}
         onClick={this.open.bind(this)}

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
@@ -265,41 +265,31 @@ export class Input implements ComponentInterface {
     });
   }
 
-  private onInput(ev: KeyboardEvent) {
+  private onInput = (ev: Event) => {
     const input = ev.target as HTMLInputElement | null;
     if (input) {
       this.value = input.value || '';
     }
-    this.ionInput.emit(ev);
+    this.ionInput.emit(ev as KeyboardEvent);
   }
 
-  private onBlur() {
+  private onBlur = () => {
     this.hasFocus = false;
     this.focusChanged();
     this.emitStyle();
 
     this.ionBlur.emit();
   }
 
-  private onFocus() {
+  private onFocus = () => {
     this.hasFocus = true;
     this.focusChanged();
     this.emitStyle();
 
     this.ionFocus.emit();
   }
 
-  private focusChanged() {
-    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
-    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
-      this.didBlurAfterEdit = true;
-    }
-  }
-
-  /**
-   * Check if we need to clear the text input if clearOnEdit is enabled
-   */
-  private onKeydown() {
+  private onKeydown = () => {
     if (this.clearOnEdit) {
       // Did the input value change after it was blurred and edited?
       if (this.didBlurAfterEdit && this.hasValue()) {
@@ -312,10 +302,17 @@ export class Input implements ComponentInterface {
     }
   }
 
-  private clearTextInput() {
+  private clearTextInput = () => {
     this.value = '';
   }
 
+  private focusChanged() {
+    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
+    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
+      this.didBlurAfterEdit = true;
+    }
+  }
+
   private hasValue(): boolean {
     return this.getValue().length > 0;
   }
@@ -362,18 +359,18 @@ export class Input implements ComponentInterface {
         size={this.size}
         type={this.type}
         value={this.getValue()}
-        onInput={this.onInput.bind(this)}
-        onBlur={this.onBlur.bind(this)}
-        onFocus={this.onFocus.bind(this)}
-        onKeyDown={this.onKeydown.bind(this)}
+        onInput={this.onInput}
+        onBlur={this.onBlur}
+        onFocus={this.onFocus}
+        onKeyDown={this.onKeydown}
       />,
       <slot></slot>,
       (this.clearInput && !this.readonly && !this.disabled) && <button
         type="button"
         class="input-clear-icon"
         tabindex="-1"
-        onTouchStart={this.clearTextInput.bind(this)}
-        onMouseDown={this.clearTextInput.bind(this)}
+        onTouchStart={this.clearTextInput}
+        onMouseDown={this.clearTextInput}
       />
     ];
   }

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
@@ -146,24 +146,24 @@ export class Radio implements ComponentInterface {
     });
   }
 
-  private onClick() {
+  private onClick = () => {
     this.checkedChanged(true);
   }
 
-  private onChange() {
+  private onChange = () => {
     this.checked = true;
     this.nativeInput.focus();
   }
 
-  private onKeyUp() {
+  private onKeyUp = () => {
     this.keyFocus = true;
   }
 
-  private onFocus() {
+  private onFocus = () => {
     this.ionFocus.emit();
   }
 
-  private onBlur() {
+  private onBlur = () => {
     this.keyFocus = false;
     this.ionBlur.emit();
   }
@@ -188,11 +188,11 @@ export class Radio implements ComponentInterface {
       </div>,
       <input
         type="radio"
-        onClick={this.onClick.bind(this)}
-        onChange={this.onChange.bind(this)}
-        onFocus={this.onFocus.bind(this)}
-        onBlur={this.onBlur.bind(this)}
-        onKeyUp={this.onKeyUp.bind(this)}
+        onClick={this.onClick}
+        onChange={this.onChange}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+        onKeyUp={this.onKeyUp}
         id={this.inputId}
         name={this.name}
         value={this.value}

diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
@@ -161,7 +161,7 @@ export class Searchbar implements ComponentInterface {
   /**
    * Clears the input field and triggers the control change.
    */
-  private clearInput(ev?: Event) {
+  private onClearInput = (ev?: Event) => {
     this.ionClear.emit();
 
     if (ev) {
@@ -185,33 +185,33 @@ export class Searchbar implements ComponentInterface {
    * the clearInput function doesn't want the input to blur
    * then calls the custom cancel function if the user passed one in.
    */
-  private cancelSearchbar(ev?: Event) {
+  private onCancelSearchbar = (ev?: Event) => {
     if (ev) {
       ev.preventDefault();
       ev.stopPropagation();
     }
     this.ionCancel.emit();
-    this.clearInput();
+    this.onClearInput();
 
     this.nativeInput.blur();
   }
 
   /**
    * Update the Searchbar input value when the input changes
    */
-  private onInput(ev: KeyboardEvent) {
+  private onInput = (ev: Event) => {
     const input = ev.target as HTMLInputElement | null;
     if (input) {
       this.value = input.value;
     }
-    this.ionInput.emit(ev);
+    this.ionInput.emit(ev as KeyboardEvent);
   }
 
   /**
    * Sets the Searchbar to not focused and checks if it should align left
    * based on whether there is a value in the searchbar or not.
    */
-  private onBlur() {
+  private onBlur = () => {
     this.focused = false;
     this.ionBlur.emit();
     this.positionElements();
@@ -220,7 +220,7 @@ export class Searchbar implements ComponentInterface {
   /**
    * Sets the Searchbar to focused and active on input focus.
    */
-  private onFocus() {
+  private onFocus = () => {
     this.focused = true;
     this.ionFocus.emit();
     this.positionElements();
@@ -339,8 +339,8 @@ export class Searchbar implements ComponentInterface {
       <button
         type="button"
         tabIndex={this.mode === 'ios' && !this.focused ? -1 : undefined}
-        onMouseDown={this.cancelSearchbar.bind(this)}
-        onTouchStart={this.cancelSearchbar.bind(this)}
+        onMouseDown={this.onCancelSearchbar}
+        onTouchStart={this.onCancelSearchbar}
         class="searchbar-cancel-button"
       >
         { this.mode === 'md'
@@ -355,9 +355,9 @@ export class Searchbar implements ComponentInterface {
         <input
           ref={el => this.nativeInput = el as HTMLInputElement}
           class="searchbar-input"
-          onInput={this.onInput.bind(this)}
-          onBlur={this.onBlur.bind(this)}
-          onFocus={this.onFocus.bind(this)}
+          onInput={this.onInput}
+          onBlur={this.onBlur}
+          onFocus={this.onFocus}
           placeholder={this.placeholder}
           type={this.type}
           value={this.value}
@@ -374,8 +374,8 @@ export class Searchbar implements ComponentInterface {
           type="button"
           no-blur
           class="searchbar-clear-button"
-          onMouseDown={this.clearInput.bind(this)}
-          onTouchStart={this.clearInput.bind(this)}
+          onMouseDown={this.onClearInput}
+          onTouchStart={this.onClearInput}
         >
           <ion-icon mode={this.mode} icon={clearIcon} lazy={false} class="searchbar-clear-icon"></ion-icon>
         </button>

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
@@ -425,15 +425,15 @@ export class Select implements ComponentInterface {
     return overlay.dismiss();
   }
 
-  onKeyUp() {
+  private onKeyUp = () => {
     this.keyFocus = true;
   }
 
-  onFocus() {
+  private onFocus = () => {
     this.ionFocus.emit();
   }
 
-  onBlur() {
+  private onBlur = () => {
     this.keyFocus = false;
     this.ionBlur.emit();
   }
@@ -500,9 +500,9 @@ export class Select implements ComponentInterface {
         aria-expanded={this.isExpanded ? 'true' : null}
         aria-disabled={this.disabled ? 'true' : null}
         onClick={this.open.bind(this)}
-        onKeyUp={this.onKeyUp.bind(this)}
-        onFocus={this.onFocus.bind(this)}
-        onBlur={this.onBlur.bind(this)}
+        onKeyUp={this.onKeyUp}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
         class="select-cover"
       >
         <slot></slot>

diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
@@ -186,27 +186,27 @@ export class Textarea implements ComponentInterface {
     });
   }
 
-  private onInput(ev: KeyboardEvent) {
+  private onInput = (ev: Event) => {
     this.value = this.nativeInput!.value;
     this.emitStyle();
-    this.ionInput.emit(ev);
+    this.ionInput.emit(ev as KeyboardEvent);
   }
 
-  private onFocus() {
+  private onFocus = () => {
     this.hasFocus = true;
     this.focusChange();
 
     this.ionFocus.emit();
   }
 
-  private onBlur() {
+  private onBlur = () => {
     this.hasFocus = false;
     this.focusChange();
 
     this.ionBlur.emit();
   }
 
-  private onKeyDown() {
+  private onKeyDown = () => {
     this.checkClearOnEdit();
   }
 
@@ -268,10 +268,10 @@ export class Textarea implements ComponentInterface {
         cols={this.cols}
         rows={this.rows}
         wrap={this.wrap}
-        onInput={this.onInput.bind(this)}
-        onBlur={this.onBlur.bind(this)}
-        onFocus={this.onFocus.bind(this)}
-        onKeyDown={this.onKeyDown.bind(this)}
+        onInput={this.onInput}
+        onBlur={this.onBlur}
+        onFocus={this.onFocus}
+        onKeyDown={this.onKeyDown}
       >
         {this.value}
       </textarea>