75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import React, { useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
DialogRoot,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogBody,
|
|
DialogFooter,
|
|
DialogActionTrigger,
|
|
} from '@chakra-ui/react'
|
|
import { Button } from '@chakra-ui/react'
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onConfirm: () => void
|
|
title: string
|
|
message: string
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmLabel,
|
|
cancelLabel,
|
|
isLoading = false,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
|
|
const confirm = confirmLabel || t('challenge.admin.common.confirm')
|
|
const cancel = cancelLabel || t('challenge.admin.common.cancel')
|
|
|
|
// Прокручиваем страницу к началу при открытии диалога
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
}, [isOpen])
|
|
|
|
return (
|
|
<DialogRoot open={isOpen} onOpenChange={(e) => !e.open && onClose()} scrollBehavior="inside">
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
<DialogBody>
|
|
{message}
|
|
</DialogBody>
|
|
<DialogFooter>
|
|
<DialogActionTrigger asChild>
|
|
<Button variant="outline" onClick={onClose} disabled={isLoading}>
|
|
{cancel}
|
|
</Button>
|
|
</DialogActionTrigger>
|
|
<Button
|
|
colorPalette="red"
|
|
onClick={onConfirm}
|
|
disabled={isLoading}
|
|
>
|
|
{confirm}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
)
|
|
}
|
|
|