@linzjs/step-ag-grid 1.5.4 → 2.0.1

package/src/stories/components/GridPopoutBearing.stories.tsx

@@ -1,13 +1,14 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-import "../../lui-overrides.scss";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { useMemo, useState } from "react";
-import { UpdatingContextProvider } from "@contexts/UpdatingContextProvider";
+import { GridUpdatingContextProvider } from "@contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
-import { GridCell } from "@components/GridCell";
+import { ColDefT, GridCell } from "@components/GridCell";
 import {
   GridPopoverEditBearing,
   GridPopoverEditBearingCorrection,
@@ -24,11 +25,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -42,7 +43,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,31 +51,34 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridPopoverEditBearing<ITestRow>({
-        field: "bearing1",
-        headerName: "Bearing GCE",
-        cellRendererParams: {
-          warning: (props) => props.data.id == 1002 && "Testers are testing",
-          info: (props) => props.data.id == 1001 && "Developers are developing",
+      GridPopoverEditBearing(
+        {
+          field: "bearing1",
+          headerName: "Bearing GCE",
+          cellRendererParams: {
+            warning: (props: any) => props.data.id == 1002 && "Testers are testing",
+            info: (props: any) => props.data.id == 1001 && "Developers are developing",
+          },
         },
-        cellEditorParams: {
+        {
           multiEdit: false,
-          placeHolder: "Enter Bearing",
         },
-      }),
-      GridPopoverEditBearingCorrection<ITestRow>({
-        field: "bearingCorrection",
-        headerName: "Bearing Correction",
-        cellEditorParams: {
-          multiEdit: true,
-          placeHolder: "Enter Bearing Correction",
-          onSave: async (selectedRows: ITestRow[], value: ITestRow["bearingCorrection"]) => {
-            await wait(1000);
-            selectedRows.forEach((row) => (row["bearingCorrection"] = value));
-            return true;
+      ),
+      GridPopoverEditBearingCorrection(
+        {
+          field: "bearingCorrection",
+          headerName: "Bearing Correction",
+        },
+        {
+          editorParams: {
+            onSave: async (selectedRows, value: ITestRow["bearingCorrection"]) => {
+              await wait(1000);
+              selectedRows.forEach((row) => (row["bearingCorrection"] = value));
+              return true;
+            },
           },
         },
-      }),
+      ),
     ],
     [],
   );

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

@@ -1,21 +1,16 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-import "../../lui-overrides.scss";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.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 +23,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -80,33 +75,40 @@ 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: {
+            className: "Xxx",
             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 +119,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 +159,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: {
+            className: "GridPopoverEditDropDown-containerSmall",
+            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 +240,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

@@ -1,13 +1,14 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-import "../../lui-overrides.scss";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.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 +21,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -32,7 +33,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 +41,18 @@ 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: {},
+        },
+      ),
     ],
     [],
   );

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

@@ -1,13 +1,14 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-import "../../lui-overrides.scss";
+import "../../styles/index.scss";
+import "../../styles/GridTheme.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 +24,11 @@ export default {
   decorators: [
     (Story) => (
       <div style={{ width: 1200, height: 400, display: "flex" }}>
-        <UpdatingContextProvider>
+        <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
           </GridContextProvider>
-        </UpdatingContextProvider>
+        </GridUpdatingContextProvider>
       </div>
     ),
   ],
@@ -35,7 +36,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 +44,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;
+            },
           },
         },
-      }),
+      ),
     ],
     [],
   );