From 35b08fff70757a2e778c731813b4419f17e8c782 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Tue, 1 Oct 2019 15:16:25 +0200 Subject: [PATCH] SimpleForm/TabbedForm - deprecate defaultValue --- UPGRADE.md | 29 ++++++++++++++++++ docs/CreateEdit.md | 22 +++++++------- .../ra-ui-materialui/src/form/SimpleForm.js | 17 ++++++----- .../ra-ui-materialui/src/form/TabbedForm.js | 17 ++++++----- .../src/form/getFormInitialValues.js | 30 +++++++++++++++++++ packages/ra-ui-materialui/src/form/index.js | 2 ++ 6 files changed, 91 insertions(+), 26 deletions(-) create mode 100644 packages/ra-ui-materialui/src/form/getFormInitialValues.js diff --git a/UPGRADE.md b/UPGRADE.md index 7e0ea32f35b..1657dd8576d 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -917,6 +917,35 @@ const PostFilter = props => ; ``` +## Form prop `defaultValue` was renamed to `initialValues` + +This is actually to be consistent with the underlying form library ([final-form](https://final-form.org/docs/react-final-form)) + +```diff +// for SimpleForm +const PostEdit = props => + + + // ... + + ; +// for TabbedForm +const PostEdit = props => + + + @@ -486,11 +488,11 @@ export const PostCreate = (props) => ( ); ``` -**Tip**: You can include properties in the form `defaultValue` that are not listed as input components, like the `created_at` property in the previous example. +**Tip**: You can include properties in the form `initialValues` that are not listed as input components, like the `created_at` property in the previous example. ### Per Input Default Value -Alternatively, you can specify a `defaultValue` prop directly in `` components. Just like for form-level default values, an input-level default value can be a scalar, or a function returning a scalar. React-admin will merge the input default values with the form default value (input > form): +Alternatively, you can specify a `defaultValue` prop directly in `` components. Default value can be a scalar, or a function returning a scalar. React-admin will merge the input default values with the form default value (input > form): ```jsx export const PostCreate = (props) => ( @@ -630,7 +632,7 @@ const validateStock = [required(), number(), minValue(0)]; export const ProductEdit = ({ ...props }) => ( - + ... {/* do this */} @@ -914,7 +916,7 @@ export const UserCreate = ({ permissions, ...props }) => } - defaultValue={{ role: 'user' }} + initialValues={{ role: 'user' }} > {permissions === 'admin' && @@ -932,7 +934,7 @@ This also works inside an `Edition` view with a `TabbedForm`, and you can hide a ```jsx export const UserEdit = ({ permissions, ...props }) => } {...props}> - + {permissions === 'admin' && } diff --git a/packages/ra-ui-materialui/src/form/SimpleForm.js b/packages/ra-ui-materialui/src/form/SimpleForm.js index 9ae37e8c6ea..f49810ae3b4 100644 --- a/packages/ra-ui-materialui/src/form/SimpleForm.js +++ b/packages/ra-ui-materialui/src/form/SimpleForm.js @@ -5,11 +5,12 @@ import arrayMutators from 'final-form-arrays'; import classnames from 'classnames'; import { useTranslate, useInitializeFormWithRecord } from 'ra-core'; +import getFormInitialValues from './getFormInitialValues'; import FormInput from './FormInput'; import Toolbar from './Toolbar'; import CardContentInner from '../layout/CardContentInner'; -const SimpleForm = ({ initialValues, saving, ...props }) => { +const SimpleForm = ({ initialValues, defaultValue, saving, ...props }) => { let redirect = useRef(props.redirect); // We don't use state here for two reasons: // 1. There no way to execute code only after the state has been updated @@ -25,15 +26,14 @@ const SimpleForm = ({ initialValues, saving, ...props }) => { props.save(values, finalRedirect); }; - const finalInitialValues = { - ...initialValues, - ...props.record, - }; - return (
({ }, })); -const TabbedForm = ({ initialValues, saving, ...props }) => { +const TabbedForm = ({ initialValues, defaultValue, saving, ...props }) => { let redirect = useRef(props.redirect); // We don't use state here for two reasons: // 1. There no way to execute code only after the state has been updated @@ -39,15 +40,14 @@ const TabbedForm = ({ initialValues, saving, ...props }) => { props.save(values, finalRedirect); }; - const finalInitialValues = { - ...initialValues, - ...props.record, - }; - return (