fix(menu): context for menu item

sangeethababu9223 · Apr 29, 2024 · 15b011f · 15b011f
1 parent 005ada1
commit 15b011f
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 45 deletions.
diff --git a/packages/carbon-web-components/src/components/menu/menu-context.ts b/packages/carbon-web-components/src/components/menu/menu-context.ts
@@ -7,25 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {createContext} from '@lit/context';
+import { createContext } from '@lit/context';
 
 export type StateType = {
-    isRoot: boolean;
-    mode: 'full' | 'basic';
-    hasIcons: boolean;
-    size: 'xs' | 'sm' | 'md' | 'lg' | null;
-    items: any[];
-    requestCloseRoot: (e: KeyboardEvent) => void;
-  };
+  isRoot: boolean;
+  mode: 'full' | 'basic';
+  hasIcons: boolean;
+  size: 'xs' | 'sm' | 'md' | 'lg' | null;
+  items: any[];
+  requestCloseRoot: (e: KeyboardEvent) => void;
+};
 
 export const menuDefaultState: StateType = {
-    isRoot: true,
-    mode: 'full',
-    hasIcons: false,
-    size: null,
-    items: [],
-    requestCloseRoot: () => {},
-  };
-
-  export const MenuContext = createContext<StateType>('myData');
+  isRoot: true,
+  mode: 'full',
+  hasIcons: false,
+  size: null,
+  items: [],
+  requestCloseRoot: () => {},
+};
 
+export const MenuContext = createContext<StateType>('myData');
diff --git a/packages/carbon-web-components/src/components/menu/menu-item.ts b/packages/carbon-web-components/src/components/menu/menu-item.ts
@@ -14,7 +14,7 @@ import styles from './menu-item.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { classMap } from 'lit/directives/class-map.js';
 import Checkmark16 from '@carbon/icons/lib/checkmark/16';
-import {consume, provide} from '@lit/context';
+import { consume, provide } from '@lit/context';
 import { MenuContext } from './menu-context';
 
 /**
@@ -24,9 +24,9 @@ import { MenuContext } from './menu-context';
  */
 @customElement(`${prefix}-menu-item`)
 class CDSmenuItem extends LitElement {
-  @provide({context: MenuContext})
-  @consume({context: MenuContext})
-  _myData;
+  @provide({ context: MenuContext })
+  @consume({ context: MenuContext })
+  context;
 
   readonly hoverIntentDelay = 150; // in ms
   hoverIntentTimeout;
@@ -160,15 +160,23 @@ class CDSmenuItem extends LitElement {
       this._handleClick(e);
     }
   };
+  _registerItem = () => {
+    console.log('test');
+    // this.context = {
+    //   ...this.context,
+    //   items: [...this.context.items, 'test'] 
+    // }
+    this.context.items.push(this.shadowRoot?.querySelector(`.${prefix}--menu-item`));
+  };
   firstUpdated() {
     this.hasChildren = this.childNodes.length > 0;
     this.isDisabled = this.disabled && !this.hasChildren;
     this.direction = document.dir;
     this.isRtl = this.direction === 'rtl';
     this.isDanger = this.kind === 'danger';
+    this._registerItem();
   }
   render() {
-
     const {
       label,
       shortcut,

diff --git a/packages/carbon-web-components/src/components/menu/menu.ts b/packages/carbon-web-components/src/components/menu/menu.ts
@@ -6,7 +6,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { classMap } from 'lit/directives/class-map.js';
-import {consume, provide} from '@lit/context';
+import { consume, provide } from '@lit/context';
 import { MenuContext, menuDefaultState } from './menu-context';
 
 /**
@@ -16,10 +16,10 @@ import { MenuContext, menuDefaultState } from './menu-context';
  */
 @customElement(`${prefix}-menu`)
 class CDSMenu extends HostListenerMixin(LitElement) {
-  @provide({context: MenuContext})
-  @consume({context: MenuContext})
-  _myData = menuDefaultState;
-  _myDataChild;
+  @provide({ context: MenuContext })
+  @consume({ context: MenuContext })
+  context = menuDefaultState;
+  contextChild;
   readonly spacing: number = 8; // distance to keep to window edges, in px
   /**
    * Parent state.
@@ -29,8 +29,13 @@ class CDSMenu extends HostListenerMixin(LitElement) {
   /**
    * Parent state.
    */
-  @property({type: Boolean})
-  isChild =  false;
+  @property({ type: HTMLElement })
+  containerRef;
+  /**
+   * Parent state.
+   */
+  @property({ type: Boolean })
+  isChild = false;
   /**
    * Action button width.
    */
@@ -41,6 +46,11 @@ class CDSMenu extends HostListenerMixin(LitElement) {
    */
   @property({ type: Boolean })
   isRtl = false;
+  /**
+   * Checks if Menu is root menu or not.
+   */
+  @property({ type: Boolean })
+  isRoot = true;
 
   /**
    * Document direction.
@@ -68,6 +78,21 @@ class CDSMenu extends HostListenerMixin(LitElement) {
    */
   @property()
   position = [-1, -1];
+  /**
+   * Size attribute .
+   */
+  @property()
+  size: 'xs' | 'sm' | 'md' | 'lg' = 'sm';
+  /**
+   * Mode attribute .
+   */
+  @property()
+  mode: 'full' | 'basic' = 'full';
+  /**
+   * Size of the Menu .
+   */
+  @property()
+  menuSize;
   /**
    * Specify how the menu should align with the button element
    */
@@ -87,13 +112,6 @@ class CDSMenu extends HostListenerMixin(LitElement) {
   _notEmpty = (value: number | null | undefined) => {
     return value !== null && value !== undefined;
   };
-
-  updated(changedProperties) {
-    this.isOpen = this.open !== 'false';
-    if (changedProperties.has('isOpen') && this.isOpen) {
-      this._handleOpen();
-    }
-  }
   _xyStringToNumberConversion = (val) => {
     let res;
     if (val.includes(',')) {
@@ -106,7 +124,7 @@ class CDSMenu extends HostListenerMixin(LitElement) {
     return res;
   };
   _fitValue = (range: number[], axis: 'x' | 'y') => {
-    const isRoot = false;
+    const { isRoot } = this;
     const { width, height } = this.getBoundingClientRect();
     const alignment = isRoot ? 'vertical' : 'horizontal';
     const axes = {
@@ -225,20 +243,46 @@ class CDSMenu extends HostListenerMixin(LitElement) {
     this.style.insetBlockStart = `${pos[1]}px`;
     this.position = pos;
   };
+  _handleClose = () => {};
+
+  updated(changedProperties) {
+    this.isOpen = this.open !== 'false';
+    if (changedProperties.has('isOpen') && this.isOpen) {
+      this._handleOpen();
+    }
+  }
   firstUpdated() {
     this.isRtl = this.direction === 'rtl';
     this.isChild = Boolean(this.isChild);
-    if(this.isChild){
-      this.stateParent = {
-        ...this._myData
-      }
+    this.isRoot = this.context.isRoot;
+    if (this.context.mode === 'basic' && !this.isRoot) {
+      throw new Error(
+        'Nested menus are not supported when the menu is in "basic" mode.'
+      );
+    }
+    this.menuSize = this.isRoot ? this.size : this.context.size;
+    if (this.isChild) {
+      this.context = {
+        ...this.context,
+        isRoot: false,
+        mode: this.mode,
+        size: this.size,
+        requestCloseRoot: this.isRoot
+          ? this._handleClose
+          : this.context.requestCloseRoot,
+      };
+    }
+
+    // Getting the width from the parent container element - controlled
+    if (this.containerRef) {
+      const { width: w } = this.containerRef.getBoundingClientRect();
+      this.actionButtonWidth = w;
     }
   }
   render() {
-    const { isOpen, menuAlignment, x, y, isChild } = this;
-    console.log(this._myData,'this._myData parent');
-    console.log(this._myDataChild,'this._myData child');
-
+    console.log(this.context, 'context');
+
+    const { isOpen, menuAlignment, x, y, isChild, size } = this;
     const menuClasses = classMap({
       [`${prefix}--menu`]: true,
       [`${prefix}--menu--shown`]: true,