@linzjs/step-ag-grid 2.4.0 → 2.4.2

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -14,12 +14,14 @@ export interface GridPopoutEditDropDownSelectedItem<RowType, ValueType> {
   // Note the row that was clicked on will be first
   selectedRows: RowType[];
   value: ValueType;
+  subComponentValue?: ValueType;
 }
 
 interface FinalSelectOption<ValueType> {
   value: ValueType;
   label?: JSX.Element | string;
   disabled?: boolean | string;
+  subComponent?: (props: any, ref: any) => any;
 }
 
 export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
@@ -61,15 +63,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption<ValueType>[] | null>(null);
+  const [subComponentValues, setSubComponentValues] = useState<{ optionValue: any; subComponentValue: any }[]>([]);
 
   const selectItemHandler = useCallback(
-    async (value: ValueType): Promise<boolean> => {
+    async (value: ValueType, subComponentValue?: ValueType): Promise<boolean> => {
       const field = props.field;
       return await updatingCells({ selectedRows: props.selectedRows, field }, async (selectedRows) => {
         const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
         if (hasChanged) {
           if (props.onSelectedItem) {
-            await props.onSelectedItem({ selectedRows, value });
+            await props.onSelectedItem({ selectedRows, value, subComponentValue });
           } else {
             selectedRows.forEach((row) => (row[field as keyof RowType] = value));
           }
@@ -214,15 +217,56 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
             ) : item.value === MenuHeaderString ? (
               <MenuHeader>{item.label}</MenuHeader>
             ) : filteredValues.includes(item.value) ? null : (
-              <MenuItem
-                key={`${props.field}-${index}`}
-                disabled={!!item.disabled}
-                title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-                value={item.value}
-                onClick={() => selectItemHandler(item.value)}
-              >
-                {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-              </MenuItem>
+              <>
+                {!item.subComponent ? (
+                  <MenuItem
+                    key={`${props.field}-${index}`}
+                    disabled={!!item.disabled}
+                    title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+                    value={item.value}
+                    onClick={() => {
+                      selectItemHandler(item.value);
+                    }}
+                  >
+                    {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                  </MenuItem>
+                ) : (
+                  <FocusableItem className={"LuiDeprecatedForms"} key={`${props.field}-${index}_subcomponent`}>
+                    {(ref: any) =>
+                      item.subComponent &&
+                      item.subComponent(
+                        {
+                          setValue: (value: any) => {
+                            const localSubComponentValues = [...subComponentValues];
+                            const subComponentValueIndex = localSubComponentValues.findIndex(
+                              ({ optionValue }) => optionValue === item.value,
+                            );
+                            if (subComponentValueIndex !== -1) {
+                              localSubComponentValues[subComponentValueIndex].subComponentValue = value;
+                            } else {
+                              localSubComponentValues.push({
+                                subComponentValue: value,
+                                optionValue: item.value,
+                              });
+                            }
+                            setSubComponentValues(localSubComponentValues);
+                          },
+                          keyDown: (key: string) => {
+                            const subComponentItem = subComponentValues.find(
+                              ({ optionValue }) => optionValue === item.value,
+                            );
+                            if (key === "Enter" && subComponentItem) {
+                              selectItemHandler(item.value, subComponentItem.subComponentValue);
+                              ref.closeMenu();
+                            }
+                          },
+                        },
+                        ref,
+                      )
+                    }
+                  </FocusableItem>
+                )}
+              </>
             ),
           )}
         </>

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { TextInputFormatted } from "../../lui/TextInputFormatted";
+
+export interface GridFormSubComponentTextInput {
+  setValue: (value: string) => void;
+  keyDown: (key: string) => void;
+  placeholder?: string;
+}
+
+export const GridFormSubComponentTextInput = ({ keyDown, placeholder, setValue }: GridFormSubComponentTextInput) => {
+  const placeholderText = placeholder || "Other...";
+  const [inputValue, setInputValue] = useState("");
+  return (
+    <>
+      <TextInputFormatted
+        value={inputValue}
+        onChange={(e) => {
+          const value = e.target.value;
+          setValue(value);
+          setInputValue(value);
+        }}
+        inputProps={{
+          onKeyDown: (k: any) => keyDown(k.key),
+          placeholder: placeholderText,
+          onMouseEnter: (e) => {
+            if (document.activeElement != e.currentTarget) {
+              e.currentTarget.focus();
+            }
+          },
+        }}
+      />
+    </>
+  );
+};

package/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,
     },
   );

package/src/index.ts

@@ -27,6 +27,7 @@ export { GridPopoverEditDropDown } from "./components/gridPopoverEdit/GridPopove
 export { GridPopoverMessage } from "./components/gridPopoverEdit/GridPopoverMessage";
 export { GridPopoverTextArea } from "./components/gridPopoverEdit/GridPopoverTextArea";
 export { GridPopoverTextInput } from "./components/gridPopoverEdit/GridPopoverTextInput";
+export { GridFormSubComponentTextInput } from "./components/gridForm/GridFormSubComponentTextInput";
 export * from "./components/gridForm/GridFormDropDown";
 export * from "./components/gridForm/GridFormMultiSelect";
 export * from "./components/gridForm/GridFormPopoutMenu";

package/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 ? (

package/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({});

package/src/stories/grid/GridPopoutEditDropDown.stories.tsx

@@ -12,6 +12,7 @@ import { MenuHeaderItem, MenuSeparator, MenuSeparatorString } from "../../compon
 import { wait } from "../../utils/util";
 import { ColDefT, GridCell } from "../../components/GridCell";
 import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
+import { GridFormSubComponentTextInput } from "../../components/gridForm/GridFormSubComponentTextInput";
 
 export default {
   title: "Components / Grids",
@@ -40,6 +41,7 @@ interface ITestRow {
   position3: string | null;
   position4: ICode | null;
   code: string | null;
+  sub: string | null;
 }
 
 interface ICode {
@@ -241,6 +243,43 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           },
         },
       ),
+      GridPopoverEditDropDown(
+        {
+          field: "sub",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Subcomponent",
+          valueGetter: (params) => params.data.sub,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            filtered: "local",
+            filterPlaceholder: "Filter this",
+            options: [
+              {
+                value: "one",
+                label: "One",
+              },
+              {
+                value: "two",
+                label: "Two",
+              },
+              {
+                value: "oth",
+                label: "Other",
+                subComponent: (props) => (
+                  <GridFormSubComponentTextInput {...props} placeholder={"Subcomponent value"} />
+                ),
+              },
+            ],
+            onSelectedItem: async (selected) => {
+              // eslint-disable-next-line no-console
+              console.log("onSelectedItem", selected);
+            },
+          },
+        },
+      ),
     ],
     [optionsFn, optionsObjects],
   );
@@ -253,6 +292,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       position3: "Tester",
       position4: { code: "O1", desc: "Object One" },
       code: "O1",
+      sub: "two",
     },
     {
       id: 1001,
@@ -261,6 +301,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
       position3: "Developer",
       position4: { code: "O2", desc: "Object Two" },
       code: "O2",
+      sub: "one",
     },
   ] as ITestRow[]);
 

package/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} />
     </>
   );
 };

package/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;
             },
           },

package/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}