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;