/
lizardking
/
react_project
Обзор
Документация
Войти
/
lizardking
/
react_project
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
react19
src/shared/ui/ConfirmDialog/ConfirmDialog.tsx
47 строк
2 KB
LizardKing
Task 8 - React Portal
10 ноя 2025, 16:20
10 ноя 2025, 16:20
683d199
Код
Авторство
О чём код?
import React from 'react' import { createPortal } from 'react-dom' // noinspection ES6PreferShortImport import { PrimaryButton } from '../PrimaryButton/PrimaryButton' // noinspection ES6PreferShortImport import { SecondaryButton } from '../SecondaryButton/SecondaryButton' type Props = { title?: string description?: string confirmText?: string cancelText?: string onConfirm: () => void onCancel: () => void } export function ConfirmDialog({ title, description, confirmText = 'Подтвердить', cancelText = 'Отмена', onConfirm, onCancel }: Props) { const root = document.getElementById('dialog-root') if (!root) return null function handleBackdropClick(event: React.MouseEvent<HTMLDivElement>) { if (event.target === event.currentTarget) onCancel() } return createPortal( <div className="fixed inset-0 z-50 grid place-items-center bg-black/45" onClick={handleBackdropClick}> <div className="w-[min(92vw,420px)] rounded-2xl p-4 bg-[var(--color-surface)] text-[var(--color-fg)] shadow-lg"> <div className="text-base font-bold mb-2">{title ?? 'Подтвердить действие?'}</div> <div className="text-sm leading-snug mb-3">{description ?? 'Это действие необратимо.'}</div> <div className="flex justify-end gap-2"> <SecondaryButton onClick={onCancel}>{cancelText}</SecondaryButton> <PrimaryButton onClick={onConfirm}>{confirmText}</PrimaryButton> </div> </div> </div>, root, ) }