@linzjs/step-ag-grid 4.0.1 → 4.0.3

package/package.json

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

package/src/components/GridPopoverHook.tsx

@@ -7,6 +7,7 @@ import { MenuCloseEvent } from "../react-menu3/types";
 
 export interface GridPopoverHookProps<RowType> {
   className: string | undefined;
+  invalid?: () => Promise<boolean | string | null> | boolean | string | null;
   save?: (selectedRows: RowType[]) => Promise<boolean>;
 }
 
@@ -22,12 +23,25 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
 
   const triggerSave = useCallback(
     async (reason?: string) => {
-      if (reason == "cancel" || !props.save || (updateValue && (await updateValue(props.save)))) {
-        setOpen(false);
+      if (reason == "cancel") {
         stopEditing();
+        return;
+      }
+      if (props.invalid && props.invalid()) {
+        return;
+      }
+
+      if (!props.save) {
+        stopEditing();
+      } else if (props.save) {
+        // forms that don't provide an invalid fn must wait until they have saved to close
+        if (props.invalid) stopEditing();
+        if (await updateValue(props.save)) {
+          if (!props.invalid) stopEditing();
+        }
       }
     },
-    [props.save, stopEditing, updateValue],
+    [props, stopEditing, updateValue],
   );
 
   const onlyInputKeyboardEventHandlers: {
@@ -139,7 +153,13 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
                 />
               )}
               {children}
-              <button ref={saveButtonRef} onClick={() => triggerSave().then()} style={{ display: "none" }} />
+              <button
+                ref={saveButtonRef}
+                onClick={() => {
+                  triggerSave().then();
+                }}
+                style={{ display: "none" }}
+              />
             </ControlledMenu>
           )}
         </>

package/src/components/gridForm/GridFormDropDown.tsx

@@ -64,20 +64,23 @@ const fieldToString = (field: any) => {
 export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   props: GridFormPopoutDropDownProps<RowType, ValueType>,
 ) => {
-  const { selectedRows, field, updateValue } = useGridPopoverContext<RowType>();
+  const { selectedRows, field, updateValue, data } = useGridPopoverContext<RowType>();
   const { stopEditing } = useContext(GridContext);
 
+  // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
+  const hasSubmitted = useRef(false);
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption<ValueType>[] | null>(null);
   const subComponentIsValid = useRef(false);
   const [subSelectedValue, setSubSelectedValue] = useState<any>();
-  const [selectedSubComponent, setSelectedSubComponent] = useState<any>();
+  const [selectedSubComponent, setSelectedSubComponent] = useState<FinalSelectOption<any> | null>(null);
 
   const selectItemHandler = useCallback(
     async (value: ValueType, subComponentValue?: ValueType): Promise<boolean> => {
-      if (subComponentValue !== undefined && !subComponentIsValid.current) return false;
+      if (hasSubmitted.current || (subComponentValue !== undefined && !subComponentIsValid.current)) return false;
+      hasSubmitted.current = true;
 
       return updateValue(async (selectedRows) => {
         const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
@@ -196,12 +199,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   const save = useCallback(async () => {
     // Handler for sub-selected value
     if (!selectedSubComponent) return true;
-    if (!subComponentIsValid.current) return false;
+    if (selectedSubComponent.subComponent && !subComponentIsValid.current) return false;
     await selectItemHandler(selectedSubComponent.value as ValueType, subSelectedValue);
     return true;
   }, [selectItemHandler, selectedSubComponent, subSelectedValue]);
 
-  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper } = useGridPopoverHook({
+    className: props.className,
+    invalid: () => !!(selectedSubComponent && !subComponentIsValid.current),
+    save,
+  });
   return popoverWrapper(
     <>
       {props.filtered && (
@@ -247,9 +254,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                   onClick={(e: ClickEvent) => {
                     if (item.subComponent) {
                       if (selectedSubComponent === item) {
+                        // toggle selection off
                         setSelectedSubComponent(null);
                         subComponentIsValid.current = true;
                       } else {
+                        // toggle selection on
                         setSelectedSubComponent(item);
                       }
                       e.keepOpen = true;
@@ -259,6 +268,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                   }}
                 >
                   {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                  {item.subComponent ? "..." : ""}
                 </MenuItem>
 
                 {item.subComponent && selectedSubComponent === item && (
@@ -266,6 +276,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                     {(ref: MenuInstance) => (
                       <GridSubComponentContext.Provider
                         value={{
+                          data,
                           value: subSelectedValue,
                           setValue: (value: any) => {
                             setSubSelectedValue(value);

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -1,6 +1,6 @@
 import "../../styles/GridFormEditBearing.scss";
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
@@ -17,14 +17,21 @@ export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends C
 export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
   const { field, value: initialValue } = useGridPopoverContext<RowType>();
 
-  const [value, setValue] = useState<string>(`${initialValue ?? ""}`);
+  // This clears out any scientific precision
+  const defaultValue = useMemo(
+    () => (initialValue == null ? "" : parseFloat(parseFloat(initialValue).toFixed(10)).toString()),
+    [initialValue],
+  );
+
+  const [value, setValue] = useState<string>(defaultValue);
+
+  const invalid = useCallback(() => bearingStringValidator(value, props.range), [props.range, value]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      if (bearingStringValidator(value)) return false;
       const parsedValue = bearingNumberParser(value);
       // Value didn't change so don't save just cancel
-      if (parsedValue === initialValue) {
+      if (parsedValue === bearingNumberParser(defaultValue)) {
         return true;
       }
 
@@ -41,17 +48,18 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       }
       return true;
     },
-    [field, initialValue, props, value],
+    [defaultValue, field, props, value],
   );
   const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
     className: props.className,
+    invalid,
     save,
   });
 
   return popoverWrapper(
     <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
       <TextInputFormatted
-        value={value ?? ""}
+        value={defaultValue}
         onChange={(e) => {
           setValue(e.target.value.trim());
         }}
@@ -60,6 +68,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         {...onlyInputKeyboardEventHandlers}
         formatted={bearingStringValidator(value, props.range) ? "?" : convertDDToDMS(bearingNumberParser(value))}
         error={bearingStringValidator(value, props.range)}
+        helpText={"Press enter or tab to save"}
       />
     </div>,
   );

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -45,7 +45,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
 export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
   props: GridFormMultiSelectProps<RowType, ValueType>,
 ) => {
-  const { selectedRows } = useGridPopoverContext<RowType>();
+  const { selectedRows, data } = useGridPopoverContext<RowType>();
 
   const initialiseValues = useMemo(() => {
     const r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
@@ -214,6 +214,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
                       item.subComponent && (
                         <GridSubComponentContext.Provider
                           value={{
+                            data,
                             value: selectedValues[`${item.value}`],
                             setValue: (value: any) => {
                               setSelectedValues({

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -38,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 } = useGridPopoverContext<RowType>();
+  const { selectedRows, updateValue, data } = useGridPopoverContext<RowType>();
 
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MenuOption<RowType>[]>();
@@ -148,6 +148,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                       item.subComponent && (
                         <GridSubComponentContext.Provider
                           value={{
+                            data,
                             value: subSelectedValue,
                             setValue: (value: any) => {
                               setSubSelectedValue(value);

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -4,8 +4,11 @@ import { CellEditorCommon } from "../GridCell";
 import clsx from "clsx";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
+import { GridBaseRow } from "../Grid";
 
-export interface GridSubComponentTextAreaProps extends TextInputValidatorProps, CellEditorCommon {
+export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   defaultValue: string;
@@ -13,8 +16,10 @@ export interface GridSubComponentTextAreaProps extends TextInputValidatorProps,
   helpText?: string;
 }
 
-export const GridFormSubComponentTextArea = (props: GridSubComponentTextAreaProps): JSX.Element => {
-  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
+  props: GridSubComponentTextAreaProps<RowType>,
+): JSX.Element => {
+  const { value, data, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press tab to save";
 
@@ -23,7 +28,7 @@ export const GridFormSubComponentTextArea = (props: GridSubComponentTextAreaProp
     if (value == null) setValue(props.defaultValue);
   }, [props.defaultValue, setValue, value]);
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data), [data, props, value]);
 
   useEffect(() => {
     setValid(value != null && invalid() == null);

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -3,16 +3,21 @@ import { GridSubComponentContext } from "../../contexts/GridSubComponentContext"
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
 import { CellEditorCommon } from "../GridCell";
+import { GridBaseRow } from "../Grid";
 
-export interface GridFormSubComponentTextInputProps extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   defaultValue: string;
   helpText?: string;
 }
 
-export const GridFormSubComponentTextInput = (props: GridFormSubComponentTextInputProps): JSX.Element => {
-  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
+  props: GridFormSubComponentTextInputProps<RowType>,
+): JSX.Element => {
+  const { value, setValue, setValid, triggerSave, data } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press enter or tab to save";
 
@@ -21,7 +26,7 @@ export const GridFormSubComponentTextInput = (props: GridFormSubComponentTextInp
     if (value == null) setValue(props.defaultValue);
   }, [props.defaultValue, setValue, value]);
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data), [data, props, value]);
 
   useEffect(() => {
     setValid(value != null && invalid() == null);

package/src/components/gridForm/GridFormTextArea.tsx

@@ -6,7 +6,9 @@ import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
 
-export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormTextAreaProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
@@ -14,17 +16,15 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Text
 }
 
 export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
-  const { field, value: initialVale } = useGridPopoverContext<RowType>();
+  const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
   const [value, setValue] = useState(initialVale != null ? `${initialVale}` : "");
 
   const helpText = props.helpText ?? "Press tab to save";
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data), [props, value, data]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      if (invalid()) return false;
-
       if (initialVale === (value ?? "")) return true;
 
       if (props.onSave) {
@@ -40,9 +40,13 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
       });
       return true;
     },
-    [invalid, initialVale, value, props, field],
+    [initialVale, value, props, field],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
+    className: props.className,
+    invalid,
+    save,
+  });
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,12 +1,15 @@
-import { useCallback, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
+import { GridContext } from "../../contexts/GridContext";
 
-export interface GridFormTextInputProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormTextInputProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   units?: string;
   width?: string | number;
@@ -15,18 +18,20 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Tex
 }
 
 export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTextInputProps<RowType>) => {
-  const { field, value: initialVale } = useGridPopoverContext<RowType>();
+  const { stopEditing } = useContext(GridContext);
+  const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
 
   const helpText = props.helpText ?? "Press enter or tab to save";
 
-  const initValue = initialVale == null ? "" : `${initialVale}`;
+  const initValue = useMemo(() => (initialVale == null ? "" : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator<RowType>(props, value, data), [data, props, value]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (invalid()) return false;
+      stopEditing();
       const trimmedValue = value.trim();
       if (initValue === trimmedValue) return true;
 
@@ -43,9 +48,13 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
       });
       return true;
     },
-    [invalid, value, initValue, props, field],
+    [invalid, stopEditing, value, initValue, props, field],
   );
-  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({
+    className: props.className,
+    invalid,
+    save,
+  });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>

package/src/contexts/GridSubComponentContext.ts

@@ -2,6 +2,7 @@ import { createContext } from "react";
 
 export interface GridSubComponentContextType {
   value: any;
+  data: any;
   setValue: (value: string) => void;
   setValid: (valid: boolean) => void;
   triggerSave: () => Promise<void>;
@@ -9,6 +10,7 @@ export interface GridSubComponentContextType {
 
 export const GridSubComponentContext = createContext<GridSubComponentContextType>({
   value: "GridSubComponentContext value no context",
+  data: {},
   setValue: () => {
     console.error("GridSubComponentContext setValue no context");
   },

package/src/stories/grid/FormTest.tsx

@@ -39,10 +39,12 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
 
   const [showModal, setShowModal] = useState<boolean>(false);
 
-  const { popoverWrapper, firstInputKeyboardEventHandlers, lastInputKeyboardEventHandlers } = useGridPopoverHook({
-    className: props.className,
-    save,
-  });
+  const { popoverWrapper, firstInputKeyboardEventHandlers, lastInputKeyboardEventHandlers, triggerSave } =
+    useGridPopoverHook({
+      className: props.className,
+      invalid: () => numba.length < 3,
+      save,
+    });
 
   return popoverWrapper(
     <>
@@ -50,7 +52,7 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
         <LuiAlertModal
           data-testid="WarningAlertWithButtons-modal"
           level="warning"
-          // If panel is popped out, append modal to poppped out window DOM, otherwise use default
+          // If panel is popped out, append modal to popped out window DOM, otherwise use default
           //appendToElement={() => (poppedOut && popoutElement) || document.body}
         >
           <h2>Header</h2>
@@ -73,6 +75,7 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
               level="primary"
               onClick={() => {
                 setShowModal(false);
+                triggerSave().then();
               }}
               data-testid="WarningAlertWithButtons-ok"
             >

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -37,7 +37,7 @@ export default {
 
 interface ITestRow {
   id: number;
-  bearing1: number | null;
+  bearing1: string | number | null;
   bearingCorrection: number | null;
 }
 
@@ -85,8 +85,9 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
 
   const [rowData] = useState([
     { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
-    { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
+    { id: 1001, bearing1: "0E-12", bearingCorrection: 240 },
     { id: 1002, bearing1: null, bearingCorrection: 355.1 },
+    { id: 1003, bearing1: null, bearingCorrection: 0 },
   ] as ITestRow[]);
 
   return (

package/src/utils/bearing.ts

@@ -1,7 +1,7 @@
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export const bearingValueFormatter = (params: ValueFormatterParams): string => {
-  const value = params.value;
+  const value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
   if (value == null) {
     return "-";
   }

package/src/utils/textValidator.ts

@@ -1,10 +1,16 @@
-export interface TextInputValidatorProps {
+import { GridBaseRow } from "../components/Grid";
+
+export interface TextInputValidatorProps<RowType extends GridBaseRow> {
   required?: boolean;
   maxLength?: number;
-  validate?: (value: string) => string | null;
+  validate?: (value: string, data: RowType) => string | null;
 }
 
-export const TextInputValidator = (props: TextInputValidatorProps, value: string | null) => {
+export const TextInputValidator = <RowType extends GridBaseRow>(
+  props: TextInputValidatorProps<RowType>,
+  value: string | null,
+  data: RowType,
+) => {
   if (value == null) return null;
 
   // This can happen because subcomponent is invoked without type safety
@@ -18,7 +24,7 @@ export const TextInputValidator = (props: TextInputValidatorProps, value: string
     return `Text must be no longer than ${props.maxLength} characters`;
   }
   if (props.validate) {
-    return props.validate(value);
+    return props.validate(value, data);
   }
   return null;
 };