refactor(dropdown): Address PR comments

IgniteUI · Jul 15, 2022 · 1070b32 · 1070b32
1 parent 34c1654
commit 1070b32
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git a/src/components/dropdown/dropdown-group.ts b/src/components/dropdown/dropdown-group.ts
@@ -1,5 +1,5 @@
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { queryAssignedElements } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { styles } from './themes/light/dropdown-group.base.css.js';
 import { styles as fluent } from './themes/light/dropdown-group.fluent.css.js';
@@ -21,23 +21,23 @@ export default class IgcDropdownGroupComponent extends LitElement {
 
   public static override styles = styles;
 
+  protected dropdown?: IgcDropdownComponent;
+
   /** All child `igc-dropdown-item`s. */
   @blazorSuppress()
   @queryAssignedElements({ flatten: true, selector: 'igc-dropdown-item' })
   public items!: Array<IgcDropdownItemComponent>;
 
-  @property({ reflect: true })
-  public size: 'small' | 'medium' | 'large' = 'large';
-
   public override connectedCallback() {
     super.connectedCallback();
 
     this.setAttribute('role', 'group');
-    const dropdown = this.closest('igc-dropdown') as IgcDropdownComponent;
-    this.size = dropdown.size;
+    this.dropdown = this.closest('igc-dropdown') as IgcDropdownComponent;
   }
 
   protected override render() {
+    this.setAttribute('size', this.dropdown?.size ?? 'large');
+
     return html`
       <label part="label"><slot name="label"></slot></label>
       <slot></slot>

diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
@@ -52,7 +52,7 @@ export default class IgcDropdownComponent
 
   public static styles = styles;
 
-  private toggleController = new IgcToggleController(this);
+  private toggleController!: IgcToggleController;
   private selectedItem!: IgcDropdownItemComponent | null;
   private activeItem!: IgcDropdownItemComponent;
   private target!: HTMLElement;
@@ -159,12 +159,15 @@ export default class IgcDropdownComponent
 
   @watch('size')
   protected sizeChange() {
-    this.groups.forEach((g) => (g.size = this.size));
+    this.groups.forEach((g) => g.requestUpdate());
   }
 
   constructor() {
     super();
-    this.toggleController.closeCallback = this._hide.bind(this);
+    this.toggleController = new IgcToggleController(this, {
+      target: this.target,
+      closeCallback: () => this._hide(),
+    });
   }
 
   public override async firstUpdated() {

diff --git a/src/components/toggle/toggle.controller.ts b/src/components/toggle/toggle.controller.ts
@@ -5,6 +5,18 @@ import type { IgcToggleComponent } from './types';
 
 type ToggleHost = ReactiveControllerHost & IgcToggleComponent & HTMLElement;
 
+/**
+ * Toggle controller configuration
+ */
+interface ToggleControllerConfig {
+  /** The element, relative to which, the toggle will be positioned. */
+  target?: HTMLElement;
+  /**
+   * The function to call when closing the toggle element from an user interaction (scroll, click).
+   */
+  closeCallback?: Function;
+}
+
 /**
  * Controller, bundling the creation of a toggle directive and handling global events,
  * related to the configuration of togglable components.
@@ -15,6 +27,7 @@ export class IgcToggleController implements ReactiveController {
   private initialScrollTop = 0;
   private initialScrollLeft = 0;
   private _target!: HTMLElement;
+  private _hide?: Function;
 
   /** The directive that marks the toggle. */
   public toggleDirective!: DirectiveResult<typeof IgcToggleDirective>;
@@ -30,15 +43,15 @@ export class IgcToggleController implements ReactiveController {
     return this._target;
   }
 
-  public closeCallback!: Function;
+  constructor(host: ToggleHost, config?: ToggleControllerConfig) {
+    (this.host = host).addController(this);
 
-  constructor(host: ToggleHost, target?: HTMLElement) {
-    host.addController(this);
-
-    this.host = host;
+    if (config?.target) {
+      this._target = config.target;
+    }
 
-    if (target) {
-      this._target = target;
+    if (config?.closeCallback) {
+      this._hide = config.closeCallback;
     }
 
     this.update();
@@ -53,10 +66,14 @@ export class IgcToggleController implements ReactiveController {
   }
 
   public update() {
-    this.toggleDirective = igcToggle(this._target, this.host, this);
+    this.toggleDirective = igcToggle(this.target, this.host, this);
     this.addEventListeners();
   }
 
+  protected hide() {
+    this._hide ? this._hide() : this.host.hide();
+  }
+
   private addEventListeners() {
     if (this.host.open) {
       document.addEventListener('scroll', this.handleScroll, true);
@@ -101,7 +118,7 @@ export class IgcToggleController implements ReactiveController {
       if (isInsideClick) {
         return;
       } else {
-        this.closeCallback ? this.closeCallback() : this.host.hide();
+        this.hide();
       }
     }
   };
@@ -115,7 +132,7 @@ export class IgcToggleController implements ReactiveController {
         this.blockScroll(event);
         break;
       case 'close':
-        this.closeCallback ? this.closeCallback() : this.host.hide();
+        this.hide();
         break;
     }
   };