@linzjs/step-ag-grid 4.0.0 → 4.0.2

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -64,7 +64,7 @@ const fieldToString = (field: any) => {
 export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
   props: GridFormPopoutDropDownProps<RowType, ValueType>,
 ) => {
-  const { selectedRows, field, updateValue } = useGridPopoverContext<RowType>();
+  const { selectedRows, field, updateValue, data } = useGridPopoverContext<RowType>();
   const { stopEditing } = useContext(GridContext);
 
   const [filter, setFilter] = useState("");
@@ -266,6 +266,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(
                     {(ref: MenuInstance) => (
                       <GridSubComponentContext.Provider
                         value={{
+                          data,
                           value: subSelectedValue,
                           setValue: (value: any) => {
                             setSubSelectedValue(value);

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -45,7 +45,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
 export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
   props: GridFormMultiSelectProps<RowType, ValueType>,
 ) => {
-  const { selectedRows } = useGridPopoverContext<RowType>();
+  const { selectedRows, data } = useGridPopoverContext<RowType>();
 
   const initialiseValues = useMemo(() => {
     const r = props.initialSelectedValues && props.initialSelectedValues(selectedRows);
@@ -214,6 +214,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(
                       item.subComponent && (
                         <GridSubComponentContext.Provider
                           value={{
+                            data,
                             value: selectedValues[`${item.value}`],
                             setValue: (value: any) => {
                               setSelectedValues({

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -38,7 +38,7 @@ export interface MenuOption<RowType extends GridBaseRow> {
  * you need a useMemo around your columnDefs
  */
 export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridFormPopoutMenuProps<RowType>) => {
-  const { selectedRows, updateValue } = useGridPopoverContext<RowType>();
+  const { selectedRows, updateValue, data } = useGridPopoverContext<RowType>();
 
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<MenuOption<RowType>[]>();
@@ -148,6 +148,7 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
                       item.subComponent && (
                         <GridSubComponentContext.Provider
                           value={{
+                            data,
                             value: subSelectedValue,
                             setValue: (value: any) => {
                               setSubSelectedValue(value);

package/src/components/gridForm/GridFormSubComponentTextArea.tsx

@@ -4,8 +4,11 @@ import { CellEditorCommon } from "../GridCell";
 import clsx from "clsx";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
+import { GridBaseRow } from "../Grid";
 
-export interface GridSubComponentTextAreaProps extends TextInputValidatorProps, CellEditorCommon {
+export interface GridSubComponentTextAreaProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   defaultValue: string;
@@ -13,8 +16,10 @@ export interface GridSubComponentTextAreaProps extends TextInputValidatorProps,
   helpText?: string;
 }
 
-export const GridFormSubComponentTextArea = (props: GridSubComponentTextAreaProps): JSX.Element => {
-  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+export const GridFormSubComponentTextArea = <RowType extends GridBaseRow>(
+  props: GridSubComponentTextAreaProps<RowType>,
+): JSX.Element => {
+  const { value, data, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press tab to save";
 
@@ -23,7 +28,7 @@ export const GridFormSubComponentTextArea = (props: GridSubComponentTextAreaProp
     if (value == null) setValue(props.defaultValue);
   }, [props.defaultValue, setValue, value]);
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data), [data, props, value]);
 
   useEffect(() => {
     setValid(value != null && invalid() == null);
@@ -47,9 +52,9 @@ export const GridFormSubComponentTextArea = (props: GridSubComponentTextAreaProp
         }}
         onKeyUp={(e) => {
           if (e.key === "Tab") {
-            !e.shiftKey && triggerSave().then();
             e.preventDefault();
             e.stopPropagation();
+            !e.shiftKey && triggerSave().then();
           }
         }}
       />

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -3,16 +3,21 @@ import { GridSubComponentContext } from "../../contexts/GridSubComponentContext"
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
 import { CellEditorCommon } from "../GridCell";
+import { GridBaseRow } from "../Grid";
 
-export interface GridFormSubComponentTextInputProps extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormSubComponentTextInputProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   defaultValue: string;
   helpText?: string;
 }
 
-export const GridFormSubComponentTextInput = (props: GridFormSubComponentTextInputProps): JSX.Element => {
-  const { value, setValue, setValid, triggerSave } = useContext(GridSubComponentContext);
+export const GridFormSubComponentTextInput = <RowType extends GridBaseRow>(
+  props: GridFormSubComponentTextInputProps<RowType>,
+): JSX.Element => {
+  const { value, setValue, setValid, triggerSave, data } = useContext(GridSubComponentContext);
 
   const helpText = props.helpText ?? "Press enter or tab to save";
 
@@ -21,7 +26,7 @@ export const GridFormSubComponentTextInput = (props: GridFormSubComponentTextInp
     if (value == null) setValue(props.defaultValue);
   }, [props.defaultValue, setValue, value]);
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data), [data, props, value]);
 
   useEffect(() => {
     setValid(value != null && invalid() == null);
@@ -42,9 +47,9 @@ export const GridFormSubComponentTextInput = (props: GridFormSubComponentTextInp
       }}
       onKeyUp={(e) => {
         if (e.key === "Tab") {
-          !e.shiftKey && triggerSave().then();
           e.preventDefault();
           e.stopPropagation();
+          !e.shiftKey && triggerSave().then();
         } else if (e.key === "Enter") {
           triggerSave().then();
           e.preventDefault();

package/src/components/gridForm/GridFormTextArea.tsx

@@ -6,7 +6,9 @@ import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
 
-export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormTextAreaProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   width?: string | number;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
@@ -14,12 +16,12 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Text
 }
 
 export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTextAreaProps<RowType>) => {
-  const { field, value: initialVale } = useGridPopoverContext<RowType>();
+  const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
   const [value, setValue] = useState(initialVale != null ? `${initialVale}` : "");
 
   const helpText = props.helpText ?? "Press tab to save";
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator(props, value, data), [props, value, data]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
@@ -42,7 +44,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
     },
     [invalid, initialVale, value, props, field],
   );
-  const { popoverWrapper, lastInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput
@@ -51,7 +53,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
         error={invalid()}
         placeholder={props.placeholder}
         helpText={helpText}
-        {...lastInputKeyboardEventHandlers}
+        {...onlyInputKeyboardEventHandlers}
       />
     </div>,
   );

package/src/components/gridForm/GridFormTextInput.tsx

@@ -6,7 +6,9 @@ import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { TextInputValidator, TextInputValidatorProps } from "../../utils/textValidator";
 
-export interface GridFormTextInputProps<RowType extends GridBaseRow> extends TextInputValidatorProps, CellEditorCommon {
+export interface GridFormTextInputProps<RowType extends GridBaseRow>
+  extends TextInputValidatorProps<RowType>,
+    CellEditorCommon {
   placeholder?: string;
   units?: string;
   width?: string | number;
@@ -15,14 +17,14 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Tex
 }
 
 export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTextInputProps<RowType>) => {
-  const { field, value: initialVale } = useGridPopoverContext<RowType>();
+  const { field, value: initialVale, data } = useGridPopoverContext<RowType>();
 
   const helpText = props.helpText ?? "Press enter or tab to save";
 
   const initValue = initialVale == null ? "" : `${initialVale}`;
   const [value, setValue] = useState(initValue);
 
-  const invalid = useCallback(() => TextInputValidator(props, value), [props, value]);
+  const invalid = useCallback(() => TextInputValidator<RowType>(props, value, data), [data, props, value]);
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
@@ -45,7 +47,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
     },
     [invalid, value, initValue, props, field],
   );
-  const { popoverWrapper, lastInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
+  const { popoverWrapper, onlyInputKeyboardEventHandlers } = useGridPopoverHook({ className: props.className, save });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
@@ -56,7 +58,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
         formatted={props.units}
         style={{ width: "100%" }}
         placeholder={props.placeholder}
-        {...lastInputKeyboardEventHandlers}
+        {...onlyInputKeyboardEventHandlers}
         helpText={helpText}
       />
     </div>,

package/src/contexts/GridSubComponentContext.ts

@@ -2,6 +2,7 @@ import { createContext } from "react";
 
 export interface GridSubComponentContextType {
   value: any;
+  data: any;
   setValue: (value: string) => void;
   setValid: (valid: boolean) => void;
   triggerSave: () => Promise<void>;
@@ -9,6 +10,7 @@ export interface GridSubComponentContextType {
 
 export const GridSubComponentContext = createContext<GridSubComponentContextType>({
   value: "GridSubComponentContext value no context",
+  data: {},
   setValue: () => {
     console.error("GridSubComponentContext setValue no context");
   },

package/src/utils/textValidator.ts

@@ -1,10 +1,16 @@
-export interface TextInputValidatorProps {
+import { GridBaseRow } from "../components/Grid";
+
+export interface TextInputValidatorProps<RowType extends GridBaseRow> {
   required?: boolean;
   maxLength?: number;
-  validate?: (value: string) => string | null;
+  validate?: (value: string, data: RowType) => string | null;
 }
 
-export const TextInputValidator = (props: TextInputValidatorProps, value: string | null) => {
+export const TextInputValidator = <RowType extends GridBaseRow>(
+  props: TextInputValidatorProps<RowType>,
+  value: string | null,
+  data: RowType,
+) => {
   if (value == null) return null;
 
   // This can happen because subcomponent is invoked without type safety
@@ -18,7 +24,7 @@ export const TextInputValidator = (props: TextInputValidatorProps, value: string
     return `Text must be no longer than ${props.maxLength} characters`;
   }
   if (props.validate) {
-    return props.validate(value);
+    return props.validate(value, data);
   }
   return null;
 };