@linzjs/step-ag-grid 1.5.1 → 1.5.3

package/package.json

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

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

@@ -4,7 +4,7 @@ import { MenuItem, MenuDivider, FocusableItem, ClickEvent } from "@react-menu3";
 import { Fragment, useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { delay } from "lodash-es";
+import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
@@ -33,6 +33,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
   options:
     | SelectOption<ValueType>[]
     | ((selectedRows: RowType[]) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+  initialSelectedValues?: (selectedRows: RowType[]) => any[];
 }
 
 export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(props: GridFormProps<RowType>) => {
@@ -43,16 +44,17 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption<ValueType>[]>();
   const subSelectedValues = useRef<Record<string, any>>({});
-  const [selectedValues, setSelectedValues] = useState<any[]>([]);
+  const [selectedValues, setSelectedValues] = useState<any[]>(() =>
+    formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [],
+  );
 
   const save = useCallback(
     async (selectedRows: RowType[]): Promise<boolean> => {
-      const values: Record<string, any> = {};
-      selectedValues.forEach((value) => {
-        values[value] = subSelectedValues.current[value] ?? true;
-      });
+      const values: Record<string, any> = fromPairs(
+        selectedValues.map((value) => [value, subSelectedValues.current[value] ?? true]),
+      );
       if (formProps.onSave) {
-        return await formProps.onSave({ selectedRows, values: selectedValues });
+        return await formProps.onSave({ selectedRows, values });
       }
       return true;
     },

package/src/components/gridForm/GridFormTextInput.tsx

@@ -6,6 +6,7 @@ import { GridBaseRow } from "../Grid";
 
 export interface GridFormTextInputProps<RowType extends GridBaseRow> extends GenericCellEditorParams<RowType> {
   placeholder?: string;
+  units?: string;
   required?: boolean;
   maxlength?: number;
   width?: string | number;
@@ -15,17 +16,19 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Gen
 
 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);
     }
     return null;
   }, [formProps, value]);
@@ -33,11 +36,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 +48,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 +61,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/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[],
     [],
   );

package/src/stories/components/GridPopoutEditMultiSelect.stories.tsx

@@ -45,48 +45,71 @@ interface ITestRow {
 const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
-  const columnDefs = useMemo(
-    () =>
-      [
-        GridCell({
-          field: "id",
-          headerName: "Id",
-          initialWidth: 65,
-          maxWidth: 85,
-        }),
-        GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>({
-          field: "position",
-          initialWidth: 65,
-          maxWidth: 150,
-          headerName: "Position",
-          cellEditorParams: {
-            multiEdit: false,
-            filtered: true,
-            filterPlaceholder: "Filter position",
-            options: [
-              { value: "a", label: "Architect" },
-              { value: "b", label: "Developer" },
-              { value: "c", label: "Product Owner" },
-              { value: "d", label: "Scrum Master" },
-              { value: "e", label: "Tester" },
-              MenuSeparator,
-              {
-                value: "f",
-                label: "Other",
-                subComponent: (props) => <GridSubComponentTextArea {...props} />,
-              },
-            ],
-            onSave: async (result: MultiSelectResult<ITestRow>) => {
-              // eslint-disable-next-line no-console
-              console.log(result);
-              await wait(1000);
-              return true;
+  const columnDefs = useMemo(() => {
+    const positionTwoMap: Record<string, string> = {
+      "1": "One",
+      "2": "Two",
+      "3": "Three",
+    };
+    return [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position"]>({
+        field: "position",
+        initialWidth: 65,
+        maxWidth: 150,
+        headerName: "Position",
+        cellEditorParams: {
+          multiEdit: false,
+          filtered: true,
+          filterPlaceholder: "Filter position",
+          options: [
+            { value: "a", label: "Architect" },
+            { value: "b", label: "Developer" },
+            { value: "c", label: "Product Owner" },
+            { value: "d", label: "Scrum Master" },
+            { value: "e", label: "Tester" },
+            MenuSeparator,
+            {
+              value: "f",
+              label: "Other",
+              subComponent: (props) => <GridSubComponentTextArea {...props} />,
             },
+          ],
+          onSave: async (result: MultiSelectResult<ITestRow>) => {
+            // eslint-disable-next-line no-console
+            console.log(result);
+            await wait(1000);
+            return true;
           },
-        }),
-      ] as ColDef[],
-    [],
-  );
+        },
+      }),
+      GridPopoutEditMultiSelect<ITestRow, ITestRow["position2"]>({
+        field: "position2",
+        initialWidth: 65,
+        maxWidth: 150,
+        headerName: "Inital editor values ",
+        valueGetter: (props) => positionTwoMap[props.data.position2],
+        cellEditorParams: {
+          multiEdit: false,
+          filtered: true,
+          filterPlaceholder: "Filter position",
+          initialSelectedValues: (selectedRows) => [selectedRows[0].position2],
+          options: Object.entries(positionTwoMap).map(([k, v]) => ({ value: k, label: v })),
+          onSave: async (result: MultiSelectResult<ITestRow>) => {
+            // eslint-disable-next-line no-console
+            console.log(result);
+            await wait(1000);
+            return true;
+          },
+        },
+      }),
+    ] as ColDef[];
+  }, []);
 
   const rowData = useMemo(
     () =>