react-admin 确认对话框是否接受两个以上的选择选项？我希望我的对话框包含“是”、“取消”、“否”选项

Question

react-admin 确认对话框是否接受两个以上的选择选项？我希望我的对话框包含“是”、“取消”、“否”选项。我该如何实施呢？

Answer 1

不，react-admin 的确认对话框仅包含 2 个选项。您必须使用 material-ui 的 <Dialog> 组件构建自己的确认对话框。

您可以使用react-admin's <Confirm> implementation 作为指导：

const Confirm: FC<ConfirmProps> = props => {
    const {
        isOpen,
        loading,
        title,
        content,
        confirm,
        cancel,
        confirmColor,
        ConfirmIcon,
        CancelIcon,
        onClose,
        onConfirm,
        translateOptions = {},
    } = props;
    const classes = useStyles(props);
    const translate = useTranslate();

    const handleConfirm = useCallback(
        e => {
            e.stopPropagation();
            onConfirm(e);
        },
        [onConfirm]
    );

    const handleClick = useCallback(e => {
        e.stopPropagation();
    }, []);

    return (
        <Dialog
            open={isOpen}
            onClose={onClose}
            onClick={handleClick}
            aria-labelledby="alert-dialog-title"
        >
            <DialogTitle id="alert-dialog-title">
                {translate(title, { _: title, ...translateOptions })}
            </DialogTitle>
            <DialogContent>
                {typeof content === 'string' ? (
                    <DialogContentText>
                        {translate(content, {
                            _: content,
                            ...translateOptions,
                        })}
                    </DialogContentText>
                ) : (
                    content
                )}
            </DialogContent>
            <DialogActions>
                <Button disabled={loading} onClick={onClose}>
                    <CancelIcon className={classes.iconPaddingStyle} />
                    {translate(cancel, { _: cancel })}
                </Button>
                <Button
                    disabled={loading}
                    onClick={handleConfirm}
                    className={classnames('ra-confirm', {
                        [classes.confirmWarning]: confirmColor === 'warning',
                        [classes.confirmPrimary]: confirmColor === 'primary',
                    })}
                    autoFocus
                >
                    <ConfirmIcon className={classes.iconPaddingStyle} />
                    {translate(confirm, { _: confirm })}
                </Button>
            </DialogActions>
        </Dialog>
    );
};

Answer 2

来自 react-admin 的修改对话框：

/**
 * Confirmation dialog: Yes, No, Cancel
 * @example
 * <ConfirmEx
 *     isOpen={true}
 *     title="Delete Item"
 *     content="Are you sure you want to delete this item?"
 *     confirmColor="primary"     
 *     labelYes="Yes"
 *     labelNo="No"
 *     labelCancel="Cancel"
 *     YesIcon=IconYes
 *     NoIcon=IconNo
 *     CancelIcon=IconCancel
 *     onClickYes={() => { // do something }}
 *     onClickNo={() => { // do something }}
 *     onChancel={() => { // do something }}
 * />
 */

import * as React from 'react'
import { useCallback } from 'react'
import PropTypes from 'prop-types'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogTitle from '@material-ui/core/DialogTitle'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
import { fade } from '@material-ui/core/styles/colorManipulator'
import IconYes from '@material-ui/icons/CheckCircle'
import IconNo from '@material-ui/icons/Cancel'
import IconCancel from '@material-ui/icons/ErrorOutline'
import classnames from 'classnames'
import { useTranslate } from 'ra-core'

const useStyles = makeStyles(
    theme => ({
        confirmPrimary: {
            color: theme.palette.primary.main,
        },
        confirmWarning: {
            color: theme.palette.error.main,
            '&:hover': {
                backgroundColor: fade(theme.palette.error.main, 0.12),
                '@media (hover: none)': { // Reset on mouse devices
                    backgroundColor: 'transparent',
                },
            },
        },
        iconPaddingStyle: {
            paddingRight: '0.5em',
        },
    }),
    { name: 'RaConfirm' }
)

const ConfirmEx = props => {
    const {
        isOpen,
        loading,
        title,
        content,
        labelYes,
        labelNo,
        labelCancel,
        confirmColor,
        YesIcon,
        NoIcon,
        CancelIcon,
        onClickYes,
        onClickNo,
        onCancel,
        translateOptions = {},
    } = props

    const classes = useStyles(props)
    const translate = useTranslate()

    const handleYes = useCallback(
        e => {
            e.stopPropagation()
            onClickYes(e)
        }, [onClickYes])

    const handleNo = useCallback(
      e => {
          e.stopPropagation()
          onClickNo(e)
      }, [onClickNo])

    const handleClick = useCallback(e => { e.stopPropagation() }, [])

    return (
        <Dialog
            open={isOpen}
            onClose={onCancel}
            onClick={handleClick}
            aria-labelledby="alert-dialog-title"
        >
            <DialogTitle id="alert-dialog-title">
                {translate(title, { _: title, ...translateOptions })}
            </DialogTitle>
            <DialogContent>
                { typeof content === 'string' ? (
                    <DialogContentText>
                        { translate(content, { _: content, ...translateOptions }) }
                    </DialogContentText>
                  ) : (content)
                }
            </DialogContent>
            <DialogActions>
                <Button
                    disabled={loading}
                    onClick={handleYes}
                    className={classnames('ra-confirm', {
                        [classes.confirmWarning]: confirmColor === 'warning',
                        [classes.confirmPrimary]: confirmColor === 'primary',
                    })}
                    autoFocus
                >
                    <YesIcon className={classes.iconPaddingStyle} />
                    { translate(labelYes, { _: labelYes }) }
                </Button>
                <Button disabled={loading} onClick={handleNo}>
                    <NoIcon className={classes.iconPaddingStyle} />
                    { translate(labelNo, { _: labelNo }) }
                </Button>
                <Button disabled={loading} onClick={onCancel}>
                    <CancelIcon className={classes.iconPaddingStyle} />
                    { translate(labelCancel, { _: labelCancel }) }
                </Button>
            </DialogActions>
        </Dialog>
    )
}

ConfirmEx.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.node.isRequired,
    classes: PropTypes.object,
    confirmColor: PropTypes.string,
    isOpen: PropTypes.bool,
    loading: PropTypes.bool,
    labelYes: PropTypes.string,
    labelNo: PropTypes.string,
    labelCancel: PropTypes.string,
    YesIcon: PropTypes.elementType,
    NoIcon: PropTypes.elementType,
    CancelIcon: PropTypes.elementType,
    onClickYes: PropTypes.func.isRequired,
    onClickNo: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
}

ConfirmEx.defaultProps = {
    classes: {},
    isOpen: false,
    confirmColor: 'primary',
    labelYes: 'ra.boolean.true',
    labelNo: 'ra.boolean.false',
    labelCancel: 'ra.action.cancel',
    YesIcon: IconYes,
    NoIcon: IconNo,
    CancelIcon: IconCancel,
}

export default ConfirmEx