Merge pull request #455 from Infineon/454-dropdown-menu-item-emit-event

added events on dropdown-menu
Infineon · Sep 7, 2023 · e52a155 · e52a155
2 parents d6688b1 + 56b4133
commit e52a155
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 79 deletions.
diff --git a/examples/wrapper-components/react-javascript/src/components/Dropdown/Dropdown.js b/examples/wrapper-components/react-javascript/src/components/Dropdown/Dropdown.js
@@ -2,12 +2,16 @@ import React from 'react';
 import { IfxDropdown, IfxDropdownMenu, IfxDropdownItem, IfxDropdownSeparator, IfxDropdownHeader, IfxDropdownTriggerButton } from '@infineon/infineon-design-system-react';
 
 function Dropdown() {
+
+  const handleValue = (e) => { 
+    console.log('selected dropdown option', e.detail)
+  }
   return (
     <IfxDropdown placement="bottom-start" no-close-on-menu-click="true">
     <IfxDropdownTriggerButton icon="calendar16">
       dropdown
     </IfxDropdownTriggerButton>
-    <IfxDropdownMenu size="l">
+    <IfxDropdownMenu size="l" onIfxDropdownMenu={handleValue}>
      <IfxDropdownHeader>Header Text</IfxDropdownHeader>
       <IfxDropdownItem target="_blank" href="https://www.google.de">lorem10</IfxDropdownItem>
       <IfxDropdownSeparator></IfxDropdownSeparator>

diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -118,7 +118,8 @@ export const IfxDropdown = /*@__PURE__*/ defineContainer<JSX.IfxDropdown>('ifx-d
   'noCloseOnOutsideClick',
   'noCloseOnMenuClick',
   'ifxOpen',
-  'ifxClose'
+  'ifxClose',
+  'ifxDropdown'
 ]);
 
 
@@ -129,14 +130,16 @@ export const IfxDropdownItem = /*@__PURE__*/ defineContainer<JSX.IfxDropdownItem
   'icon',
   'href',
   'target',
-  'hide'
+  'hide',
+  'ifxDropdownItem'
 ]);
 
 
 export const IfxDropdownMenu = /*@__PURE__*/ defineContainer<JSX.IfxDropdownMenu>('ifx-dropdown-menu', undefined, [
   'isOpen',
   'size',
-  'menuSize'
+  'menuSize',
+  'ifxDropdownMenuItem'
 ]);
 
 

diff --git a/packages/components/src/components/dropdown-menu/dropdown-menu.stories.ts b/packages/components/src/components/dropdown-menu/dropdown-menu.stories.ts
diff --git a/packages/components/src/components/dropdown/dropdown-item/dropdown-item.tsx b/packages/components/src/components/dropdown/dropdown-item/dropdown-item.tsx
@@ -1,5 +1,5 @@
 // dropdown-item.tsx
-import { Component, Prop, h, Listen, State } from "@stencil/core";
+import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from "@stencil/core";
 
 @Component({
   tag: 'ifx-dropdown-item',
@@ -13,17 +13,22 @@ export class DropdownItem {
   @Prop() target: string = "_self"
   @Prop() hide: boolean = false;
   @State() size: string = 'l'
-
+  @Event() ifxDropdownItem: EventEmitter;
+  @Element() el;
 
   @Listen('menuSize', { target: 'body' })
-  handleMenuSize(event: CustomEvent) { 
+  handleMenuSize(event: CustomEvent) {
     this.size = event.detail;
   }
 
+  handleEventEmission() {
+    this.ifxDropdownItem.emit(this.el.textContent)
+  }
+
   render() {
     let hrefAttr = this.href ? { href: this.href, target: this.target } : {};
     return (
-      <a {...hrefAttr} class={`dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""}`}>
+      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""}`}>
         {this.icon && <ifx-icon class="icon" icon={this.icon}></ifx-icon>}
         <span>
           <slot />

diff --git a/packages/components/src/components/dropdown/dropdown-item/readme.md b/packages/components/src/components/dropdown/dropdown-item/readme.md
@@ -15,6 +15,13 @@
 | `target` | `target`  |             | `string`  | `"_self"`   |
 
 
+## Events
+
+| Event             | Description | Type               |
+| ----------------- | ----------- | ------------------ |
+| `ifxDropdownItem` |             | `CustomEvent<any>` |
+
+
 ## Dependencies
 
 ### Depends on

diff --git a/packages/components/src/components/dropdown/dropdown-menu/dropdown-menu.tsx b/packages/components/src/components/dropdown/dropdown-menu/dropdown-menu.tsx
@@ -12,57 +12,61 @@ export class DropdownMenu {
   @Prop() size: string = 'l'
   @State() hideTopPadding: boolean = false;
   @Element() el;
+
   @Event() menuSize: EventEmitter;
   @State() filteredItems: HTMLIfxDropdownItemElement[] = [];
+  @Event() ifxDropdownMenuItem: EventEmitter<CustomEvent>;
 
   @Listen('ifxInput')
-  handleMenuFilter(event: CustomEvent) { 
+  handleMenuFilter(event: CustomEvent) {
     const searchValue = event.detail;
     this.filterDropdownItems(searchValue)
   }
 
+  @Listen('ifxDropdownItem')
+  handleDropdownItemValueEmission(event: CustomEvent) {
+    this.ifxDropdownMenuItem.emit(event.detail)
+  }
+
   filterDropdownItems(searchValue: string) {
-  const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
-  let dropdownItem, txtValue;
-  let query = searchValue.toUpperCase()
+    const allItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item'));
+    let dropdownItem, txtValue;
+    let query = searchValue.toUpperCase()
 
-  for (let i = 0; i < allItems.length; i++) {
+    for (let i = 0; i < allItems.length; i++) {
       dropdownItem = allItems[i];
       txtValue = dropdownItem.textContent || dropdownItem.innerText;
 
-      if(txtValue.toUpperCase().indexOf(query) > -1) { 
+      if (txtValue.toUpperCase().indexOf(query) > -1) {
         dropdownItem.setAttribute('hide', false)
-      } else { 
+      } else {
         dropdownItem.setAttribute('hide', true)
       }
     }
   }
-  
-  componentWillUpdate() { 
+
+  componentWillUpdate() {
     this.menuSize.emit(this.size)
   }
 
-  componentWillLoad() { 
+  componentWillLoad() {
     this.filteredItems = Array.from(this.el.querySelectorAll('ifx-dropdown-item')) as HTMLIfxDropdownItemElement[];
     const searchField = this.el.querySelector('ifx-search-field')
     const dropdownHeader = this.el.querySelector('ifx-dropdown-header')
 
-    if(searchField || dropdownHeader) { 
+    if (searchField || dropdownHeader) {
       this.hideTopPadding = true;
     } else this.hideTopPadding = false;
   }
 
-  componentDidLoad() { 
-    this.menuSize.emit(this.size)
-  }
-
 
   render() {
     return (
       <div class={`dropdown-menu 
       ${this.isOpen ? 'show' : ''} 
       ${this.hideTopPadding ? 'hideTopPadding' : ""}
-      ${this.size === 's' ? 'small' : ""}`}>
+      ${this.size === 's' ? 'small' : ""}`
+      } >
         <slot />
       </div >
     );

diff --git a/packages/components/src/components/dropdown/dropdown-menu/readme.md b/packages/components/src/components/dropdown/dropdown-menu/readme.md
@@ -15,9 +15,10 @@
 
 ## Events
 
-| Event      | Description | Type               |
-| ---------- | ----------- | ------------------ |
-| `menuSize` |             | `CustomEvent<any>` |
+| Event                 | Description | Type                            |
+| --------------------- | ----------- | ------------------------------- |
+| `ifxDropdownMenuItem` |             | `CustomEvent<CustomEvent<any>>` |
+| `menuSize`            |             | `CustomEvent<any>`              |
 
 
 ----------------------------------------------

diff --git a/packages/components/src/components/dropdown/dropdown.stories.ts b/packages/components/src/components/dropdown/dropdown.stories.ts
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { icons } from '@infineon/infineon-icons'
 
 export default {
-  title: 'Not reviewed/Dropdown',
+  title: 'Components/Dropdown',
   args: {
     label: "Dropdown",
     size: "m",
@@ -66,18 +66,22 @@ export default {
     noAppendToBody: { description: 'Determines if the dropdown should not be appended to the body' },
     ifxOpen: {
       action: 'ifxOpen',
-      table: {
-        type: { summary: 'Event' },
-        description: 'Event that is emitted when the dropdown opens'
-      }
+      description: 'Custom event that is emitted when the dropdown opens'
     },
     ifxClose: {
       action: 'ifxClose',
-      table: {
-        type: { summary: 'Event' },
-        description: 'Event that is emitted when the dropdown closes'
-      }
+      description: 'Custom event emitted when dropdown closes'
     },
+    ifxDropdownMenuItem: {
+      action: 'ifxDropdownMenuItem',
+      description: 'Custom event emitted when an item is selected',
+      table: {
+        type: {
+          summary: 'Framework integration',
+          detail: 'React: onIfxDropdownMenuItem={handleChange}\nVue:@ifxDropdownMenuItem="handleChange"\nAngular:(ifxDropdownMenuItem)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenuItem", (event) => {//handle change});',
+        },
+      },
+    }
   },
 }
 
@@ -107,9 +111,12 @@ const DefaultTemplate = (args) => {
     </ifx-dropdown-menu>
   </ifx-dropdown>`;
 
-  const dropdown = wrapper.firstChild;
+  const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;
+  const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
+
   dropdown.addEventListener('ifxOpen', action('ifxOpen'));
   dropdown.addEventListener('ifxClose', action('ifxClose'));
+  dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
 
   return wrapper;
 };
@@ -141,9 +148,12 @@ const LabelTriggerTemplate = (args) => {
     </ifx-dropdown-menu>
   </ifx-dropdown>`;
 
-  const dropdown = wrapper.firstChild;
+  const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;
+  const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
+
   dropdown.addEventListener('ifxOpen', action('ifxOpen'));
   dropdown.addEventListener('ifxClose', action('ifxClose'));
+  dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
 
   return wrapper;
 };

diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx
@@ -41,6 +41,7 @@ export class Dropdown {
   // Custom events for opening and closing dropdown
   @Event() ifxOpen: EventEmitter;
   @Event() ifxClose: EventEmitter;
+  @Event() ifxDropdown: EventEmitter;
 
   // determine if dropdown is disabled
   @Prop() disabled: boolean;
@@ -56,6 +57,8 @@ export class Dropdown {
   // Popper instance for positioning
   popperInstance: any;
 
+
+
   componentWillLoad() {
     //maybe not needed
     this.updateSlotContent();
@@ -86,6 +89,8 @@ export class Dropdown {
     this.updateSlotContent();
   }
 
+
+
   // handling assignment of trigger and menu
   updateSlotContent() {
     // Get dropdown trigger. name has to start with ifx-dropdown-trigger
@@ -102,10 +107,12 @@ export class Dropdown {
       }
       // Get new menu and add to body
       this.menu = this.el.querySelector('ifx-dropdown-menu');
+
       // event handler for closing dropdown on menu click
       document.body.append(this.menu);
     } else {
       this.menu = this.el.querySelector('ifx-dropdown-menu');
+
     }
     this.menu.removeEventListener('click', this.menuClickHandler.bind(this));
     this.menu.addEventListener('click', this.menuClickHandler.bind(this));
@@ -177,6 +184,13 @@ export class Dropdown {
     }
   }
 
+  //emitted by and listening to it from the dropdown menu right now
+  // @Listen('ifxDropdownMenu')
+  // handleDropdownMenuEvents(event: CustomEvent) {
+  //   this.ifxDropdown.emit(event.detail)
+  //   console.log('Selected item received in higher-level parent:');
+  // }
+
   @Listen('mousedown', { target: 'document' })
   handleOutsideClick(event: MouseEvent) {
     const target = event.target as HTMLElement;

diff --git a/packages/components/src/components/dropdown/readme.md b/packages/components/src/components/dropdown/readme.md
@@ -19,10 +19,11 @@
 
 ## Events
 
-| Event      | Description | Type               |
-| ---------- | ----------- | ------------------ |
-| `ifxClose` |             | `CustomEvent<any>` |
-| `ifxOpen`  |             | `CustomEvent<any>` |
+| Event         | Description | Type               |
+| ------------- | ----------- | ------------------ |
+| `ifxClose`    |             | `CustomEvent<any>` |
+| `ifxDropdown` |             | `CustomEvent<any>` |
+| `ifxOpen`     |             | `CustomEvent<any>` |
 
 
 ## Methods

diff --git a/packages/components/src/components/search-bar/search-bar.tsx b/packages/components/src/components/search-bar/search-bar.tsx
@@ -22,11 +22,6 @@ export class SearchBar {
     this.internalState = !this.internalState;
   }
 
-  handleSearchInput(event: CustomEvent) {
-    console.log("search field event in search bar", event)
-    this.value = event.detail.detail;
-    this.ifxInput.emit(event.detail);
-  }
 
   setInitialState() {
     this.internalState = this.isOpen;

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -11,10 +11,6 @@
 
   <style defer>
 
-    .wrapper { 
-      margin-left: 400px;
-    }
-
   </style>
 
   <script defer>
@@ -25,15 +21,6 @@
 
 <body>
 
-  <ifx-multiselect 
-  options='[{"value":"a","label":"option a","selected":true},{"value":"b","label":"option b","selected":false},{"value":"c","label":"option c","selected":false,"children":[{"value":"c1","label":"option c1","selected":false},{"value":"c2","label":"option c2","selected":false}]}]' 
-  size='m'
-  error='false'
-  error-message='Some error'
-  label=''
-  disabled='false'>
-</ifx-multiselect>
-
 </body>
 
 </html>