Skip to content

Commit 269bfdc

Browse files
fzaninottofzaninotto
committed
Review
1 parent 862b7dc commit 269bfdc

File tree

2 files changed

+25
-153
lines changed

2 files changed

+25
-153
lines changed

‎docs/Buttons.md

Lines changed: 19 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,10 @@ export const PostList = () => (
261261

262262
Partially updates the selected rows. To be used inside [the `<Datagrid bulkActionButtons>` prop](./Datagrid.md#bulkactionbuttons).
263263

264+
![Bulk Update button](./img/bulk-update-button.png)
265+
266+
#### Usage
267+
264268
{% raw %}
265269
```jsx
266270
import * as React from 'react';
@@ -285,7 +289,7 @@ export const PostList = () => (
285289
```
286290
{% endraw %}
287291

288-
![Bulk Update button](./img/bulk-update-button.png)
292+
#### Props
289293

290294
| Prop | Required | Type | Default | Description |
291295
|-------------------|----------|----------------|--------------------|---------------------------------------------------------------------------------------------------------------------|
@@ -301,7 +305,7 @@ export const PostList = () => (
301305

302306
### `<BulkUpdateFormButton>`
303307

304-
This component renders a button allowing to edit multiple records at once.
308+
This component, part of the [enterprise edition](https://marmelab.com/ra-enterprise/modules/ra-form-layout)<img class="icon" src="./img/premium.svg" />, lets users edit multiple records at once. To be used inside [the `<Datagrid bulkActionButtons>` prop](./Datagrid.md#bulkactionbuttons).
305309

306310
The button opens a dialog containing the form passed as children. When the form is submitted, it will call the dataProvider's `updateMany` method with the ids of the selected records.
307311

@@ -361,36 +365,7 @@ const PostList = () => (
361365
);
362366
```
363367

364-
365-
**Tip:** You are not limited to using a `<SimpleForm>` as children. You can for instance use an `<InputSelectorForm>`, which allows to select the fields to update.
366-
367-
```tsx
368-
import {
369-
BulkUpdateFormButton,
370-
InputSelectorForm,
371-
} from '@react-admin/ra-form-layout';
372-
import * as React from 'react';
373-
import { BooleanInput, DateInput } from 'react-admin';
374-
375-
const PostBulkUpdateButton = () => (
376-
<BulkUpdateFormButton>
377-
<InputSelectorForm
378-
inputs={[
379-
{
380-
label: 'Published at',
381-
element: <DateInput source="published_at" />,
382-
},
383-
{
384-
label: 'Is public',
385-
element: <BooleanInput source="is_public" />,
386-
},
387-
]}
388-
/>
389-
</BulkUpdateFormButton>
390-
);
391-
```
392-
393-
Check out the [`<InputSelectorForm>`](#inputselectorform) documentation for more information.
368+
**Tip:** You are not limited to using a `<SimpleForm>` as children. You can for instance use an `<InputSelectorForm>`, which allows to select the fields to update. Check out the [`<InputSelectorForm>`](#usage-with-inputselectorform) below for more information.
394369

395370
#### Props
396371

@@ -402,7 +377,7 @@ Check out the [`<InputSelectorForm>`](#inputselectorform) documentation for more
402377
| `mutationOptions` | - | Object | - | Mutation options passed to [react-query](https://tanstack.com/query/v3/docs/react/reference/useMutation) when calling `updateMany` |
403378

404379

405-
##### `children`
380+
#### `children`
406381

407382
`<BulkUpdateFormButton>` expects a form component as children, such as `<SimpleForm>` or `<InputSelectorForm>`.
408383

@@ -421,7 +396,7 @@ const PostBulkUpdateButton = () => (
421396
);
422397
```
423398

424-
##### `DialogProps`
399+
#### `DialogProps`
425400

426401
The `DialogProps` prop can be used to pass additional props to the [MUI Dialog](https://mui.com/material-ui/react-dialog/).
427402
{% raw %}
@@ -452,7 +427,7 @@ const PostBulkUpdateButtonWithTransition = () => (
452427
```
453428
{% endraw %}
454429

455-
##### `mutationMode`
430+
#### `mutationMode`
456431

457432
Use the `mutationMode` prop to specify the [mutation mode](https://marmelab.com/react-admin/Edit.html#mutationmode).
458433

@@ -471,7 +446,7 @@ const PostBulkUpdateButton = () => (
471446
);
472447
```
473448

474-
##### `mutationOptions` and `meta`
449+
#### `mutationOptions` and `meta`
475450

476451
The `mutationOptions` prop can be used to pass options to the [react-query mutation](https://react-query.tanstack.com/reference/useMutation#options) used to call the dataProvider's `updateMany` method.
477452

@@ -535,82 +510,18 @@ const PostBulkUpdateButton = () => (
535510
);
536511
```
537512

538-
#### Limitations
539-
540-
If you look under the hood, you will see that `<BulkUpdateFormButton>` provides a `<SaveContext>` to its children, which allows them to call `updateMany` with the ids of the selected records.
541-
542-
However since we are in the context of a list, there is no `<RecordContext>` available. Hence, the following inputs cannot work inside a `<BulkUpdateFormButton>`:
543-
544-
- `<ReferenceOneInput>`
545-
- `<ReferenceManyInput>`
546-
- `<ReferenceManyToManyInput>`
547-
548-
### `<InputSelectorForm>`
513+
#### Usage With `<InputSelectorForm>`
549514

550-
This component renders a form allowing to select the fields to update in a record.
515+
`<BulkUpdateFormButton>` works best with `<InputSelectorForm>`, which component renders a form allowing to select the fields to update in a record.
551516

552517
<video controls autoplay playsinline muted loop>
553518
<source src="./img/BulkUpdateButton-InputSelectorForm.webm" type="video/webm"/>
554519
<source src="./img/BulkUpdateButton-InputSelectorForm.mp4" type="video/mp4"/>
555520
Your browser does not support the video tag.
556521
</video>
557522

558-
#### Usage
559-
560523
`<InputSelectorForm>` expects a list of inputs passed in the `inputs` prop. Each input must have a `label` and an `element`.
561524

562-
```tsx
563-
import { InputSelectorForm } from '@react-admin/ra-form-layout';
564-
import * as React from 'react';
565-
import {
566-
BooleanInput,
567-
DateInput,
568-
SelectArrayInput,
569-
TextInput,
570-
} from 'react-admin';
571-
572-
const PostEdit = () => (
573-
<InputSelectorForm
574-
inputs={[
575-
{
576-
label: 'Title',
577-
element: <TextInput source="title" />,
578-
},
579-
{
580-
label: 'Body',
581-
element: <TextInput source="body" multiline />,
582-
},
583-
{
584-
label: 'Published at',
585-
element: <DateInput source="published_at" />,
586-
},
587-
{
588-
label: 'Is public',
589-
element: <BooleanInput source="is_public" />,
590-
},
591-
{
592-
label: 'Tags',
593-
element: (
594-
<SelectArrayInput
595-
source="tags"
596-
choices={[
597-
{ id: 'react', name: 'React' },
598-
{ id: 'vue', name: 'Vue' },
599-
{ id: 'solid', name: 'Solid' },
600-
{ id: 'programming', name: 'Programming' },
601-
]}
602-
/>
603-
),
604-
},
605-
]}
606-
/>
607-
);
608-
```
609-
610-
`<InputSelectorForm>` also expects to be used inside a [`<SaveContext>`](https://marmelab.com/react-admin/useSaveContext.html#usage). When the form is submitted, it will call the `save` method from the `<SaveContext>`, with the value of the selected inputs.
611-
612-
**Tip:** `<InputSelectorForm>` is particularily useful when used with [`<BulkUpdateFormButton>`](#bulkupdateformbutton), as it allows to select the fields to update.
613-
614525
```tsx
615526
import {
616527
BulkUpdateFormButton,
@@ -637,18 +548,6 @@ const PostBulkUpdateButton = () => (
637548
);
638549
```
639550

640-
Check out the [`<BulkUpdateFormButton>`](#bulkupdateformbutton) documentation for more information.
641-
642-
#### Props
643-
644-
| Prop | Required | Type | Default | Description |
645-
| ----------------- | ------------ | ---------------- | --------- | ----------------------------------------------- |
646-
| `inputs` | Required (*) | Array | - | The list of inputs from which the user can pick |
647-
648-
`<InputSelectorForm>` also accepts the same props as [`<WizardForm>`](#wizardform), except the `onSubmit` and `children` props.
649-
650-
##### `inputs`
651-
652551
Use the `inputs` prop to specify the list of inputs from which the user can pick. Each input must have a `label` and an `element`.
653552

654553
```tsx
@@ -699,46 +598,15 @@ const PostEdit = () => (
699598
);
700599
```
701600

702-
#### Internationalization
703-
704-
You can use translation keys as input labels.
705-
706-
```tsx
707-
// in i18n/fr.ts
708-
709-
const customFrenchMessages = {
710-
resources: {
711-
posts: {
712-
name: 'Article |||| Articles',
713-
fields: {
714-
published_at: 'Publié le',
715-
is_public: 'Public',
716-
},
717-
},
718-
},
719-
};
601+
#### Limitations
720602

721-
// in posts/postEdit.tsx
603+
If you look under the hood, you will see that `<BulkUpdateFormButton>` provides a `<SaveContext>` to its children, which allows them to call `updateMany` with the ids of the selected records.
722604

723-
import { InputSelectorForm } from '@react-admin/ra-form-layout';
724-
import * as React from 'react';
725-
import { BooleanInput, DateInput } from 'react-admin';
605+
However since we are in the context of a list, there is no `<RecordContext>` available. Hence, the following inputs cannot work inside a `<BulkUpdateFormButton>`:
726606

727-
const PostEdit = () => (
728-
<InputSelectorForm
729-
inputs={[
730-
{
731-
label: 'resources.posts.fields.published_at',
732-
element: <DateInput source="published_at" />,
733-
},
734-
{
735-
label: 'resources.posts.fields.is_public',
736-
element: <BooleanInput source="is_public" />,
737-
},
738-
]}
739-
/>
740-
);
741-
```
607+
- `<ReferenceOneInput>`
608+
- `<ReferenceManyInput>`
609+
- `<ReferenceManyToManyInput>`
742610

743611
### `<FilterButton>`
744612

‎docs/Datagrid.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ Finally, `<Datagrid>` inspects children for props that indicate how it should be
147147
Your browser does not support the video tag.
148148
</video>
149149

150-
151150
Bulk action buttons are buttons that affect several records at once, like mass deletion for instance. In the `<Datagrid>` component, the bulk actions toolbar appears when a user ticks the checkboxes in the first column of the table. The user can then choose a button from the bulk actions toolbar. By default, all Datagrids have a single bulk action button, the bulk delete button. You can add other bulk action buttons by passing a custom element as the `bulkActionButtons` prop of the `<Datagrid>` component:
152151

153152
```jsx
@@ -173,7 +172,12 @@ export const PostList = () => (
173172
);
174173
```
175174

176-
**Tip**: React-admin provides four components that you can use in `bulkActionButtons`: [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton), [`<BulkUpdateButton>`](./Buttons.md#bulkupdatebutton), [`<BulkExportButton>`](./Buttons.md#bulkexportbutton), and [`<BulkUpdateFormButton>`](./Buttons.md#bulkupdateformbutton).
175+
**Tip**: React-admin provides four components that you can use in `bulkActionButtons`:
176+
177+
- [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton) (enabled by default)
178+
- [`<BulkExportButton>`](./Buttons.md#bulkexportbutton) to export only the selection
179+
- [`<BulkUpdateButton>`](./Buttons.md#bulkupdatebutton) to immediately update the selection
180+
- [`<BulkUpdateFormButton>`](./Buttons.md#bulkupdateformbutton) to display a form allowing to update the selection
177181

178182
**Tip**: You can also disable bulk actions altogether by passing `false` to the `bulkActionButtons` prop. In this case, the checkboxes column doesn't show up.
179183

0 commit comments

Comments
 (0)