@linzjs/step-ag-grid 11.0.0 → 12.0.0

package/package.json

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

package/src/components/Grid.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AgGridReact } from "ag-grid-react";
-import { CellClickedEvent, ColDef } from "ag-grid-community";
-import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
+import { CellClickedEvent, ColDef, ModelUpdatedEvent } from "ag-grid-community";
+import { AgGridEvent, CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, isEmpty, last, xorBy } from "lodash-es";
 import { GridContext } from "../contexts/GridContext";
@@ -20,16 +20,12 @@ export interface GridProps {
   readOnly?: boolean; // set all editables to false when read only, make all styles black, otherwise style is gray for not editable
   selectable?: boolean;
   ["data-testid"]?: string;
-  quickFilter?: boolean;
-  quickFilterPlaceholder?: string;
-  quickFilterValue?: string;
   domLayout?: GridOptions["domLayout"];
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
   defaultColDef?: GridOptions["defaultColDef"];
   columnDefs: ColDef[];
   rowData: GridOptions["rowData"];
-  noRowsOverlayText?: string;
   postSortRows?: GridOptions["postSortRows"];
   animateRows?: boolean;
   rowClassRules?: GridOptions["rowClassRules"];
@@ -47,7 +43,6 @@ export const Grid = (params: GridProps): JSX.Element => {
     gridReady,
     setGridApi,
     prePopupOps,
-    setQuickFilter,
     ensureRowVisible,
     selectRowsById,
     focusByRowById,
@@ -55,10 +50,11 @@ export const Grid = (params: GridProps): JSX.Element => {
     sizeColumnsToFit,
     externallySelectedItemsAreInSync,
     setExternallySelectedItemsAreInSync,
+    isExternalFilterPresent,
+    doesExternalFilterPass,
   } = useContext(GridContext);
   const { checkUpdating } = useContext(GridUpdatingContext);
 
-  const [internalQuickFilter, setInternalQuickFilter] = useState("");
   const lastSelectedIds = useRef<number[]>([]);
   const [staleGrid, setStaleGrid] = useState(false);
   const postSortRows = usePostSortRowsHook({ setStaleGrid });
@@ -142,26 +138,6 @@ export const Grid = (params: GridProps): JSX.Element => {
     setExternallySelectedItemsAreInSync(true);
   }, [gridReady, params.externalSelectedItems, ensureRowVisible, selectRowsById, setExternallySelectedItemsAreInSync]);
 
-  /**
-   * Synchronise quick filter to grid
-   */
-  const updateQuickFilter = useCallback(() => {
-    if (!gridReady) return;
-    if (params.quickFilter) {
-      setQuickFilter(internalQuickFilter);
-      return;
-    }
-    if (params.quickFilterValue == null) return;
-    setQuickFilter(params.quickFilterValue);
-  }, [gridReady, internalQuickFilter, params.quickFilter, params.quickFilterValue, setQuickFilter]);
-
-  /**
-   * Synchronise quick filter to grid
-   */
-  useEffect(() => {
-    updateQuickFilter();
-  }, [updateQuickFilter]);
-
   const combineEditables =
     (...editables: (boolean | EditableCallback | undefined)[]) =>
     (params: EditableCallbackParams): boolean => {
@@ -201,7 +177,7 @@ export const Grid = (params: GridProps): JSX.Element => {
             maxWidth: 42,
             suppressSizeToFit: true,
             checkboxSelection: true,
-            headerComponent: GridHeaderSelect,
+            headerComponent: params.rowSelection === "multiple" ? GridHeaderSelect : null,
             suppressHeaderKeyboardEvent: (e) => {
               if ((e.event.key === "Enter" || e.event.key === " ") && !e.event.repeat) {
                 const selectedNodeCount = e.api.getSelectedRows().length;
@@ -220,27 +196,37 @@ export const Grid = (params: GridProps): JSX.Element => {
         ]
       : adjustColDefs;
   }, [
-    clickSelectorCheckboxWhenContainingCellClicked,
     params.columnDefs,
     params.selectable,
+    params.rowSelection,
     params.readOnly,
-    params.defaultColDef,
+    params.defaultColDef?.editable,
+    clickSelectorCheckboxWhenContainingCellClicked,
   ]);
 
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
       setGridApi(event.api);
       synchroniseExternallySelectedItemsToGrid();
-      updateQuickFilter();
     },
-    [setGridApi, synchroniseExternallySelectedItemsToGrid, updateQuickFilter],
+    [setGridApi, synchroniseExternallySelectedItemsToGrid],
   );
 
   const noRowsOverlayComponent = useCallback(
-    () => <span>{params.noRowsOverlayText ?? "There are currently no rows"}</span>,
-    [params.noRowsOverlayText],
+    (event: AgGridEvent) => {
+      const hasData = (params.rowData?.length ?? 0) > 0;
+      const hasFilteredData = event.api.getDisplayedRowCount() > 0;
+      return (
+        <span>{!hasData ? "There are currently no rows" : !hasFilteredData ? "All rows have been filtered" : ""}</span>
+      );
+    },
+    [params.rowData?.length],
   );
 
+  const onModelUpdated = useCallback((event: ModelUpdatedEvent) => {
+    event.api.getDisplayedRowCount() === 0 ? event.api.showNoRowsOverlay() : event.api.hideOverlay();
+  }, []);
+
   const refreshSelectedRows = useCallback((event: CellEvent): void => {
     // Force-refresh all selected rows to re-run class function, to update selection highlighting
     event.api.refreshCells({
@@ -326,20 +312,6 @@ export const Grid = (params: GridProps): JSX.Element => {
         gridReady && params.rowData && "Grid-ready",
       )}
     >
-      {params.quickFilter && (
-        <div className="Grid-quickFilter">
-          <input
-            aria-label="Search"
-            className="lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox"
-            type="text"
-            placeholder={params.quickFilterPlaceholder ?? "Search..."}
-            value={internalQuickFilter}
-            onChange={(event): void => {
-              setInternalQuickFilter(event.target.value);
-            }}
-          />
-        </div>
-      )}
       <div style={{ flex: 1 }}>
         <AgGridReact
           animateRows={params.animateRows}
@@ -360,12 +332,15 @@ export const Grid = (params: GridProps): JSX.Element => {
           columnDefs={columnDefs}
           rowData={params.rowData}
           noRowsOverlayComponent={noRowsOverlayComponent}
+          onModelUpdated={onModelUpdated}
           onGridReady={onGridReady}
           onSortChanged={ensureSelectedRowIsVisible}
           postSortRows={params.postSortRows ?? postSortRows}
           onSelectionChanged={synchroniseExternalStateToGridSelection}
           onColumnMoved={params.onColumnMoved}
           alwaysShowVerticalScroll={params.alwaysShowVerticalScroll}
+          isExternalFilterPresent={isExternalFilterPresent}
+          doesExternalFilterPass={doesExternalFilterPass}
         />
       </div>
     </div>

package/src/components/GridFilter.ts

@@ -0,0 +1,12 @@
+import { useContext, useEffect } from "react";
+import { GridContext, GridFilterExternal } from "../contexts/GridContext";
+
+export const useGridFilter = (filter: GridFilterExternal) => {
+  const { addExternalFilter, removeExternalFilter } = useContext(GridContext);
+
+  useEffect(() => {
+    const thisFilter = filter;
+    addExternalFilter(thisFilter);
+    return () => removeExternalFilter(thisFilter);
+  }, [addExternalFilter, filter, removeExternalFilter]);
+};

package/src/components/GridWrapper.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export interface GridWrapperProps {
+  children: ReactNode;
+  maxHeight?: number | string;
+}
+
+export const GridWrapper = ({ children, maxHeight }: GridWrapperProps) => (
+  <div className={"Grid-wrapper"} style={{ maxHeight }}>
+    {children}
+  </div>
+);

package/src/components/gridFilter/GridFilterQuick.tsx

@@ -0,0 +1,29 @@
+import { useContext, useEffect, useState } from "react";
+import { GridContext } from "../../contexts/GridContext";
+
+export interface GridFilterQuickProps {
+  quickFilterPlaceholder?: string;
+  defaultValue?: string;
+}
+
+export const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }: GridFilterQuickProps) => {
+  const { setQuickFilter } = useContext(GridContext);
+  const [quickFilterValue, setQuickFilterValue] = useState(defaultValue ?? "");
+
+  useEffect(() => {
+    setQuickFilter(quickFilterValue);
+  }, [quickFilterValue, setQuickFilter]);
+
+  return (
+    <input
+      aria-label="Search"
+      className="lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox"
+      type="text"
+      placeholder={quickFilterPlaceholder ?? "Search..."}
+      value={quickFilterValue}
+      onChange={(event): void => {
+        setQuickFilterValue(event.target.value);
+      }}
+    />
+  );
+};

package/src/components/gridFilter/GridFilters.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+export interface GridFiltersProps {
+  children: ReactNode;
+}
+
+export const GridFilters = ({ children }: GridFiltersProps) => <div className="Grid-container-filters">{children}</div>;

package/src/contexts/GridContext.tsx

@@ -2,6 +2,8 @@ import { createContext } from "react";
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridBaseRow } from "../components/Grid";
 
+export type GridFilterExternal = (data: any, rowNode: RowNode) => boolean;
+
 export interface GridContextType {
   gridReady: boolean;
   setGridApi: (gridApi: GridApi | undefined) => void;
@@ -31,6 +33,10 @@ export interface GridContextType {
   externallySelectedItemsAreInSync: boolean;
   setExternallySelectedItemsAreInSync: (inSync: boolean) => void;
   waitForExternallySelectedItemsToBeInSync: () => Promise<void>;
+  addExternalFilter: (filter: GridFilterExternal) => void;
+  removeExternalFilter: (filter: GridFilterExternal) => void;
+  isExternalFilterPresent: () => boolean;
+  doesExternalFilterPass: (node: RowNode) => boolean;
 }
 
 export const GridContext = createContext<GridContextType>({
@@ -104,4 +110,18 @@ export const GridContext = createContext<GridContextType>({
   waitForExternallySelectedItemsToBeInSync: async () => {
     console.error("no context provider for waitForExternallySelectedItemsToBeInSync");
   },
+  addExternalFilter: () => {
+    console.error("no context provider for addExternalFilter");
+  },
+  removeExternalFilter: () => {
+    console.error("no context provider for removeExternalFilter");
+  },
+  isExternalFilterPresent: () => {
+    console.error("no context provider for isExternalFilterPresent");
+    return false;
+  },
+  doesExternalFilterPass: () => {
+    console.error("no context provider for doesExternalFilterPass");
+    return true;
+  },
 });

package/src/contexts/GridContextProvider.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, ReactNode, useCallback, useContext, useRef, useState } from "react";
+import { ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ColDef, GridApi, RowNode } from "ag-grid-community";
-import { GridContext } from "./GridContext";
-import { defer, delay, difference, isEmpty, last, sortBy } from "lodash-es";
+import { GridContext, GridFilterExternal } from "./GridContext";
+import { debounce, defer, delay, difference, isEmpty, last, remove, sortBy } from "lodash-es";
 import { isNotEmpty, wait } from "../utils/util";
 import { GridUpdatingContext } from "./GridUpdatingContext";
 import { GridBaseRow } from "../components/Grid";
@@ -20,14 +20,30 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
   const { modifyUpdating } = useContext(GridUpdatingContext);
   const [gridApi, _setGridApi] = useState<GridApi>();
   const [gridReady, setGridReady] = useState(false);
+  const [quickFilter, setQuickFilter] = useState("");
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
+  const externalFilters = useRef<GridFilterExternal[]>([]);
 
-  const setGridApi = useCallback((gridApi: GridApi | undefined) => {
-    _setGridApi(gridApi);
-    setGridReady(!!gridApi);
-  }, []);
+  /**
+   * Set quick filter directly on grid, based on previously save quickFilter state.
+   */
+  useEffect(() => {
+    gridApi?.setQuickFilter(quickFilter);
+  }, [gridApi, quickFilter]);
+
+  /**
+   * Set the grid api when the grid is ready.
+   */
+  const setGridApi = useCallback(
+    (gridApi: GridApi | undefined) => {
+      _setGridApi(gridApi);
+      gridApi?.setQuickFilter(quickFilter);
+      setGridReady(!!gridApi);
+    },
+    [quickFilter],
+  );
 
   /**
    * Wraps things that require gridApi in common handling, for when gridApi not present.
@@ -52,16 +68,6 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     prePopupFocusedCell.current = gridApi?.getFocusedCell() ?? undefined;
   }, [gridApi]);
 
-  /**
-   * Set the quick filter value to grid.
-   */
-  const setQuickFilter = useCallback(
-    (quickFilter: string) => {
-      gridApiOp((gridApi) => gridApi.setQuickFilter(quickFilter));
-    },
-    [gridApiOp],
-  );
-
   /**
    * Get all row id's in grid.
    */
@@ -376,6 +382,30 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     }
   }, [externallySelectedItemsAreInSync]);
 
+  const onFilterChanged = useMemo(
+    () =>
+      debounce(() => {
+        gridApi && gridApi.onFilterChanged();
+      }, 200),
+    [gridApi],
+  );
+
+  const addExternalFilter = (filter: GridFilterExternal) => {
+    externalFilters.current.push(filter);
+    onFilterChanged();
+  };
+
+  const removeExternalFilter = (filter: GridFilterExternal) => {
+    remove(externalFilters.current, (v) => v === filter);
+    onFilterChanged();
+  };
+
+  const isExternalFilterPresent = (): boolean => externalFilters.current.length > 0;
+
+  const doesExternalFilterPass = (node: RowNode): boolean => {
+    return externalFilters.current.every((filter) => filter(node.data, node));
+  };
+
   return (
     <GridContext.Provider
       value={{
@@ -402,6 +432,10 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         externallySelectedItemsAreInSync,
         setExternallySelectedItemsAreInSync,
         waitForExternallySelectedItemsToBeInSync,
+        addExternalFilter,
+        removeExternalFilter,
+        isExternalFilterPresent,
+        doesExternalFilterPass,
       }}
     >
       {props.children}

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

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

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -7,15 +7,18 @@ import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/clien
 import { GridUpdatingContextProvider } from "../../contexts/GridUpdatingContextProvider";
 import { GridContextProvider } from "../../contexts/GridContextProvider";
 import { Grid, GridProps } from "../../components/Grid";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { wait } from "../../utils/util";
 import { GridPopoverMenu } from "../../components/gridPopoverEdit/GridPopoverMenu";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopoverMessage";
-import { MenuOption } from "../../components/gridForm/GridFormPopoverMenu";
 import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
 import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
 import { GridIcon } from "../../components/GridIcon";
+import { useGridFilter } from "../../components/GridFilter";
+import { GridFilterQuick } from "../../components/gridFilter/GridFilterQuick";
+import { GridFilters } from "../../components/gridFilter/GridFilters";
+import { GridWrapper } from "../../components/GridWrapper";
 
 export default {
   title: "Components / Grids",
@@ -29,7 +32,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1024, height: 400 }}>
+      <div style={{ width: 1024, height: 400, display: "flex", flexDirection: "column" }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -173,7 +176,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                     <GridFormSubComponentTextArea placeholder={"Other"} maxLength={5} required defaultValue={""} />
                   ),
                 },
-              ] as MenuOption<ITestRow>[];
+              ];
             },
           },
         },
@@ -201,17 +204,46 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   ]);
 
   return (
-    <Grid
-      {...props}
-      selectable={true}
-      externalSelectedItems={externalSelectedItems}
-      setExternalSelectedItems={setExternalSelectedItems}
-      columnDefs={columnDefs}
-      rowData={rowData}
-      domLayout={"autoHeight"}
-      autoSelectFirstRow={true}
-    />
+    <GridWrapper maxHeight={200}>
+      <GridFilters>
+        <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
+        <div>
+          Custom filter: Age less than:
+          <GridFilterLessThan field={"age"} />
+        </div>
+      </GridFilters>
+      <Grid
+        {...props}
+        selectable={true}
+        autoSelectFirstRow={true}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+      />
+    </GridWrapper>
   );
 };
 
+const GridFilterLessThan = (props: { field: keyof ITestRow }): JSX.Element => {
+  const [value, setValue] = useState<number>();
+
+  const filter = useCallback(
+    (data: ITestRow): boolean => value == null || data[props.field] < value,
+    [props.field, value],
+  );
+
+  useGridFilter(filter);
+
+  const updateValue = (newValue: string) => {
+    try {
+      setValue(newValue.trim() == "" ? undefined : parseInt(newValue));
+    } catch {
+      // ignore number parse exception
+    }
+  };
+
+  return <input type={"text"} defaultValue={value} onChange={(e) => updateValue(e.target.value)} />;
+};
+
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.stories.tsx

@@ -27,23 +27,26 @@ const updateValue = jest
   .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
 
 const onSave = jest.fn<Promise<boolean>, [GridFormMultiSelectSaveProps<any>]>().mockImplementation(async () => true);
+const onSelectFilter = jest.fn();
 
-const options = Object.freeze([
-  { label: "Zero", value: 0 },
-  { label: "One", value: 1 },
-  {
-    label: "Sub component",
-    value: 2,
-    subComponent: () => (
-      <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
-    ),
-  },
-  { label: "Other", value: 3 },
-]) as MultiSelectOption[];
-
+let options: MultiSelectOption[] = [];
 const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
+  options = [
+    { label: "Zero", value: 0 },
+    { label: "One", value: 1 },
+    {
+      label: "Sub component",
+      value: 2,
+      subComponent: () => (
+        <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+      ),
+    },
+    { label: "Other", value: 3 },
+  ];
   const config: GridFormMultiSelectProps<any> = {
     filtered: true,
+    onSelectFilter,
+    filterHelpText: "Press enter to add free-text",
     onSave,
     options,
   };
@@ -76,6 +79,10 @@ const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
 
 export const GridFormMultiSelectInteractions_ = Template.bind({});
 GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
+  updateValue.mockClear();
+  onSave.mockClear();
+  onSelectFilter.mockClear();
+
   const canvas = within(canvasElement);
 
   const getOption = (name: RegExp | string) => canvas.findByRole("menuitem", { name });
@@ -150,4 +157,30 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   expect(canvas.queryByText("Zero")).not.toBeInTheDocument();
   expect(canvas.queryByText("Sub component")).not.toBeInTheDocument();
   expect(canvas.queryByText("Other")).not.toBeInTheDocument();
+
+  userEvent.type(filterText, "x");
+  expect(canvas.queryByText("One")).not.toBeInTheDocument();
+  expect(canvas.queryByText("No Options")).toBeInTheDocument();
+
+  // Check enter works to add custom free-text
+  userEvent.type(filterText, "{Enter}");
+  expect(onSelectFilter).toHaveBeenCalledWith({
+    filter: "onx",
+    options: [
+      {
+        ...options[0],
+        checked: true,
+      },
+      {
+        ...options[1],
+      },
+      {
+        ...options[2],
+        checked: true,
+      },
+      {
+        ...options[3],
+      },
+    ],
+  });
 };

package/src/styles/Grid.scss

@@ -9,6 +9,12 @@
   flex-direction: column;
 }
 
+.Grid-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 .Grid-sortIsStale {
   span.ag-icon.ag-icon-desc::after {
     content: "*";
@@ -19,12 +25,16 @@
   }
 }
 
-.Grid-quickFilter {
+.Grid-container-filters {
   width: 100%;
   margin-bottom: 16px;
   flex: 0;
+  display: flex;
+  flex-direction: row;
+  grid-column-gap: 1em;
 }
 
+
 .Grid-quickFilterBox {
   width: 100%;
   height: 48px;