@linzjs/step-ag-grid 1.5.3 → 2.0.0

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

@@ -3,19 +3,13 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useCallback, useMemo, useState } from "react";
-import {
-  GridFormDropDown,
-  GridFormPopoutDropDownProps,
-  MenuSeparator,
-  MenuSeparatorString,
-} from "@components/gridForm/GridFormDropDown";
-import { ColDef } from "ag-grid-community";
+import { MenuHeaderItem, MenuSeparator, MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
 import { wait } from "@utils/util";
-import { GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "@components/GridCell";
 import { GridPopoverEditDropDown } from "@components/gridPopoverEdit/GridPopoverEditDropDown";
 
 export default {
@@ -28,11 +22,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -80,33 +74,39 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
     [],
   );
 
-  const columnDefs = useMemo(
-    () =>
-      [
-        GridCell({
-          field: "id",
-          headerName: "Id",
-          initialWidth: 65,
-          maxWidth: 85,
-        }),
-        GridCell<ITestRow, GridFormPopoutDropDownProps<ITestRow, ITestRow["position"]>>({
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridPopoverEditDropDown(
+        {
           field: "position",
           initialWidth: 65,
           maxWidth: 150,
           headerName: "Position",
-          cellEditorParams: {
-            form: GridFormDropDown,
+        },
+        {
+          multiEdit: false,
+          editorParams: {
             options: ["Architect", "Developer", "Product Owner", "Scrum Master", "Tester", MenuSeparator, "(other)"],
-            multiEdit: false,
           },
-        }),
-        GridPopoverEditDropDown<ITestRow, ITestRow["position2"]>({
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
           field: "position2",
           maxWidth: 100,
           headerName: "Multi-edit",
-          cellEditorParams: {
-            multiEdit: true,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
             options: [
+              MenuHeaderItem("Header"),
               {
                 value: "1",
                 label: "One",
@@ -117,27 +117,36 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
               { value: "3", label: "Three" },
             ],
           },
-        }),
-        GridPopoverEditDropDown<ITestRow, ITestRow["position3"]>({
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
           field: "position3",
           initialWidth: 65,
           maxWidth: 150,
           headerName: "Custom callback",
-          cellEditorParams: {
-            multiEdit: true,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
             options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
             onSelectedItem: async (selected) => {
               await wait(2000);
               selected.selectedRows.forEach((row) => (row.position3 = selected.value));
             },
           },
-        }),
-        GridPopoverEditDropDown<ITestRow, ITestRow["position"]>({
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
           field: "position",
           initialWidth: 65,
           maxWidth: 150,
           headerName: "Options Fn",
-          cellEditorParams: {
+        },
+        {
+          multiEdit: false,
+          editorParams: {
             filtered: "reload",
             filterPlaceholder: "Search me...",
             options: optionsFn,
@@ -148,44 +157,75 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
               // eslint-disable-next-line no-console
               console.log("optionsRequestCancelled");
             },
-            multiEdit: false,
           },
-        }),
-        GridPopoverEditDropDown<ITestRow, ITestRow["position3"]>({
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
           field: "position3",
           initialWidth: 65,
           maxWidth: 150,
           headerName: "Filtered",
-          cellEditorParams: {
-            multiEdit: true,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
             filtered: "local",
             filterPlaceholder: "Filter this",
             options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
           },
-        }),
-        GridPopoverEditDropDown<ITestRow, ITestRow["position4"]>({
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
           field: "position4",
           initialWidth: 65,
           maxWidth: 150,
           headerName: "Filtered (object)",
           valueGetter: (params) => params.data.position4?.desc,
-          cellEditorParams: {
-            multiEdit: true,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
             filtered: "local",
             filterPlaceholder: "Filter this",
             options: optionsObjects.map((o) => {
               return { value: o, label: o.desc, disabled: false };
             }),
           },
-        }),
-        GridPopoverEditDropDown<ITestRow, ICode>({
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
+          field: "code",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Max height",
+          valueGetter: (params) => params.data.code,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            maxRows: 2,
+            filtered: "local",
+            filterPlaceholder: "Filter this",
+            options: Array.from(Array(30).keys()).map((o) => {
+              return { value: o, label: `${o}` };
+            }),
+          },
+        },
+      ),
+      GridPopoverEditDropDown(
+        {
           field: "code",
           initialWidth: 65,
           maxWidth: 150,
           headerName: "Filter Selectable",
           valueGetter: (params) => params.data.code,
-          cellEditorParams: {
-            multiEdit: true,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
             filtered: "local",
             filterPlaceholder: "Filter this",
             options: optionsObjects.map((o) => {
@@ -198,8 +238,9 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
               selected.selectedRows.forEach((row) => (row.code = selected.value));
             },
           },
-        }),
-      ] as ColDef[],
+        },
+      ),
+    ],
     [optionsFn, optionsObjects],
   );
 

package/src/stories/components/GridPopoutEditGeneric.stories.tsx

@@ -3,11 +3,11 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
-import { GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "@components/GridCell";
 import { FormTest, IFormTestRow } from "./FormTest";
 
 export default {
@@ -20,11 +20,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -32,7 +32,7 @@ export default {
 
 const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
-  const columnDefs = useMemo(
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
       GridCell({
         field: "id",
@@ -40,15 +40,20 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridCell({
-        field: "name",
-        headerName: "Popout Generic Edit",
-        maxWidth: 140,
-        cellEditorParams: {
-          form: FormTest,
-          multiEdit: false,
+      GridCell(
+        {
+          field: "name",
+          headerName: "Popout Generic Edit",
+          maxWidth: 140,
         },
-      }),
+        {
+          multiEdit: true,
+          editor: FormTest,
+          editorParams: {
+            a: 4,
+          },
+        },
+      ),
     ],
     [],
   );

package/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx

@@ -3,11 +3,11 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
-import { GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "@components/GridCell";
 import { IFormTestRow } from "./FormTest";
 import { isFloat, wait } from "@utils/util";
 import { GridPopoverTextArea } from "@components/gridPopoverEdit/GridPopoverTextArea";
@@ -23,11 +23,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -35,7 +35,7 @@ export default {
 
 const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
-  const columnDefs = useMemo(
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
     () => [
       GridCell({
         field: "id",
@@ -43,70 +43,85 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridPopoverTextInput<IFormTestRow>({
-        field: "name",
-        headerName: "Text input",
-        maxWidth: 140,
-        cellEditorParams: {
-          required: true,
-          maxlength: 12,
-          placeholder: "Enter some text...",
-          validate: (value: string) => {
-            if (value === "never") return "The value 'never' is not allowed";
-            return null;
-          },
-          multiEdit: false,
-          onSave: async (selectedRows, value) => {
-            await wait(1000);
-            selectedRows.forEach((selectedRow) => (selectedRow["name"] = value));
-            return true;
-          },
-        },
-      }),
-      GridPopoverTextInput<IFormTestRow>({
-        field: "distance",
-        headerName: "Number input",
-        maxWidth: 140,
-        valueFormatter: (params) => {
-          const v = params.data.distance;
-          return v != null ? `${v}${params.colDef.cellEditorParams.units}` : v;
+      GridPopoverTextInput(
+        {
+          field: "name",
+          headerName: "Text input",
+          maxWidth: 140,
         },
-        cellEditorParams: {
-          maxlength: 12,
-          placeholder: "Enter distance...",
-          units: "m",
-          validate: (value: string) => {
-            if (value.length && !isFloat(value)) return "Value must be a number";
-            return null;
+        {
+          multiEdit: true,
+          editorParams: {
+            required: true,
+            maxlength: 12,
+            placeholder: "Enter some text...",
+            validate: (value: string) => {
+              if (value === "never") return "The value 'never' is not allowed";
+              return null;
+            },
+            onSave: async (selectedRows, value) => {
+              await wait(1000);
+              selectedRows.forEach((selectedRow) => (selectedRow["name"] = value));
+              return true;
+            },
           },
-          multiEdit: false,
-          onSave: async (selectedRows, value) => {
-            await wait(1000);
-            selectedRows.forEach((selectedRow) => (selectedRow["distance"] = value.length ? parseFloat(value) : null));
-            return true;
+        },
+      ),
+      GridPopoverTextInput(
+        {
+          field: "distance",
+          headerName: "Number input",
+          maxWidth: 140,
+          valueFormatter: (params) => {
+            const v = params.data.distance;
+            return v != null ? `${v}${params.colDef.cellEditorParams.units}` : v;
           },
         },
-      }),
-      GridPopoverTextArea<IFormTestRow>({
-        field: "plan",
-        headerName: "Text area",
-        maxWidth: 140,
-        cellEditorParams: {
-          required: true,
-          maxlength: 32,
-          placeholder: "Enter some text...",
+        {
           multiEdit: true,
-          validate: (value: string) => {
-            if (value === "never") return "The value 'never' is not allowed";
-            return null;
+          editorParams: {
+            maxlength: 12,
+            placeholder: "Enter distance...",
+            units: "m",
+            validate: (value: string) => {
+              if (value.length && !isFloat(value)) return "Value must be a number";
+              return null;
+            },
+            onSave: async (selectedRows, value) => {
+              await wait(1000);
+              selectedRows.forEach(
+                (selectedRow) => (selectedRow["distance"] = value.length ? parseFloat(value) : null),
+              );
+              return true;
+            },
           },
-          onSave: async (selectedRows, value) => {
-            await wait(1000);
-            selectedRows.forEach((selectedRow) => (selectedRow["plan"] = value));
-            return true;
+        },
+      ),
+      GridPopoverTextArea(
+        {
+          field: "plan",
+          headerName: "Text area",
+          maxWidth: 140,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            required: true,
+            maxlength: 32,
+            placeholder: "Enter some text...",
+
+            validate: (value: string) => {
+              if (value === "never") return "The value 'never' is not allowed";
+              return null;
+            },
+            onSave: async (selectedRows, value) => {
+              await wait(1000);
+              selectedRows.forEach((selectedRow) => (selectedRow["plan"] = value));
+              return true;
+            },
           },
         },
-      }),
+      ),
     ],
     [],
   );

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

@@ -3,16 +3,15 @@ import "@linzjs/lui/dist/fonts";
 import "../../lui-overrides.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
 import { MenuSeparator } from "@components/gridForm/GridFormDropDown";
-import { ColDef } from "ag-grid-community";
 import { wait } from "@utils/util";
 import { MultiSelectResult } from "@components/gridForm/GridFormMultiSelect";
 import { GridSubComponentTextArea } from "@components/GridSubComponentTextArea";
-import { GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "@components/GridCell";
 import { GridPopoutEditMultiSelect } from "@components/gridPopoverEdit/GridPopoutEditMultiSelect";
 
 export default {
@@ -25,11 +24,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -45,7 +44,7 @@ interface ITestRow {
 const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
-  const columnDefs = useMemo(() => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(() => {
     const positionTwoMap: Record<string, string> = {
       "1": "One",
       "2": "Two",
@@ -58,57 +57,65 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
         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} />,
+      GridPopoutEditMultiSelect(
+        {
+          field: "position",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Position",
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            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;
             },
-          ],
-          onSave: async (result: MultiSelectResult<ITestRow>) => {
-            // eslint-disable-next-line no-console
-            console.log(result);
-            await wait(1000);
-            return true;
           },
         },
-      }),
-      GridPopoutEditMultiSelect<ITestRow, ITestRow["position2"]>({
-        field: "position2",
-        initialWidth: 65,
-        maxWidth: 150,
-        headerName: "Inital editor values ",
-        valueGetter: (props) => positionTwoMap[props.data.position2],
-        cellEditorParams: {
+      ),
+      GridPopoutEditMultiSelect(
+        {
+          field: "position2",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Inital editor values ",
+          valueGetter: (props) => positionTwoMap[props.data.position2],
+        },
+        {
           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;
+          editorParams: {
+            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(