Spaces:
Running
Running
File size: 3,052 Bytes
27fd333 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import type { FC, ReactElement } from 'react'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import s from './common.module.css'
import Modal from '@/app/components/base/modal'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
import Button from '@/app/components/base/button'
export type ConfirmCommonProps = {
type?: string
isShow: boolean
onCancel: () => void
title: string
desc?: string
onConfirm?: () => void
showOperate?: boolean
showOperateCancel?: boolean
confirmBtnClassName?: string
confirmText?: string
confirmWrapperClassName?: string
confirmDisabled?: boolean
}
const ConfirmCommon: FC<ConfirmCommonProps> = ({
type = 'danger',
isShow,
onCancel,
title,
desc,
onConfirm,
showOperate = true,
showOperateCancel = true,
confirmBtnClassName,
confirmText,
confirmWrapperClassName,
confirmDisabled,
}) => {
const { t } = useTranslation()
const CONFIRM_MAP: Record<string, { icon: ReactElement; confirmText: string }> = {
danger: {
icon: <AlertCircle className='w-6 h-6 text-[#D92D20]' />,
confirmText: t('common.operation.remove'),
},
success: {
icon: <CheckCircle className='w-6 h-6 text-[#039855]' />,
confirmText: t('common.operation.ok'),
},
}
return (
<Modal isShow={isShow} onClose={() => {}} className='!w-[480px] !max-w-[480px] !p-0 !rounded-2xl' wrapperClassName={confirmWrapperClassName}>
<div className={cn(s[`wrapper-${type}`], 'relative p-8')}>
<div className='flex items-center justify-center absolute top-4 right-4 w-8 h-8 cursor-pointer' onClick={onCancel}>
<XClose className='w-4 h-4 text-gray-500' />
</div>
<div className='flex items-center justify-center mb-3 w-12 h-12 bg-white shadow-xl rounded-xl'>
{CONFIRM_MAP[type].icon}
</div>
<div className='text-xl font-semibold text-gray-900'>{title}</div>
{
desc && <div className='mt-1 text-sm text-gray-500'>{desc}</div>
}
{
showOperate && (
<div className='flex items-center justify-end mt-10'>
{
showOperateCancel && (
<Button
className='mr-2 min-w-24 text-sm font-medium !text-gray-700'
onClick={onCancel}
>
{t('common.operation.cancel')}
</Button>
)
}
<Button
type='primary'
className={confirmBtnClassName || ''}
onClick={onConfirm}
disabled={confirmDisabled}
>
{confirmText || CONFIRM_MAP[type].confirmText}
</Button>
</div>
)
}
</div>
</Modal>
)
}
export default ConfirmCommon
|