如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。