@linzjs/step-ag-grid 7.1.1 → 7.2.0

package/package.json

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

package/src/components/Grid.tsx

@@ -29,6 +29,8 @@ export interface GridProps {
   rowData: GridOptions["rowData"];
   noRowsOverlayText?: string;
   postSortRows?: GridOptions["postSortRows"];
+  animateRows?: boolean;
+  rowClassRules?: GridOptions["rowClassRules"];
 }
 
 /**
@@ -246,6 +248,9 @@ export const Grid = (params: GridProps): JSX.Element => {
         </div>
       )}
       <AgGridReact
+        animateRows={params.animateRows}
+        rowClassRules={params.rowClassRules}
+        defaultColDef={params.defaultColDef}
         getRowId={(params) => `${params.data.id}`}
         suppressRowClickSelection={true}
         rowSelection={"multiple"}

package/src/components/GridCell.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext } from "react";
 import { GridBaseRow } from "./Grid";
 import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
-import { GenericMultiEditCellClass } from "./GenericCellClass";
+import { GridCellMultiSelectClassRules } from "./GridCellMultiSelectClassRules";
 import {
   GenericCellColDef,
   GenericCellRendererParams,
@@ -64,7 +64,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(custom?.editor && {
-      cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
+      cellClassRules: GridCellMultiSelectClassRules,
       editable: props.editable ?? true,
       cellEditor: GenericCellEditorComponentWrapper(custom),
     }),

package/src/components/GridCellMultiSelectClassRules.tsx

@@ -0,0 +1,9 @@
+import { CellClassParams, CellClassRules } from "ag-grid-community/dist/lib/entities/colDef";
+
+export const GridCellMultiSelectClassRules: CellClassRules = {
+  "ag-selected-for-edit": ({ api, node, colDef }: CellClassParams) =>
+    api
+      .getSelectedNodes()
+      .map((row) => row.id)
+      .includes(node.id) && api.getEditingCells().some((cell) => cell.column.getColDef() === colDef),
+};

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -24,6 +24,7 @@ import { GridSubComponentContext } from "contexts/GridSubComponentContext";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { FormError } from "../../lui/FormError";
 import { textMatch } from "../../utils/textMatcher";
+import { GridIcon } from "../GridIcon";
 
 type HeaderGroupType = Record<string, MultiSelectOption[]> | undefined;
 
@@ -34,6 +35,7 @@ export interface MultiSelectOption {
   subValue?: any;
   filter?: string;
   checked?: boolean;
+  warning?: string | undefined;
 }
 
 export interface GridFormMultiSelectGroup {
@@ -363,7 +365,12 @@ const MenuRadioItem = (props: {
       <LuiCheckboxInput
         isChecked={item.checked ?? false}
         value={`${item.value}`}
-        label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+        label={
+          <>
+            {item.warning && <GridIcon icon={"ic_warning"} title={item.warning} />}
+            {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+          </>
+        }
         inputProps={{
           onClick: (e) => {
             // Click is handled by MenuItem onClick

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,6 +1,5 @@
 import "./GridPopoverMenu.scss";
 
-import { GenericMultiEditCellClass } from "../GenericCellClass";
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormPopoverMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoverMenu";
@@ -18,9 +17,8 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
     {
       maxWidth: 40,
       editable: colDef.editable != null ? colDef.editable : true,
-      cellStyle: { justifyContent: "flex-end" },
+      cellStyle: { justifyContent: "center" },
       cellRenderer: GridRenderPopoutMenuCell,
-      cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,
       cellRendererParams: {
         // Menus open on single click, this parameter is picked up in Grid.tsx

package/src/index.ts

@@ -14,7 +14,7 @@ export { Grid } from "./components/Grid";
 export * from "./components/GridCell";
 export { GridIcon } from "./components/GridIcon";
 export { ComponentLoadingWrapper } from "./components/ComponentLoadingWrapper";
-export { GenericMultiEditCellClass } from "./components/GenericCellClass";
+export { GridCellMultiSelectClassRules } from "./components/GridCellMultiSelectClassRules";
 export { GridLoadableCell } from "./components/GridLoadableCell";
 export { useGridPopoverHook } from "./components/GridPopoverHook";
 export { usePostSortRowsHook } from "./components/PostSortRowsHook";

package/src/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -145,7 +145,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               const firstRow = selectedRows[0];
               const r: MultiSelectOption[] = [
                 { value: "lot1", label: "Lot 1" },
-                { value: "lot2", label: "Lot 2" },
+                { value: "lot2", label: "Lot 2", warning: "Don't select me" },
                 { value: "lot3", label: "Lot 3" },
                 { value: "lot11", label: "Lot 11" },
                 { value: "lot4", label: "Lot A 482392" },

package/dist/src/components/GenericCellClass.d.ts

@@ -1,2 +0,0 @@
-import { CellClassFunc } from "ag-grid-community";
-export declare const GenericMultiEditCellClass: CellClassFunc;

package/src/components/GenericCellClass.tsx

@@ -1,15 +0,0 @@
-import { CellClassFunc } from "ag-grid-community";
-
-export const GenericMultiEditCellClass: CellClassFunc = (props): string => {
-  const api = props.api;
-  if (api == null) return "";
-
-  const rowSelected = api
-    .getSelectedNodes()
-    .map((row) => row.id)
-    .includes(props.node.id);
-
-  return rowSelected && api.getEditingCells().some((cell) => cell.column.getColDef() === props.colDef)
-    ? "ag-selected-for-edit"
-    : "";
-};