@linzjs/step-ag-grid 7.5.2 → 7.6.1

package/package.json

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

package/src/components/Grid.tsx

@@ -7,15 +7,17 @@ import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
 import { GridContext } from "../contexts/GridContext";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
-import { isNotEmpty } from "../utils/util";
+import { fnOrVar, isNotEmpty } from "../utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
+import { CellClassParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export interface GridBaseRow {
   id: string | number;
 }
 
 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;
@@ -124,26 +126,35 @@ export const Grid = (params: GridProps): JSX.Element => {
     synchroniseExternallySelectedItemsToGrid();
   }, [synchroniseExternallySelectedItemsToGrid]);
 
-  const columnDefs = useMemo(
-    (): GridOptions["columnDefs"] =>
-      params.selectable
-        ? [
-            {
-              colId: "selection",
-              editable: false,
-              initialWidth: 35,
-              minWidth: 35,
-              maxWidth: 35,
-              suppressSizeToFit: true,
-              checkboxSelection: true,
-              headerComponent: GridHeaderSelect,
-              onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
-            },
-            ...(params.columnDefs as ColDef[]),
-          ]
-        : [...(params.columnDefs as ColDef[])],
-    [clickSelectorCheckboxWhenContainingCellClicked, params.columnDefs, params.selectable],
-  );
+  const columnDefs = useMemo((): GridOptions["columnDefs"] => {
+    const adjustColDefs = (params.columnDefs as ColDef[]).map((colDef) => {
+      return {
+        ...colDef,
+        editable: params.readOnly ? false : colDef.editable,
+        cellClassRules: {
+          ...colDef.cellClassRules,
+          "GridCell-readonly": (ccp: CellClassParams) =>
+            params.readOnly != null && !params.readOnly && !fnOrVar(colDef.editable, ccp),
+        },
+      };
+    });
+    return params.selectable
+      ? [
+          {
+            colId: "selection",
+            editable: false,
+            initialWidth: 35,
+            minWidth: 35,
+            maxWidth: 35,
+            suppressSizeToFit: true,
+            checkboxSelection: true,
+            headerComponent: GridHeaderSelect,
+            onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
+          },
+          ...adjustColDefs,
+        ]
+      : adjustColDefs;
+  }, [clickSelectorCheckboxWhenContainingCellClicked, params.columnDefs, params.selectable, params.readOnly]);
 
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
@@ -176,6 +187,7 @@ export const Grid = (params: GridProps): JSX.Element => {
       if (checkUpdating([event.colDef.field ?? ""], event.data.id)) {
         return;
       }
+
       if (event.rowIndex !== null) {
         event.api.startEditingCell({
           rowIndex: event.rowIndex,
@@ -188,7 +200,13 @@ export const Grid = (params: GridProps): JSX.Element => {
 
   const onCellDoubleClick = useCallback(
     (event: CellEvent) => {
-      if (!event.colDef?.cellRendererParams?.singleClickEdit) {
+      const editable = fnOrVar(event.colDef?.editable, event);
+      if (!editable) return;
+      const editAction = event.colDef?.cellRendererParams?.editAction;
+      if (editAction) {
+        // Clicked row comes first in selected rows
+        editAction([event.data, ...event.api.getSelectedRows().filter((row) => row.id !== event.data.id)]);
+      } else if (!event.colDef?.cellRendererParams?.singleClickEdit) {
         startCellEditing(event);
       }
     },

package/src/components/GridCell.tsx

@@ -2,16 +2,13 @@ import { forwardRef, useContext } from "react";
 import { GridBaseRow } from "./Grid";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
-import {
-  GenericCellColDef,
-  GenericCellRendererParams,
-  GridRendererGenericCell,
-} from "./gridRender/GridRenderGenericCell";
+import { GenericCellColDef, GenericCellRendererParams } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
 import { GridIcon } from "./GridIcon";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
+import { fnOrVar } from "../utils/util";
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
@@ -29,16 +26,23 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   const infoFn = rendererParams?.info;
   const infoText = infoFn ? infoFn(props) : undefined;
 
-  return colDef?.cellRendererParams?.originalCellRenderer ? (
+  return (
     <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
       <>
         {typeof warningText === "string" && <GridIcon icon={"ic_warning"} title={warningText} />}
         {typeof infoText === "string" && <GridIcon icon={"ic_info"} title={infoText} />}
-        <colDef.cellRendererParams.originalCellRenderer {...props} />
+        <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+          {colDef?.cellRendererParams?.originalCellRenderer ? (
+            <colDef.cellRendererParams.originalCellRenderer {...props} />
+          ) : (
+            <span title={props.valueFormatted}>{props.valueFormatted}</span>
+          )}
+        </div>
+        {fnOrVar(props.colDef?.editable, props) && rendererParams?.editableIcon && (
+          <div style={{ display: "flex", alignItems: "center" }}>{rendererParams?.editableIcon}</div>
+        )}
       </>
     </GridLoadableCell>
-  ) : (
-    <GridRendererGenericCell {...props} />
   );
 };
 
@@ -98,9 +102,18 @@ export interface CellEditorCommon {
 
 export const GenericCellEditorComponentWrapper = (custom?: { editor?: (props: any) => JSX.Element }) => {
   return forwardRef(function GenericCellEditorComponentFr(cellEditorParams: ICellEditorParams, _) {
+    const valueFormatted = cellEditorParams.formatValue
+      ? cellEditorParams.formatValue(cellEditorParams.value)
+      : "Missing formatter";
     return (
       <GridPopoverContextProvider props={cellEditorParams}>
-        {<cellEditorParams.colDef.cellRenderer {...cellEditorParams} {...cellEditorParams.colDef.cellRendererParams} />}
+        {
+          <cellEditorParams.colDef.cellRenderer
+            {...cellEditorParams}
+            valueFormatted={valueFormatted}
+            {...cellEditorParams.colDef.cellRendererParams}
+          />
+        }
         {custom?.editor && <custom.editor {...cellEditorParams} />}
       </GridPopoverContextProvider>
     );

package/src/components/GridIcon.tsx

@@ -1,12 +1,23 @@
-import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import clsx from "clsx";
 import { LuiIcon } from "@linzjs/lui";
+import { IconName, IconSize } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 
-export const GridIcon = (props: { icon: IconName; title: string }): JSX.Element => (
+export const GridIcon = (props: {
+  icon: IconName;
+  title: string;
+  size?: IconSize;
+  disabled?: boolean;
+  className?: string;
+}): JSX.Element => (
   <LuiIcon
     name={props.icon}
     title={props.title}
     alt={props.title}
-    size={"md"}
-    className={`AgGridGenericCellRenderer-${props.icon}Icon`}
+    size={props.size ?? "md"}
+    className={clsx(
+      `AgGridGenericCellRenderer-${props.icon}Icon`,
+      props.className,
+      props.disabled && "GridIcon-disabled",
+    )}
   />
 );

package/src/components/GridLoadableCell.tsx

@@ -1,25 +1,12 @@
-import "./GridLoadableCell.scss";
-
-import { LuiMiniSpinner } from "@linzjs/lui";
 import clsx from "clsx";
+import { LuiMiniSpinner } from "@linzjs/lui";
 
-export const GridLoadableCell = (props: {
-  isLoading: boolean;
-  dataTestId?: string;
-  children: JSX.Element | string;
-  className?: string;
-}): JSX.Element => {
-  if (props.isLoading) {
-    return (
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <LuiMiniSpinner size={22} divProps={{ role: "status", "aria-label": "Loading", style: { marginBottom: 4 } }} />
-      </div>
-    );
-  }
-  // only add test id into ONE of the columns in a grid. this way each row will have one unique id :)
-  return (
-    <div data-testid={props.dataTestId} className={clsx("GridLoadableCell-container", props.className)}>
-      {props.children}
-    </div>
-  );
-};
+export const GridLoadableCell = (props: { isLoading: boolean; children: JSX.Element | string; className?: string }) => (
+  <div className={clsx("GridLoadableCell-container", props.className)}>
+    {props.isLoading ? (
+      <LuiMiniSpinner size={22} divProps={{ role: "status", "aria-label": "Loading", style: { marginBottom: 4 } }} />
+    ) : (
+      props.children
+    )}
+  </div>
+);

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,5 +1,3 @@
-import "../../styles/GridFormDropDown.scss";
-
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
 import { KeyboardEvent, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -1,5 +1,3 @@
-import "../../styles/GridFormEditBearing.scss";
-
 import { useCallback, useMemo, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,5 +1,3 @@
-import "../../styles/GridFormMultiSelect.scss";
-
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
 import {
   useCallback,

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,5 +1,3 @@
-import "./GridPopoverMenu.scss";
-
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormPopoverMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoverMenu";

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,10 +1,4 @@
-import "../../styles/GridRenderGenericCell.scss";
-
-import { useContext } from "react";
-import { GridUpdatingContext } from "../../contexts/GridUpdatingContext";
-import { GridLoadableCell } from "../GridLoadableCell";
-import { GridIcon } from "../GridIcon";
-import { ColDef, ICellRendererParams } from "ag-grid-community";
+import { ICellRendererParams } from "ag-grid-community";
 import { GridBaseRow } from "../Grid";
 import { ColDefT } from "../GridCell";
 
@@ -18,31 +12,8 @@ export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   singleClickEdit?: boolean;
+  editableIcon?: JSX.Element | undefined;
+  editAction?: (selectedRows: RowType[]) => void;
   warning?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
   info?: (props: RowICellRendererParams<RowType>) => string | boolean | null | undefined;
 }
-
-export const GridRendererGenericCell = <RowType extends GridBaseRow>(props: ICellRendererParams): JSX.Element => {
-  const { checkUpdating } = useContext(GridUpdatingContext);
-
-  const colDef = props.colDef as ColDef;
-  const cellRendererParams = colDef.cellRendererParams as GenericCellRendererParams<RowType> | undefined;
-  const warningFn = cellRendererParams?.warning;
-  const warningText = warningFn ? warningFn(props) : undefined;
-  const infoFn = cellRendererParams?.info;
-  const infoText = infoFn ? infoFn(props) : undefined;
-
-  const defaultFormatter = (value: any): string => value;
-  const formatter = props.formatValue ?? defaultFormatter;
-  const formatted = formatter(props.value);
-
-  return (
-    <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
-      <>
-        {typeof warningText === "string" && <GridIcon icon={"ic_warning"} title={warningText} />}
-        {typeof infoText === "string" && <GridIcon icon={"ic_info"} title={infoText} />}
-        <span title={formatted}>{formatted}</span>
-      </>
-    </GridLoadableCell>
-  );
-};

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -1,32 +1,16 @@
-import { useContext } from "react";
-import { ColDef, ICellRendererParams } from "ag-grid-community";
-import { GridUpdatingContext } from "../../contexts/GridUpdatingContext";
-import { GridLoadableCell } from "../GridLoadableCell";
+import { ICellRendererParams } from "ag-grid-community";
 import { LuiIcon } from "@linzjs/lui";
-import { Column } from "ag-grid-community/dist/lib/entities/column";
+import { fnOrVar } from "../../utils/util";
 
 export const GridRenderPopoutMenuCell = (props: ICellRendererParams) => {
-  const { checkUpdating } = useContext(GridUpdatingContext);
-  const isLoading = checkUpdating(props.colDef?.field ?? "", props.data.id);
-  const editable = props.colDef?.editable;
-  const disabled = !(typeof editable === "function"
-    ? editable({
-        node: props.node,
-        data: props.data,
-        column: props.column as Column,
-        colDef: props.colDef as ColDef,
-        api: props.api,
-        columnApi: props.columnApi,
-        context: props.context,
-      })
-    : editable);
+  const disabled = !fnOrVar(props.colDef?.editable, props);
 
   return (
-    <GridLoadableCell
-      isLoading={isLoading}
+    <LuiIcon
+      name={"ic_more_vert"}
+      alt={"More actions"}
+      size={"md"}
       className={disabled ? `GridPopoutMenu-burgerDisabled` : `GridPopoutMenu-burger`}
-    >
-      <LuiIcon name={"ic_more_vert"} alt={"More actions"} size={"md"} />
-    </GridLoadableCell>
+    />
   );
 };

package/src/index.ts

@@ -45,4 +45,5 @@ export * from "./lui/ActionButton";
 
 export * from "./utils/bearing";
 export * from "./utils/util";
+export * from "./utils/deferredPromise";
 export * from "./utils/testUtil";

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

@@ -15,6 +15,7 @@ import { GridPopoverMessage } from "../../components/gridPopoverEdit/GridPopover
 import { MenuOption } from "../../components/gridForm/GridFormPopoverMenu";
 import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
 import { GridFormSubComponentTextArea } from "../../components/gridForm/GridFormSubComponentTextArea";
+import { GridIcon } from "../../components/GridIcon";
 
 export default {
   title: "Components / Grids",
@@ -81,8 +82,8 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       GridPopoverMessage(
         {
           headerName: "Popout message",
-          maxWidth: 200,
-          cellRenderer: () => <>Click me!</>,
+          maxWidth: 150,
+          cellRenderer: () => <>Single Click me!</>,
         },
         {
           multiEdit: true,
@@ -94,6 +95,18 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
           },
         },
       ),
+      GridCell({
+        headerName: "Custom edit",
+        maxWidth: 100,
+        editable: true,
+        valueFormatter: () => "Double click me!",
+        cellRendererParams: {
+          editableIcon: <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />,
+          editAction: (selectedRows) => {
+            alert(`Custom edit ${selectedRows.length} row(s) selected`);
+          },
+        },
+      }),
       GridPopoverMenu(
         {},
         {
@@ -155,7 +168,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       ),
       GridPopoverMenu(
         {
-          editable: false,
+          editable: () => false,
         },
         {
           editorParams: {

package/src/styles/Grid.scss

@@ -35,19 +35,31 @@
   padding: 4px 8px;
 }
 
+.GridCell-editableIcon {
+  fill: colors.$silver;
+}
+
 .GridFormMessage-container {
   padding: 4px 8px;
   max-width: 400px;
 }
 
-.ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
+.GridCell-readonly {
+  color: colors.$gray;
+}
+
+.Grid-container.ag-theme-alpine .ag-cell {
+  font-weight: 400;
+}
+
+.Grid-container.ag-theme-alpine .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
   visibility: hidden;
 }
 
-.ag-cell:hover .Grid-displayWhenCellFocused {
+.Grid-container.ag-theme-alpine .ag-cell:hover .Grid-displayWhenCellFocused {
   visibility: inherit;
 }
 
-.ag-cell-wrapper {
+.Grid-container.ag-theme-alpine .ag-cell-wrapper {
   width: 100%;
-}
+}

package/src/styles/{GridRenderGenericCell.scss → GridIcon.scss}

@@ -1,15 +1,19 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
-
-.AgGridGenericCellRenderer-icon {
-  margin-right: 4px;
-}
-
-.AgGridGenericCellRenderer-ic_infoIcon {
-  margin-right: 4px;
-  fill: colors.$info;
-}
-
-.AgGridGenericCellRenderer-ic_warningIcon {
-  margin-right: 4px;
-  fill: colors.$warning;
-}
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+
+.AgGridGenericCellRenderer-icon {
+  margin-right: 4px;
+}
+
+.AgGridGenericCellRenderer-ic_infoIcon {
+  margin-right: 4px;
+  fill: colors.$info;
+}
+
+.AgGridGenericCellRenderer-ic_warningIcon {
+  margin-right: 4px;
+  fill: colors.$warning;
+}
+
+.GridIcon-disabled {
+  fill: colors.$silver !important;
+}

package/src/{components → styles}/GridLoadableCell.scss

@@ -1,4 +1,5 @@
-.GridLoadableCell-container {
-  display: flex;
-  align-items: center;
-}
+.GridLoadableCell-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}

package/src/{components/gridPopoverEdit → styles}/GridPopoverMenu.scss

@@ -1,4 +1,4 @@
-@use "../../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
 .GridPopoutMenu-burger {
   cursor: pointer;

package/src/styles/GridTheme.scss

@@ -23,13 +23,15 @@
       header-background-color: lui.$white,
       border-color: lui.$lily,
       secondary-border-color: lui.$lily,
+      cell-horizontal-border: solid ag-derived(secondary-border-color),
+      cell-horizontal-padding: 12,
       row-hover-color: lui.$lily,
       font-family: (
         "Open Sans",
         system-ui,
         sans-serif,
       ),
-      font-size: 0.875rem !important,
+      font-size: 1rem !important,
       borders: false,
       borders-critical: true,
       borders-secondary: false,
@@ -47,7 +49,7 @@
   }
 
   .ag-row:last-of-type {
-    border-bottom: none;
+    border-bottom: 1px solid lui.$lily;
   }
 
   // ag-grid-community 27.x.x needs this vs 28 using the selected-row-background-color above
@@ -58,7 +60,7 @@
 
   .ag-header-cell {
     font-weight: 600;
-    padding: 7px 0 7px 8px;
+    padding: 7px 11px;
 
     .LuiIcon {
       fill: lui.$surfie;
@@ -66,16 +68,16 @@
   }
 
   .ag-cell {
-    padding-left: 7px;
-    padding-right: 4px;
+    padding-left: 11px;
+    padding-right: 11px;
     display: flex;
     align-items: center;
   }
 
-  .ag-cell-more {
-    padding: 0;
-    display: flex;
-    justify-content: center;
+  .ag-cell.ag-cell-inline-editing {
+    padding-left: 9px;
+    padding-right: 9px;
+    bottom: 0;
   }
 
   .ag-cell-wrap-text {

package/src/styles/index.scss

@@ -1,2 +1,10 @@
 @use "./lui-overrides";
+@use "./react-menu-customisations";
 @use "./Grid";
+@use "./GridFormDropDown";
+@use "./GridFormEditBearing";
+@use "./GridFormMultiSelect";
+@use "./GridFormSubComponentTextInput";
+@use "./GridIcon";
+@use "./GridLoadableCell";
+@use "./GridPopoverMenu";

package/src/utils/deferredPromise.ts

@@ -0,0 +1,34 @@
+import { useRef } from "react";
+
+export const useDeferredPromise = <T>() => {
+  const promiseResolve = useRef<((value: T | PromiseLike<T>) => void) | undefined>();
+  const promiseReject = useRef<() => void>();
+
+  return {
+    invoke: () =>
+      new Promise<T>((resolve, reject) => {
+        promiseResolve.current = resolve;
+        promiseReject.current = reject;
+      }),
+    resolve: (value: T) => {
+      if (!promiseResolve.current) {
+        console.error("Promise not invoked so can't resolve");
+        return;
+      }
+      const temp = promiseResolve.current;
+      promiseResolve.current = undefined;
+      promiseReject.current = undefined;
+      temp(value);
+    },
+    reject: () => {
+      if (!promiseResolve.current) {
+        console.error("Promise not invoked so can't reject");
+        return;
+      }
+      const reject = promiseReject.current;
+      promiseResolve.current = undefined;
+      promiseReject.current = undefined;
+      if (reject) reject();
+    },
+  };
+};

package/src/utils/util.ts

@@ -34,3 +34,5 @@ export const hasParentClass = function (className: string, child: Node) {
 
 export const stringByteLengthIsInvalid = (str: string, maxBytes: number) =>
   new TextEncoder().encode(str).length > maxBytes;
+
+export const fnOrVar = (fn: any, param: any) => (typeof fn === "function" ? fn(param) : fn);