diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx index ec7cdb5e..436b2135 100644 --- a/src/components/Form/Form.stories.tsx +++ b/src/components/Form/Form.stories.tsx @@ -540,7 +540,7 @@ export const WithError: StoryObj = { variant: 'input' } }, - beforeSubmit: (data) => { + onBeforeSubmit: (data) => { if (data.name === 'Winston') { return { success: true }; } diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx index fb1c93f6..dee5f734 100644 --- a/src/components/Form/Form.test.tsx +++ b/src/components/Form/Form.test.tsx @@ -116,14 +116,13 @@ describe('Form', () => { }); }); - describe('custom beforeSubmit error', () => { - let beforeSubmit: Mock; + describe('custom onBeforeSubmit error', () => { + let onBeforeSubmit: Mock; beforeEach(() => { - beforeSubmit = vi.fn(); + onBeforeSubmit = vi.fn(); render(
{ validationSchema={z.object({ value: z.number({ message: 'Please enter a number' }) })} + onBeforeSubmit={onBeforeSubmit} onError={onError} onSubmit={onSubmit} /> @@ -156,12 +156,12 @@ describe('Form', () => { 'Please enter a number' ]) ); - expect(beforeSubmit).not.toHaveBeenCalled(); + expect(onBeforeSubmit).not.toHaveBeenCalled(); expect(onSubmit).not.toHaveBeenCalled(); }); - it('should not allow submitting the form with the beforeSubmit error', async () => { - beforeSubmit.mockResolvedValueOnce({ errorMessage: 'Invalid!', success: false }); + it('should not allow submitting the form with the onBeforeSubmit error', async () => { + onBeforeSubmit.mockResolvedValueOnce({ errorMessage: 'Invalid!', success: false }); const field: HTMLInputElement = screen.getByLabelText('Value'); await userEvent.type(field, '-1'); fireEvent.submit(screen.getByTestId(testid)); @@ -171,8 +171,8 @@ describe('Form', () => { expect(onSubmit).not.toHaveBeenCalled(); }); - it('should allow submitting the form if beforeSubmit returns true', async () => { - beforeSubmit.mockResolvedValueOnce({ success: true }); + it('should allow submitting the form if onBeforeSubmit returns true', async () => { + onBeforeSubmit.mockResolvedValueOnce({ success: true }); const field: HTMLInputElement = screen.getByLabelText('Value'); await userEvent.type(field, '-1'); fireEvent.submit(screen.getByTestId(testid)); diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index cf42703b..da4d2526 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -29,7 +29,6 @@ type FormProps, TData extends z.TypeOf) => Promisable<{ errorMessage: string; success: false } | { success: true }>; className?: string; content: FormContent; customStyles?: { @@ -39,6 +38,7 @@ type FormProps, TData extends z.TypeOf>; + onBeforeSubmit?: (data: NoInfer) => Promisable<{ errorMessage: string; success: false } | { success: true }>; onError?: (error: z.ZodError>) => void; onSubmit: (data: NoInfer) => Promisable; preventResetValuesOnReset?: boolean; @@ -52,13 +52,13 @@ type FormProps, TData extends z.TypeOf, TData extends z.TypeOf = z.TypeOf>({ additionalButtons, - beforeSubmit, className, content, customStyles, fieldsFooter, id, initialValues, + onBeforeSubmit, onError, onSubmit, preventResetValuesOnReset, @@ -116,8 +116,8 @@ const Form = , TData extends z.TypeOf