@linzjs/step-ag-grid 1.4.7 → 1.4.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/GridCell.tsx

@@ -6,6 +6,8 @@ import { GenericMultiEditCellClass } from "./GenericCellClass";
 import { GenericCellRendererParams, GridRendererGenericCell } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
+import { GridIcon } from "@components/GridIcon";
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export interface GridFormProps<RowType extends GridBaseRow> {
   cellEditorParams: ICellEditorParams;
@@ -30,21 +32,26 @@ export interface GenericCellEditorColDef<
   cellRendererParams?: GenericCellRendererParams<RowType>;
 }
 
-export const GridCellRenderer = (cellRendererParams: ICellRendererParams) => {
+export const GridCellRenderer = (props: ICellRendererParams) => {
   const { checkUpdating } = useContext(UpdatingContext);
-  const colDef = cellRendererParams.colDef;
-
-  return colDef?.cellRendererParams?.oldCellRenderer ? (
-    <GridLoadableCell
-      isLoading={checkUpdating(
-        cellRendererParams.colDef?.field ?? cellRendererParams.colDef?.colId ?? "",
-        cellRendererParams.data.id,
-      )}
-    >
-      <colDef.cellRendererParams.oldCellRenderer {...cellRendererParams} />
+  const colDef = props.colDef as ColDef;
+
+  const rendererParams = colDef.cellRendererParams as GenericCellRendererParams<any> | undefined;
+  const warningFn = rendererParams?.warning;
+  const warningText = warningFn ? warningFn(props) : undefined;
+  const infoFn = rendererParams?.info;
+  const infoText = infoFn ? infoFn(props) : undefined;
+
+  return colDef?.cellRendererParams?.originalCellRenderer ? (
+    <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} />
+      </>
     </GridLoadableCell>
   ) : (
-    <GridRendererGenericCell {...cellRendererParams} />
+    <GridRendererGenericCell {...props} />
   );
 };
 
@@ -55,7 +62,6 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
   props: GenericCellEditorColDef<RowType, FormProps>,
 ): ColDef => {
   return {
-    cellRenderer: GridCellRenderer,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(props.cellEditorParams && {
@@ -63,9 +69,16 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
       editable: true,
       cellEditor: GenericCellEditorComponent,
     }),
+    // Default value formatter, otherwise react freaks out on objects
+    valueFormatter: (params: ValueFormatterParams) => {
+      const types = ["number", "undefined", "boolean", "string"];
+      if (types.includes(typeof params.value)) return params.value;
+      else return JSON.stringify(params.value);
+    },
     ...props,
+    cellRenderer: GridCellRenderer,
     cellRendererParams: {
-      originalCellRender: props.cellRenderer,
+      originalCellRenderer: props.cellRenderer,
       ...props.cellRendererParams,
     },
   };

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -22,6 +22,7 @@ export interface MenuOption<RowType> {
   action?: (selectedRows: RowType[]) => Promise<boolean>;
   disabled?: string | boolean;
   supportsMultiEdit: boolean;
+  hidden?: boolean;
 }
 
 /**
@@ -76,14 +77,16 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
           item.label === MenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
           ) : (
-            <MenuItem
-              key={`${item.label}`}
-              onClick={() => actionClick(item)}
-              disabled={!!item.disabled || !filteredOptions?.includes(item)}
-              title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-            >
-              {item.label as JSX.Element | string}
-            </MenuItem>
+            !item.hidden && (
+              <MenuItem
+                key={`${item.label}`}
+                onClick={() => actionClick(item)}
+                disabled={!!item.disabled || !filteredOptions?.includes(item)}
+                title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+              >
+                {item.label as JSX.Element | string}
+              </MenuItem>
+            )
           ),
         )}
       </div>

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -20,21 +20,22 @@ export interface GenericCellColDef<RowType extends GridBaseRow, FormProps extend
 
 export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   singleClickEdit?: boolean;
-  warning?: (props: RowICellRendererParams<RowType>) => string | boolean | undefined;
-  info?: (props: RowICellRendererParams<RowType>) => string | boolean | undefined;
+  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(UpdatingContext);
 
-  const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams<RowType> | undefined;
+  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 = (props: ValueFormatterParams): string => props.value;
-  const formatter = props.colDef?.valueFormatter ?? defaultFormatter;
+  const formatter = colDef.valueFormatter ?? defaultFormatter;
   if (typeof formatter === "string") {
     console.error("valueFormatter must be a function");
     return <span>valueFormatter must be a function</span>;
@@ -42,7 +43,7 @@ export const GridRendererGenericCell = <RowType extends GridBaseRow>(props: ICel
   const formatted = formatter(props as ValueFormatterParams);
 
   return (
-    <GridLoadableCell isLoading={checkUpdating(props.colDef?.field ?? props.colDef?.colId ?? "", props.data.id)}>
+    <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} />}

package/src/stories/components/GridReadOnly.stories.tsx

@@ -86,7 +86,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
       GridPopoverMenu<ITestRow>({
         headerName: "Menu",
         cellEditorParams: {
-          options: async () => {
+          options: async (selectedItems) => {
             // Just doing a timeout here to demonstrate deferred loading
             await wait(500);
             return [
@@ -113,6 +113,11 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                 disabled: "Disabled for test",
                 supportsMultiEdit: true,
               },
+              {
+                label: "Developer Only",
+                hidden: selectedItems.some((x) => x.position != "Developer"),
+                supportsMultiEdit: true,
+              },
             ];
           },
         },