More agnostic form component

docs/pages/toolpad/core/api/edit.json

@@ -1,8 +1,7 @@
 {
   "props": {
     "dataSource": { "type": { "name": "object" } },
-    "onSubmitSuccess": { "type": { "name": "func" } },
-    "resetOnSubmit": { "type": { "name": "bool" } }
+    "onSubmitSuccess": { "type": { "name": "func" } }
   },
   "name": "Edit",
   "imports": ["import { Edit } from '@toolpad/core/Crud';"],

docs/translations/api-docs/edit/edit.json

@@ -2,10 +2,7 @@
   "componentDescription": "",
   "propDescriptions": {
     "dataSource": { "description": "Server-side data source." },
-    "onSubmitSuccess": { "description": "Callback fired when the form is successfully submitted." },
-    "resetOnSubmit": {
-      "description": "Whether the form fields should reset after the form is submitted."
-    }
+    "onSubmitSuccess": { "description": "Callback fired when the form is successfully submitted." }
   },
   "classDescriptions": {}
 }

packages/toolpad-core/src/Crud/Create.tsx

@@ -3,8 +3,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import invariant from 'invariant';
 import { CrudForm } from './CrudForm';
-import { DataModel, DataSource, OmitId } from './shared';
+import { useNotifications } from '../useNotifications';
 import { CrudContext } from '../shared/context';
+import { DataModel, DataSource, OmitId } from './shared';
 
 export interface CreateProps<D extends DataModel> {
   /**
@@ -19,7 +20,7 @@ export interface CreateProps<D extends DataModel> {
   /**
    * Callback fired when the form is successfully submitted.
    */
-  onSubmitSuccess?: () => void;
+  onSubmitSuccess?: (formValues: Partial<OmitId<D>>) => void | Promise<void>;
   /**
    * Whether the form fields should reset after the form is submitted.
    */
@@ -36,36 +37,126 @@ export interface CreateProps<D extends DataModel> {
  * - [Create API](https://mui.com/toolpad/core/api/create)
  */
 function Create<D extends DataModel>(props: CreateProps<D>) {
-  const { initialValues, onSubmitSuccess, resetOnSubmit } = props;
+  const { initialValues = {} as Partial<OmitId<D>>, onSubmitSuccess, resetOnSubmit } = props;
 
   const crudContext = React.useContext(CrudContext);
   const dataSource = (props.dataSource ?? crudContext.dataSource) as Exclude<
     typeof props.dataSource,
     undefined
   >;
 
+  const notifications = useNotifications();
+
   invariant(dataSource, 'No data source found.');
 
-  const { createOne } = dataSource;
+  const { fields, createOne, validate } = dataSource;
 
-  const handleCreate = React.useCallback(
-    async (formValues: Partial<OmitId<D>>) => {
-      await createOne(formValues);
+  const [formState, setFormState] = React.useState<{
+    values: Partial<OmitId<D>>;
+    errors: Partial<Record<keyof D, string>>;
+  }>({
+    values: {
+      ...Object.fromEntries(
+        fields
+          .filter(({ field }) => field !== 'id')
+          .map(({ field, type }) => [
+            field,
+            type === 'boolean' ? (initialValues[field] ?? false) : initialValues[field],
+          ]),
+      ),
+      ...initialValues,
+    },
+    errors: {},
+  });
+  const formValues = formState.values;
+  const formErrors = formState.errors;
+
+  const setFormValues = React.useCallback((newFormValues: Partial<OmitId<D>>) => {
+    setFormState((previousState) => ({
+      ...previousState,
+      values: newFormValues,
+    }));
+  }, []);
+
+  const setFormErrors = React.useCallback((newFormErrors: Partial<Record<keyof D, string>>) => {
+    setFormState((previousState) => ({
+      ...previousState,
+      errors: newFormErrors,
+    }));
+  }, []);
+
+  const handleFormFieldChange = React.useCallback(
+    (name: keyof D, value: string | number | boolean | File | null) => {
+      const validateField = async (values: Partial<OmitId<D>>) => {
+        if (validate) {
+          const errors = await validate(values);
+          setFormErrors({ ...formErrors, [name]: errors[name] });
+        }
+      };
+
+      const newFormValues = { ...formValues, [name]: value };
+
+      setFormValues(newFormValues);
+      validateField(newFormValues);
     },
-    [createOne],
+    [formErrors, formValues, setFormErrors, setFormValues, validate],
   );
 
+  const handleFormReset = React.useCallback(() => {
+    setFormValues(initialValues);
+  }, [initialValues, setFormValues]);
+
+  const handleFormSubmit = React.useCallback(async () => {
+    if (validate) {
+      const errors = await validate(formValues);
+      if (Object.keys(errors).length > 0) {
+        setFormErrors(errors);
+        throw new Error('Form validation failed');
+      }
+    }
+    setFormErrors({});
+
+    try {
+      await createOne(formValues);
+      notifications.show('Item created successfully.', {
+        severity: 'success',
+        autoHideDuration: 3000,
+      });
+
+      if (onSubmitSuccess) {
+        await onSubmitSuccess(formValues);
+      }
+
+      if (resetOnSubmit) {
+        handleFormReset();
+      }
+    } catch (createError) {
+      notifications.show(`Failed to create item.\n${(createError as Error).message}`, {
+        severity: 'error',
+        autoHideDuration: 3000,
+      });
+      throw createError;
+    }
+  }, [
+    createOne,
+    formValues,
+    handleFormReset,
+    notifications,
+    onSubmitSuccess,
+    resetOnSubmit,
+    setFormErrors,
+    validate,
+  ]);
+
   return (
     <CrudForm
       dataSource={dataSource}
-      initialValues={initialValues}
-      onSubmit={handleCreate}
-      onSubmitSuccess={onSubmitSuccess}
-      resetOnSubmit={resetOnSubmit}
+      formState={formState}
+      onFieldChange={handleFormFieldChange}
+      onSubmit={handleFormSubmit}
+      onReset={handleFormReset}
       localeText={{
         submitButtonLabel: 'Create',
-        submitSuccessMessage: 'Item created successfully.',
-        submitErrorMessage: 'Failed to create item.',
       }}
     />
   );