feat(uip-setting): add rendering settings labels

exadel-inc · Apr 21, 2021 · 11a087e · 11a087e
1 parent 573b546
commit 11a087e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 20 deletions.
diff --git a/src/settings/setting/bool-setting/bool-setting.ts b/src/settings/setting/bool-setting/bool-setting.ts
@@ -49,11 +49,6 @@ export class UIPBoolSetting extends UIPSetting {
       this.setValue(valueMatch[0].length ? this.value : null) : this.setInconsistency();
   }
 
-  protected render() {
-    this.innerHTML = '';
-    this.appendChild(this.$field);
-  }
-
   protected getDisplayedValue(): string | boolean {
     if (this.value) {
       return this.$field.checked ? this.value : false;

diff --git a/src/settings/setting/select-setting/select-setting.ts b/src/settings/setting/select-setting/select-setting.ts
@@ -70,11 +70,6 @@ export class UIPSelectSetting extends UIPSetting {
     valueTokens.length ? this.setValue(valueTokens.join(' ')) : this.setInconsistency();
   }
 
-  protected render(): void {
-    this.innerHTML = '';
-    this.appendChild(this.$field);
-  }
-
   protected getDisplayedValue(): string {
     return this.$field.values.join(' ');
   }

diff --git a/src/settings/setting/setting.ts b/src/settings/setting/setting.ts
@@ -2,6 +2,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';
+import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
 
 export abstract class UIPSetting extends ESLBaseElement {
   static is = 'uip-setting';
@@ -25,10 +26,13 @@ export abstract class UIPSetting extends ESLBaseElement {
 
     this.initField();
     this.render();
-    this.$field.addEventListener('change', (e: Event) => {
-      e.preventDefault();
-      EventUtils.dispatch(this, 'valueChange');
-    });
+    this.$field.addEventListener('change', this._onChange);
+  }
+
+  @bind
+  protected _onChange(e: Event): void {
+    e.preventDefault();
+    EventUtils.dispatch(this, 'valueChange');
   }
 
   public applyTo(model: UIPStateModel): void {
@@ -46,10 +50,24 @@ export abstract class UIPSetting extends ESLBaseElement {
     }
   }
 
+  protected renderLabel(): void {
+    if (this.querySelector('label')) return;
+
+    const label = document.createElement('label');
+    label.innerText = this.label || '';
+    label.htmlFor = this.target;
+    this.appendChild(label);
+  }
+
+  protected render(): void {
+    this.innerHTML = '';
+    this.renderLabel();
+    this.appendChild(this.$field);
+  }
+
   protected abstract getDisplayedValue(): string | boolean;
   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
@@ -10,11 +10,6 @@ export class UIPTextSetting extends UIPSetting {
     this.$field.name = this.label || '';
   }
 
-  protected render() {
-    this.innerHTML = '';
-    this.appendChild(this.$field);
-  }
-
   protected getDisplayedValue(): string {
     return this.$field.value;
   }