Added optional key to SelectOption and example drop down with object … (

#41) * Added optional key to SelectOption and example drop down with object array example * Removed key param
linz · Oct 28, 2022 · 512b51a · 512b51a
1 parent 4dbd343
commit 512b51a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/src/components/gridForm/GridFormDropDown.tsx b/src/components/gridForm/GridFormDropDown.tsx
@@ -182,7 +182,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
               <MenuDivider key={`$$divider_${index}`} />
             ) : filteredValues.includes(item.value) ? null : (
               <MenuItem
-                key={`${item.value}`}
+                key={`${props.field}-${index}`}
                 disabled={!!item.disabled}
                 title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                 value={item.value}

diff --git a/src/stories/components/GridPopoutEditDropDown.stories.tsx b/src/stories/components/GridPopoutEditDropDown.stories.tsx
@@ -8,10 +8,12 @@ import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useCallback, useMemo, useState } from "react";
 import {
+  FinalSelectOption,
   GridFormDropDown,
   GridFormPopoutDropDownProps,
   MenuSeparator,
   MenuSeparatorString,
+  SelectOption,
 } from "@components/gridForm/GridFormDropDown";
 import { ColDef } from "ag-grid-community";
 import { wait } from "@utils/util";
@@ -43,6 +45,12 @@ interface ITestRow {
   position: string | null;
   position2: string | null;
   position3: string | null;
+  position4: ICode | null;
+}
+
+interface ICode{
+  code:string;
+  desc:string;
 }
 
 const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
@@ -65,6 +73,15 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
     ].filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true));
   }, []);
 
+
+  const optionsObjects = useMemo(
+    () => 
+    [
+      {code:"O1", desc:"Object One"}, 
+      {code:"O2", desc:"Object Two"}
+    ],[]
+  )
+
   const columnDefs = useMemo(
     () =>
       [
@@ -148,15 +165,30 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
           },
         }),
+        GridPopoverEditDropDown<ITestRow, ITestRow["position4"]>({
+          field: "position4",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Filtered (object)",
+          valueGetter: (params) => params.data.position4?.desc,
+          cellEditorParams: {
+            multiEdit: true,
+            filtered: "local",
+            filterPlaceholder: "Filter this",
+            options: optionsObjects.map(o =>{
+               return {value: o, label: o.desc, disabled:false}
+            }),
+          },
+        }),
       ] as ColDef[],
     [optionsFn],
   );
 
   const rowData = useMemo(
     () =>
       [
-        { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
-        { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
+        { id: 1000, position: "Tester", position2: "1", position3: "Tester", position4: {code:"O1", desc:"Object One"} },
+        { id: 1001, position: "Developer", position2: "2", position3: "Developer", position4: {code:"O2", desc:"Object Two"}  },
       ] as ITestRow[],
     [],
   );