@linzjs/step-ag-grid 8.4.0 → 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.4.0",
+  "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,8 +2,13 @@ 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 { ColDef, ICellEditorParams, ICellRendererParams, ValueGetterFunc } from "ag-grid-community";
+import {
+  GenericCellColDef,
+  GenericCellRendererParams,
+  RowValueFormatterParams,
+  RowValueGetterParams,
+} from "./gridRender/GridRenderGenericCell";
+import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
 import { GridIcon } from "./GridIcon";
 import { SuppressKeyboardEventParams, ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
@@ -36,13 +41,13 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
         )}
         {!!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>
         )}
       </>
@@ -70,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.
  */
@@ -81,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),
@@ -96,10 +129,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },
     }),
     // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
-    ...(props.valueFormatter &&
-      !props.filterValueGetter && {
-        filterValueGetter: props.valueFormatter as string | ValueGetterFunc,
-      }),
+    filterValueGetter,
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
       if (params.value == null) return "–";

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);
 }
 

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";