@linzjs/step-ag-grid 3.0.0 → 3.0.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridPopoverHook.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "../contexts/GridContext";
 import { GridBaseRow } from "./Grid";
 import { ControlledMenu } from "../react-menu3";
-import { GridPopoverContext } from "../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../contexts/GridPopoverContext";
 import { MenuCloseEvent } from "../react-menu3/types";
 
 export interface GridPopoverHookProps<RowType> {
@@ -12,7 +12,7 @@ export interface GridPopoverHookProps<RowType> {
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
   const { stopEditing } = useContext(GridContext);
-  const { anchorRef, saving, updateValue } = useContext(GridPopoverContext);
+  const { anchorRef, saving, updateValue } = useGridPopoverContext<RowType>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
 

package/src/components/gridForm/GridFormDropDown.tsx

@@ -9,7 +9,7 @@ import { delay } from "lodash-es";
 import debounce from "debounce-promise";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
   // Note the row that was clicked on will be first
@@ -44,6 +44,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
     | "GridPopoverEditDropDown-containerUnlimited"
     | string
     | undefined;
+  // local means the filter won't change if it's reloaded, reload means it does change
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType, ValueType>) => Promise<void>;
@@ -54,10 +55,14 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow, ValueT
   optionsRequestCancel?: () => void;
 }
 
+const fieldToString = (field: any) => {
+  return typeof field == "symbol" ? field.toString() : `${field}`;
+};
+
 export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   props: GridFormPopoutDropDownProps<RowType, ValueType>,
 ) => {
-  const { selectedRows, field, updateValue } = useContext(GridPopoverContext);
+  const { selectedRows, field, updateValue } = useGridPopoverContext<RowType>();
   const { stopEditing } = useContext(GridContext);
 
   const [filter, setFilter] = useState("");
@@ -208,7 +213,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
       )}
       <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
-          {options && options.length == filteredValues?.length && <MenuItem key={`${field}-empty`}>[Empty]</MenuItem>}
+          {options && options.length == filteredValues?.length && (
+            <MenuItem key={`${fieldToString(field)}-empty`}>[Empty]</MenuItem>
+          )}
           {options?.map((item: FinalSelectOption<ValueType | string>, index) =>
             item.value === MenuSeparatorString ? (
               <MenuDivider key={`$$divider_${index}`} />
@@ -218,7 +225,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
               <div key={`menu-wrapper-${index}`}>
                 {!item.subComponent ? (
                   <MenuItem
-                    key={`${field}-${index}`}
+                    key={`${fieldToString(field)}-${index}`}
                     disabled={!!item.disabled}
                     title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                     value={item.value}
@@ -229,12 +236,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                     {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
                   </MenuItem>
                 ) : (
-                  <FocusableItem className={"LuiDeprecatedForms"} key={`${field}-${index}_subcomponent`}>
+                  <FocusableItem className={"LuiDeprecatedForms"} key={`${fieldToString(field)}-${index}_subcomponent`}>
                     {(ref: any) =>
-                      item.subComponent &&
-                      item.subComponent(
-                        {
-                          setValue: (value: any) => {
+                      item.subComponent && (
+                        <item.subComponent
+                          setValue={(value: any) => {
                             const localSubComponentValues = [...subComponentValues];
                             const subComponentValueIndex = localSubComponentValues.findIndex(
                               ({ optionValue }) => optionValue === item.value,
@@ -248,8 +254,8 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                               });
                             }
                             setSubComponentValues(localSubComponentValues);
-                          },
-                          keyDown: (key: string, event: KeyboardEvent<HTMLInputElement>) => {
+                          }}
+                          keyDown={(key: string, event: KeyboardEvent<HTMLInputElement>) => {
                             const subComponentItem = subComponentValues.find(
                               ({ optionValue }) => optionValue === item.value,
                             );
@@ -265,10 +271,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                               });
                             }
                             return false;
-                          },
-                          key: `${field}-${index}_subcomponent_inner`,
-                        },
-                        ref,
+                          }}
+                          key={`${fieldToString(field)}-${index}_subcomponent_inner`}
+                        />
                       )
                     }
                   </FocusableItem>

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -1,12 +1,12 @@
 import "../../styles/GridFormEditBearing.scss";
 
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { CellEditorCommon } from "../GridCell";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeHolder?: string;
@@ -15,7 +15,7 @@ export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends C
 }
 
 export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
-  const { field, value: initialValue } = useContext(GridPopoverContext);
+  const { field, value: initialValue } = useGridPopoverContext<RowType>();
 
   const [value, setValue] = useState<string>(`${initialValue ?? ""}`);
 
@@ -34,7 +34,9 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         if (field == null) {
           console.error("field is not defined in ColDef");
         } else {
-          selectedRows.forEach((row) => ((row as Record<string, any>)[field] = parsedValue));
+          selectedRows.forEach((row) => {
+            row[field] = parsedValue as any;
+          });
         }
       }
       return true;

package/src/components/gridForm/GridFormMessage.tsx

@@ -1,17 +1,17 @@
 import clsx from "clsx";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { CellEditorCommon } from "../GridCell";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
   message: (selectedRows: RowType[]) => Promise<string | JSX.Element> | string | JSX.Element;
 }
 
 export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormMessageProps<RowType>) => {
-  const { selectedRows } = useContext(GridPopoverContext);
+  const { selectedRows } = useGridPopoverContext<RowType>();
 
   const [message, setMessage] = useState<string | JSX.Element | null>(null);
   const { popoverWrapper } = useGridPopoverHook({ className: props.className });

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,7 +1,7 @@
 import "../../styles/GridFormMultiSelect.scss";
 
 import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
-import { KeyboardEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay, fromPairs, isEqual, omit, pick, toPairs } from "lodash-es";
@@ -11,7 +11,7 @@ import { MenuSeparatorString } from "./GridFormDropDown";
 import { CellEditorCommon } from "../GridCell";
 import { ClickEvent } from "../../react-menu3/types";
 import { GridSubComponentContext } from "contexts/GridSubComponentContext";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
@@ -45,7 +45,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
 export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
   props: GridFormMultiSelectProps<RowType, ValueType>,
 ) => {
-  const { selectedRows } = useContext(GridPopoverContext);
+  const { selectedRows } = useGridPopoverContext<RowType>();
 
   const initialiseValues = useMemo(() => {
     const r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -1,15 +1,16 @@
 import { GridBaseRow } from "../Grid";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { FocusableItem, MenuDivider, MenuItem } from "../../react-menu3";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { CellEditorCommon } from "../GridCell";
 import { GridSubComponentContext } from "../../contexts/GridSubComponentContext";
 import { ClickEvent } from "../../react-menu3/types";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
+  defaultAction?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
 }
 
 /** Menu configuration types **/
@@ -37,7 +38,7 @@ export interface MenuOption<RowType extends GridBaseRow> {
  * you need a useMemo around your columnDefs
  */
 export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridFormPopoutMenuProps<RowType>) => {
-  const { selectedRows, updateValue } = useContext(GridPopoverContext);
+  const { selectedRows, updateValue } = useGridPopoverContext<RowType>();
 
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MenuOption<RowType>[]>();
@@ -48,6 +49,14 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   const subComponentIsValid = useRef(false);
   const [subSelectedValue, setSubSelectedValue] = useState<any>();
 
+  const defaultAction = useCallback(
+    async (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => {
+      if (props.defaultAction) await props.defaultAction(selectedRows, menuOption);
+      else console.error(`No action specified for ${menuOption.label} menu options`);
+    },
+    [props],
+  );
+
   // Load up options list if it's async function
   useEffect(() => {
     if (options || optionsInitialising.current) return;
@@ -55,22 +64,31 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
     const optionsConf = props.options ?? [];
 
     (async () => {
-      setOptions(typeof optionsConf == "function" ? await optionsConf(selectedRows) : optionsConf);
+      const newOptions = typeof optionsConf == "function" ? await optionsConf(selectedRows) : optionsConf;
+      setOptions(newOptions);
+      if (!props.defaultAction) {
+        const anyOptionsAreMissingAction = newOptions.some((option) => !option.action);
+        if (anyOptionsAreMissingAction) {
+          console.error("There's no default action handler and some Menu options are missing an action handler", {
+            invalidMenuOptions: newOptions.filter((option) => !option.action),
+          });
+        }
+      }
       optionsInitialising.current = false;
     })();
-  }, [options, props.options, selectedRows]);
+  }, [options, props.defaultAction, props.options, selectedRows]);
 
   const actionClick = useCallback(
     async (menuOption: MenuOption<RowType>) => {
       actionProcessing.current = true;
       return updateValue(async () => {
         const result = { ...menuOption, subValue: subSelectedValue };
-        menuOption.action && (await menuOption.action(selectedRows, result));
+        await (menuOption.action ?? defaultAction)(selectedRows, result);
         actionProcessing.current = false;
         return true;
       });
     },
-    [selectedRows, subSelectedValue, updateValue],
+    [defaultAction, selectedRows, subSelectedValue, updateValue],
   );
 
   const onMenuItemClick = useCallback(

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useState } from "react";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
@@ -15,8 +15,8 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Cell
 }
 
 export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
-  const { field, value: initialVale } = useContext(GridPopoverContext);
-  const [value, setValue] = useState(initialVale ?? "");
+  const { field, value: initialVale } = useGridPopoverContext<RowType>();
+  const [value, setValue] = useState(initialVale != null ? `${initialVale}` : "");
 
   const invalid = useCallback(() => {
     if (props.required && value.length == 0) {
@@ -32,7 +32,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
   }, [props, value]);
 
   const save = useCallback(
-    async (selectedRows: any[]): Promise<boolean> => {
+    async (selectedRows: RowType[]): Promise<boolean> => {
       if (invalid()) return false;
 
       if (initialVale === (value ?? "")) return true;
@@ -45,7 +45,9 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
         console.error("ColDef has no field set");
         return false;
       }
-      selectedRows.forEach((row) => (row[field] = value));
+      selectedRows.forEach((row) => {
+        row[field] = value as any;
+      });
       return true;
     },
     [invalid, initialVale, value, props, field],

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormTextInputProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
@@ -17,7 +17,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Cel
 }
 
 export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTextInputProps<RowType>) => {
-  const { field, data, value: initialVale } = useContext(GridPopoverContext);
+  const { field, data, value: initialVale } = useGridPopoverContext<RowType>();
 
   const initValue = initialVale == null ? "" : `${initialVale}`;
   const [value, setValue] = useState(initValue);
@@ -50,8 +50,9 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
         console.error("ColDef has no field set");
         return false;
       }
-      // @ts-ignore row[field] row is of type any
-      selectedRows.forEach((row) => (row[field] = trimmedValue));
+      selectedRows.forEach((row) => {
+        row[field] = trimmedValue as any;
+      });
       return true;
     },
     [invalid, value, initValue, props, field],

package/src/contexts/GridPopoverContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, RefObject } from "react";
+import { createContext, RefObject, useContext } from "react";
+import { GridBaseRow } from "../components/Grid";
 
 export interface PropsType {
   value: any;
@@ -8,24 +9,27 @@ export interface PropsType {
   updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
 }
 
-export type GridPopoverContextType = {
+export interface GridPopoverContextType<RowType extends GridBaseRow> {
   anchorRef: RefObject<Element>;
   saving: boolean;
   setSaving: (saving: boolean) => void;
-  field: string;
+  field: keyof RowType;
   value: any;
-  data: any;
-  selectedRows: any[];
+  data: RowType;
+  selectedRows: RowType[];
   updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
-};
+}
 
-export const GridPopoverContext = createContext<GridPopoverContextType>({
+export const GridPopoverContext = createContext<GridPopoverContextType<any>>({
   anchorRef: { current: null },
   saving: false,
   setSaving: () => {},
   field: "",
   value: null,
-  data: null,
+  data: {} as GridBaseRow,
   selectedRows: [],
   updateValue: async () => false,
 });
+
+export const useGridPopoverContext = <RowType extends GridBaseRow>() =>
+  useContext<GridPopoverContextType<RowType>>(GridPopoverContext);

package/src/index.ts

@@ -1,10 +1,13 @@
 export * from "./react-menu3/index";
 export * from "./react-menu3/types";
 
-export * from "./contexts/GridUpdatingContext";
-export * from "./contexts/GridUpdatingContextProvider";
 export * from "./contexts/GridContext";
 export * from "./contexts/GridContextProvider";
+export * from "./contexts/GridUpdatingContext";
+export * from "./contexts/GridUpdatingContextProvider";
+export * from "./contexts/GridPopoverContext";
+export * from "./contexts/GridPopoverContextProvider";
+export * from "./contexts/GridSubComponentContext";
 
 export type { GridBaseRow } from "./components/Grid";
 export { Grid } from "./components/Grid";

package/src/stories/grid/FormTest.tsx

@@ -1,11 +1,11 @@
 import "./FormTest.scss";
 
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useState } from "react";
 import { LuiAlertModal, LuiAlertModalButtons, LuiButton, LuiTextInput } from "@linzjs/lui";
 import { wait } from "../../utils/util";
 import { CellEditorCommon } from "../../components/GridCell";
 import { useGridPopoverHook } from "../../components/GridPopoverHook";
-import { GridPopoverContext } from "../../contexts/GridPopoverContext";
+import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface IFormTestRow {
   id: number;
@@ -17,7 +17,7 @@ export interface IFormTestRow {
 }
 
 export const FormTest = (props: CellEditorCommon): JSX.Element => {
-  const { value } = useContext(GridPopoverContext);
+  const { value } = useGridPopoverContext<IFormTestRow>();
   const [v1, ...v2] = value.split(" ");
 
   const [nameType, setNameType] = useState(v1);

package/src/stories/grid/GridPopoutEditDropDown.stories.tsx

@@ -135,7 +135,9 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
             onSelectedItem: async (selected) => {
               await wait(2000);
-              selected.selectedRows.forEach((row) => (row.position3 = selected.value));
+              selected.selectedRows.forEach((row) => {
+                row.position3 = selected.value;
+              });
             },
           },
         },