Merge pull request #58 from DouglasNeuroInformatics/dev

fix: rename beforeSubmit to onBeforeSubmit (forgot to follow convention)

Author: joshunrau

src/components/Form/Form.stories.tsx

@@ -540,7 +540,7 @@ export const WithError: StoryObj<typeof Form> = {
         variant: 'input'
       }
     },
-    beforeSubmit: (data) => {
+    onBeforeSubmit: (data) => {
       if (data.name === 'Winston') {
         return { success: true };
       }

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(
         <Form
-          beforeSubmit={beforeSubmit}
           content={{
             value: {
               kind: 'number',
@@ -135,6 +134,7 @@ describe('Form', () => {
           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));

src/components/Form/Form.tsx

@@ -29,7 +29,6 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
     left?: React.ReactNode;
     right?: React.ReactNode;
   };
-  beforeSubmit?: (data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>;
   className?: string;
   content: FormContent<TData>;
   customStyles?: {
@@ -39,6 +38,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
   fieldsFooter?: React.ReactNode;
   id?: string;
   initialValues?: PartialNullableFormDataType<NoInfer<TData>>;
+  onBeforeSubmit?: (data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>;
   onError?: (error: z.ZodError<NoInfer<TData>>) => void;
   onSubmit: (data: NoInfer<TData>) => Promisable<void>;
   preventResetValuesOnReset?: boolean;
@@ -52,13 +52,13 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
 
 const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
   additionalButtons,
-  beforeSubmit,
   className,
   content,
   customStyles,
   fieldsFooter,
   id,
   initialValues,
+  onBeforeSubmit,
   onError,
   onSubmit,
   preventResetValuesOnReset,
@@ -116,8 +116,8 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
       handleError(result.error);
       return;
     }
-    if (beforeSubmit) {
-      const beforeSubmitResult = await beforeSubmit(result.data);
+    if (onBeforeSubmit) {
+      const beforeSubmitResult = await onBeforeSubmit(result.data);
       if (!beforeSubmitResult.success) {
         setErrors({});
         setRootErrors([beforeSubmitResult.errorMessage]);