@linzjs/step-ag-grid 1.5.2 → 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.2",
+  "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/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[],
     [],
   );