@linzjs/step-ag-grid 2.3.1 → 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.3.1",
+  "version": "2.4.1",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridSubComponentTextArea.tsx

@@ -1,24 +1,36 @@
-import { useCallback, useEffect } from "react";
-import { GridSubComponentProps } from "./gridForm/GridSubComponentProps";
+import { useCallback, useContext, useEffect } from "react";
 import { TextInputFormatted } from "../lui/TextInputFormatted";
+import { GridSubComponentContext } from "../contexts/GridSubComponentContext";
 
-export interface GridSubComponentTextAreaProps extends GridSubComponentProps {
+export interface GridSubComponentTextAreaProps {
   placeholder?: string;
   required?: boolean;
-  maxlength?: number;
+  maxLength?: number;
   width?: string | number;
-  validate: (value: string) => string | null;
+  validate?: (value: string) => string | null;
+  defaultValue: string;
 }
 
 export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps): JSX.Element => {
-  const { value, setValue, setValid, triggerSave } = props;
+  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+
+  // If is not initialised yet as it's just been created then set the default value
+  useEffect(() => {
+    if (value == null) setValue(props.defaultValue);
+  }, [props.defaultValue, setValue, value]);
+
   const validate = useCallback(
-    (value: string) => {
+    (value: string | null) => {
+      if (value == null) return null;
+      // This can happen because subcomponent is invoked without type safety
+      if (typeof value !== "string") {
+        console.error("Value is not a string", value);
+      }
       if (props.required && value.length === 0) {
         return `Some text is required`;
       }
-      if (props.maxlength && value.length > props.maxlength) {
-        return `Text must be no longer than ${props.maxlength} characters`;
+      if (props.maxLength && value.length > props.maxLength) {
+        return `Text must be no longer than ${props.maxLength} characters`;
       }
       if (props.validate) {
         return props.validate(value);
@@ -29,7 +41,7 @@ export const GridSubComponentTextArea = (props: GridSubComponentTextAreaProps):
   );
 
   useEffect(() => {
-    setValid(validate(value) == null);
+    setValid(value != null && validate(value) == null);
   }, [setValid, validate, value]);
 
   return (

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/GridFormMultiSelect.tsx

@@ -10,7 +10,7 @@ import { useGridPopoverHook } from "../GridPopoverHook";
 import { MenuSeparatorString } from "./GridFormDropDown";
 import { CellEditorCommon, CellParams } from "../GridCell";
 import { ClickEvent } from "../../react-menu3/types";
-import { GridSubComponentProps } from "./GridSubComponentProps";
+import { GridSubComponentContext } from "contexts/GridSubComponentContext";
 
 interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
@@ -208,20 +208,24 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
 
                 {selectedValues.includes(item.value) && item.subComponent && (
                   <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
-                    {(ref: any) =>
-                      item.subComponent &&
-                      item.subComponent({
-                        ref,
-                        value: subSelectedValues[`${item.value}`],
-                        setValue: (value: any) => {
-                          subSelectedValues[`${item.value}`] = value;
-                          setSubSelectedValues({ ...subSelectedValues });
-                        },
-                        setValid: (valid: boolean) => {
-                          subComponentIsValid.current[`${item.value}`] = valid;
-                        },
-                        triggerSave,
-                      } as GridSubComponentProps)
+                    {(_: any) =>
+                      item.subComponent && (
+                        <GridSubComponentContext.Provider
+                          value={{
+                            value: subSelectedValues[`${item.value}`],
+                            setValue: (value: any) => {
+                              subSelectedValues[`${item.value}`] = value;
+                              setSubSelectedValues({ ...subSelectedValues });
+                            },
+                            setValid: (valid: boolean) => {
+                              subComponentIsValid.current[`${item.value}`] = valid;
+                            },
+                            triggerSave,
+                          }}
+                        >
+                          <item.subComponent />
+                        </GridSubComponentContext.Provider>
+                      )
                     }
                   </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/gridForm/GridFormTextArea.tsx

@@ -7,7 +7,7 @@ import { CellEditorCommon, CellParams } from "../GridCell";
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
   required?: boolean;
-  maxlength?: number;
+  maxLength?: number;
   width?: string | number;
   validate?: (value: string) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
@@ -21,8 +21,8 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTe
     if (props.required && value.length == 0) {
       return `Some text is required`;
     }
-    if (props.maxlength && value.length > props.maxlength) {
-      return `Text must be no longer than ${props.maxlength} characters`;
+    if (props.maxLength && value.length > props.maxLength) {
+      return `Text must be no longer than ${props.maxLength} characters`;
     }
     if (props.validate) {
       return props.validate(value);

package/src/components/gridForm/GridFormTextInput.tsx

@@ -8,7 +8,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Cel
   placeholder?: string;
   units?: string;
   required?: boolean;
-  maxlength?: number;
+  maxLength?: number;
   width?: string | number;
   // Return null for ok, otherwise an error string
   validate?: (value: string, data: RowType) => string | null;
@@ -25,8 +25,8 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormT
     if (props.required && trimmedValue.length == 0) {
       return `Some text is required`;
     }
-    if (props.maxlength && trimmedValue.length > props.maxlength) {
-      return `Text must be no longer than ${props.maxlength} characters`;
+    if (props.maxLength && trimmedValue.length > props.maxLength) {
+      return `Text must be no longer than ${props.maxLength} characters`;
     }
     if (props.validate) {
       return props.validate(trimmedValue, props.data);

package/src/contexts/GridSubComponentContext.ts

@@ -0,0 +1,21 @@
+import { createContext } from "react";
+
+export interface GridSubComponentContextType {
+  value: any;
+  setValue: (value: string) => void;
+  setValid: (valid: boolean) => void;
+  triggerSave: () => Promise<void>;
+}
+
+export const GridSubComponentContext = createContext<GridSubComponentContextType>({
+  value: "GridSubComponentContext value no context",
+  setValue: () => {
+    console.error("GridSubComponentContext setValue no context");
+  },
+  setValid: () => {
+    console.error("GridSubComponentContext setValid no context");
+  },
+  triggerSave: async () => {
+    console.error("GridSubComponentContext triggerSave no context");
+  },
+});

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/components/ActionButton.stories.tsx

@@ -7,7 +7,7 @@ import { useCallback, useState } from "react";
 import { wait } from "../../utils/util";
 
 export default {
-  title: "Components / ButtonTextWithIcon",
+  title: "Components / ActionButton",
   component: ActionButton,
   args: {},
 } as ComponentMeta<typeof ActionButton>;

package/src/stories/grid/FormTest.tsx

@@ -18,23 +18,22 @@ export interface IFormTestRow {
 
 export const FormTest = <RowType extends GridBaseRow>(_props: CellEditorCommon): JSX.Element => {
   const props = _props as CellParams<RowType>;
-  const [v1, v2, ...v3] = props.value.split(" ");
+  const [v1, ...v2] = props.value.split(" ");
 
   const [nameType, setNameType] = useState(v1);
-  const [numba, setNumba] = useState(v2);
-  const [plan, setPlan] = useState(v3.join(" "));
+  const [numba, setNumba] = useState(v2.join(" "));
 
   const save = useCallback(async (): Promise<boolean> => {
     // eslint-disable-next-line no-console
-    console.log("onSave", props.selectedRows, nameType, numba, plan);
+    console.log("onSave", props.selectedRows, nameType, numba);
 
     // @ts-ignore
-    props.selectedRows.forEach((row) => (row["name"] = [nameType, numba, plan].join(" ")));
+    props.selectedRows.forEach((row) => (row["name"] = [nameType, numba].join(" ")));
     await wait(1000);
 
     // Close form
     return true;
-  }, [nameType, numba, plan, props.selectedRows]);
+  }, [nameType, numba, props.selectedRows]);
 
   const [showModal, setShowModal] = useState<boolean>(false);
 

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -83,7 +83,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, bearing1: 1.234, bearingCorrection: 90 },
     { id: 1001, bearing1: 1.565, bearingCorrection: 240 },
     { id: 1002, bearing1: null, bearingCorrection: 355.1 },

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,11 +243,48 @@ 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],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     {
       id: 1000,
       position: "Tester",
@@ -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/GridPopoutEditGeneric.stories.tsx

@@ -57,7 +57,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
     [],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
     { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
   ] as IFormTestRow[]);

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -61,7 +61,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           multiEdit: true,
           editorParams: {
             required: true,
-            maxlength: 12,
+            maxLength: 12,
             placeholder: "Enter some text...",
             validate: (value: string) => {
               if (value === "never") return "The value 'never' is not allowed";
@@ -88,7 +88,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         {
           multiEdit: true,
           editorParams: {
-            maxlength: 12,
+            maxLength: 12,
             placeholder: "Enter distance...",
             units: "m",
             validate: (value: string) => {
@@ -115,7 +115,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           multiEdit: true,
           editorParams: {
             required: true,
-            maxlength: 32,
+            maxLength: 32,
             placeholder: "Enter some text...",
 
             validate: (value: string) => {

package/src/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -80,7 +80,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               {
                 value: "other",
                 label: "Other",
-                subComponent: (props) => <GridSubComponentTextArea {...props} maxlength={2} />,
+                subComponent: () => <GridSubComponentTextArea maxLength={2} defaultValue={""} />,
               },
             ],
             initialSelectedValues: () => ({
@@ -128,7 +128,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
     ];
   }, []);
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
     { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
   ] as ITestRow[]);

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -151,7 +151,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     [],
   );
 
-  const [rowData, setRowData] = useState([
+  const [rowData] = useState([
     { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
     { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
   ]);

package/dist/src/components/gridForm/GridSubComponentProps.d.ts

@@ -1,6 +0,0 @@
-export interface GridSubComponentProps {
-    value: string;
-    setValue: (value: string) => void;
-    setValid: (valid: boolean) => void;
-    triggerSave: () => Promise<void>;
-}

package/src/components/gridForm/GridSubComponentProps.ts

@@ -1,6 +0,0 @@
-export interface GridSubComponentProps {
-  value: string;
-  setValue: (value: string) => void;
-  setValid: (valid: boolean) => void;
-  triggerSave: () => Promise<void>;
-}