@linzjs/step-ag-grid 1.5.1 → 1.5.2

package/package.json

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

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -4,7 +4,7 @@ import { MenuItem, MenuDivider, FocusableItem, ClickEvent } from "@react-menu3";
 import { Fragment, useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { delay } from "lodash-es";
+import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
@@ -33,6 +33,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
   options:
     | SelectOption<ValueType>[]
     | ((selectedRows: RowType[]) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+  initialSelectedValues?: (selectedRows: RowType[]) => any[];
 }
 
 export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
@@ -43,16 +44,17 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption<ValueType>[]>();
   const subSelectedValues = useRef<Record<string, any>>({});
-  const [selectedValues, setSelectedValues] = useState<any[]>([]);
+  const [selectedValues, setSelectedValues] = useState<any[]>(() =>
+    formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [],
+  );
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      const values: Record<string, any> = {};
-      selectedValues.forEach((value) => {
-        values[value] = subSelectedValues.current[value] ?? true;
-      });
+      const values: Record<string, any> = fromPairs(
+        selectedValues.map((value) => [value, subSelectedValues.current[value] ?? true]),
+      );
       if (formProps.onSave) {
-        return await formProps.onSave({ selectedRows, values: selectedValues });
+        return await formProps.onSave({ selectedRows, values });
       }
       return true;
     },

package/src/stories/components/GridPopoutEditMultiSelect.stories.tsx

@@ -45,48 +45,71 @@ interface ITestRow {
 const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
-  const columnDefs = useMemo(
-    () =>
-      [
-        GridCell({
-          field: "id",
-          headerName: "Id",
-          initialWidth: 65,
-          maxWidth: 85,
-        }),
-        GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>({
-          field: "position",
-          initialWidth: 65,
-          maxWidth: 150,
-          headerName: "Position",
-          cellEditorParams: {
-            multiEdit: false,
-            filtered: true,
-            filterPlaceholder: "Filter position",
-            options: [
-              { value: "a", label: "Architect" },
-              { value: "b", label: "Developer" },
-              { value: "c", label: "Product Owner" },
-              { value: "d", label: "Scrum Master" },
-              { value: "e", label: "Tester" },
-              MenuSeparator,
-              {
-                value: "f",
-                label: "Other",
-                subComponent: (props) => <GridSubComponentTextArea {...props} />,
-              },
-            ],
-            onSave: async (result: MultiSelectResult<ITestRow>) => {
-              // eslint-disable-next-line no-console
-              console.log(result);
-              await wait(1000);
-              return true;
+  const columnDefs = useMemo(() => {
+    const positionTwoMap: Record<string, string> = {
+      "1": "One",
+      "2": "Two",
+      "3": "Three",
+    };
+    return [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>({
+        field: "position",
+        initialWidth: 65,
+        maxWidth: 150,
+        headerName: "Position",
+        cellEditorParams: {
+          multiEdit: false,
+          filtered: true,
+          filterPlaceholder: "Filter position",
+          options: [
+            { value: "a", label: "Architect" },
+            { value: "b", label: "Developer" },
+            { value: "c", label: "Product Owner" },
+            { value: "d", label: "Scrum Master" },
+            { value: "e", label: "Tester" },
+            MenuSeparator,
+            {
+              value: "f",
+              label: "Other",
+              subComponent: (props) => <GridSubComponentTextArea {...props} />,
             },
+          ],
+          onSave: async (result: MultiSelectResult<ITestRow>) => {
+            // eslint-disable-next-line no-console
+            console.log(result);
+            await wait(1000);
+            return true;
           },
-        }),
-      ] as ColDef[],
-    [],
-  );
+        },
+      }),
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position2"]>({
+        field: "position2",
+        initialWidth: 65,
+        maxWidth: 150,
+        headerName: "Inital editor values ",
+        valueGetter: (props) => positionTwoMap[props.data.position2],
+        cellEditorParams: {
+          multiEdit: false,
+          filtered: true,
+          filterPlaceholder: "Filter position",
+          initialSelectedValues: (selectedRows) => [selectedRows[0].position2],
+          options: Object.entries(positionTwoMap).map(([k, v]) => ({ value: k, label: v })),
+          onSave: async (result: MultiSelectResult<ITestRow>) => {
+            // eslint-disable-next-line no-console
+            console.log(result);
+            await wait(1000);
+            return true;
+          },
+        },
+      }),
+    ] as ColDef[];
+  }, []);
 
   const rowData = useMemo(
     () =>