123 lines
3 KiB
TypeScript
123 lines
3 KiB
TypeScript
|
import Avatar from '@/components/ui/Avatar'
|
||
|
|
import Button from '@/components/ui/Button'
|
||
|
|
import type { DialogProps } from '@/components/ui/Dialog'
|
||
|
|
import Dialog from '@/components/ui/Dialog'
|
||
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
|
import type { ReactNode } from 'react'
|
||
|
|
import {
|
||
|
|
FaCheckCircle,
|
||
|
|
FaExclamationTriangle,
|
||
|
|
FaExclamationCircle,
|
||
|
|
FaInfoCircle,
|
||
|
|
} from 'react-icons/fa';
|
||
|
|
|
||
|
|
type StatusType = 'info' | 'success' | 'warning' | 'danger'
|
||
|
|
|
||
|
|
interface ConfirmDialogProps extends DialogProps {
|
||
|
|
cancelText?: ReactNode | string
|
||
|
|
confirmText?: ReactNode | string
|
||
|
|
confirmButtonColor?: string
|
||
|
|
type?: StatusType
|
||
|
|
title?: ReactNode | string
|
||
|
|
onCancel?: () => void
|
||
|
|
onConfirm?: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const StatusIcon = ({ status }: { status: StatusType }) => {
|
||
|
|
switch (status) {
|
||
|
|
case 'info':
|
||
|
|
return (
|
||
|
|
<Avatar
|
||
|
|
className="bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-100"
|
||
|
|
shape="circle"
|
||
|
|
>
|
||
|
|
<span className="text-2xl">
|
||
|
|
<FaInfoCircle />
|
||
|
|
</span>
|
||
|
|
</Avatar>
|
||
|
|
)
|
||
|
|
case 'success':
|
||
|
|
return (
|
||
|
|
<Avatar
|
||
|
|
className="bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-100"
|
||
|
|
shape="circle"
|
||
|
|
>
|
||
|
|
<span className="text-2xl">
|
||
|
|
<FaCheckCircle />
|
||
|
|
</span>
|
||
|
|
</Avatar>
|
||
|
|
)
|
||
|
|
case 'warning':
|
||
|
|
return (
|
||
|
|
<Avatar className="text-amber-600 bg-amber-100 dark:text-amber-100" shape="circle">
|
||
|
|
<span className="text-2xl">
|
||
|
|
<FaExclamationCircle />
|
||
|
|
</span>
|
||
|
|
</Avatar>
|
||
|
|
)
|
||
|
|
case 'danger':
|
||
|
|
return (
|
||
|
|
<Avatar className="text-red-600 bg-red-100 dark:text-red-100" shape="circle">
|
||
|
|
<span className="text-2xl">
|
||
|
|
<FaExclamationTriangle />
|
||
|
|
</span>
|
||
|
|
</Avatar>
|
||
|
|
)
|
||
|
|
|
||
|
|
default:
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const UiDialog = (props: ConfirmDialogProps) => {
|
||
|
|
const { translate } = useLocalization()
|
||
|
|
|
||
|
|
const {
|
||
|
|
type = 'info',
|
||
|
|
title,
|
||
|
|
children,
|
||
|
|
onCancel,
|
||
|
|
onConfirm,
|
||
|
|
cancelText = translate('::Cancel'),
|
||
|
|
confirmText = translate('::OK'),
|
||
|
|
confirmButtonColor,
|
||
|
|
...rest
|
||
|
|
} = props
|
||
|
|
|
||
|
|
const handleCancel = () => {
|
||
|
|
onCancel?.()
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleConfirm = () => {
|
||
|
|
onConfirm?.()
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog contentClassName="pb-0 px-0" {...rest}>
|
||
|
|
<div className="px-6 pb-6 pt-2 flex">
|
||
|
|
<div>
|
||
|
|
<StatusIcon status={type} />
|
||
|
|
</div>
|
||
|
|
<div className="ml-4 rtl:mr-4">
|
||
|
|
<h5 className="mb-2">{title}</h5>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-right px-6 py-3 bg-gray-100 dark:bg-gray-700 rounded-bl-lg rounded-br-lg">
|
||
|
|
{onCancel && (
|
||
|
|
<Button size="sm" className="ltr:mr-2 rtl:ml-2" onClick={handleCancel}>
|
||
|
|
{cancelText}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
{onConfirm && (
|
||
|
|
<Button size="sm" variant="solid" color={confirmButtonColor} onClick={handleConfirm}>
|
||
|
|
{confirmText}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default UiDialog
|