@linzjs/step-ag-grid 1.5.4 → 2.0.0

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(

package/src/stories/components/GridReadOnly.stories.tsx

@@ -3,14 +3,14 @@ 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 { wait } from "@utils/util";
 import { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
+import { CellParams, ColDefT, GridCell } from "@components/GridCell";
 import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
-import { GridCell } from "@components/GridCell";
 
 export default {
   title: "Components / Grids",
@@ -22,11 +22,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -42,7 +42,7 @@ interface ITestRow {
 
 const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
-  const columnDefs = useMemo(
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
         field: "id",
@@ -50,7 +50,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridCell<ITestRow, any>({
+      GridCell({
         field: "position",
         headerName: "Position",
         initialWidth: 65,
@@ -72,65 +72,81 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 150,
         maxWidth: 200,
       }),
-      GridPopoverMessage<ITestRow>({
-        headerName: "Popout message",
-        cellRenderer: () => <>Click me!</>,
-        cellEditorParams: {
-          message: async (selectedRows: ITestRow[]) => {
-            await wait(1000);
-            return `There are ${selectedRows.length} row(s) selected`;
+      GridPopoverMessage(
+        {
+          headerName: "Popout message",
+          cellRenderer: () => <>Click me!</>,
+          cellRendererParams: {
+            warning: () => "x",
           },
-          multiEdit: true,
         },
-      }),
-      GridPopoverMenu<ITestRow>({
-        headerName: "Menu",
-        cellEditorParams: {
-          options: async (selectedItems) => {
-            // Just doing a timeout here to demonstrate deferred loading
-            await wait(500);
-            return [
-              {
-                label: "Single edit only",
-                action: async (selectedRows) => {
-                  alert(`Single-edit: ${selectedRows.length} rows`);
-                  await wait(1500);
-                  return true;
+        {
+          editorParams: {
+            message: async (formParams: CellParams<ITestRow>): Promise<string> => {
+              await wait(1000);
+              return `There are ${formParams.selectedRows.length} row(s) selected`;
+            },
+            multiEdit: true,
+          },
+        },
+      ),
+      GridPopoverMenu(
+        {
+          headerName: "Menu",
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async (selectedItems) => {
+              // Just doing a timeout here to demonstrate deferred loading
+              await wait(500);
+              return [
+                {
+                  label: "Single edit only",
+                  action: async (selectedRows) => {
+                    alert(`Single-edit: ${selectedRows.length} rows`);
+                    await wait(1500);
+                    return true;
+                  },
+                  supportsMultiEdit: false,
+                },
+                {
+                  label: "Multi-edit",
+                  action: async (selectedRows) => {
+                    alert(`Multi-edit: ${selectedRows.length} rows`);
+                    await wait(1500);
+                    return true;
+                  },
+                  supportsMultiEdit: true,
+                },
+                {
+                  label: "Disabled item",
+                  disabled: "Disabled for test",
+                  supportsMultiEdit: true,
                 },
-                supportsMultiEdit: false,
-              },
-              {
-                label: "Multi-edit",
-                action: async (selectedRows) => {
-                  alert(`Multi-edit: ${selectedRows.length} rows`);
-                  await wait(1500);
-                  return true;
+                {
+                  label: "Developer Only",
+                  hidden: selectedItems.some((x) => x.position != "Developer"),
+                  supportsMultiEdit: true,
                 },
-                supportsMultiEdit: true,
-              },
-              {
-                label: "Disabled item",
-                disabled: "Disabled for test",
-                supportsMultiEdit: true,
-              },
-              {
-                label: "Developer Only",
-                hidden: selectedItems.some((x) => x.position != "Developer"),
-                supportsMultiEdit: true,
-              },
-            ];
+              ];
+            },
           },
         },
-      }),
-      GridPopoverMenu<ITestRow>({
-        headerName: "Menu disabled",
-        editable: false,
-        cellEditorParams: {
-          options: async () => {
-            return [];
+      ),
+      GridPopoverMenu(
+        {
+          headerName: "Menu disabled",
+          editable: false,
+        },
+        {
+          editorParams: {
+            options: async () => {
+              return [];
+            },
           },
         },
-      }),
+      ),
     ],
     [],
   );

package/dist/src/contexts/UpdatingContextProvider.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-interface UpdatingContextProviderProps {
-    children: ReactNode;
-}
-export declare type UpdatingContextStatus = Record<string, (number | string)[] | undefined>;
-export declare const UpdatingContextProvider: (props: UpdatingContextProviderProps) => JSX.Element;
-export {};