Merge pull request #24 from BeeInventor/fix/dropdown

feat: dropdown  selection list of id selected

Author: suryakumara

src/components/Dropdown/Dropdown.stories.tsx

@@ -73,6 +73,14 @@ Selected.args = {
   selectedId: 'A004',
 };
 
+export const Selection: Story<DropDownProps> = Template.bind({});
+
+Selection.args = {
+  ...Default.args,
+  selectedId: 'A004',
+  selectionId: 'A003',
+};
+
 export const WithDialog: Story<DropDownProps> = (args) => {
   const [isOpen, setIsOpen] = useState(false);
   return (

src/components/Dropdown/Dropdown.tsx

@@ -66,6 +66,7 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
     disabled,
     onSelect,
     popperProps,
+    selectionId,
     mode = 'light',
     ...otherProps
   } = props;
@@ -107,19 +108,21 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
     onSelect(item.value, item);
   };
 
-  const items = list.map((item) => (
-    <Item
-      key={`dropdown-item-${item.id}`}
-      className="Dropdown-item"
-      onClick={() => handleOnClick(item)}
-      {...itemProps}
-    >
-      <Icon className="Dropdown-icon">
-        {selectedItem?.id === item.id && <img src={CheckSvg} />}
-      </Icon>
-      {item.name}
-    </Item>
-  ));
+  const items = list
+    .filter((item) => item.id !== selectionId)
+    .map((item) => (
+      <Item
+        key={`dropdown-item-${item.id}`}
+        className="Dropdown-item"
+        onClick={() => handleOnClick(item)}
+        {...itemProps}
+      >
+        <Icon className="Dropdown-icon">
+          {selectedItem?.id === item.id && <img src={CheckSvg} />}
+        </Icon>
+        {item.name}
+      </Item>
+    ));
 
   return (
     <>

src/components/Dropdown/Dropdown.type.ts

@@ -37,4 +37,8 @@ export interface DropDownProps extends Omit<BoxProps, 'onSelect'> {
    */
   popperProps?: Omit<PopperProps, 'open' | 'anchorEl'>;
   mode?: 'dark' | 'light';
+  /**
+   * filter the list out of this id
+   */
+  selectionId?: string;
 }