fix: popover components use OnPush change detection (#727)

* fix: popover components use OnPush change detection * fix: select2 selection bug * chore: upgrade @ert78gb/ngx-select-ex => 3.7.0
2018-07-26 05:37:58 +02:00
parent ac7d66e338
commit f6092ea195
9 changed files with 20 additions and 11 deletions
@@ -2,7 +2,7 @@
    <b class="setting-label">Scancode:</b>
    <div class="scancode-container">
        <ngx-select [items]="scanCodeGroups"
-                    [ngModel]="selectedScancodeOption.id"
+                    [ngModel]="selectedScancodeOption?.id"
                    [autoActiveOnMouseEnter]="false"
                    size="small"
                    optionValueField="id"
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { KeyAction, KeystrokeAction, KeystrokeType, SCANCODES, SECONDARY_ROLES } from 'uhk-common';

 import { Tab } from '../tab';
@@ -7,6 +7,7 @@ import { SelectOptionData } from '../../../../models/select-option-data';

@Component({
    selector: 'keypress-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: './keypress-tab.component.html',
    styleUrls: ['./keypress-tab.component.scss']
 })
@@ -176,6 +177,10 @@ export class KeypressTabComponent extends Tab implements OnChanges {
    }

    private toScancodeTypePair(option: SelectOptionData): [number, string] {
+        if (!option) {
+            return [0, 'basic'];
+        }
+
        let scanCode: number;
        let type: string;
        if (option.additional) {
@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { KeyAction, LayerName, SwitchLayerAction, SwitchLayerMode } from 'uhk-common';

 import { Tab } from '../tab';
@@ -7,6 +7,7 @@ export type toggleType = 'active' | 'toggle';

@Component({
    selector: 'layer-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: './layer-tab.component.html',
    styleUrls: ['./layer-tab.component.scss']
 })
@@ -6,7 +6,7 @@
    <div class="macro-selector">
        <b> Play macro: </b>
        <ngx-select [items]="macroOptions"
-                    [ngModel]="macroOptions[selectedMacroIndex].id"
+                    [ngModel]="macroOptions[selectedMacroIndex]?.id"
                    [autoActiveOnMouseEnter]="false"
                    size="small"
                    optionValueField="id"
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs/Subscription';
 import { KeyAction, Macro, PlayMacroAction } from 'uhk-common';
@@ -11,6 +11,7 @@ import { SelectOptionData } from '../../../../models/select-option-data';

@Component({
    selector: 'macro-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: './macro-tab.component.html',
    styleUrls: ['./macro-tab.component.scss']
 })
@@ -1,10 +1,11 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { KeyAction, MouseAction, MouseActionParam } from 'uhk-common';

 import { Tab } from '../tab';

@Component({
    selector: 'mouse-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: './mouse-tab.component.html',
    styleUrls: ['./mouse-tab.component.scss']
 })
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

 import { Tab } from '../tab';

@Component({
    selector: 'none-tab',
+    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: './none-tab.component.html',
    styleUrls: ['./none-tab.component.scss']
 })