feat(uip-setting): move $field initiation in a separate method

exadel-inc · Apr 4, 2021 · 85e4498 · 85e4498
1 parent 6f3883c
commit 85e4498
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 14 deletions.
diff --git a/src/settings/setting/bool-setting/bool-setting.ts b/src/settings/setting/bool-setting/bool-setting.ts
@@ -9,14 +9,10 @@ export class UIPBoolSetting extends UIPSetting {
   @attr({defaultValue: null}) value: string;
   @attr({defaultValue: 'replace'}) mode: 'replace' | 'append';
 
-  protected connectedCallback() {
-    super.connectedCallback();
-
+  protected initField() {
     this.$field = document.createElement('input');
     this.$field.type = 'checkbox';
     this.$field.name = this.label || '';
-
-    this.render();
   }
 
   applyTo(model: UIPStateModel) {

diff --git a/src/settings/setting/select-setting/select-setting.ts b/src/settings/setting/select-setting/select-setting.ts
@@ -16,9 +16,7 @@ export class UIPSelectSetting extends UIPSetting {
     return this.$field.options.map(opt => opt.value);
   }
 
-  protected connectedCallback() {
-    super.connectedCallback();
-
+  protected initField() {
     this.$field = new ESLSelect();
     this.$field.name = this.label || '';
 
@@ -27,7 +25,6 @@ export class UIPSelectSetting extends UIPSetting {
     select.multiple = this.multiple;
 
     this.$field.$select = select;
-    this.render();
   }
 
   applyTo(model: UIPStateModel) {

diff --git a/src/settings/setting/setting.ts b/src/settings/setting/setting.ts
@@ -1,6 +1,7 @@
 import {attr, ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
 import {UIPStateModel} from '../../utils/state-model/state-model';
 import {UIPSettings} from '../settings';
+import {EventUtils} from "@exadel/esl/modules/esl-utils/dom/events";
 
 export abstract class UIPSetting extends ESLBaseElement {
   @attr() attribute: string;
@@ -17,6 +18,13 @@ export abstract class UIPSetting extends ESLBaseElement {
     if (settings && target) {
       this.target = target;
     }
+
+    this.initField();
+    this.render();
+    this.$field.addEventListener('change', (e: Event) => {
+      e.preventDefault();
+      EventUtils.dispatch(this, 'valueChange');
+    });
   }
 
   public applyTo(model: UIPStateModel): void {
@@ -38,5 +46,6 @@ export abstract class UIPSetting extends ESLBaseElement {
   protected abstract isValid(): boolean;
   protected abstract setInconsistency(): void;
   protected abstract setValue(value: string | null): void;
+  protected abstract initField(): void;
   protected abstract render(): void;
 }
diff --git a/src/settings/setting/text-setting/text-setting.ts b/src/settings/setting/text-setting/text-setting.ts
@@ -4,14 +4,10 @@ export class UIPTextSetting extends UIPSetting {
   public static is = 'uip-text-setting';
   protected $field: HTMLInputElement;
 
-  protected connectedCallback() {
-    super.connectedCallback();
-
+  protected initField() {
     this.$field = document.createElement('input');
     this.$field.type = 'text';
     this.$field.name = this.label || '';
-
-    this.render();
   }
 
   protected render() {