@linzjs/step-ag-grid 8.3.2 → 8.4.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "8.3.2",
+  "version": "8.4.1",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -122,6 +122,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.9.1",
     "jest": "^29.3.1",
+    "jest-canvas-mock": "^2.4.0",
     "jest-environment-jsdom": "^29.3.1",
     "jest-expect-message": "^1.1.3",
     "mkdirp": "^1.0.4",

package/src/components/GridCell.test.tsx

@@ -0,0 +1,33 @@
+import { GridBaseRow } from "./Grid";
+import { generateFilterGetter } from "./GridCell";
+import { RowValueGetterParams } from "./gridRender/GridRenderGenericCell";
+
+describe("GridCell", () => {
+  test("generateFilterGetter returns passed filterValueGetter", () => {
+    const filterValueGetter = () => "a";
+    expect(generateFilterGetter(undefined, filterValueGetter, () => "b")).toBe(filterValueGetter);
+    expect(generateFilterGetter("xxx", filterValueGetter, undefined)).toBe(filterValueGetter);
+    expect(generateFilterGetter(undefined, filterValueGetter, undefined)).toBe(filterValueGetter);
+  });
+
+  test("generateFilterGetter", () => {
+    expect(generateFilterGetter("xxx", undefined, undefined)).toBeUndefined();
+
+    const tests = [
+      { formatted: "f1", value: "v1", expected: "f1 v1" },
+      { formatted: "f2", value: {}, expected: "f2" },
+      { formatted: "", value: "v3", expected: "v3" },
+    ];
+
+    tests.forEach((test) => {
+      const field = "xxx";
+      const valueFormatter = test.formatted == null ? undefined : () => test.formatted;
+      const filterGetter = generateFilterGetter(field, undefined, valueFormatter);
+      expect(typeof filterGetter).toBe("function");
+      if (typeof filterGetter !== "function") return;
+      expect(filterGetter({ getValue: () => test.value } as any as RowValueGetterParams<GridBaseRow>)).toBe(
+        test.expected,
+      );
+    });
+  });
+});

package/src/components/GridCell.tsx

@@ -2,7 +2,12 @@ import { forwardRef, useContext } from "react";
 import { GridBaseRow } from "./Grid";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
-import { GenericCellColDef, GenericCellRendererParams } from "./gridRender/GridRenderGenericCell";
+import {
+  GenericCellColDef,
+  GenericCellRendererParams,
+  RowValueFormatterParams,
+  RowValueGetterParams,
+} from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
 import { GridIcon } from "./GridIcon";
@@ -22,23 +27,27 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
 
   const rendererParams = colDef.cellRendererParams as GenericCellRendererParams<any> | undefined;
   const warningFn = rendererParams?.warning;
-  const warningText = warningFn ? warningFn(props) : undefined;
+  let warningText = warningFn ? warningFn(props) : undefined;
   const infoFn = rendererParams?.info;
-  const infoText = infoFn ? infoFn(props) : undefined;
+  let infoText = infoFn ? infoFn(props) : undefined;
+  if (Array.isArray(warningText)) warningText = warningText.join("\n");
+  if (Array.isArray(infoText)) infoText = infoText.join("\n");
 
   return (
     <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
       <>
-        {typeof warningText === "string" && <GridIcon icon={"ic_warning_outline"} title={warningText} />}
-        {typeof infoText === "string" && <GridIcon icon={"ic_info_outline"} title={infoText} />}
+        {!!warningText && (
+          <GridIcon icon={"ic_warning_outline"} title={typeof warningText === "string" ? warningText : "Warning"} />
+        )}
+        {!!infoText && <GridIcon icon={"ic_info_outline"} title={typeof infoText === "string" ? infoText : "Info"} />}
         <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
-          {colDef?.cellRendererParams?.originalCellRenderer ? (
+          {colDef.cellRendererParams?.originalCellRenderer ? (
             <colDef.cellRendererParams.originalCellRenderer {...props} />
           ) : (
             <span title={props.valueFormatted}>{props.valueFormatted}</span>
           )}
         </div>
-        {fnOrVar(props.colDef?.editable, props) && rendererParams?.rightHoverElement && (
+        {fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (
           <div style={{ display: "flex", alignItems: "center" }}>{rendererParams?.rightHoverElement}</div>
         )}
       </>
@@ -66,6 +75,28 @@ export const suppressCellKeyboardEvents = (e: SuppressKeyboardEventParams) => {
   );
 };
 
+export const generateFilterGetter = <RowType extends GridBaseRow>(
+  field: string | undefined,
+  filterValueGetter: string | ((params: RowValueGetterParams<RowType>) => string) | undefined,
+  valueFormatter: string | ((params: RowValueFormatterParams<RowType>) => string) | undefined,
+) => {
+  if (filterValueGetter) return filterValueGetter;
+  // aggrid will default to valueGetter
+  if (typeof valueFormatter !== "function" || !field) return undefined;
+
+  return (params: RowValueGetterParams<RowType>) => {
+    const value = params.getValue(field);
+    let formattedValue = valueFormatter({ ...params, value });
+    // Search for null values using standard dash
+    if (formattedValue === "–") formattedValue += " -";
+    // Search by raw value as well as formatted
+    const gotValue = ["string", "number"].includes(typeof value) ? value : undefined;
+    return (formattedValue + (gotValue != null && formattedValue != gotValue ? " " + gotValue : "")) //
+      .replaceAll(/\s+/g, " ")
+      .trim();
+  };
+};
+
 /*
  * All cells should use this.
  */
@@ -77,6 +108,12 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     editorParams?: Props;
   },
 ): ColDefT<RowType> => {
+  // Generate a default filter value getter which uses the formatted value plus
+  // the editable value if it's a string and different from the formatted value.
+  // This is so that e.g. bearings can be searched for by DMS or raw number.
+  const valueFormatter = props.valueFormatter;
+  const filterValueGetter = generateFilterGetter(props.field, props.filterValueGetter, valueFormatter);
+
   return {
     colId: props.field,
     sortable: !!(props?.field || props?.valueGetter),
@@ -91,6 +128,8 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
     }),
+    // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
+    filterValueGetter,
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
       if (params.value == null) return "–";

package/src/components/gridForm/GridFormDropDown.tsx

@@ -300,7 +300,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                               setValue: (value: any) => {
                                 setSubSelectedValue(value);
                                 if (subComponentInitialValue.current === null) {
-                                  // copy the default value of the subcomponent so we can change detect on save
+                                  // copy the default value of the subcomponent, so we can change detect on save
                                   subComponentInitialValue.current = JSON.stringify(value);
                                 }
                               },

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -19,6 +19,9 @@ export interface RowEditableCallbackParams<RowType extends GridBaseRow> extends
 export interface RowValueFormatterParams<RowType extends GridBaseRow> extends ValueFormatterParams {
   data: RowType;
 }
+export interface RowValueGetterParams<RowType extends GridBaseRow> extends ValueGetterParams {
+  data: RowType;
+}
 
 export interface RowValueGetterParams<RowType extends GridBaseRow> extends ValueGetterParams {
   data: RowType;
@@ -29,6 +32,7 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
   cellRendererParams?: GenericCellRendererParams<RowType>;
   valueGetter?: string | ((params: RowValueGetterParams<RowType>) => any);
   valueFormatter?: string | ((params: RowValueFormatterParams<RowType>) => string);
+  filterValueGetter?: string | ((params: RowValueGetterParams<RowType>) => string);
   editable?: boolean | ((params: RowEditableCallbackParams<RowType>) => boolean);
 }
 
@@ -37,6 +41,6 @@ export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   rightHoverElement?: JSX.Element | undefined;
   editAction?: (selectedRows: RowType[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;
-  warning?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
-  info?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
+  warning?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
+  info?: (props: RowICellRendererParams<RowType>) => string | string[] | boolean | null | undefined;
 }

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

@@ -95,6 +95,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
 
   return (
     <Grid
+      quickFilter={true}
       data-testid={"bearingsTestTable"}
       {...props}
       readOnly={false}

package/dist/src/setupTests.d.ts

@@ -1 +0,0 @@
-import "@testing-library/jest-dom";

package/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";