@linzjs/step-ag-grid 2.4.0 → 2.4.1

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.1",
   "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/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/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[]);