From f6092ea195ee452a1f0200effe88562391d48367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Thu, 26 Jul 2018 05:37:58 +0200
Subject: [PATCH] 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
---
 packages/uhk-web/package-lock.json                         | 6 +++---
 packages/uhk-web/package.json                              | 2 +-
 .../popover/tab/keypress/keypress-tab.component.html       | 2 +-
 .../popover/tab/keypress/keypress-tab.component.ts         | 7 ++++++-
 .../components/popover/tab/layer/layer-tab.component.ts    | 3 ++-
 .../components/popover/tab/macro/macro-tab.component.html  | 2 +-
 .../components/popover/tab/macro/macro-tab.component.ts    | 3 ++-
 .../components/popover/tab/mouse/mouse-tab.component.ts    | 3 ++-
 .../app/components/popover/tab/none/none-tab.component.ts  | 3 ++-
 9 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/uhk-web/package-lock.json b/packages/uhk-web/package-lock.json
index 86cdc6e7..2c7b99a8 100644
--- a/packages/uhk-web/package-lock.json
+++ b/packages/uhk-web/package-lock.json
@@ -1155,9 +1155,9 @@
 			}
 		},
 		"@ert78gb/ngx-select-ex": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/@ert78gb/ngx-select-ex/-/ngx-select-ex-3.6.0.tgz",
-			"integrity": "sha512-bR6uL7T/wxDUEhlAA90QcclMawEYzWAjk1Ra8SAYlLv15QCRU8WKZM+WSsdYKgseCDnmYTf/9eXDZQI/DsM0eQ==",
+			"version": "3.7.0",
+			"resolved": "https://registry.npmjs.org/@ert78gb/ngx-select-ex/-/ngx-select-ex-3.7.0.tgz",
+			"integrity": "sha512-m3DyGB1VZrxsItgc/NjBt5ZfW1DuQrxLz82ekw/ur79DZHG89EYohKWbx68lonfu8wM+AT4IHUDVqF1gFhyK0g==",
 			"requires": {
 				"tslib": "1.9.0"
 			}
diff --git a/packages/uhk-web/package.json b/packages/uhk-web/package.json
index 801b7cf9..dbc344ed 100644
--- a/packages/uhk-web/package.json
+++ b/packages/uhk-web/package.json
@@ -62,7 +62,7 @@
     "ng2-dragula": "1.5.0",
     "ng2-nouislider": "^1.7.7",
     "ngx-clipboard": "10.0.0",
-    "@ert78gb/ngx-select-ex": "3.6.0",
+    "@ert78gb/ngx-select-ex": "3.7.0",
     "ngrx-store-freeze": "0.1.9",
     "nouislider": "^11.1.0",
     "postcss-url": "^7.1.2",
diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
index 701b0924..3d3f8e88 100644
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
@@ -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"
diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts
index ef45539d..e0337700 100644
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.ts
@@ -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) {
diff --git a/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts
index 9fab62ad..9e101fdd 100644
--- a/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/layer/layer-tab.component.ts
@@ -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']
 })
diff --git a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
index 77266d6f..1c1204f4 100644
--- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.html
@@ -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"
diff --git a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
index d3f58c74..b58d84a4 100644
--- a/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts
@@ -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']
 })
diff --git a/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.ts
index a3e76cba..dec4cf3c 100644
--- a/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/mouse/mouse-tab.component.ts
@@ -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']
 })
diff --git a/packages/uhk-web/src/app/components/popover/tab/none/none-tab.component.ts b/packages/uhk-web/src/app/components/popover/tab/none/none-tab.component.ts
index b0429014..cf99fc05 100644
--- a/packages/uhk-web/src/app/components/popover/tab/none/none-tab.component.ts
+++ b/packages/uhk-web/src/app/components/popover/tab/none/none-tab.component.ts
@@ -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']
 })