@linzjs/step-ag-grid 1.5.4 → 2.0.0

package/src/components/gridPopoverEdit/GridPopoverTextArea.ts

@@ -1,20 +1,16 @@
-import { GridCell } from "../GridCell";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
-import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 import { GridFormTextArea, GridFormTextAreaProps } from "../gridForm/GridFormTextArea";
+import { ColDef } from "ag-grid-community";
 
 export const GridPopoverTextArea = <RowType extends GridBaseRow>(
-  colDef: GenericCellColDef<RowType, GridFormTextAreaProps<RowType>>,
-) => {
-  return GridCell<RowType, GridFormTextAreaProps<RowType>>({
-    maxWidth: 260,
-    ...colDef,
-    ...(colDef?.cellEditorParams && {
-      cellEditorParams: {
-        width: 260,
-        ...colDef.cellEditorParams,
-        form: GridFormTextArea,
-      },
-    }),
-  });
-};
+  colDef: ColDef,
+  params: GenericCellEditorProps<GridFormTextAreaProps<RowType>>,
+): ColDefT<RowType> =>
+  GridCell(
+    {
+      maxWidth: 260,
+      ...colDef,
+    },
+    { editor: GridFormTextArea, ...params },
+  );

package/src/components/gridPopoverEdit/GridPopoverTextInput.ts

@@ -1,20 +1,20 @@
-import { GridCell } from "../GridCell";
+import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
-import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 import { GridFormTextInput, GridFormTextInputProps } from "../gridForm/GridFormTextInput";
+import { ColDef } from "ag-grid-community";
 
 export const GridPopoverTextInput = <RowType extends GridBaseRow>(
-  colDef: GenericCellColDef<RowType, GridFormTextInputProps<RowType>>,
-) => {
-  return GridCell<RowType, GridFormTextInputProps<RowType>>({
-    maxWidth: 140,
-    ...colDef,
-    ...(colDef?.cellEditorParams && {
-      cellEditorParams: {
-        width: 240,
-        ...colDef.cellEditorParams,
-        form: GridFormTextInput,
-      },
-    }),
-  });
+  colDef: ColDef,
+  params: GenericCellEditorProps<GridFormTextInputProps<RowType>>,
+): ColDefT<RowType> => {
+  return GridCell(
+    {
+      maxWidth: 140,
+      ...colDef,
+    },
+    {
+      editor: GridFormTextInput,
+      ...params,
+    },
+  );
 };

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,21 +1,19 @@
 import "./GridRenderGenericCell.scss";
 
 import { useContext } from "react";
-import { UpdatingContext } from "@contexts/UpdatingContext";
+import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { GridIcon } from "../GridIcon";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { GenericCellEditorParams } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
   data: RowType;
 }
 
-export interface GenericCellColDef<RowType extends GridBaseRow, FormProps extends Record<string, any>> extends ColDef {
+export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDef {
   cellRendererParams?: GenericCellRendererParams<RowType>;
-  cellEditorParams?: GenericCellEditorParams<RowType> & FormProps;
 }
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
@@ -25,7 +23,7 @@ export interface GenericCellRendererParams<RowType extends GridBaseRow> {
 }
 
 export const GridRendererGenericCell = <RowType extends GridBaseRow>(props: ICellRendererParams): JSX.Element => {
-  const { checkUpdating } = useContext(UpdatingContext);
+  const { checkUpdating } = useContext(GridUpdatingContext);
 
   const colDef = props.colDef as ColDef;
   const cellRendererParams = colDef.cellRendererParams as GenericCellRendererParams<RowType> | undefined;

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -1,12 +1,12 @@
 import { useContext } from "react";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
-import { UpdatingContext } from "@contexts/UpdatingContext";
+import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { LuiIcon } from "@linzjs/lui";
 import { Column } from "ag-grid-community/dist/lib/entities/column";
 
 export const GridRenderPopoutMenuCell = (props: ICellRendererParams) => {
-  const { checkUpdating } = useContext(UpdatingContext);
+  const { checkUpdating } = useContext(GridUpdatingContext);
   const isLoading = checkUpdating(props.colDef?.field ?? "", props.data.id);
   const editable = props.colDef?.editable;
   const disabled = !(typeof editable === "function"

package/src/contexts/GridContextProvider.tsx

@@ -3,7 +3,7 @@ import { GridApi, RowNode } from "ag-grid-community";
 import { GridContext } from "./GridContext";
 import { delay, difference, isEmpty, last, sortBy } from "lodash-es";
 import { isNotEmpty } from "@utils/util";
-import { UpdatingContext } from "./UpdatingContext";
+import { GridUpdatingContext } from "./GridUpdatingContext";
 import { GridBaseRow } from "@components/Grid";
 
 interface GridContextProps {
@@ -16,7 +16,7 @@ interface GridContextProps {
  * Also, make sure the provider is created in a separate component, otherwise it won't be found.
  */
 export const GridContextProvider = (props: GridContextProps): ReactElement => {
-  const { modifyUpdating } = useContext(UpdatingContext);
+  const { modifyUpdating } = useContext(GridUpdatingContext);
   const gridApiRef = useRef<GridApi>();
   const idsBeforeUpdate = useRef<number[]>([]);
 
@@ -48,9 +48,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
       noApiFn = (() => {}) as () => R;
     }
     const gridApi = gridApiRef.current;
-    if (gridApi) return hasApiFn(gridApi);
-    console.error("GridApi not ready");
-    return noApiFn();
+    return gridApi ? hasApiFn(gridApi) : noApiFn();
   };
 
   /**

package/src/contexts/GridPopoverContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, RefObject } from "react";
+import { ICellEditorParams } from "ag-grid-community";
+
+export interface PropsType {
+  value: any;
+  data: any;
+  field: string;
+  selectedRows: any[];
+}
+
+export type GridPopoverContextType = {
+  anchorRef: RefObject<Element>;
+  updateValueRef: RefObject<(saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>>;
+  saving: boolean;
+  setSaving: (saving: boolean) => void;
+  setProps: (props: ICellEditorParams, multiEdit: boolean) => void;
+  propsRef: RefObject<PropsType>;
+};
+
+export const GridPopoverContext = createContext<GridPopoverContextType>({
+  anchorRef: { current: null },
+  updateValueRef: {
+    current: async () => {
+      console.error("Missing GridPopoverContext updateValueRef");
+      return false;
+    },
+  },
+  saving: false,
+  setSaving: () => {},
+  setProps: () => {},
+  propsRef: { current: null },
+});

package/src/contexts/GridPopoverContextProvider.tsx

@@ -0,0 +1,53 @@
+import { ReactNode, RefObject, useContext, useRef, useState } from "react";
+import { GridPopoverContext, PropsType } from "./GridPopoverContext";
+import { ICellEditorParams } from "ag-grid-community";
+import { GridBaseRow } from "@components/Grid";
+import { GridContext } from "@contexts/GridContext";
+
+interface GridPopoverContextProps {
+  children: ReactNode;
+}
+
+export const GridPopoverContextProvider = (props: GridPopoverContextProps) => {
+  const { getSelectedRows, updatingCells } = useContext(GridContext);
+  const anchorRef = useRef<Element>();
+  const propsRef = useRef<PropsType>({} as PropsType);
+  const updateValueRef = useRef<(saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>>(async () => {
+    console.error("updateValueRef.current is not set");
+    return false;
+  });
+
+  const [saving, setSaving] = useState(false);
+
+  const setProps = (props: ICellEditorParams, multiEdit: boolean) => {
+    const selectedRows = multiEdit ? getSelectedRows<GridBaseRow>() : [props.data];
+    const field = props.colDef?.field ?? "";
+
+    anchorRef.current = props.eGridCell;
+    propsRef.current = {
+      value: props.value,
+      data: props.data,
+      field,
+      selectedRows,
+    };
+
+    updateValueRef.current = async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
+      return !saving && (await updatingCells({ selectedRows, field }, saveFn, setSaving));
+    };
+  };
+
+  return (
+    <GridPopoverContext.Provider
+      value={{
+        anchorRef: anchorRef as any as RefObject<Element>,
+        saving,
+        setSaving,
+        updateValueRef,
+        propsRef,
+        setProps,
+      }}
+    >
+      {props.children}
+    </GridPopoverContext.Provider>
+  );
+};

package/src/contexts/{UpdatingContext.tsx → GridUpdatingContext.tsx}

@@ -1,11 +1,11 @@
 import { createContext } from "react";
 
-export type UpdatingContextType = {
+export type GridUpdatingContextType = {
   checkUpdating: (fields: string | string[], id: number | string) => boolean;
   modifyUpdating: (field: string, ids: (number | string)[], fn: () => void | Promise<void>) => Promise<void>;
 };
 
-export const UpdatingContext = createContext<UpdatingContextType>({
+export const GridUpdatingContext = createContext<GridUpdatingContextType>({
   checkUpdating: () => {
     console.error("Missing UpdatingContext");
     return false;

package/src/contexts/{UpdatingContextProvider.tsx → GridUpdatingContextProvider.tsx}

@@ -1,23 +1,23 @@
 import { ReactNode, useRef } from "react";
 import { castArray, flatten, remove } from "lodash-es";
-import { UpdatingContext } from "./UpdatingContext";
+import { GridUpdatingContext } from "./GridUpdatingContext";
 
 interface UpdatingContextProviderProps {
   children: ReactNode;
 }
 
-export type UpdatingContextStatus = Record<string, (number | string)[] | undefined>;
+export type GridUpdatingContextStatus = Record<string, (number | string)[] | undefined>;
 
 type FieldName = string;
 type IdList = (number | string)[];
 type UpdatingBlock = Record<FieldName, IdList[]>;
 
-export const UpdatingContextProvider = (props: UpdatingContextProviderProps) => {
+export const GridUpdatingContextProvider = (props: UpdatingContextProviderProps) => {
   const updatingBlocks = useRef<UpdatingBlock>({});
-  const updating = useRef<UpdatingContextStatus>({});
+  const updating = useRef<GridUpdatingContextStatus>({});
 
   const resetUpdating = () => {
-    const mergedUpdatingBlocks: UpdatingContextStatus = {};
+    const mergedUpdatingBlocks: GridUpdatingContextStatus = {};
     for (const key in updatingBlocks.current) {
       mergedUpdatingBlocks[key] = flatten(updatingBlocks.current[key]);
     }
@@ -38,6 +38,8 @@ export const UpdatingContextProvider = (props: UpdatingContextProviderProps) =>
     castArray(fields).some((f) => updating.current[f]?.includes(id));
 
   return (
-    <UpdatingContext.Provider value={{ modifyUpdating, checkUpdating }}>{props.children}</UpdatingContext.Provider>
+    <GridUpdatingContext.Provider value={{ modifyUpdating, checkUpdating }}>
+      {props.children}
+    </GridUpdatingContext.Provider>
   );
 };

package/src/stories/components/FormTest.tsx

@@ -3,7 +3,7 @@ import "./FormTest.scss";
 import { useCallback, useState } from "react";
 import { LuiTextInput } from "@linzjs/lui";
 import { wait } from "@utils/util";
-import { GridFormProps } from "@components/GridCell";
+import { CellParams } from "@components/GridCell";
 import { useGridPopoverHook } from "@components/GridPopoverHook";
 import { GridBaseRow } from "@components/Grid";
 
@@ -16,7 +16,8 @@ export interface IFormTestRow {
   distance: number | null;
 }
 
-export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowType>): JSX.Element => {
+export const FormTest = <RowType extends GridBaseRow>(_props: any): JSX.Element => {
+  const props = _props as CellParams<RowType>;
   const [v1, v2, ...v3] = props.value.split(" ");
 
   const [nameType, setNameType] = useState(v1);
@@ -34,7 +35,7 @@ export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowTy
     // Close form
     return true;
   }, [nameType, numba, plan, props.selectedRows]);
-  const { popoverWrapper } = useGridPopoverHook(props, save);
+  const { popoverWrapper } = useGridPopoverHook({ save });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>

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

@@ -4,10 +4,10 @@ import "../../lui-overrides.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 +24,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,31 +50,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

@@ -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],
   );