Skip to content

Commit f8c920e

Browse files
authored
Merge pull request #10586 from marmelab/backport-empty-while-loading-prop-documentation
doc: add emptyWhileLoading prop doc
2 parents 2f1abcb + 3599f86 commit f8c920e

File tree

2 files changed

+27
-11
lines changed

2 files changed

+27
-11
lines changed

docs/EditInDialogButton.md

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,9 @@ const CompanyShow = () => (
7171

7272
| Prop | Required | Type | Default | Description |
7373
| ------------------ | -------- | ----------------- | ------- | --------------------------------------------------------------------------------------- |
74-
| `children` | Required | `ReactNode` | | The content of the dialog |
7574
| `ButtonProps` | Optional | `object` | | Object containing props to pass to Material UI's `<Button>` |
75+
| `children` | Required | `ReactNode` | | The content of the dialog |
76+
| `emptyWhileLoading`| Optional | `boolean` | `false` | Set to `true` to return `null` while the list is loading |
7677
| `fullWidth` | Optional | `boolean` | `false` | If `true`, the dialog stretches to the full width of the screen |
7778
| `icon` | Optional | `ReactElement` | | Allows to override the default icon |
7879
| `id` | Optional | `string | number` | | The record id. If not provided, it will be deduced from the record context |
@@ -85,6 +86,25 @@ const CompanyShow = () => (
8586
| `sx` | Optional | `object` | | Override the styles applied to the dialog component |
8687
| `title` | Optional | `ReactNode` | | The title of the dialog |
8788

89+
90+
## `ButtonProps`
91+
92+
The `ButtonProps` prop allows you to pass props to the MUI `<Button>` component. For instance, to change the color and size of the button:
93+
94+
{% raw %}
95+
96+
```jsx
97+
const EditButton = () => (
98+
<EditInDialogButton ButtonProps={{ color: 'primary', fullWidth: true }}>
99+
<SimpleForm>
100+
...
101+
</SimpleForm>
102+
</EditInDialogButton>
103+
);
104+
```
105+
106+
{% endraw %}
107+
88108
## `children`
89109

90110
`<EditInDialogButton>` doesn't render any field by default - it delegates this to its children, usually a Form component.
@@ -119,24 +139,20 @@ const EditButton = () => (
119139
);
120140
```
121141

122-
## `ButtonProps`
142+
## `emptyWhileLoading`
123143

124-
The `ButtonProps` prop allows you to pass props to the MUI `<Button>` component. For instance, to change the color and size of the button:
144+
By default, `<EditInDialogButton>` renders its child component even before the `dataProvider.getOne()` call returns. It can lead to a flash of empty content.
125145

126-
{% raw %}
146+
To avoid this, set the `emptyWhileLoading` prop to `true`:
127147

128148
```jsx
129149
const EditButton = () => (
130-
<EditInDialogButton ButtonProps={{ color: 'primary', fullWidth: true }}>
131-
<SimpleForm>
132-
...
133-
</SimpleForm>
150+
<EditInDialogButton emptyWhileLoading>
151+
...
134152
</EditInDialogButton>
135153
);
136154
```
137155

138-
{% endraw %}
139-
140156
## `fullWidth`
141157

142158
By default, `<EditInDialogButton>` renders a [Material UI `<Dialog>`](https://mui.com/material-ui/react-dialog/#full-screen-dialogs) component that takes the width of its content.

docs/ShowInDialogButton.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ This component accepts the following props:
9494
|----------------|----------|----------------|----------|---------------------------|
9595
| `ButtonProps` | Optional | `object` | | Props to pass to the MUI `<Button>` component |
9696
| `children` | Required | `ReactNode` | | The content of the dialog |
97-
| `empty WhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading |
97+
| `emptyWhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the list is loading |
9898
| `fullWidth` | Optional | `boolean` | `false` | Set to `true` to make the dialog full width |
9999
| `icon` | Optional | `ReactElement` | | The icon of the button |
100100
| `id` | Optional | `string | number` | | The record id. If not provided, it will be deduced from the record context |

0 commit comments

Comments
 (0)