@linzjs/step-ag-grid 7.6.1 → 7.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "7.6.1",
+  "version": "7.7.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -34,7 +34,7 @@
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@linzjs/lui": "^17.23.2",
+    "@linzjs/lui": ">=17",
     "ag-grid-community": ">=27",
     "ag-grid-react": ">=27",
     "debounce-promise": "^3.1.2",
@@ -52,7 +52,7 @@
     "bundle": "rollup -c",
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
     "css": "sass ./src/styles/index.scss:dist/index.css --no-source-map",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
     "storybook": "start-storybook -p 6006",
@@ -120,12 +120,16 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.9.1",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-expect-message": "^1.1.3",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.18",
     "postcss-loader": "^7.0.1",
     "postcss-scss": "^4.0.5",
     "prettier": "^2.7.1",
+    "react-app-polyfill": "^3.0.0",
     "react-scripts": "^5.0.1",
     "rollup": "^3.2.5",
     "rollup-plugin-copy": "^3.4.0",

package/src/components/GridCell.tsx

@@ -68,7 +68,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(custom?.editor && {
-      cellClassRules: GridCellMultiSelectClassRules,
+      cellClassRules: custom.multiEdit ? GridCellMultiSelectClassRules : undefined,
       editable: props.editable ?? true,
       cellEditor: GenericCellEditorComponentWrapper(custom),
     }),

package/src/contexts/GridContextProvider.tsx

@@ -251,7 +251,10 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         async () => {
           // Need to refresh to get spinners to work on all rows
           gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
-          ok = await fnUpdate(selectedRows);
+          ok = await fnUpdate(selectedRows).catch((ex) => {
+            console.error("Exception during modifyUpdating", ex);
+            return false;
+          });
         },
       );
 

package/src/contexts/GridPopoverContextProvider.tsx

@@ -31,9 +31,7 @@ export const GridPopoverContextProvider = ({ props, children }: GridPopoverConte
     async (saveFn: (selectedRows: any[]) => Promise<boolean>, tabDirection: 1 | 0 | -1): Promise<boolean> => {
       if (hasSaved.current) return true;
       hasSaved.current = true;
-      const r = saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
-      //if (r) stopEditing();
-      return r;
+      return saving ? false : await updatingCells({ selectedRows, field }, saveFn, setSaving, tabDirection);
     },
     [field, saving, selectedRows, updatingCells],
   );

package/src/styles/GridTheme.scss

@@ -75,8 +75,6 @@
   }
 
   .ag-cell.ag-cell-inline-editing {
-    padding-left: 9px;
-    padding-right: 9px;
     bottom: 0;
   }
 
@@ -84,9 +82,11 @@
     word-break: break-word;
   }
 
-  .ag-cell-popup-editing,
-  .ag-selected-for-edit,
+  .ag-cell.ag-cell-popup-editing,
+  .ag-cell.ag-selected-for-edit,
   .ag-cell-inline-editing {
+    padding-left: 9px;
+    padding-right: 9px;
     background: rgb(72 160 244 / 20%);
     // These are important, it needs to override ag-grid to work
     border: 3px solid #48a0f4 !important;

package/src/utils/deferredPromise.ts

@@ -1,9 +1,16 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 export const useDeferredPromise = <T>() => {
   const promiseResolve = useRef<((value: T | PromiseLike<T>) => void) | undefined>();
   const promiseReject = useRef<() => void>();
 
+  // End promise on unload
+  useEffect(() => {
+    return () => {
+      promiseReject.current && promiseReject.current();
+    };
+  }, []);
+
   return {
     invoke: () =>
       new Promise<T>((resolve, reject) => {

package/src/utils/textValidator.test.ts

@@ -0,0 +1,95 @@
+import { TextInputValidator, TextInputValidatorProps } from "./textValidator";
+import { GridBaseRow } from "../components/Grid";
+
+describe("TextInputValidator", () => {
+  test("number format", () => {
+    const validate = [
+      {
+        numberFormat: {},
+        tests: [
+          ["x", "Must be a valid number"],
+          ["1.2e6", "Must be a valid number"],
+          ["", null],
+          ["1", null],
+          ["1.2", null],
+          [".2", null],
+          ["-1.2", null],
+          ["-.2", null],
+          ["-.2", null],
+        ],
+      },
+      {
+        numberFormat: { geMin: 0, leMax: 10 },
+        tests: [
+          ["x", "Must be a valid number"],
+          ["", null],
+          ["1", null],
+          ["0", null],
+          ["-1", "Must not be less than 0"],
+          ["10", null],
+          ["10.1", "Must not be greater than 10"],
+        ],
+      },
+      {
+        numberFormat: { gtMin: 0, ltMax: 10 },
+        tests: [
+          ["x", "Must be a valid number"],
+          ["", null],
+          ["1", null],
+          ["0", "Must be greater than 0"],
+          ["10", "Must be less than 10"],
+        ],
+      },
+      {
+        numberFormat: { precision: 2 },
+        tests: [
+          ["x", "Must be a valid number"],
+          ["", null],
+          ["1.22", null],
+          ["1.123", "Must have no more than 2 decimal places"],
+        ],
+      },
+      {
+        numberFormat: { precision: 0 },
+        tests: [
+          ["1", null],
+          ["1.1", "Must be a whole number"],
+        ],
+      },
+      {
+        required: true,
+        tests: [
+          ["xx", null],
+          ["", "Must not be empty"],
+        ],
+      },
+    ] as (TextInputValidatorProps<GridBaseRow> & { tests: [string, string | undefined][] })[];
+
+    validate.forEach((v, i) => {
+      for (const test of v.tests) {
+        expect(
+          TextInputValidator(v, test[0], { id: 0 }, {}),
+          `Test ${i}: "${test[0]}" should return "${test[1]}"`,
+        ).toBe(test[1]);
+      }
+    });
+  });
+
+  test("validator is called", () => {
+    const fn = jest.fn();
+    TextInputValidator({ invalid: fn }, "", { id: 0 }, {});
+    expect(fn).toHaveBeenCalled();
+  });
+
+  test("maxLength", () => {
+    expect(TextInputValidator({ maxLength: 2 }, "", { id: 0 }, {})).toBeNull();
+    expect(TextInputValidator({ maxLength: 2 }, "aa", { id: 0 }, {})).toBeNull();
+    expect(TextInputValidator({ maxLength: 2 }, "aaa", { id: 0 }, {})).toBe("Must be no longer than 2 characters");
+  });
+
+  test("maxBytes", () => {
+    expect(TextInputValidator({ maxBytes: 2 }, "", { id: 0 }, {})).toBeNull();
+    expect(TextInputValidator({ maxBytes: 2 }, "aa", { id: 0 }, {})).toBeNull();
+    expect(TextInputValidator({ maxBytes: 2 }, "a–", { id: 0 }, {})).toBe("Must be no longer than 2 bytes");
+  });
+});

package/src/utils/textValidator.ts

@@ -1,11 +1,18 @@
 import { GridBaseRow } from "../components/Grid";
-import { stringByteLengthIsInvalid } from "./util";
+import { isFloat, stringByteLengthIsInvalid } from "./util";
 
 export interface TextInputValidatorProps<RowType extends GridBaseRow> {
   required?: boolean;
   maxLength?: number;
   maxBytes?: number;
   invalid?: (value: string, data: RowType, context: any) => JSX.Element | string | null;
+  numberFormat?: {
+    precision?: number;
+    gtMin?: number;
+    geMin?: number;
+    ltMax?: number;
+    leMax?: number;
+  };
 }
 
 export const TextInputValidator = <RowType extends GridBaseRow>(
@@ -18,17 +25,40 @@ export const TextInputValidator = <RowType extends GridBaseRow>(
 
   // This can happen because subcomponent is invoked without type safety
   if (typeof value !== "string") {
-    console.error("Value is not a string", value);
-    return null;
+    return "Value is not a string";
   }
-  if (props.required && value.length === 0) {
-    return `Some text is required`;
+  if (props.required && value == "") {
+    return "Must not be empty";
   }
   if (props.maxLength && value.length > props.maxLength) {
-    return `Text must be no longer than ${props.maxLength} characters`;
+    return `Must be no longer than ${props.maxLength} characters`;
   }
   if (props.maxBytes && stringByteLengthIsInvalid(value, props.maxBytes)) {
-    return `Text must be no longer than ${props.maxLength} bytes`;
+    return `Must be no longer than ${props.maxBytes} bytes`;
+  }
+  const nf = props.numberFormat;
+  if (nf) {
+    if (value != "" && !isFloat(value)) {
+      return `Must be a valid number`;
+    }
+    const number = parseFloat(value);
+    if (nf.gtMin != null && number <= nf.gtMin) {
+      return `Must be greater than ${nf.gtMin}`;
+    }
+    if (nf.geMin != null && number < nf.geMin) {
+      return `Must not be less than ${nf.geMin}`;
+    }
+    if (nf.ltMax != null && number >= nf.ltMax) {
+      return `Must be less than ${nf.ltMax}`;
+    }
+    if (nf.leMax != null && number > nf.leMax) {
+      return `Must not be greater than ${nf.leMax}`;
+    }
+    if (nf.precision != null && value != "") {
+      if (parseFloat(number.toPrecision(nf.precision + 1)) != number) {
+        return nf.precision == 0 ? `Must be a whole number` : `Must have no more than ${nf.precision} decimal places`;
+      }
+    }
   }
   if (props.invalid) {
     return props.invalid(value, data, context);

package/src/utils/util.ts

@@ -8,7 +8,7 @@ export const wait = (timeoutMs: number) =>
   });
 
 export const isFloat = (value: string) => {
-  const regexp = /^-?\d+(\.\d+)?$/;
+  const regexp = /^-?\d*(\.\d+)?$/;
   return regexp.test(value);
 };