feat(options): add icon hiding/appearing on attribute change

exadel-inc · Aug 23, 2022 · ea1f67b · ea1f67b
1 parent 87612f8
commit ea1f67b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/src/plugins/header/options/option/option.ts b/src/plugins/header/options/option/option.ts
@@ -6,8 +6,10 @@ import type {UIPOptions} from '../options';
 
 /** Config used to create options. */
 export type OptionConfig = {
-  /** Attribute to toggle. */
-  attribute: string;
+  /** Attribute name used as absence marker of option icon */
+  attrName: string;
+  /** Controlled attribute to toggle on root. */
+  rootControlledAttr: string;
   /** Callback to indicate if option should be rendered. */
   canActivate?: (scope: UIPOptions) => boolean;
 };
@@ -20,7 +22,7 @@ export class UIPOption extends ESLBaseElement {
 
   static create(optionConfig: OptionConfig): UIPOption {
     const option = document.createElement('uip-option') as UIPOption;
-    option.setAttribute('attribute', optionConfig.attribute);
+    option.setAttribute('attribute', optionConfig.rootControlledAttr);
     return option;
   }
 

diff --git a/src/plugins/header/options/options.ts b/src/plugins/header/options/options.ts
@@ -9,27 +9,33 @@ import {OptionConfig, UIPOption} from './option/option';
  */
 export class UIPOptions extends UIPPlugin {
   static is = 'uip-options';
-  public options: Map<string, UIPOption>;
+  public options = new Map<string, UIPOption>();
+
+  static observedAttributes = ['hide-theme', 'hide-direction', 'hide-settings', 'hide-editor'];
 
   /** List of configs to create options. */
   protected static UIPOptionsConfig: OptionConfig[] = [
     {
-      attribute: 'dark-theme',
+      attrName: 'hide-theme',
+      rootControlledAttr: 'dark-theme',
       canActivate: (component) => !component.hasAttribute('hide-theme')
     },
     {
-      attribute: 'rtl-direction',
+      attrName: 'hide-direction',
+      rootControlledAttr: 'rtl-direction',
       canActivate: (component) => !component.hasAttribute('hide-direction')
     },
     {
-      attribute: 'settings-collapsed',
+      attrName: 'hide-settings',
+      rootControlledAttr: 'settings-collapsed',
       canActivate: (component) => !component.hasAttribute('hide-settings') &&
-      !!component.root?.querySelector('uip-settings')
+        !!component.root?.querySelector('uip-settings')
     },
     {
-      attribute: 'editor-collapsed',
+      attrName: 'hide-editor',
+      rootControlledAttr: 'editor-collapsed',
       canActivate: (component) => !component.hasAttribute('hide-editor') &&
-      !!component.root?.querySelector('uip-editor')
+        !!component.root?.querySelector('uip-editor')
     }
   ];
 
@@ -55,9 +61,24 @@ export class UIPOptions extends UIPPlugin {
     this.root?.removeEventListener('uip:configchange', this._onRootConfigChange);
   }
 
-  protected render() {
-    const options = UIPOptions.UIPOptionsConfig.filter(option => !option.canActivate || option.canActivate(this));
-    const entries: [string, UIPOption][] = options.map(option => [option.attribute, UIPOption.create(option)]);
+  protected attributeChangedCallback(attrName: string, oldVal: string | null, newVal: string | null) {
+    if (oldVal === newVal || !this.options) return;
+
+    const config = UIPOptions.UIPOptionsConfig.find((elem) => elem.attrName === attrName);
+    if (!config) return;
+    if (newVal === null) {
+      this.render([config]);
+    } else {
+      const option = this.options.get(config.rootControlledAttr);
+      if (!option) return;
+      this.options.delete(config.rootControlledAttr);
+      option.remove();
+    }
+  }
+
+  protected render(options = UIPOptions.UIPOptionsConfig) {
+    options = options.filter(option => !option.canActivate || option.canActivate(this));
+    const entries: [string, UIPOption][] = options.map(option => [option.rootControlledAttr, UIPOption.create(option)]);
     this.options = new Map(entries);
     this.options.forEach(option => this.append(option));
   }