@linzjs/step-ag-grid 1.4.10 → 1.5.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.10",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/gridForm/GridFormDropDown.tsx

@@ -31,6 +31,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType, string>) => Promise<void>;
   options:
     | SelectOption<ValueType>[]
     | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
@@ -66,6 +67,19 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
     [formProps, props.field, props.selectedRows, updatingCells],
   );
 
+  const selectFilterHandler = useCallback(
+    async (value: string): Promise<boolean> => {
+      const field = props.field;
+      return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
+        if (formProps.onSelectFilter) {
+          await formProps.onSelectFilter({ selectedRows, value });
+        }
+        return true;
+      });
+    },
+    [formProps, props.field, props.selectedRows, updatingCells],
+  );
+
   // Load up options list if it's async function
   useEffect(() => {
     if (options || optionsInitialising.current) return;
@@ -140,13 +154,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
         if (activeOptions.length == 1) {
           await selectItemHandler(activeOptions[0].value);
           stopEditing();
+        } else if (formProps.onSelectFilter) {
+          await selectFilterHandler(filter);
+          stopEditing();
         } else {
           e.preventDefault();
           e.stopPropagation();
         }
       }
     },
-    [filteredValues, options, selectItemHandler, stopEditing],
+    [filteredValues, options, selectItemHandler, selectFilterHandler, stopEditing, filter, formProps],
   );
 
   return popoverWrapper(

package/src/stories/components/GridPopoutEditDropDown.stories.tsx

@@ -44,6 +44,7 @@ interface ITestRow {
   position2: string | null;
   position3: string | null;
   position4: ICode | null;
+  code: string | null;
 }
 
 interface ICode {
@@ -177,6 +178,27 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             }),
           },
         }),
+        GridPopoverEditDropDown<ITestRow, ICode>({
+          field: "code",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Filter Selectable",
+          valueGetter: (params) => params.data.code,
+          cellEditorParams: {
+            multiEdit: true,
+            filtered: "local",
+            filterPlaceholder: "Filter this",
+            options: optionsObjects.map((o) => {
+              return { value: o, label: o.desc, disabled: false };
+            }),
+            onSelectedItem: async (selected) => {
+              selected.selectedRows.forEach((row) => (row.code = selected.value.code));
+            },
+            onSelectFilter: async (selected) => {
+              selected.selectedRows.forEach((row) => (row.code = selected.value));
+            },
+          },
+        }),
       ] as ColDef[],
     [optionsFn, optionsObjects],
   );
@@ -190,6 +212,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           position2: "1",
           position3: "Tester",
           position4: { code: "O1", desc: "Object One" },
+          code: "O1",
         },
         {
           id: 1001,
@@ -197,6 +220,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           position2: "2",
           position3: "Developer",
           position4: { code: "O2", desc: "Object Two" },
+          code: "O2",
         },
       ] as ITestRow[],
     [],