fix: action button manages own state (#85)

* feat: Action button manages own state and now has externalSetInProgress

* Up package version

package.json

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

src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -12,14 +12,14 @@ import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
  */
 export const GridPopoverMenu = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  props: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>,
+  custom: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>,
 ): ColDefT<RowType> =>
   GridCell<RowType, GridFormPopoutMenuProps<RowType>>(
     {
       maxWidth: 64,
       editable: colDef.editable != null ? colDef.editable : true,
       cellRenderer: GridRenderPopoutMenuCell,
-      cellClass: colDef?.cellEditorParams?.multiEdit !== false ? GenericMultiEditCellClass : undefined,
+      cellClass: custom?.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,
       cellRendererParams: {
         // Menus open on single click, this parameter is picked up in Grid.tsx
@@ -28,6 +28,6 @@ export const GridPopoverMenu = <RowType extends GridBaseRow>(
     },
     {
       editor: GridFormPopoutMenu,
-      ...props,
+      ...custom,
     },
   );

src/lui/ActionButton.tsx

@@ -1,7 +1,7 @@
 import "./ActionButton.scss";
 
 import clsx from "clsx";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 import { usePrevious } from "./reactUtils";
@@ -15,8 +15,9 @@ export interface ActionButtonProps {
   dataTestId?: string;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
   className?: string;
-  onClick?: () => void;
-  inProgress?: boolean;
+  onAction: () => Promise<void>;
+  // Used for external code to get access to whether action is in progress
+  externalSetInProgress?: () => void;
 }
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
@@ -27,14 +28,15 @@ export const ActionButton = ({
   name,
   inProgressName,
   dataTestId,
-  inProgress,
   className,
   title,
-  onClick,
+  onAction,
+  externalSetInProgress,
   size = "sm",
 }: ActionButtonProps): JSX.Element => {
+  const [inProgress, setInProgress] = useState(false);
   const lastInProgress = usePrevious(inProgress ?? false);
-  const [localInProgress, setLocalInProgress, setLocalInProgressDeferred] = useStateDeferred<boolean>(!!inProgress);
+  const [localInProgress, setLocalInProgress, setLocalInProgressDeferred] = useStateDeferred<boolean>(inProgress);
 
   useEffect(() => {
     if (inProgress == lastInProgress) return;
@@ -50,7 +52,13 @@ export const ActionButton = ({
       aria-label={name}
       className={clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
       size={"lg"}
-      onClick={onClick}
+      onClick={async () => {
+        setInProgress(true);
+        externalSetInProgress && setInProgress(true);
+        await onAction();
+        externalSetInProgress && setInProgress(false);
+        setInProgress(false);
+      }}
       disabled={localInProgress}
     >
       {localInProgress ? (

src/stories/components/ActionButton.stories.tsx

@@ -3,7 +3,7 @@ import "@linzjs/lui/dist/fonts";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
 import { ActionButton } from "../../lui/ActionButton";
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { wait } from "../../utils/util";
 
 export default {
@@ -13,21 +13,10 @@ export default {
 } as ComponentMeta<typeof ActionButton>;
 
 const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
-  const [inProgress, setInProgress] = useState(false);
   const performAction = useCallback(async () => {
-    setInProgress(true);
     await wait(1000);
-    setInProgress(false);
   }, []);
-  return (
-    <ActionButton
-      icon={"ic_add"}
-      name={"Add new row"}
-      inProgressName={"Adding..."}
-      inProgress={inProgress}
-      onClick={performAction}
-    />
-  );
+  return <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onAction={performAction} />;
 };
 
 export const ActionButtonSimple = ActionButtonTemplate.bind({});

src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -155,14 +155,10 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
     [rowData],
   );
 
-  const [inProgress, setInProgress] = useState(false);
-
   const addRowAction = useCallback(async () => {
-    setInProgress(true);
     await wait(1000);
     const lastRow = rowData[rowData.length - 1];
     setRowData([...rowData, { id: lastRow.id + 1, name: "?", nameType: "?", numba: "?", plan: "", distance: null }]);
-    setInProgress(false);
   }, [rowData]);
 
   return (
@@ -175,13 +171,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         rowData={rowData}
         domLayout={"autoHeight"}
       />
-      <ActionButton
-        icon={"ic_add"}
-        name={"Add new row"}
-        inProgressName={"Adding..."}
-        inProgress={inProgress}
-        onClick={addRowAction}
-      />
+      <ActionButton icon={"ic_add"} name={"Add new row"} inProgressName={"Adding..."} onAction={addRowAction} />
     </>
   );
 };

src/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -13,6 +13,7 @@ import { wait } from "../../utils/util";
 import { GridSubComponentTextArea } from "../../components/GridSubComponentTextArea";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoutEditMultiSelect } from "../../components/gridPopoverEdit/GridPopoutEditMultiSelect";
+import { partition } from "lodash-es";
 
 export default {
   title: "Components / Grids",
@@ -91,11 +92,9 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               console.log("multiSelect result", { selectedRows, selectedOptions });
 
               await wait(1000);
-              const normalValues = selectedOptions.filter((o) => !o.subComponent).map((o) => o.label);
-              const subValues = selectedOptions.filter((o) => o.subComponent).map((o) => o.subValue);
-              selectedRows.forEach((row) => {
-                row.position = [...normalValues, ...subValues].join(", ");
-              });
+              const [subValues, normalValues] = partition(selectedOptions, (o) => o.subComponent);
+              const newValue = [...normalValues.map((o) => o.label), ...subValues.map((o) => o.subValue)].join(", ");
+              selectedRows.forEach((row) => (row.position = newValue));
               return true;
             },
           },

src/stories/grid/GridReadOnly.stories.tsx

@@ -159,6 +159,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   return (
     <Grid
       {...props}
+      selectable={true}
       externalSelectedItems={externalSelectedItems}
       setExternalSelectedItems={setExternalSelectedItems}
       columnDefs={columnDefs}