feat: grid button (#488)

src/components/gridPopoverEdit/GridButton.tsx

@@ -0,0 +1,63 @@
+import { CellFocusedEvent, ICellEditorParams } from "ag-grid-community";
+import { ColDefT, GridCell, SAICellRendererParams } from "../GridCell";
+import { GenericCellColDef } from "../gridRender";
+import { GridBaseRow } from "../Grid";
+import { LuiButton, LuiIcon } from "@linzjs/lui";
+import { useEffect, useRef } from "react";
+
+const ButtonCellRenderer = (props: SAICellRendererParams) => {
+  const { data, node, column, colDef, api } = props;
+  const inputRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const checkFocus = (event: CellFocusedEvent) => {
+      if (event.rowIndex === node.rowIndex && event.column === column) {
+        inputRef.current?.focus();
+      }
+    };
+    api.addEventListener("cellFocused", checkFocus);
+    return () => {
+      api.removeEventListener("cellFocused", checkFocus);
+    };
+  }, [api, column, node.rowIndex]);
+
+  return (
+    <LuiButton
+      ref={inputRef}
+      className="lui-button-icon-only"
+      size="sm"
+      level="text"
+      onClick={() => {
+        const selectedRows = [data];
+        const selectedRowIds = selectedRows.map((r) => r.id);
+        colDef?.cellEditorParams.onClick?.({ selectedRows, selectedRowIds });
+      }}
+      style={{ display: colDef?.cellEditorParams?.visible?.(props) !== false ? "" : "none" }}
+    >
+      <LuiIcon name="ic_redo" alt="revert" size="md" />
+    </LuiButton>
+  );
+};
+
+export interface GridButtonProps<TData> {
+  visible?: (cellEditorParams: ICellEditorParams) => boolean;
+  onClick?: (props: { selectedRows: TData[]; selectedRowIds: (string | number)[] }) => void;
+}
+
+export const GridButton = <TData extends GridBaseRow>(
+  colDef: GenericCellColDef<TData, boolean>,
+  editor: GridButtonProps<TData>,
+): ColDefT<TData> => {
+  return GridCell({
+    minWidth: 72,
+    maxWidth: 72,
+    resizable: false,
+    headerClass: "GridHeaderAlignCenter",
+    cellClass: "GridCellAlignCenter",
+    cellRenderer: ButtonCellRenderer,
+    cellEditorParams: {
+      ...editor,
+    },
+    ...colDef,
+  });
+};

src/components/gridPopoverEdit/index.ts

@@ -1,3 +1,4 @@
+export * from "./GridButton";
 export * from "./GridEditBoolean";
 export * from "./GridPopoutEditMultiSelect";
 export * from "./GridPopoutEditMultiSelectGrid";

src/stories/grid/GridPopoutEditBoolean.stories.tsx

@@ -7,7 +7,15 @@ import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { ColDefT, Grid, GridCell, GridContextProvider, GridEditBoolean, GridUpdatingContextProvider } from "../..";
+import {
+  ColDefT,
+  Grid,
+  GridButton,
+  GridCell,
+  GridContextProvider,
+  GridEditBoolean,
+  GridUpdatingContextProvider,
+} from "../..";
 import { waitForGridReady } from "../../utils/storybookTestUtil";
 import { IFormTestRow } from "./FormTest";
 
@@ -39,6 +47,18 @@ const GridPopoutEditBooleanTemplate: StoryFn<typeof Grid> = () => {
         field: "id",
         headerName: "Id",
       }),
+      GridButton(
+        {
+          colId: "button",
+          headerName: "Button",
+        },
+        {
+          visible: ({ data }) => !!(data.id & 1),
+          onClick: ({ selectedRowIds }) => {
+            alert("click " + selectedRowIds);
+          },
+        },
+      ),
       GridEditBoolean(
         {
           field: "bold",

src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -171,7 +171,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
       ),
       GridPopoverEditDropDown(
         {
-          field: "position4",
+          colId: "position4",
           headerName: "Filtered (object)",
           valueGetter: ({ data }) => data?.position4?.desc,
         },