ra-custom-confirm

Your custom confirm dialog for React-admin.

Installation

# via npm
npm install --save ra-custom-confirm

# via yarn
yarn add ra-custom-confirm

Demo

After having cloned this repository, run the following commands:

cd example/
yarn install
yarn start

And then browse to http://localhost:8080/.

The credentials are login/password

Usage

import React, { Fragment, useState } from 'react';
import Share from '@material-ui/icons/Share';
import ErrorOutline from '@material-ui/icons/ErrorOutline';
import CustomConfirm from 'ra-custom-confirm';

// Define your custom title of confirm dialog
const CustomConfirmTitle = 'Are you sure you want to share?';

// Define your custom contents of confirm dialog
const CustomConfirmContent = props => {
  return (
    <SimpleShowLayout {...props} >
      <TextField source='title' label='title' />
      <TextField source='user' label='user' />
      <TextField source='date' label='date' />
      <RichTextField source='description' label='description' />
    </SimpleShowLayout>
  );
};

const ShareButton = props => {
  const [open, setOpen] = useState(false);

  const handleClick = (event) => {
    event.stopPropagation();            // support with rowClick on Datagrid
    setOpen(true);
  };

  const handleDialogClose = () => setOpen(false);

  const handleConfirm = () => {
    // do something here
    setOpen(false);
  };

  return (
    <Fragment>
      <Button label="Share" onClick={handleClick}><Share /></Button>
      <CustomConfirm {...props}
        isOpen={open}
        title={CustomConfirmTitle}      // your custom title of confirm dialog
        content={CustomConfirmContent}  // your custom contents of confirm dialog
        confirm='Share'                 // label of confirm button (default: 'Confirm')
        confirmColor='primary'          // color of confirm button ('primary' or 'warning', default: 'primary')
        ConfirmIcon={Share}             // icon of confirm button from @material-ui/icons (default: 'CheckCircle')
        cancel='Cancel'                 // label of cancel button (default: 'Cancel')
        CancelIcon={ErrorOutline}       // icon of cancel button from @material-ui/icons (default: 'ErrorOutline')
        onConfirm={handleConfirm}
        onClose={handleDialogClose}
      />
    </Fragment>
  );
}

const PostList = props => {
  const translate = useTranslate();
  return (
    <List {...props} >
      <Datagrid>
        <TextField source='title' label='title' />
        <TextField source='date' label='date' />
        <TextField source='user' label='user' />
        <ShareButton />
      </Datagrid>
    </List>
  );
};

export default PostList;

props

Name|Type|Description|Default ---|---|---|--- title|string|your custom title of confirm dialog| content|element|your custom contents of confirm| isOpen|bool|dialog open or not|false onClose|func|function on close| onConfirm|func|function on confirm| confirm|string|label of confirm button|'ra.action.confirm' (Confirm in English) confirmColor|string|color of confirm button ('primary' or 'warning')|'primary' ConfirmIcon|element|icon of confirm button from @material-ui/icons| cancel|string|label of cancel button|'ra.action.cancel' (Cancel in English) CancelIcon|element|icon of cancel button from @material-ui/icons|

License

This library is licensed under the MIT License.