feat(options): fix option active state on inserting to dom

exadel-inc · Sep 12, 2022 · fe24ff4 · fe24ff4
1 parent c32a1e6
commit fe24ff4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/src/plugins/header/options/option/option.ts b/src/plugins/header/options/option/option.ts
@@ -1,15 +1,16 @@
-import {attr, boolAttr, ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
+import {attr, ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core';
 import {listen} from '@exadel/esl/modules/esl-utils/decorators/listen';
 import {ENTER, SPACE} from '@exadel/esl/modules/esl-utils/dom/keys';
 
 import type {UIPOptions} from '../options';
+import {UIPRoot} from '../../../../core/base/root';
 
 /** Config used to create options. */
 export type OptionConfig = {
   /** Attribute name used as absence marker of option icon */
   attrName: string;
   /** Controlled attribute to toggle on root. */
-  rootControlledAttr: string;
+  optionValue: string;
   /** Callback to indicate if option should be rendered. */
   canActivate?: (scope: UIPOptions) => boolean;
 };
@@ -18,18 +19,33 @@ export type OptionConfig = {
 export class UIPOption extends ESLBaseElement {
   static is = 'uip-option';
   @attr() public attribute: string;
-  @boolAttr() public active: boolean;
+  public _active: boolean;
+
+  protected $root: UIPRoot;
+  protected config: OptionConfig;
 
   static create(optionConfig: OptionConfig): UIPOption {
     const option = document.createElement('uip-option') as UIPOption;
-    option.setAttribute('attribute', optionConfig.rootControlledAttr);
+    option.setAttribute('attribute', optionConfig.optionValue);
+    option.config = optionConfig;
     return option;
   }
 
   protected connectedCallback() {
     super.connectedCallback();
+    this.$root = this.closest('.uip-root') as UIPRoot;
     this.classList.add(`${this.attribute}-option`);
     this.tabIndex = 0;
+    this.active = this.$root.hasAttribute(this.config.optionValue);
+  }
+
+  public get active(): boolean {
+    return this._active;
+  }
+
+  public set active(val: boolean) {
+    this._active = val;
+    this.$$cls('active', this._active);
   }
 
   @listen('click')
@@ -47,10 +63,9 @@ export class UIPOption extends ESLBaseElement {
 
   public toggleState(force?: boolean) {
     this.active = force === undefined ? !this.active : force;
-    this.$$cls('active', this.active);
   }
 
   protected disconnectedCallback() {
-      super.disconnectedCallback();
+    super.disconnectedCallback();
   }
 }
diff --git a/src/plugins/header/options/options.ts b/src/plugins/header/options/options.ts
@@ -17,23 +17,23 @@ export class UIPOptions extends UIPPlugin {
   protected static UIPOptionsConfig: OptionConfig[] = [
     {
       attrName: 'hide-theme',
-      rootControlledAttr: 'dark-theme',
+      optionValue: 'dark-theme',
       canActivate: (component) => !component.hasAttribute('hide-theme')
     },
     {
       attrName: 'hide-direction',
-      rootControlledAttr: 'rtl-direction',
+      optionValue: 'rtl-direction',
       canActivate: (component) => !component.hasAttribute('hide-direction')
     },
     {
       attrName: 'hide-settings',
-      rootControlledAttr: 'settings-collapsed',
+      optionValue: 'settings-collapsed',
       canActivate: (component) => !component.hasAttribute('hide-settings') &&
         !!component.root?.querySelector('uip-settings')
     },
     {
       attrName: 'hide-editor',
-      rootControlledAttr: 'editor-collapsed',
+      optionValue: 'editor-collapsed',
       canActivate: (component) => !component.hasAttribute('hide-editor') &&
         !!component.root?.querySelector('uip-editor')
     }
@@ -54,19 +54,19 @@ export class UIPOptions extends UIPPlugin {
 
     const config = UIPOptions.UIPOptionsConfig.find((elem) => elem.attrName === attrName);
     if (!config) return;
-    if (newVal === null) {
+    if (newVal === null) {  // add option icon
       this.render([config]);
-    } else {
-      const option = this.options.get(config.rootControlledAttr);
+    } else { // remove option icon
+      const option = this.options.get(config.optionValue);
       if (!option) return;
-      this.options.delete(config.rootControlledAttr);
+      this.options.delete(config.optionValue);
       option.remove();
     }
   }
 
   protected render(options = UIPOptions.UIPOptionsConfig) {
     options = options.filter(option => !option.canActivate || option.canActivate(this));
-    options.forEach((option) => this.options.set(option.rootControlledAttr, UIPOption.create(option)));
+    options.forEach((option) => this.options.set(option.optionValue, UIPOption.create(option)));
     this.options.forEach(option => this.append(option));
   }