Merge pull request #118 from IgniteUI/ibarakov/nav-drawer-items-isAct…

…ive-fix fix(nav-drawer): set active drawer item in stories
IgniteUI · Nov 9, 2021 · 46cddc3 · 46cddc3
2 parents b5fe006 + cf4af28
commit 46cddc3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 25 deletions.
diff --git a/src/components/nav-drawer/nav-drawer-item.ts b/src/components/nav-drawer/nav-drawer-item.ts
@@ -1,7 +1,6 @@
 import { html, LitElement } from 'lit';
 import { property, queryAssignedNodes, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { watch } from '../common/decorators';
 import { partNameMap } from '../common/util';
 import { styles } from './nav-drawer-item.material.css';
 
@@ -38,10 +37,6 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   @queryAssignedNodes('content', true)
   private _text!: NodeListOf<HTMLElement>;
 
-  protected handleClick() {
-    this.active = true;
-  }
-
   public connectedCallback() {
     super.connectedCallback();
     this.shadowRoot?.addEventListener('slotchange', (_) => {
@@ -56,31 +51,12 @@ export default class IgcNavDrawerItemComponent extends LitElement {
     };
   }
 
-  @watch('active', { waitUntilFirstUpdate: true })
-  protected handleChange() {
-    if (this.active) {
-      this.getDrawerItems().forEach((item) => {
-        item.active = false;
-      });
-    }
-  }
-
-  private getDrawerItems() {
-    const drawer = this.closest('igc-nav-drawer');
-    if (!drawer) return [];
-
-    return Array.from<IgcNavDrawerItemComponent>(
-      drawer.querySelectorAll('igc-nav-drawer-item')
-    ).filter((item) => item !== this);
-  }
-
   protected render() {
     return html`
       <div
         part="${partNameMap(this.resolvePartNames('base'))}"
         .disabled="${this.disabled}"
         .active="${live(this.active)}"
-        @click="${this.handleClick}"
       >
         <span part="icon">
           <slot name="icon"></slot>

diff --git a/stories/nav-drawer.stories.ts b/stories/nav-drawer.stories.ts
@@ -2,7 +2,10 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { registerIcon } from '../src/components/icon/icon.registry.js';
 import { Context, Story } from './story';
-import { IgcNavDrawerComponent } from '../src/index.js';
+import {
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+} from '../src/index.js';
 
 // region default
 const metadata = {
@@ -42,6 +45,35 @@ registerIcon(
   'search',
   'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg'
 );
+const handleClick = (ev: PointerEvent) => {
+  let drawerItem: IgcNavDrawerItemComponent | undefined;
+
+  const eventTarget = ev.target as HTMLElement;
+
+  if (eventTarget.tagName.toLowerCase() === 'igc-nav-drawer-item') {
+    drawerItem = eventTarget as IgcNavDrawerItemComponent;
+  }
+
+  if (
+    eventTarget.parentElement?.tagName.toLowerCase() === 'igc-nav-drawer-item'
+  ) {
+    drawerItem = eventTarget.parentElement as IgcNavDrawerItemComponent;
+  }
+
+  if (drawerItem !== undefined) {
+    drawerItem.active = true;
+
+    const navDrawer = document.querySelector(
+      'igc-nav-drawer'
+    ) as IgcNavDrawerComponent;
+
+    const items = Array.from<IgcNavDrawerItemComponent>(
+      navDrawer.querySelectorAll('igc-nav-drawer-item')
+    ).filter((item) => item !== drawerItem);
+
+    items.forEach((item) => (item.active = false));
+  }
+};
 
 const handleOpen = () => {
   const drawer = document.querySelector(
@@ -74,6 +106,7 @@ const Template: Story<ArgTypes, Context> = (
         dir=${ifDefined(direction)}
         .open=${open}
         .position=${position}
+        @click="${handleClick}"
       >
         <igc-nav-drawer-header-item>Sample Drawer</igc-nav-drawer-header-item>