diff --git a/src/components/gridForm/GridFormTextArea.tsx b/src/components/gridForm/GridFormTextArea.tsx index 46f22758..1a1575b5 100644 --- a/src/components/gridForm/GridFormTextArea.tsx +++ b/src/components/gridForm/GridFormTextArea.tsx @@ -9,6 +9,7 @@ export interface GridFormTextAreaProps extends Gene required?: boolean; maxlength?: number; width?: string | number; + validate?: (value: string) => string | null; onSave?: (selectedRows: RowType[], value: string) => Promise; } @@ -23,6 +24,9 @@ export const GridFormTextArea = (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 index 03b5602e..6e074268 100644 --- a/src/components/gridForm/GridFormTextInput.tsx +++ b/src/components/gridForm/GridFormTextInput.tsx @@ -9,6 +9,7 @@ export interface GridFormTextInputProps extends Gen required?: boolean; maxlength?: number; width?: string | number; + validate?: (value: string) => string | null; onSave?: (selectedRows: RowType[], value: string) => Promise; } @@ -23,6 +24,9 @@ export const GridFormTextInput = (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 new file mode 100644 index 00000000..f818c9b4 --- /dev/null +++ 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 = ( + colDef: GenericCellColDef>, +) => { + return GridCell>({ + 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 new file mode 100644 index 00000000..1a4e7c54 --- /dev/null +++ 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 = ( + colDef: GenericCellColDef>, +) => { + return GridCell>({ + 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 index 1ab6bf3e..117e9420 100644 --- 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 = (props: GridP initialWidth: 65, maxWidth: 85, }), - GridCell>({ + GridPopoverTextInput({ 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 = (props: GridP }, }, }), - GridCell>({ + GridPopoverTextArea({ 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));