@linzjs/step-ag-grid 1.5.2 → 1.5.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/Grid.tsx

@@ -4,7 +4,7 @@ import "./GridTheme.scss";
 import clsx from "clsx";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AgGridReact } from "ag-grid-react";
-import { AgGridEvent, CellClickedEvent, ColDef } from "ag-grid-community";
+import { CellClickedEvent, ColDef } from "ag-grid-community";
 import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
@@ -28,7 +28,7 @@ export interface GridProps {
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
   onGridReady?: GridOptions["onGridReady"];
-  defaultColDef: GridOptions["defaultColDef"];
+  defaultColDef?: GridOptions["defaultColDef"];
   columnDefs: GridOptions["columnDefs"];
   rowData: GridOptions["rowData"];
   noRowsOverlayText?: string;
@@ -38,8 +38,15 @@ export interface GridProps {
  * Wrapper for AgGrid to add commonly used functionality.
  */
 export const Grid = (params: GridProps): JSX.Element => {
-  const { gridReady, setGridApi, setQuickFilter, ensureRowVisible, selectRowsById, ensureSelectedRowIsVisible } =
-    useContext(GridContext);
+  const {
+    gridReady,
+    setGridApi,
+    setQuickFilter,
+    ensureRowVisible,
+    selectRowsById,
+    ensureSelectedRowIsVisible,
+    sizeColumnsToFit,
+  } = useContext(GridContext);
   const { checkUpdating } = useContext(UpdatingContext);
 
   const [internalQuickFilter, setInternalQuickFilter] = useState("");
@@ -156,15 +163,6 @@ export const Grid = (params: GridProps): JSX.Element => {
     [params.noRowsOverlayText],
   );
 
-  const sizeColumnsToFit = useCallback((event: AgGridEvent) => {
-    // @ts-ignore (gridBodyCtrl is private)
-    if (event.api.gridBodyCtrl == undefined) {
-      return;
-      // this is here because ag grid was throwing api undefined error when closing POPPED OUT panel
-    }
-    event.api.sizeColumnsToFit();
-  }, []);
-
   const refreshSelectedRows = useCallback((event: CellEvent): void => {
     // Force-refresh all selected rows to re-run class function, to update selection highlighting
     event.api.refreshCells({
@@ -227,6 +225,13 @@ export const Grid = (params: GridProps): JSX.Element => {
     [refreshSelectedRows],
   );
 
+  // When rows added or removed then resize columns
+  useEffect(() => {
+    if (columnDefs?.length) {
+      sizeColumnsToFit();
+    }
+  }, [columnDefs?.length, sizeColumnsToFit]);
+
   return (
     <div
       data-testid={params.dataTestId}

package/src/components/GridCell.tsx

@@ -72,8 +72,9 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
     }),
     // Default value formatter, otherwise react freaks out on objects
     valueFormatter: (params: ValueFormatterParams) => {
-      const types = ["number", "undefined", "boolean", "string"];
-      if (types.includes(typeof params.value)) return params.value;
+      if (params.value == null) return "-";
+      const types = ["number", "boolean", "string"];
+      if (types.includes(typeof params.value)) return `${params.value}`;
       else return JSON.stringify(params.value);
     },
     ...props,
@@ -130,6 +131,7 @@ export const GenericCellEditorComponentFr = <RowType extends GridBaseRow, FormPr
           updateValue={updateValue}
           saving={saving}
           formProps={formProps}
+          data={data}
           value={value}
           field={field}
           selectedRows={selectedRows}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -8,17 +8,15 @@ import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
 
-interface FinalSelectOption<ValueType> {
+interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
   label?: JSX.Element | string;
   subComponent?: (props: any, ref: any) => any;
 }
 
-export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
-export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
-
-export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
+export type MultiSelectOption<ValueType> = ValueType | MultiFinalSelectOption<ValueType>;
 
 export interface MultiSelectResult<RowType> {
   selectedRows: RowType[];
@@ -31,8 +29,8 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
   filterPlaceholder?: string;
   onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
   options:
-    | SelectOption<ValueType>[]
-    | ((selectedRows: RowType[]) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+    | MultiSelectOption<ValueType>[]
+    | ((selectedRows: RowType[]) => Promise<MultiSelectOption<ValueType>[]> | MultiSelectOption<ValueType>[]);
   initialSelectedValues?: (selectedRows: RowType[]) => any[];
 }
 
@@ -42,7 +40,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
-  const [options, setOptions] = useState<FinalSelectOption<ValueType>[]>();
+  const [options, setOptions] = useState<MultiFinalSelectOption<ValueType>[]>();
   const subSelectedValues = useRef<Record<string, any>>({});
   const [selectedValues, setSelectedValues] = useState<any[]>(() =>
     formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [],
@@ -75,10 +73,10 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
 
       const optionsList = optionsConf?.map((item) => {
         if (item == null || typeof item == "string" || typeof item == "number") {
-          item = { value: item as ValueType, label: item } as FinalSelectOption<ValueType>;
+          item = { value: item as ValueType, label: item } as MultiFinalSelectOption<ValueType>;
         }
         return item;
-      }) as any as FinalSelectOption<ValueType>[];
+      }) as any as MultiFinalSelectOption<ValueType>[];
 
       if (formProps.filtered) {
         // This is needed otherwise when filter input is rendered and sets autofocus

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -11,7 +11,7 @@ export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends Ge
 }
 
 /** Menu configuration types **/
-export const MenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+export const PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
 
 interface MenuSeparatorType {
   __isMenuSeparator__: boolean;
@@ -66,7 +66,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const selectedRowCount = props.selectedRows.length;
 
   const filteredOptions = options?.filter((menuOption) => {
-    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
+    return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
   const { popoverWrapper } = useGridPopoverHook(props);
@@ -74,7 +74,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
     <ComponentLoadingWrapper loading={!filteredOptions}>
       <div className={"Grid-popoverContainerList"}>
         {options?.map((item, index) =>
-          item.label === MenuSeparator ? (
+          item.label === PopoutMenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
           ) : (
             !item.hidden && (

package/src/components/gridForm/GridFormTextInput.tsx

@@ -6,26 +6,30 @@ import { GridBaseRow } from "../Grid";
 
 export interface GridFormTextInputProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
   placeholder?: string;
+  units?: string;
   required?: boolean;
   maxlength?: number;
   width?: string | number;
-  validate?: (value: string) => string | null;
+  // Return null for ok, otherwise an error string
+  validate?: (value: string, data: RowType) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
 export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormProps<RowType>) => {
   const formProps = props.formProps as GridFormTextInputProps<RowType>;
-  const [value, setValue] = useState(props.value ?? "");
+  const initValue = props.value == null ? "" : `${props.value}`;
+  const [value, setValue] = useState(initValue);
 
   const invalid = useCallback(() => {
-    if (formProps.required && value.length == 0) {
+    const trimmedValue = value.trim();
+    if (formProps.required && trimmedValue.length == 0) {
       return `Some text is required`;
     }
-    if (formProps.maxlength && value.length > formProps.maxlength) {
+    if (formProps.maxlength && trimmedValue.length > formProps.maxlength) {
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
     if (formProps.validate) {
-      return formProps.validate(value);
+      return formProps.validate(trimmedValue, props.data);
     }
     return null;
   }, [formProps, value]);
@@ -33,11 +37,11 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
   const save = useCallback(
     async (selectedRows: any[]): Promise<boolean> => {
       if (invalid()) return false;
-
-      if (props.value === (value ?? "")) return true;
+      const trimmedValue = value.trim();
+      if (initValue === trimmedValue) return true;
 
       if (formProps.onSave) {
-        return await formProps.onSave(selectedRows, value);
+        return await formProps.onSave(selectedRows, trimmedValue);
       }
 
       const field = props.field;
@@ -45,10 +49,10 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
         console.error("ColDef has no field set");
         return false;
       }
-      selectedRows.forEach((row) => (row[field] = value));
+      selectedRows.forEach((row) => (row[field] = trimmedValue));
       return true;
     },
-    [invalid, props.value, props.field, value, formProps],
+    [invalid, value, initValue, formProps, props.field],
   );
   const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
 
@@ -58,7 +62,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
-        formatted={""}
+        formatted={formProps.units}
         inputProps={{
           style: { width: "100%" },
           placeholder: formProps.placeholder,

package/src/contexts/GridContext.tsx

@@ -17,6 +17,7 @@ export interface GridContextType {
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
   ensureRowVisible: (id: number) => void;
   ensureSelectedRowIsVisible: () => void;
+  sizeColumnsToFit: () => void;
   stopEditing: () => void;
   updatingCells: (
     props: { selectedRows: GridBaseRow[]; field?: string },
@@ -68,6 +69,9 @@ export const GridContext = createContext<GridContextType>({
   ensureSelectedRowIsVisible: () => {
     console.error("no context provider for ensureSelectedRowIsVisible");
   },
+  sizeColumnsToFit: () => {
+    console.error("no context provider for sizeColumnsToFit");
+  },
   editingCells: () => {
     console.error("no context provider for editingCells");
     return false;

package/src/contexts/GridContextProvider.tsx

@@ -220,6 +220,15 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   };
 
+  /**
+   * Resize columns to fit container
+   */
+  const sizeColumnsToFit = (): void => {
+    gridApiOp((gridApi) => {
+      gridApi.sizeColumnsToFit();
+    });
+  };
+
   const stopEditing = (): void => gridApiOp((gridApi) => gridApi.stopEditing());
 
   const updatingCells = async (
@@ -283,6 +292,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         editingCells,
         ensureRowVisible,
         ensureSelectedRowIsVisible,
+        sizeColumnsToFit,
         stopEditing,
         updatingCells,
       }}

package/src/lui/TextInputFormatted.tsx

@@ -14,9 +14,8 @@ export interface LuiTextInputProps {
   className?: string;
   value: string;
 
-  icon?: JSX.Element;
   placeholder?: string;
-  formatted: string;
+  formatted?: string;
 }
 
 export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
@@ -39,7 +38,6 @@ export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
           {...props.inputProps}
         />
         <span className={"LuiTextInput-formatted"}>{props.formatted}</span>
-        {props.icon}
       </span>
 
       {props.error && (

package/src/stories/components/FormTest.tsx

@@ -13,6 +13,7 @@ export interface IFormTestRow {
   nameType: string;
   numba: string;
   plan: string;
+  distance: number | null;
 }
 
 export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowType>): JSX.Element => {

package/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx

@@ -9,7 +9,7 @@ import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
 import { GridCell } from "@components/GridCell";
 import { IFormTestRow } from "./FormTest";
-import { wait } from "@utils/util";
+import { isFloat, wait } from "@utils/util";
 import { GridPopoverTextArea } from "@components/gridPopoverEdit/GridPopoverTextArea";
 import { GridPopoverTextInput } from "@components/gridPopoverEdit/GridPopoverTextInput";
 
@@ -63,6 +63,30 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
       }),
+      GridPopoverTextInput<IFormTestRow>({
+        field: "distance",
+        headerName: "Number input",
+        maxWidth: 140,
+        valueFormatter: (params) => {
+          const v = params.data.distance;
+          return v != null ? `${v}${params.colDef.cellEditorParams.units}` : v;
+        },
+        cellEditorParams: {
+          maxlength: 12,
+          placeholder: "Enter distance...",
+          units: "m",
+          validate: (value: string) => {
+            if (value.length && !isFloat(value)) return "Value must be a number";
+            return null;
+          },
+          multiEdit: false,
+          onSave: async (selectedRows, value) => {
+            await wait(1000);
+            selectedRows.forEach((selectedRow) => (selectedRow["distance"] = value.length ? parseFloat(value) : null));
+            return true;
+          },
+        },
+      }),
       GridPopoverTextArea<IFormTestRow>({
         field: "plan",
         headerName: "Text area",
@@ -90,8 +114,8 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
   const rowData = useMemo(
     () =>
       [
-        { 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" },
+        { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345", distance: 10 },
+        { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523", distance: null },
       ] as IFormTestRow[],
     [],
   );