feat: Add validate to generic inputs

linz · Oct 26, 2022 · 2dd60d2 · 2dd60d2
1 parent f0d8bae
commit 2dd60d2
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 6 deletions.
diff --git a/src/components/gridForm/GridFormTextArea.tsx b/src/components/gridForm/GridFormTextArea.tsx
@@ -9,6 +9,7 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends Gene
   required?: boolean;
   maxlength?: number;
   width?: string | number;
+  validate?: (value: string) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
@@ -23,6 +24,9 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
     if (formProps.maxlength && value.length > formProps.maxlength) {
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
+    if (formProps.validate) {
+      return formProps.validate(value);
+    }
     return null;
   }, [formProps.maxlength, formProps.required, value.length]);
 

diff --git a/src/components/gridForm/GridFormTextInput.tsx b/src/components/gridForm/GridFormTextInput.tsx
@@ -9,6 +9,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Gen
   required?: boolean;
   maxlength?: number;
   width?: string | number;
+  validate?: (value: string) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
@@ -23,6 +24,9 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
     if (formProps.maxlength && value.length > formProps.maxlength) {
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
+    if (formProps.validate) {
+      return formProps.validate(value);
+    }
     return null;
   }, [formProps.maxlength, formProps.required, value.length]);
 

diff --git a/src/components/gridPopoverEdit/GridPopoverTextArea.ts b/src/components/gridPopoverEdit/GridPopoverTextArea.ts
@@ -0,0 +1,20 @@
+import { GridCell } from "../GridCell";
+import { GridBaseRow } from "../Grid";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+import { GridFormTextArea, GridFormTextAreaProps } from "../gridForm/GridFormTextArea";
+
+export const GridPopoverTextArea = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormTextAreaProps<RowType>>,
+) => {
+  return GridCell<RowType, GridFormTextAreaProps<RowType>>({
+    maxWidth: 260,
+    ...colDef,
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        width: 260,
+        ...colDef.cellEditorParams,
+        form: GridFormTextArea,
+      },
+    }),
+  });
+};
diff --git a/src/components/gridPopoverEdit/GridPopoverTextInput.ts b/src/components/gridPopoverEdit/GridPopoverTextInput.ts
@@ -0,0 +1,20 @@
+import { GridCell } from "../GridCell";
+import { GridBaseRow } from "../Grid";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+import { GridFormTextInput, GridFormTextInputProps } from "../gridForm/GridFormTextInput";
+
+export const GridPopoverTextInput = <RowType extends GridBaseRow>(
+  colDef: GenericCellColDef<RowType, GridFormTextInputProps<RowType>>,
+) => {
+  return GridCell<RowType, GridFormTextInputProps<RowType>>({
+    maxWidth: 140,
+    ...colDef,
+    ...(colDef?.cellEditorParams && {
+      cellEditorParams: {
+        width: 240,
+        ...colDef.cellEditorParams,
+        form: GridFormTextInput,
+      },
+    }),
+  });
+};
diff --git a/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx b/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx
@@ -12,6 +12,8 @@ import { IFormTestRow } from "./FormTest";
 import { GridFormTextArea, GridFormTextAreaProps } from "../../components/gridForm/GridFormTextArea";
 import { GridFormTextInput, GridFormTextInputProps } from "../../components/gridForm/GridFormTextInput";
 import { wait } from "../../utils/util";
+import { GridPopoverTextArea } from "../../components/gridPopoverEdit/GridPopoverTextArea";
+import { GridPopoverTextInput } from "../../components/gridPopoverEdit/GridPopoverTextInput";
 
 export default {
   title: "Components / Grids",
@@ -43,16 +45,18 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridCell<IFormTestRow, GridFormTextInputProps<IFormTestRow>>({
+      GridPopoverTextInput<IFormTestRow>({
         field: "name",
         headerName: "Text input",
         maxWidth: 140,
         cellEditorParams: {
-          form: GridFormTextInput,
           required: true,
           maxlength: 12,
           placeholder: "Enter some text...",
-          width: 240,
+          validate: (value: string) => {
+            if (value === "never") return "The value 'never' is not allowed";
+            return null;
+          },
           multiEdit: false,
           onSave: async (selectedRows, value) => {
             await wait(1000);
@@ -61,17 +65,19 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           },
         },
       }),
-      GridCell<IFormTestRow, GridFormTextAreaProps<IFormTestRow>>({
+      GridPopoverTextArea<IFormTestRow>({
         field: "plan",
         headerName: "Text area",
         maxWidth: 140,
         cellEditorParams: {
-          form: GridFormTextArea,
           required: true,
           maxlength: 32,
           placeholder: "Enter some text...",
-          width: 260,
           multiEdit: true,
+          validate: (value: string) => {
+            if (value === "never") return "The value 'never' is not allowed";
+            return null;
+          },
           onSave: async (selectedRows, value) => {
             await wait(1000);
             selectedRows.forEach((selectedRow) => (selectedRow["plan"] = value));