From ba065051afa7c81a7ca5f6ce936556d191cecfc2 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 29 Nov 2023 11:39:40 +0100
Subject: [PATCH 1/6] Update CreateInDialogButton documentation
---
docs/CreateInDialogButton.md | 224 +++++++++++++++++++++++++++++++++--
docs/EditInDialogButton.md | 4 +-
2 files changed, 217 insertions(+), 11 deletions(-)
diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md
index b5dd02e3320..57e0edc09d0 100644
--- a/docs/CreateInDialogButton.md
+++ b/docs/CreateInDialogButton.md
@@ -7,19 +7,29 @@ title: "CreateInDialogButton"
This [Enterprise Edition](https://marmelab.com/ra-enterprise)` view inside a dialog, hence allowing to create a new record without leaving the current view.
-It can be useful in case you want the ability to create a record linked by a reference to the currently edited record, or if you have a nested `` inside a `` or an `` view.
-
+It can be useful in case you want the ability to create a record linked by a reference to the currently edited record, or if you have a nested `` inside a `` or an `` view.
+
Note that this component doesn't use routing, so it doesn't change the URL. It's therefore not possible to bookmark the creation dialog, or to link to it from another page. If you need that functionality, use [``](./CreateDialog.md) instead.
## Usage
-Put `` wherever you would put a ``, and use the same children as you would for a `` component (e.g. a ``):
+First, install the `@react-admin/ra-form-layout` package:
+
+```sh
+npm install --save @react-admin/ra-form-layout
+# or
+yarn add @react-admin/ra-form-layout
+```
+
+**Tip**: [`ra-form-layout`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createindialogbutton-editindialogbutton-and-EditInDialogButton) is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://marmelab.com/ra-enterprise/) plans to access this package.
+
+Then, put `` wherever you would put a ``, and use the same children as you would for a `` component (e.g. a ``):
{% raw %}
```jsx
@@ -63,15 +73,211 @@ const CompanyShow = () => (
In the above example, `` is used to create a new employee for the current company. [The `` component](./WithRecord.md) helps to set the new employee company id by default.
+## Props
+
`` accepts the following props:
-* `inline`: set to true to display only a Material UI `` instead of the full ``. The label will still be available as a `` though.
-* `icon`: allows to override the default icon.
-* `label`: allows to override the default button label. I18N is supported.
-* `ButtonProps`: object containing props to pass to Material UI's ``.
-* remaining props will be passed to the [``](./CreateDialog.md) dialog component.
+| Prop | Required | Type | Default | Description |
+| -------------- | -------- | ----------------- | ------- | ----------- |
+| `children` | Required | `ReactNode` | | The content of the dialog. |
+| `ButtonProps` | Optional | `object` | | Object containing props to pass to Material UI's ``. |
+| `emptyWhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
+| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
+| `icon` | Optional | `ReactElement` | | Allows to override the default icon. |
+| `inline` | Optional | `boolean` | | Set to true to display only a Material UI `` instead of the full ``. |
+| `label` | Optional | `string` | | Allows to override the default button label. I18N is supported. |
+| `maxWidth` | Optional | `string` | `sm` | The max width of the dialog. |
+| `mutation Options` | Optional | `object` | | The options to pass to the `useMutation` hook. |
+| `resource` | Optional | `string` | | The resource name, e.g. `posts`
+| `sx` | Optional | `object` | | Override the styles applied to the dialog component. |
+
+
+## `children`
+
+`` doesn't render any field by default - it delegates this to its children, usually a Form component.
+
+React-admin provides several built-in form layout components:
+
+- [`SimpleForm`](./SimpleForm.md) for a single-column layout
+- [`TabbedForm`](./TabbedForm.md) for a tabbed layout
+- [`AccordionForm`](./AccordionForm.md) for long forms with collapsible sections
+- [`LongForm`](./LongForm.md) for long forms with a navigation sidebar
+- [`WizardForm`](./WizardForm.md) for multi-step forms
+- [`CreateDialog`](./CreateDialog.md) for sub-forms in a modal dialog
+- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
+
+To use an alternative form layout, switch the `` child component:
+
+```diff
+const CreateButton = () => (
+
+-
++
++
+
++
+
+-
++
+
+);
+```
+
+## `ButtonProps`
+
+The `ButtonProps` prop allows you to pass props to the MUI `` component. For instance, to change the color and size of the button:
+
+{% raw %}
+```jsx
+const CreateButton = () => (
+
+
+ ...
+
+
+);
+```
+{% endraw %}
+
+## `emptyWhileLoading`
+
+By default, `` renders its child component even before the `dataProvider.getOne()` call returns. If you use `` or ``, this isn't a problem as these components only render when the record has been fetched. But if you use a custom child component that expects the record context to be defined, your component will throw an error.
+
+To avoid this, set the `emptyWhileLoading` prop to `true`:
+
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+
+## `fullWidth`
+
+By default, `` renders a [Material UI ``](https://mui.com/material-ui/react-dialog/#full-screen-dialogs) component that takes the width of its content.
+
+You can make the dialog full width by setting the `fullWidth` prop to `true`:
+
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+
+In addition, you can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. When the `fullWidth` prop is true, the dialog will adapt based on the `maxWidth` value.
+
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+
+## `icon`
+
+The `icon` prop allows you to pass an icon to the button. It can be a MUI icon component, or a custom icon component.
+
+```jsx
+import { Create } from '@mui/icons-material';
+
+const CreateButton = () => (
+
+);
+```
+
+## `inline`
+
+By default, `` renders a `` component. If you want to display only an ``, set the `inline` prop to `true`:
+
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+
+## `label`
+
+The `label` prop allows you to pass a custom label to the button, instead of the default ("Create"). It can be a string, or a React element.
+
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+
+## `maxWidth`
+
+The `maxWidth` prop allows you to set the max width of the dialog. It can be one of the following values: `xs`, `sm`, `md`, `lg`, `xl`, `false`. The default is `sm`.
+
+For example, you can use that prop to make the dialog full width:
+
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+
+## `mutationOptions`
+
+The `mutationOptions` prop allows you to pass options to the `useMutation` hook.
-Check out [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createindialogbutton-editindialogbutton-and-showindialogbutton) for more details.
+This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.create()` call.
+
+{% raw %}
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+{% endraw %}
+
+## `resource`
+
+The `resource` prop allows you to pass the resource name to the `` component. If not provided, it will be deduced from the resource context.
+
+This is useful to link to a related record. For instance, the following button lets you create the author of a book:
+
+```jsx
+const CreateAuthorButton = () => {
+ return (
+
+ ...
+
+ );
+};
+```
+
+## `sx`
+
+Customize the styles applied to the Material UI `` component:
+
+{% raw %}
+```jsx
+const CreateButton = () => (
+
+ ...
+
+);
+```
+{% endraw %}
## Combining With ``
diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md
index ee88f67ed6e..f39eac61801 100644
--- a/docs/EditInDialogButton.md
+++ b/docs/EditInDialogButton.md
@@ -74,7 +74,7 @@ const CompanyShow = () => (
| -------------- | -------- | ----------------- | ------- | ----------- |
| `children` | Required | `ReactNode` | | The content of the dialog. |
| `ButtonProps` | Optional | `object` | | Object containing props to pass to Material UI's ``. |
-| `empty WhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
+| `emptyWhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
| `icon` | Optional | `ReactElement` | | Allows to override the default icon. |
| `id` | Optional | `string | number` | | The record id. If not provided, it will be deduced from the record context. |
@@ -246,7 +246,7 @@ const EditButton = () => (
## `mutationOptions`
-The `queryOptions` prop allows you to pass options to the `useMutation` hook.
+The `mutationOptions` prop allows you to pass options to the `useMutation` hook.
This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.update()` call.
From f865a02c84c947ccfce961fff2f3d6b15caae298 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 29 Nov 2023 12:01:37 +0100
Subject: [PATCH 2/6] Udate EditDialog documentation
---
docs/EditDialog.md | 235 +++++++++++++++++++++++++++++++++++++++++----
1 file changed, 217 insertions(+), 18 deletions(-)
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index 4d58dee2c13..190f35c5215 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -15,7 +15,17 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)` component.
+First, install the `@react-admin/ra-form-layout` package:
+
+```sh
+npm install --save @react-admin/ra-form-layout
+# or
+yarn add @react-admin/ra-form-layout
+```
+
+**Tip**: [`ra-form-layout`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createindialogbutton-editindialogbutton-and-EditInDialogButton) is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://marmelab.com/ra-enterprise/) plans to access this package.
+
+Then, add the `` component as a sibling to a `` component.
```jsx
import {
@@ -54,23 +64,212 @@ In the related ``, you don't need to declare an `edit` component as th
` accepts the same props as the [``](./Edit.md) component, and the same type of children (e.g. a [``](./SimpleForm.md) element).
-
-* `children`: the components that renders the form
-* `className`: passed to the root component
-* [`component`](./Edit.md#component): override the root component
-* [`disableAuthentication`](./Edit.md#disableauthentication): disable the authentication check
-* [`id`](./Edit.md#id): the id of the record to edit
-* [`mutationMode`](./Edit.md#mutationmode): switch to optimistic or pessimistic mutations (undoable by default)
-* [`mutationOptions`](./Edit.md#mutationoptions): options for the `dataProvider.update()` call
-* [`queryOptions`](./Edit.md#queryoptions): options for the `dataProvider.getOne()` call
-* [`redirect`](./Edit.md#redirect): change the redirect location after successful creation
-* [`resource`](./Edit.md#resource): override the name of the resource to create
-* [`sx`](./Edit.md#sx-css-api): Override the styles
-* [`title`](./Edit.md#title): override the page title
-* [`transform`](./Edit.md#transform): transform the form data before calling `dataProvider.update()`
-
-Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog-editdialog--showdialog) for more details.
+## Props
+
+`` accepts the following props:
+
+| Prop | Required | Type | Default | Description |
+| -------------- | -------- | ----------------- | ------- | ----------- |
+| `children` | Required | `ReactNode` | | The content of the dialog. |
+| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
+| `id` | Optional | `string | number` | | The record id. If not provided, it will be deduced from the record context. |
+| `maxWidth` | Optional | `string` | `sm` | The max width of the dialog. |
+| `mutation Options` | Optional | `object` | | The options to pass to the `useMutation` hook. |
+| `queryOptions` | Optional | `object` | | The options to pass to the `useQuery` hook.
+| `resource` | Optional | `string` | | The resource name, e.g. `posts`
+| `sx` | Optional | `object` | | Override the styles applied to the dialog component. |
+| `transform` | Optional | `function` | | Transform the form data before calling `dataProvider.update()`. |
+
+## `children`
+
+`` doesn't render any field by default - it delegates this to its children, usually a Form component.
+
+React-admin provides several built-in form layout components:
+
+- [`SimpleForm`](./SimpleForm.md) for a single-column layout
+- [`TabbedForm`](./TabbedForm.md) for a tabbed layout
+- [`AccordionForm`](./AccordionForm.md) for long forms with collapsible sections
+- [`LongForm`](./LongForm.md) for long forms with a navigation sidebar
+- [`WizardForm`](./WizardForm.md) for multi-step forms
+- [`EditDialog`](./EditDialog.md) for sub-forms in a modal dialog
+- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
+
+To use an alternative form layout, switch the `` child component:
+
+```diff
+const MyEditDialog = () => (
+
+-
++
++
+
++
+
+-
++
+
+);
+```
+
+## `fullWidth`
+
+By default, `` renders a [Material UI ``](https://mui.com/material-ui/react-dialog/#full-screen-dialogs) component that takes the width of its content.
+
+You can make the dialog full width by setting the `fullWidth` prop to `true`:
+
+```jsx
+const MyEditDialog = () => (
+
+ ...
+
+);
+```
+
+In addition, you can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. When the `fullWidth` prop is true, the dialog will adapt based on the `maxWidth` value.
+
+```jsx
+const MyEditDialog = () => (
+
+ ...
+
+);
+```
+
+## `id`
+
+The `id` prop allows you to pass the record id to the `` component. If not provided, it will be deduced from the record context.
+
+This is useful to link to a related record. For instance, the following dialog lets you show the author of a book:
+
+```jsx
+const EditAuthorDialog = () => {
+ const book = useRecordContext();
+ return (
+
+ ...
+
+ );
+};
+```
+
+## `maxWidth`
+
+The `maxWidth` prop allows you to set the max width of the dialog. It can be one of the following values: `xs`, `sm`, `md`, `lg`, `xl`, `false`. The default is `sm`.
+
+For example, you can use that prop to make the dialog full width:
+
+```jsx
+const MyEditDialog = () => (
+
+ ...
+
+);
+```
+
+## `mutationOptions`
+
+The `mutationOptions` prop allows you to pass options to the `useMutation` hook.
+
+This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.update()` call.
+
+{% raw %}
+```jsx
+const MyEditDialog = () => (
+
+ ...
+
+);
+```
+{% endraw %}
+
+## `queryOptions`
+
+The `queryOptions` prop allows you to pass options to the `useQuery` hook.
+
+This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.getOne()` call.
+
+{% raw %}
+```jsx
+const MyEditDialog = () => (
+
+ ...
+
+);
+```
+{% endraw %}
+
+## `resource`
+
+The `resource` prop allows you to pass the resource name to the `` component. If not provided, it will be deduced from the resource context.
+
+This is useful to link to a related record. For instance, the following dialog lets you show the author of a book:
+
+```jsx
+const EditAuthorDialog = () => {
+ const book = useRecordContext();
+ return (
+
+ ...
+
+ );
+};
+```
+
+## `sx`
+
+Customize the styles applied to the Material UI `` component:
+
+{% raw %}
+```jsx
+const EditButton = () => (
+
+ ...
+
+);
+```
+{% endraw %}
+
+## `transform`
+
+To transform a record after the user has submitted the form but before the record is passed to `dataProvider.update()`, use the `transform` prop. It expects a function taking a record as argument, and returning a modified record. For instance, to add a computed field upon edition:
+
+```jsx
+export const UserEdit = () => {
+ const transform = data => ({
+ ...data,
+ fullName: `${data.firstName} ${data.lastName}`
+ });
+ return (
+
+ ...
+
+ );
+}
+```
+
+The `transform` function can also return a `Promise`, which allows you to do all sorts of asynchronous calls (e.g. to the `dataProvider`) during the transformation.
+
+**Tip**: If you want to have different transformations based on the button clicked by the user (e.g. if the creation form displays two submit buttons, one to "save", and another to "save and notify other admins"), you can set the `transform` prop on [the `` component](./SaveButton.md), too.
+
+**Tip**: The `transform` function also get the `previousData` in its second argument:
+
+```jsx
+export const UserEdit = () => {
+ const transform = (data, { previousData }) => ({
+ ...data,
+ avoidChangeField: previousData.avoidChangeField
+ });
+ return (
+
+ ...
+
+ );
+}
+```
## Usage Without Routing
From c4d2b54a28fadcc047550f377cd4d7b1e19fd79f Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 29 Nov 2023 12:06:10 +0100
Subject: [PATCH 3/6] Udate CreateDialog documentation
---
docs/CreateDialog.md | 200 +++++++++++++++++++++++++++++++++++++++----
docs/EditDialog.md | 6 +-
2 files changed, 187 insertions(+), 19 deletions(-)
diff --git a/docs/CreateDialog.md b/docs/CreateDialog.md
index eb92cc880e6..3949ecf99d8 100644
--- a/docs/CreateDialog.md
+++ b/docs/CreateDialog.md
@@ -15,7 +15,18 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)` component.
+
+First, install the `@react-admin/ra-form-layout` package:
+
+```sh
+npm install --save @react-admin/ra-form-layout
+# or
+yarn add @react-admin/ra-form-layout
+```
+
+**Tip**: [`ra-form-layout`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog-editdialog--showdialog) is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://marmelab.com/ra-enterprise/) plans to access this package.
+
+Then, add the `` component as a sibling to a `` component.
```jsx
import {
@@ -57,21 +68,178 @@ In the related ``, you don't need to declare a `create` component as t
**Note**: You can't use the `` and have a standard `` specified on your ``, because the `` declarations would conflict. If you need this, use the [``](./CreateInDialogButton.md) instead.
-`` accepts the same props as the [``](./Create.md) component, and the same type of children (e.g. a [``](./SimpleForm.md) element).
-
-* `children`: the components that renders the form
-* `className`: passed to the root component
-* [`component`](./Create.md#component): override the root component
-* [`disableAuthentication`](./Create.md#disableauthentication): disable the authentication check
-* [`mutationOptions`](./Create.md#mutationoptions): options for the `dataProvider.create()` call
-* [`record`](./Create.md#record): initialize the form with a record
-* [`redirect`](./Create.md#redirect): change the redirect location after successful creation
-* [`resource`](./Create.md#resource): override the name of the resource to create
-* [`sx`](./Create.md#sx-css-api): Override the styles
-* [`title`](./Create.md#title): override the page title
-* [`transform`](./Create.md#transform): transform the form data before calling `dataProvider.create()`
-
-Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog-editdialog--showdialog) for more details.
+
+## Props
+
+`` accepts the following props:
+
+| Prop | Required | Type | Default | Description |
+| -------------- | -------- | ----------------- | ------- | ----------- |
+| `children` | Required | `ReactNode` | | The content of the dialog. |
+| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
+| `maxWidth` | Optional | `string` | `sm` | The max width of the dialog. |
+| `mutation Options` | Optional | `object` | | The options to pass to the `useMutation` hook. |
+| `resource` | Optional | `string` | | The resource name, e.g. `posts`
+| `sx` | Optional | `object` | | Override the styles applied to the dialog component. |
+| `transform` | Optional | `function` | | Transform the form data before calling `dataProvider.update()`. |
+
+## `children`
+
+`` doesn't render any field by default - it delegates this to its children, usually a Form component.
+
+React-admin provides several built-in form layout components:
+
+- [`SimpleForm`](./SimpleForm.md) for a single-column layout
+- [`TabbedForm`](./TabbedForm.md) for a tabbed layout
+- [`AccordionForm`](./AccordionForm.md) for long forms with collapsible sections
+- [`LongForm`](./LongForm.md) for long forms with a navigation sidebar
+- [`WizardForm`](./WizardForm.md) for multi-step forms
+- [`CreateDialog`](./CreateDialog.md) for sub-forms in a modal dialog
+- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
+
+To use an alternative form layout, switch the `` child component:
+
+```diff
+const MyCreateDialog = () => (
+
+-
++
++
+
++
+
+-
++
+
+);
+```
+
+## `fullWidth`
+
+By default, `` renders a [Material UI ``](https://mui.com/material-ui/react-dialog/#full-screen-dialogs) component that takes the width of its content.
+
+You can make the dialog full width by setting the `fullWidth` prop to `true`:
+
+```jsx
+const MyCreateDialog = () => (
+
+ ...
+
+);
+```
+
+In addition, you can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. When the `fullWidth` prop is true, the dialog will adapt based on the `maxWidth` value.
+
+```jsx
+const MyCreateDialog = () => (
+
+ ...
+
+);
+```
+
+## `maxWidth`
+
+The `maxWidth` prop allows you to set the max width of the dialog. It can be one of the following values: `xs`, `sm`, `md`, `lg`, `xl`, `false`. The default is `sm`.
+
+For example, you can use that prop to make the dialog full width:
+
+```jsx
+const MyCreateDialog = () => (
+
+ ...
+
+);
+```
+
+## `mutationOptions`
+
+The `mutationOptions` prop allows you to pass options to the `useMutation` hook.
+
+This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.update()` call.
+
+{% raw %}
+```jsx
+const MyCreateDialog = () => (
+
+ ...
+
+);
+```
+{% endraw %}
+
+## `resource`
+
+The `resource` prop allows you to pass the resource name to the `` component. If not provided, it will be deduced from the resource context.
+
+This is useful to link to a related record. For instance, the following dialog lets you create the author of a book:
+
+```jsx
+const EditAuthorDialog = () => {
+ const book = useRecordContext();
+ return (
+
+ ...
+
+ );
+};
+```
+
+## `sx`
+
+Customize the styles applied to the Material UI `` component:
+
+{% raw %}
+```jsx
+const MyCreateDialog = () => (
+
+ ...
+
+);
+```
+{% endraw %}
+
+## `transform`
+
+To transform a record after the user has submitted the form but before the record is passed to `dataProvider.create()`, use the `transform` prop. It expects a function taking a record as argument, and returning a modified record. For instance, to add a computed field upon edition:
+
+```jsx
+export const UseCreate = () => {
+ const transform = data => ({
+ ...data,
+ fullName: `${data.firstName} ${data.lastName}`
+ });
+ return (
+
+ ...
+
+ );
+}
+```
+
+The `transform` function can also return a `Promise`, which allows you to do all sorts of asynchronous calls (e.g. to the `dataProvider`) during the transformation.
+
+**Tip**: If you want to have different transformations based on the button clicked by the user (e.g. if the creation form displays two submit buttons, one to "save", and another to "save and notify other admins"), you can set the `transform` prop on [the `` component](./SaveButton.md), too.
+
+**Tip**: The `transform` function also get the `previousData` in its second argument:
+
+```jsx
+export const UseCreate = () => {
+ const transform = (data, { previousData }) => ({
+ ...data,
+ avoidChangeField: previousData.avoidChangeField
+ });
+ return (
+
+ ...
+
+ );
+}
+```
## Usage Without Routing
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index 190f35c5215..9dc35b664e8 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -23,7 +23,7 @@ npm install --save @react-admin/ra-form-layout
yarn add @react-admin/ra-form-layout
```
-**Tip**: [`ra-form-layout`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createindialogbutton-editindialogbutton-and-EditInDialogButton) is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://marmelab.com/ra-enterprise/) plans to access this package.
+**Tip**: [`ra-form-layout`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog-editdialog--showdialog) is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://marmelab.com/ra-enterprise/) plans to access this package.
Then, add the `` component as a sibling to a `` component.
@@ -94,7 +94,7 @@ React-admin provides several built-in form layout components:
- [`EditDialog`](./EditDialog.md) for sub-forms in a modal dialog
- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
-To use an alternative form layout, switch the `` child component:
+To use an alternative form layout, switch the `` child component:
```diff
const MyEditDialog = () => (
@@ -225,7 +225,7 @@ Customize the styles applied to the Material UI `` component:
{% raw %}
```jsx
-const EditButton = () => (
+const MyEditDialog = () => (
...
From eb7471ba7b8c84310608ae367ba0b2955d5dd8e7 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 29 Nov 2023 12:07:13 +0100
Subject: [PATCH 4/6] Fix formatting
---
docs/CreateInDialogButton.md | 2 +-
docs/EditInDialogButton.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md
index 57e0edc09d0..5c4369ba0d5 100644
--- a/docs/CreateInDialogButton.md
+++ b/docs/CreateInDialogButton.md
@@ -81,7 +81,7 @@ In the above example, `` is used to create a new employee
| -------------- | -------- | ----------------- | ------- | ----------- |
| `children` | Required | `ReactNode` | | The content of the dialog. |
| `ButtonProps` | Optional | `object` | | Object containing props to pass to Material UI's ``. |
-| `emptyWhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
+| `empty WhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
| `icon` | Optional | `ReactElement` | | Allows to override the default icon. |
| `inline` | Optional | `boolean` | | Set to true to display only a Material UI `` instead of the full ``. |
diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md
index f39eac61801..887358032c3 100644
--- a/docs/EditInDialogButton.md
+++ b/docs/EditInDialogButton.md
@@ -74,7 +74,7 @@ const CompanyShow = () => (
| -------------- | -------- | ----------------- | ------- | ----------- |
| `children` | Required | `ReactNode` | | The content of the dialog. |
| `ButtonProps` | Optional | `object` | | Object containing props to pass to Material UI's ``. |
-| `emptyWhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
+| `empty WhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
| `icon` | Optional | `ReactElement` | | Allows to override the default icon. |
| `id` | Optional | `string | number` | | The record id. If not provided, it will be deduced from the record context. |
From 1528349252ff81322d581b2636e1f1369843f80d Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 4 Dec 2023 09:41:43 +0100
Subject: [PATCH 5/6] Apply review suggestions
---
docs/CreateDialog.md | 7 +++----
docs/CreateInDialogButton.md | 16 ----------------
docs/EditDialog.md | 2 +-
docs/EditInDialogButton.md | 16 ----------------
4 files changed, 4 insertions(+), 37 deletions(-)
diff --git a/docs/CreateDialog.md b/docs/CreateDialog.md
index 3949ecf99d8..1355c8b9eaa 100644
--- a/docs/CreateDialog.md
+++ b/docs/CreateDialog.md
@@ -81,7 +81,7 @@ In the related ``, you don't need to declare a `create` component as t
| `mutation Options` | Optional | `object` | | The options to pass to the `useMutation` hook. |
| `resource` | Optional | `string` | | The resource name, e.g. `posts`
| `sx` | Optional | `object` | | Override the styles applied to the dialog component. |
-| `transform` | Optional | `function` | | Transform the form data before calling `dataProvider.update()`. |
+| `transform` | Optional | `function` | | Transform the form data before calling `dataProvider.create()`. |
## `children`
@@ -94,7 +94,6 @@ React-admin provides several built-in form layout components:
- [`AccordionForm`](./AccordionForm.md) for long forms with collapsible sections
- [`LongForm`](./LongForm.md) for long forms with a navigation sidebar
- [`WizardForm`](./WizardForm.md) for multi-step forms
-- [`CreateDialog`](./CreateDialog.md) for sub-forms in a modal dialog
- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
To use an alternative form layout, switch the `` child component:
@@ -160,7 +159,7 @@ const MyCreateDialog = () => (
The `mutationOptions` prop allows you to pass options to the `useMutation` hook.
-This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.update()` call.
+This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.create()` call.
{% raw %}
```jsx
@@ -225,7 +224,7 @@ The `transform` function can also return a `Promise`, which allows you to do all
**Tip**: If you want to have different transformations based on the button clicked by the user (e.g. if the creation form displays two submit buttons, one to "save", and another to "save and notify other admins"), you can set the `transform` prop on [the `` component](./SaveButton.md), too.
-**Tip**: The `transform` function also get the `previousData` in its second argument:
+**Tip**: The `transform` function also gets the `previousData` in its second argument:
```jsx
export const UseCreate = () => {
diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md
index 5c4369ba0d5..cd1581568c4 100644
--- a/docs/CreateInDialogButton.md
+++ b/docs/CreateInDialogButton.md
@@ -81,7 +81,6 @@ In the above example, `` is used to create a new employee
| -------------- | -------- | ----------------- | ------- | ----------- |
| `children` | Required | `ReactNode` | | The content of the dialog. |
| `ButtonProps` | Optional | `object` | | Object containing props to pass to Material UI's ``. |
-| `empty WhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
| `icon` | Optional | `ReactElement` | | Allows to override the default icon. |
| `inline` | Optional | `boolean` | | Set to true to display only a Material UI `` instead of the full ``. |
@@ -103,7 +102,6 @@ React-admin provides several built-in form layout components:
- [`AccordionForm`](./AccordionForm.md) for long forms with collapsible sections
- [`LongForm`](./LongForm.md) for long forms with a navigation sidebar
- [`WizardForm`](./WizardForm.md) for multi-step forms
-- [`CreateDialog`](./CreateDialog.md) for sub-forms in a modal dialog
- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
To use an alternative form layout, switch the `` child component:
@@ -143,20 +141,6 @@ const CreateButton = () => (
```
{% endraw %}
-## `emptyWhileLoading`
-
-By default, `` renders its child component even before the `dataProvider.getOne()` call returns. If you use `` or ``, this isn't a problem as these components only render when the record has been fetched. But if you use a custom child component that expects the record context to be defined, your component will throw an error.
-
-To avoid this, set the `emptyWhileLoading` prop to `true`:
-
-```jsx
-const CreateButton = () => (
-
- ...
-
-);
-```
-
## `fullWidth`
By default, `` renders a [Material UI ``](https://mui.com/material-ui/react-dialog/#full-screen-dialogs) component that takes the width of its content.
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index 9dc35b664e8..dad45501c41 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -255,7 +255,7 @@ The `transform` function can also return a `Promise`, which allows you to do all
**Tip**: If you want to have different transformations based on the button clicked by the user (e.g. if the creation form displays two submit buttons, one to "save", and another to "save and notify other admins"), you can set the `transform` prop on [the `` component](./SaveButton.md), too.
-**Tip**: The `transform` function also get the `previousData` in its second argument:
+**Tip**: The `transform` function also gets the `previousData` in its second argument:
```jsx
export const UserEdit = () => {
diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md
index 887358032c3..1f2c3505bf1 100644
--- a/docs/EditInDialogButton.md
+++ b/docs/EditInDialogButton.md
@@ -74,7 +74,6 @@ const CompanyShow = () => (
| -------------- | -------- | ----------------- | ------- | ----------- |
| `children` | Required | `ReactNode` | | The content of the dialog. |
| `ButtonProps` | Optional | `object` | | Object containing props to pass to Material UI's ``. |
-| `empty WhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading. |
| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen. |
| `icon` | Optional | `ReactElement` | | Allows to override the default icon. |
| `id` | Optional | `string | number` | | The record id. If not provided, it will be deduced from the record context. |
@@ -97,7 +96,6 @@ React-admin provides several built-in form layout components:
- [`AccordionForm`](./AccordionForm.md) for long forms with collapsible sections
- [`LongForm`](./LongForm.md) for long forms with a navigation sidebar
- [`WizardForm`](./WizardForm.md) for multi-step forms
-- [`EditDialog`](./EditDialog.md) for sub-forms in a modal dialog
- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
To use an alternative form layout, switch the `` child component:
@@ -137,20 +135,6 @@ const EditButton = () => (
```
{% endraw %}
-## `emptyWhileLoading`
-
-By default, `` renders its child component even before the `dataProvider.getOne()` call returns. If you use `` or ``, this isn't a problem as these components only render when the record has been fetched. But if you use a custom child component that expects the record context to be defined, your component will throw an error.
-
-To avoid this, set the `emptyWhileLoading` prop to `true`:
-
-```jsx
-const EditButton = () => (
-
- ...
-
-);
-```
-
## `fullWidth`
By default, `` renders a [Material UI ``](https://mui.com/material-ui/react-dialog/#full-screen-dialogs) component that takes the width of its content.
From 3514221e1ef8fd930b4f29f07041a8885379ecdc Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 4 Dec 2023 13:56:39 +0100
Subject: [PATCH 6/6] Fix EditDialog documentation
---
docs/EditDialog.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index dad45501c41..d2c8941429c 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -91,7 +91,6 @@ React-admin provides several built-in form layout components:
- [`AccordionForm`](./AccordionForm.md) for long forms with collapsible sections
- [`LongForm`](./LongForm.md) for long forms with a navigation sidebar
- [`WizardForm`](./WizardForm.md) for multi-step forms
-- [`EditDialog`](./EditDialog.md) for sub-forms in a modal dialog
- and [`Form`](./Form.md), a headless component to use as a base for your custom layouts
To use an alternative form layout, switch the `` child component:
component offers a way to open a `