3

Is there any way to customise DeleteButton button in react-admin to add a confirmation message like 'Do you want to delete item?'. Currently on clicking on DeleteButton it directly deletes the item without asking for a confirmation. I tried adding title attribute to delete button but it does not get fired. Here is my code

//This worked with admin-on-rest, but not working with react-admin
const CategoryDeleteTitle = translate(({ record, translate }) => <span>
        {translate('Delete')}&nbsp;
        {record && `${record.code} ${record.name}`}
    </span>);

const EditActions = ({ basePath, data, resource }) => (
    <CardActions>
        <ShowButton basePath={basePath} record={data} />
        <ListButton basePath={basePath} />
        <DeleteButton title={<CategoryTitle />} basePath={basePath} record={data} resource={resource} />

    </CardActions>
);

export const CategoryEdit = (props) => (
    <Edit actions={<EditActions />} title={<CategoryTitle />} {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <TextInput source="name" />
        </SimpleForm>
    </Edit>
);
Chetan Gawai
  • 2,361
  • 1
  • 25
  • 36

4 Answers4

6

We now handle deletions in an optimistic way, providing an undo mechanism instead of a confirmation dialog.

If this doesn't suit you, you can follow the UPGRADE GUIDE which leads to this page of the documentation: https://marmelab.com/react-admin/CreateEdit.html#actions

Note that you'll have to create and handle your confirmation dialog using something like react-modals and dispatch the DELETE action yourself.

Gildas Garcia
  • 6,966
  • 3
  • 15
  • 29
5

You can use this gist with custom actions like:

const UserEditActions = ({ basePath, data, resource }) => (
    <CardActions>
        <ListButton basePath={basePath} />
        <DeleteButtonWithConfirmation basePath={basePath} record={data} resource={resource} undoable={false} />
        <RefreshButton />
      </CardActions>
    );

export const UserEdit = ({ ...props }) => (
  <Edit {...props} actions={<UserEditActions />} >
    <CreateEditForm title={<EntityTitle label="User" />} />
  </Edit>
);
Ady Levy
  • 151
  • 2
  • 3
3

In react-admin v3, there is now a DeleteWithConfirmButton :-)

  • 1
    I cannot see any reference to this component in v3.7.0 : https://marmelab.com/react-admin/Reference.html Can you explain a bit more ? – Hettomei Jul 13 '20 at 11:34
  • Didn't find anything regarding this in the documentation – Rahul Bhanushali Oct 28 '20 at 19:44
  • Yeah, but there is it https://github.com/marmelab/react-admin/blob/eb3c1acbf4ecc81793b8e790e11a6f84f9bdbc1b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx – Penguin Jan 18 '21 at 05:58
1

According to the documentation "https://marmelab.com/react-admin/CreateEdit.html" create:

const CustomToolbar = props => (
    <Toolbar {...props} classes={useStyles()}>
        <SaveButton />
        <DeleteButton undoable={false} />
    </Toolbar>
);

import from react-admin button you need like this:

import {
    Toolbar,
    SaveButton,
    DeleteWithConfirmButton
} from 'react-admin';

see all available names here https://github.com/marmelab/react-admin/tree/master/packages/ra-ui-materialui/src/button, and change DeleteButton on ImportedButton like this:

 export const CustomToolbar = props => (
    <Toolbar {...props} classes={useStyles()}>
        <SaveButton/>
        <DeleteWithConfirmButton/>
    </Toolbar>
);

And change in the code, where you need <SimpleForm toolbar={<CustomToolbar />}>.