@linzjs/step-ag-grid 13.1.2 → 13.2.0

package/package.json

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

package/src/components/Grid.tsx

@@ -1,7 +1,7 @@
 import { CellClickedEvent, ColDef, ModelUpdatedEvent } from "ag-grid-community";
 import { CellClassParams, EditableCallback, EditableCallbackParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
-import { AgGridEvent, CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
+import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { AgGridReact } from "ag-grid-react";
 import clsx from "clsx";
 import { difference, isEmpty, last, xorBy } from "lodash-es";
@@ -10,6 +10,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "r
 import { GridContext } from "../contexts/GridContext";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 import { fnOrVar, isNotEmpty } from "../utils/util";
+import { GridNoRowsOverlay } from "./GridNoRowsOverlay";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { GridHeaderSelect } from "./gridHeader";
 
@@ -35,12 +36,20 @@ export interface GridProps {
   autoSelectFirstRow?: boolean;
   onColumnMoved?: GridOptions["onColumnMoved"];
   alwaysShowVerticalScroll?: boolean;
+  onGridSizeChanged: GridOptions["onGridSizeChanged"];
+  onFirstDataRendered: GridOptions["onFirstDataRendered"];
+  suppressColumnVirtualization: GridOptions["suppressColumnVirtualisation"];
 }
 
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export const Grid = ({ rowSelection = "multiple", "data-testid": dataTestId, ...params }: GridProps): JSX.Element => {
+export const Grid = ({
+  "data-testid": dataTestId,
+  rowSelection = "multiple",
+  suppressColumnVirtualization = true,
+  ...params
+}: GridProps): JSX.Element => {
   const {
     gridReady,
     setApis,
@@ -213,23 +222,6 @@ export const Grid = ({ rowSelection = "multiple", "data-testid": dataTestId, ...
     [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid],
   );
 
-  const noRowsOverlayComponent = useCallback(
-    (event: AgGridEvent) => {
-      const hasData = (params.rowData?.length ?? 0) > 0;
-      const hasFilteredData = event.api.getDisplayedRowCount() > 0;
-      return (
-        <span>
-          {!hasData
-            ? params.noRowsOverlayText ?? "There are currently no rows"
-            : !hasFilteredData
-            ? "All rows have been filtered"
-            : ""}
-        </span>
-      );
-    },
-    [params.noRowsOverlayText, params.rowData?.length],
-  );
-
   const onModelUpdated = useCallback((event: ModelUpdatedEvent) => {
     event.api.getDisplayedRowCount() === 0 ? event.api.showNoRowsOverlay() : event.api.hideOverlay();
   }, []);
@@ -328,8 +320,9 @@ export const Grid = ({ rowSelection = "multiple", "data-testid": dataTestId, ...
           rowSelection={rowSelection}
           suppressBrowserResizeObserver={true}
           colResizeDefault={"shift"}
-          onFirstDataRendered={sizeColumnsToFit}
-          onGridSizeChanged={sizeColumnsToFit}
+          onFirstDataRendered={params.onFirstDataRendered ?? sizeColumnsToFit}
+          onGridSizeChanged={params.onGridSizeChanged ?? sizeColumnsToFit}
+          suppressColumnVirtualisation={suppressColumnVirtualization}
           suppressClickEdit={true}
           onCellKeyPress={onCellKeyPress}
           onCellClicked={onCellClicked}
@@ -338,7 +331,8 @@ export const Grid = ({ rowSelection = "multiple", "data-testid": dataTestId, ...
           domLayout={params.domLayout}
           columnDefs={columnDefs}
           rowData={params.rowData}
-          noRowsOverlayComponent={noRowsOverlayComponent}
+          noRowsOverlayComponent={GridNoRowsOverlay}
+          noRowsOverlayComponentParams={{ rowData: params.rowData, noRowsOverlayText: params.noRowsOverlayText }}
           onModelUpdated={onModelUpdated}
           onGridReady={onGridReady}
           onSortChanged={ensureSelectedRowIsVisible}

package/src/components/GridNoRowsOverlay.tsx

@@ -0,0 +1,12 @@
+import { isEmpty } from "lodash-es";
+
+export const GridNoRowsOverlay = (params: {
+  rowData: any[] | null | undefined;
+  noRowsOverlayText: string | undefined;
+}) => (
+  <span>
+    {isEmpty(params.rowData)
+      ? params.noRowsOverlayText ?? "There are currently no rows"
+      : "All rows have been filtered"}
+  </span>
+);

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./gridForm";
 export * from "./gridHeader";
 export * from "./GridIcon";
 export * from "./GridLoadableCell";
+export * from "./GridNoRowsOverlay";
 export * from "./gridPopoverEdit";
 export * from "./GridPopoverHook";
 export * from "./gridRender";

package/src/stories/grid/GridNoRowsOverlay.stories.tsx

@@ -0,0 +1,36 @@
+import { expect } from "@storybook/jest";
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { within } from "@storybook/testing-library";
+
+import "@linzjs/lui/dist/fonts";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { GridNoRowsOverlay } from "../../components";
+
+export default {
+  title: "Components / Grids / GridNoRowsOverlay",
+  component: GridNoRowsOverlay,
+  args: {},
+} as ComponentMeta<typeof GridNoRowsOverlay>;
+
+const GridNoRowsOverlayTemplate: ComponentStory<typeof GridNoRowsOverlay> = (params) => {
+  return <GridNoRowsOverlay {...params} />;
+};
+
+export const GridNoRowsEmpty = GridNoRowsOverlayTemplate.bind({});
+GridNoRowsEmpty.args = {
+  rowData: [],
+};
+GridNoRowsEmpty.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  expect(await canvas.findByText("There are currently no rows")).toBeInTheDocument();
+};
+
+export const GridNoRowsFiltered = GridNoRowsOverlayTemplate.bind({});
+GridNoRowsFiltered.args = {
+  rowData: [{}],
+};
+GridNoRowsFiltered.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  expect(await canvas.findByText("All rows have been filtered")).toBeInTheDocument();
+};

package/src/stories/grid/{GridKeyboardInteractions.stories.tsx → interactions/GridKeyboardInteractions.stories.tsx}

@@ -20,9 +20,9 @@ import {
   GridUpdatingContextProvider,
   MenuOption,
   wait,
-} from "../..";
-import "../../styles/GridTheme.scss";
-import "../../styles/index.scss";
+} from "../../../";
+import "../../../styles/GridTheme.scss";
+import "../../../styles/index.scss";
 
 export default {
   title: "Components / Grids",