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

问题描述

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

解决方法

不，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>
    );
};

,

来自 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,labelYes,labelNo,labelCancel,YesIcon,NoIcon,onClickYes,onClickNo,onCancel,} = 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,...translateOptions })}
            </DialogTitle>
            <DialogContent>
                { typeof content === 'string' ? (
                    <DialogContentText>
                        { translate(content,{ _: content,...translateOptions }) }
                    </DialogContentText>
                  ) : (content)
                }
            </DialogContent>
            <DialogActions>
                <Button
                    disabled={loading}
                    onClick={handleYes}
                    className={classnames('ra-confirm',})}
                    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