From add545a9dbae84385ebe8b76c98a6fb68bc23bb4 Mon Sep 17 00:00:00 2001 From: Natrim Date: Mon, 2 Sep 2019 08:40:59 +0200 Subject: [PATCH] SimpleForm/TabbedForm - deprecate defaultValue and add initialValues to proptypes --- UPGRADE.md | 27 +++++++++++++++++ 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, 89 insertions(+), 26 deletions(-) create mode 100644 packages/ra-ui-materialui/src/form/getFormInitialValues.js diff --git a/UPGRADE.md b/UPGRADE.md index ffbb87cfd34..51117dabb34 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -883,6 +883,33 @@ const PostFilter = props => ; ``` +## Form prop `defaultValue` was renamed to `initialValues` + +```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 59ffdd77f9b..1580f36cdd4 100644 --- a/packages/ra-ui-materialui/src/form/SimpleForm.js +++ b/packages/ra-ui-materialui/src/form/SimpleForm.js @@ -6,11 +6,12 @@ import { useSelector } from 'react-redux'; 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, ...props }) => { +const SimpleForm = ({ initialValues, defaultValue, ...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 @@ -27,15 +28,14 @@ const SimpleForm = ({ initialValues, ...props }) => { props.save(values, finalRedirect); }; - const finalInitialValues = { - ...initialValues, - ...props.record, - }; - return (
({ }, })); -const TabbedForm = ({ initialValues, ...props }) => { +const TabbedForm = ({ initialValues, defaultValue, ...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, ...props }) => { props.save(values, finalRedirect); }; - const finalInitialValues = { - ...initialValues, - ...props.record, - }; - return (