diff --git a/docs_headless/src/content/docs/FormDataConsumer.md b/docs_headless/src/content/docs/FormDataConsumer.md index f71eda01723..fabddb3e53f 100644 --- a/docs_headless/src/content/docs/FormDataConsumer.md +++ b/docs_headless/src/content/docs/FormDataConsumer.md @@ -12,7 +12,8 @@ As `` uses the render props pattern, you can avoid creating an ```tsx import * as React from 'react'; -import { Edit, SimpleForm, SelectInput, FormDataConsumer } from 'react-admin'; +import { EditBase, Form, FormDataConsumer } from 'ra-core'; +import { SelectInput } from 'my-ui-library'; const countries = ['USA', 'UK', 'France']; const cities: Record = { @@ -24,8 +25,8 @@ const toChoices = (items: string[]) => items.map(item => ({ id: item, name: item })); const OrderEdit = () => ( - - + +
> {({ formData, ...rest }) => ( @@ -40,8 +41,8 @@ const OrderEdit = () => ( /> )} - - + +
); ``` @@ -52,47 +53,49 @@ You may want to display or hide inputs based on the value of another input - for For such cases, you can use the approach described above, using the `` component. ```tsx -import { FormDataConsumer } from 'react-admin'; +import { EditBase, Form, FormDataConsumer } from 'ra-core'; +import { BooleanInput, TextInput } from 'my-ui-library'; const PostEdit = () => ( - - + +
> {({ formData, ...rest }) => formData.hasEmail && } - - + +
); ``` :::note -By default, `react-hook-form` submits values of unmounted input components. In the above example, the `shouldUnregister` prop of the `` component prevents that from happening. That way, when end users hide an input, its value isn’t included in the submitted data. +By default, `react-hook-form` submits values of unmounted input components. In the above example, the `shouldUnregister` prop of the `
` component prevents that from happening. That way, when end users hide an input, its value isn’t included in the submitted data. ::: :::note -`shouldUnregister` should be avoided when using `` (which internally uses `useFieldArray`) as the unregister function gets called after input unmount/remount and reorder. This limitation is mentioned in the `react-hook-form` [documentation](https://react-hook-form.com/docs/usecontroller#props). If you are in such a situation, you can use the [`transform`](./EditBase.md#transform) prop to manually clean the submitted values. +Setting [`shouldUnregister`](https://react-hook-form.com/docs/useform#shouldUnregister) on a form should be avoided when using `` (which internally uses `useFieldArray`) as the unregister function gets called after input unmount/remount and reorder. This limitation is mentioned in the `react-hook-form` [documentation](https://react-hook-form.com/docs/usecontroller#props). If you are in such a situation, you can use the [`transform`](./EditBase.md#transform) prop to manually clean the submitted values. ::: ## Usage inside an ArrayInput -When used inside an ``, `` provides one additional property to its child function called scopedFormData. It’s an object containing the current values of the currently rendered item. This allows you to create dependencies between inputs inside a ``, as in the following example: +When used inside an ``, `` provides one additional property to its child function called `scopedFormData`. It’s an object containing the current values of the currently rendered item. This allows you to create dependencies between inputs inside a form iterator (e.g. one built with [``](./SimpleFormIteratorBase.md)), as in the following example: ```tsx -import { FormDataConsumer } from 'react-admin'; +import { EditBase, Form, ArrayInputBase, FormDataConsumer } from 'ra-core'; +import { TextInput, SelectInput, SimpleFormIterator } from 'my-ui-library'; const PostEdit = () => ( - - - + + + > {({ formData, // The whole form data - scopedFormData, // The data for this item of the ArrayInput + scopedFormData, // The data for this item of the ArrayInputBase ...rest }) => scopedFormData && scopedFormData.name ? ( @@ -108,18 +111,18 @@ const PostEdit = () => ( } - - - + + + ); ``` :::tip -TypeScript users will notice that scopedFormData is typed as an optional parameter. This is because the `` component can be used outside of an `` and in that case, this parameter will be undefined. If you are inside an ``, you can safely assume that this parameter will be defined. +TypeScript users will notice that scopedFormData is typed as an optional parameter. This is because the `` component can be used outside of an `` and in that case, this parameter will be undefined. If you are inside an ``, you can safely assume that this parameter will be defined. ::: :::tip -If you need to access the effective source of an input inside an ``, for example to change the value programmatically using setValue, you will need to leverage the [`useSourceContext`](./useSourceContext.md) hook. +If you need to access the effective source of an input inside an ``, for example to change the value programmatically using `setValue`, you will need to leverage the [`useSourceContext`](./useSourceContext.md) hook. ::: ## Props @@ -136,7 +139,7 @@ The function used to render a component based on the `formData`. > {({ formData, // The whole form data - scopedFormData, // The data for this item of the ArrayInput + scopedFormData, // The data for this item of the ArrayInputBase }) => { /* ... */ }} diff --git a/docs_headless/src/content/docs/ReferenceManyInputBase.md b/docs_headless/src/content/docs/ReferenceManyInputBase.md index 5caf02af06c..1b8238b1d7f 100644 --- a/docs_headless/src/content/docs/ReferenceManyInputBase.md +++ b/docs_headless/src/content/docs/ReferenceManyInputBase.md @@ -59,7 +59,7 @@ const ProductEdit = () => ( ); ``` -`` requires a `reference` and a `target` prop to know which entity to fetch, and a child component (usually a ``) to edit the relationship. +`` requires a `reference` and a `target` prop to know which entity to fetch, and a child component (an iterator component, usually built with [``](./SimpleFormIteratorBase.md)) to edit the relationship. `` persists the changes in the reference records (variants in the above example) after persisting the changes in the main resource (product in the above example). This means that you can also use `` in `` views. @@ -84,7 +84,7 @@ const ProductEdit = () => ( ## `children` -`` creates an `ArrayInputContext`, so it accepts the same type of children as ``: a Form iterator. React-admin bundles one such iterator: ``. It renders one row for each related record, giving the user the ability to add, remove, or edit related records. +`` creates an `ArrayInputContext`, so it accepts the same type of children as ``: a Form iterator. You can build your own form iterator by leveraging [``](./SimpleFormIteratorBase.md). It renders one row for each related record, giving the user the ability to add, remove, or edit related records. ```jsx @@ -97,7 +97,7 @@ const ProductEdit = () => ( ``` -Check out [the `` documentation](https://marmelab.com/react-admin/SimpleFormIterator.html) for more details. +Check out [the `` documentation](./SimpleFormIteratorBase.md) for more details. ## `defaultValue` @@ -151,7 +151,7 @@ By default, ra-core-ee restricts the possible values to 25 and displays no pagin ## `rankSource` -If the Form iterator you use as `ReferenceManyInputBase` children (e.g. ``) provides controls to reorder the items in the list and the related records have a numeric rank field, you can enable the reordering feature by setting the `rankSource` prop. +If the Form iterator you use as `ReferenceManyInputBase` children provides controls to reorder the items in the list and the related records have a numeric rank field, you can enable the reordering feature by setting the `rankSource` prop. For example, if the variants have a `rank` field, you can set the `rankSource` prop like this: