perf: remove lamda and bind() from templates

fix #346
Lundalogik · Sep 10, 2019 · 7c33d6b · 7c33d6b
1 parent 60646df
commit 7c33d6b
Show file tree

Hide file tree

Showing 57 changed files with 1,123 additions and 697 deletions.
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
@@ -104,6 +104,7 @@ export class ChipSet {
         this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);
         this.handleInputBlur = this.handleInputBlur.bind(this);
         this.handleTextInput = this.handleTextInput.bind(this);
+        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);
     }
 
     /**
@@ -257,10 +258,8 @@ export class ChipSet {
                         onFocus={this.handleTextFieldFocus}
                         onInput={this.handleTextInput}
                         // Some browsers emit a change event on input elements, we need to stop
-                        // that event from propagating since we are emiting our own change event
-                        onChange={event => {
-                            event.stopPropagation();
-                        }}
+                        // that event from propagating since we are emitting our own change event
+                        onChange={this.inputFieldOnChange}
                     />
                 </div>
                 <label
@@ -282,6 +281,10 @@ export class ChipSet {
         );
     }
 
+    private inputFieldOnChange(event) {
+        event.stopPropagation();
+    }
+
     /**
      * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
      * @returns {void}

diff --git a/src/components/collapsible-section/collapsible-section.tsx b/src/components/collapsible-section/collapsible-section.tsx
@@ -29,10 +29,14 @@ export class CollapsibleSection {
     @Event()
     private close: EventEmitter<void>;
 
+    constructor() {
+        this.onClick = this.onClick.bind(this);
+    }
+
     public render() {
         return (
             <section class={`${this.isOpen ? 'open' : ''}`}>
-                <header onClick={this.onClick.bind(this)}>
+                <header onClick={this.onClick}>
                     <span class="expander">
                         <svg viewBox="0 0 30 30" width="100%" height="100%">
                             {(() => {

diff --git a/src/components/date-picker/pickers/MonthPicker.tsx b/src/components/date-picker/pickers/MonthPicker.tsx
@@ -123,7 +123,7 @@ export class MonthPicker extends Picker {
         return (
             <div
                 class="datepicker-month"
-                onClick={() => {
+                onClick={() => { // tslint:disable-line:jsx-no-lambda prettier
                     const date = moment([fp.currentYear])
                         .month(month)
                         .toDate();

diff --git a/src/components/date-picker/pickers/QuarterPicker.tsx b/src/components/date-picker/pickers/QuarterPicker.tsx
@@ -131,7 +131,7 @@ export class QuarterPicker extends Picker {
             <div
                 class="datepicker-quarter"
                 id={`datepicker-quarter-${quarter}`}
-                onClick={() => {
+                onClick={() => { // tslint:disable-line:jsx-no-lambda prettier
                     const date = moment([fp.currentYear])
                         .quarter(quarter)
                         .toDate();

diff --git a/src/components/date-picker/pickers/YearPicker.tsx b/src/components/date-picker/pickers/YearPicker.tsx
@@ -94,7 +94,7 @@ export class YearPicker extends Picker {
         return (
             <div
                 class="datepicker-year"
-                onClick={() => {
+                onClick={() => { // tslint:disable-line:jsx-no-lambda prettier
                     const date = moment(year).toDate();
                     fp.setDate(date, true);
                     fp.close();

diff --git a/src/components/icon-button/icon-button.mdx b/src/components/icon-button/icon-button.mdx
@@ -11,3 +11,7 @@ menu: Components
 ## Example
 
 <limel-example name="limel-example-icon-button" />
+
+### Toggle State
+
+<limel-example name="limel-example-icon-button-toggle-state" path="icon-button" />
diff --git a/src/components/input-field/input-field.mdx b/src/components/input-field/input-field.mdx
@@ -10,22 +10,26 @@ menu: Components
 
 ## Examples
 
-### Input field of type text
+### Input Field of Type Text
 
 <limel-example path="input-field" name="limel-example-input-field-text" />
 
-### Input field of type number
+#### Multiple Fields Inline
+
+<limel-example path="input-field" name="limel-example-input-field-text-inline" />
+
+### Input Field of Type Number
 
 <limel-example path="input-field" name="limel-example-input-field-number" />
 
-### Input field with completions
+### Input Field with Completions
 
 <limel-example
     path="input-field"
     name="limel-example-input-field-autocomplete"
 />
 
-### Input field with icon action
+### Input Field with Icon Action
 
 <limel-example
     path="input-field"

diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
@@ -104,6 +104,14 @@ export class InputField {
     @Event()
     private action: EventEmitter<void>;
 
+    constructor() {
+        this.handleChange = this.handleChange.bind(this);
+        this.handleIconKeyPress = this.handleIconKeyPress.bind(this);
+        this.handleIconClick = this.handleIconClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+    }
+
     public componentDidLoad() {
         this.mdcTextField = new MDCTextField(
             this.limelInputField.shadowRoot.querySelector('.mdc-text-field')
@@ -134,13 +142,9 @@ export class InputField {
                 {this.renderFormattedNumber()}
                 <input
                     class="mdc-text-field__input"
-                    onInput={this.handleChange.bind(this)}
-                    onFocus={() => {
-                        this.isFocused = true;
-                    }}
-                    onBlur={() => {
-                        this.isFocused = false;
-                    }}
+                    onInput={this.handleChange}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
                     value={this.value}
                     required={this.required}
                     disabled={this.disabled}
@@ -168,15 +172,23 @@ export class InputField {
         ];
     }
 
+    private onFocus() {
+        this.isFocused = true;
+    }
+
+    private onBlur() {
+        this.isFocused = false;
+    }
+
     private renderTrailingIcon() {
         if (!this.trailingIcon) {
             return;
         }
 
         return (
             <i
-                onKeyPress={this.handleIconKeyPress.bind(this)}
-                onClick={this.handleIconClick.bind(this)}
+                onKeyPress={this.handleIconKeyPress}
+                onClick={this.handleIconClick}
                 class="mdc-text-field__icon"
                 tabindex="0"
                 role="button"
@@ -215,7 +227,7 @@ export class InputField {
                             return (
                                 <li
                                     class="mdc-list-item"
-                                    onMouseDown={() => {
+                                    onMouseDown={() => { // tslint:disable-line:jsx-no-lambda prettier
                                         this.completionClickHandler(completion);
                                     }}
                                 >

diff --git a/src/components/select/select.mdx b/src/components/select/select.mdx
@@ -13,3 +13,19 @@ menu: Components
 When importing Option, see [Import Statements](/#import-statements).
 
 <limel-example name="limel-example-select" />
+
+### Initially Empty
+
+<limel-example name="limel-example-select-initially-empty" path="select" />
+
+### Initially Empty but the Empty Option Cannot Be Reselected
+
+<limel-example name="limel-example-select-initially-empty-required" path="select" />
+
+### Specific Value Preselected
+
+<limel-example name="limel-example-select-preselected" path="select" />
+
+### Changing Available Options
+
+<limel-example name="limel-example-select-change-options" path="select" />
diff --git a/src/components/select/test/select.test-wrapper.tsx b/src/components/select/test/select.test-wrapper.tsx
@@ -12,14 +12,16 @@ export class SelectTestWrapper {
     @Prop({ mutable: true })
     public onChangeLastEventDetails: string;
 
+    constructor() {
+        this.onChange = this.onChange.bind(this);
+    }
+
     public render() {
         return (
             <limel-select
                 label="Favourite Doctor"
                 value={this.value}
-                onChange={event => {
-                    this.onChange(event);
-                }}
+                onChange={this.onChange}
             />
         );
     }

diff --git a/src/components/slider/slider.mdx b/src/components/slider/slider.mdx
@@ -11,3 +11,7 @@ menu: Components
 ## Example
 
 <limel-example name="limel-example-slider" />
+
+### With Multiplier
+
+<limel-example name="limel-example-slider-multiplier" path="slider"/>
diff --git a/src/examples/button/button.tsx b/src/examples/button/button.tsx
@@ -59,7 +59,7 @@ export class ButtonExample {
                 <limel-switch
                     label={control.label}
                     value={!!this.props[control.property]}
-                    onChange={event => {
+                    onChange={event => { // tslint:disable-line:jsx-no-lambda prettier
                         this.props = {
                             ...this.props,
                             ...{

diff --git a/src/examples/checkbox/checkbox.tsx b/src/examples/checkbox/checkbox.tsx
@@ -14,6 +14,8 @@ export class CheckboxExample {
 
     constructor() {
         this.changeHandler = this.changeHandler.bind(this);
+        this.onClickToggleEnabled = this.onClickToggleEnabled.bind(this);
+        this.onClickToggleChecked = this.onClickToggleChecked.bind(this);
     }
 
     public render() {
@@ -29,15 +31,11 @@ export class CheckboxExample {
                     />
                     <limel-flex-container justify="end">
                         <limel-button
-                            onClick={() => {
-                                this.disabled = !this.disabled;
-                            }}
+                            onClick={this.onClickToggleEnabled}
                             label={this.disabled ? 'Enable' : 'Disable'}
                         />
                         <limel-button
-                            onClick={() => {
-                                this.value = !this.value;
-                            }}
+                            onClick={this.onClickToggleChecked}
                             label="Toggle checked"
                         />
                     </limel-flex-container>
@@ -49,6 +47,14 @@ export class CheckboxExample {
         );
     }
 
+    private onClickToggleEnabled() {
+        this.disabled = !this.disabled;
+    }
+
+    private onClickToggleChecked() {
+        this.value = !this.value;
+    }
+
     private changeHandler(event) {
         this.value = event.detail;
     }

diff --git a/src/examples/chip-set/chip-set-choice.tsx b/src/examples/chip-set/chip-set-choice.tsx
@@ -29,26 +29,30 @@ export class ChipSetChoiceExample {
     @State()
     private disabled: boolean = false;
 
+    constructor() {
+        this.disabledOnChange = this.disabledOnChange.bind(this);
+        this.chipSetOnChange = this.chipSetOnChange.bind(this);
+    }
+
     public render() {
         return [
-            <limel-switch
-                label="Disabled"
-                onChange={event => {
-                    return (this.disabled = event.detail);
-                }}
-            />,
+            <limel-switch label="Disabled" onChange={this.disabledOnChange} />,
             <br />,
             <br />,
             <limel-chip-set
                 disabled={this.disabled}
                 type="choice"
-                onChange={this.handleChange}
+                onChange={this.chipSetOnChange}
                 value={this.chips}
             />,
         ];
     }
 
-    private handleChange(event) {
+    private disabledOnChange(event) {
+        this.disabled = event.detail;
+    }
+
+    private chipSetOnChange(event) {
         console.log(event.detail);
     }
 }
diff --git a/src/examples/chip-set/chip-set-filter.tsx b/src/examples/chip-set/chip-set-filter.tsx
@@ -26,26 +26,30 @@ export class ChipSetFilterExample {
     @State()
     private disabled: boolean = false;
 
+    constructor() {
+        this.disabledOnChange = this.disabledOnChange.bind(this);
+        this.chipSetOnChange = this.chipSetOnChange.bind(this);
+    }
+
     public render() {
         return [
-            <limel-switch
-                label="Disabled"
-                onChange={event => {
-                    return (this.disabled = event.detail);
-                }}
-            />,
+            <limel-switch label="Disabled" onChange={this.disabledOnChange} />,
             <br />,
             <br />,
             <limel-chip-set
                 disabled={this.disabled}
                 type="filter"
-                onChange={this.handleChange}
+                onChange={this.chipSetOnChange}
                 value={this.chips}
             />,
         ];
     }
 
-    private handleChange(event) {
+    private disabledOnChange(event) {
+        this.disabled = event.detail;
+    }
+
+    private chipSetOnChange(event) {
         console.log(event.detail);
     }
 }