Merge pull request #3670 from natrim/patch-13

[RFR][v3] FormDataConsumer - add subscription prop to the FormDataConsumer
marmelab · Sep 13, 2019 · e5ddaca · e5ddaca
2 parents 2f347d8 + 931966b
commit e5ddaca
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -1486,3 +1486,22 @@ import { FormDataConsumer } from 'react-admin';
      </Edit>
  );
 ```
+
+**Tip**: When using a `FormDataConsumer` you can define `subscription` prop to pass to the `react-final-form`
+
+```jsx
+import { FormDataConsumer } from 'react-admin';
+
+ const PostEdit = (props) => (
+     <Edit {...props}>
+         <SimpleForm>
+             <BooleanInput source="hasEmail" />
+             <FormDataConsume subscription={{ values: true }}>
+                 {({ formData, ...rest }) => formData.hasEmail &&
+                      <TextInput source="email" {...rest} />
+                 }
+             </FormDataConsumer>
+         </SimpleForm>
+     </Edit>
+ );
+```
diff --git a/packages/ra-core/src/form/FormDataConsumer.tsx b/packages/ra-core/src/form/FormDataConsumer.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode, SFC } from 'react';
 import { useFormState } from 'react-final-form';
+import { FormSubscription } from 'final-form';
 import get from 'lodash/get';
 
 import warning from '../util/warning';
@@ -15,6 +16,7 @@ interface ConnectedProps {
     form?: string;
     record?: any;
     source?: string;
+    subscription?: FormSubscription;
     [key: string]: any;
 }
 
@@ -117,8 +119,8 @@ export const FormDataConsumerView: SFC<Props> = ({
     return ret === undefined ? null : ret;
 };
 
-const FormDataConsumer = (props: ConnectedProps) => {
-    const formState = useFormState();
+const FormDataConsumer = ({ subscription, ...props }: ConnectedProps) => {
+    const formState = useFormState({ subscription });
 
     return <FormDataConsumerView formData={formState.values} {...props} />;
 };