@linzjs/step-ag-grid 4.0.2 → 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.2",
+  "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

@@ -67,17 +67,20 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   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 && (

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/GridFormTextArea.tsx

@@ -25,8 +25,6 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      if (invalid()) return false;
-
       if (initialVale === (value ?? "")) return true;
 
       if (props.onSave) {
@@ -42,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,10 +1,11 @@
-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<RowType>,
@@ -17,11 +18,12 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow>
 }
 
 export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTextInputProps<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<RowType>(props, value, data), [data, props, value]);
@@ -29,6 +31,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
       if (invalid()) return false;
+      stopEditing();
       const trimmedValue = value.trim();
       if (initValue === trimmedValue) return true;
 
@@ -45,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/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 "-";
   }