File: /var/www/design.system/src/molecules/Dialog/Dialog.tsx
import React from 'react';
import styles from './Dialog.module.scss';
import cn from 'classnames';
import Body from '../../atoms/Typography/Body/Body.tsx';
import Heading from '../../atoms/Typography/Heading/Heading.tsx';
import { useOutsideClick } from '../../utils/useOutsideClick.ts';
import Icon from '../../atoms/Icon/Icon.tsx';
import Button from '../Button/Button.tsx';
interface IDialogProps extends React.HTMLAttributes<HTMLDialogElement> {
isOpen: boolean;
onClose: () => void;
onOk?: () => void;
title?: string;
body?: string;
buttonCancelText?: string;
buttonOkText?: string;
buttonOkIsDanger?: boolean;
}
/**
* Поддерживает все стандартные пропсы HTMLDialogElement.
*
* Полную документацию смотрите сайте: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
*/
const Dialog = ({
isOpen,
onClose,
onOk,
title,
body,
buttonCancelText,
buttonOkText,
buttonOkIsDanger,
className,
...rest
}: IDialogProps) => {
const dialogRef = React.useRef<HTMLDialogElement>(null);
const modalContentRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const dialog = dialogRef.current;
if (!dialog) return;
if (isOpen) dialog.showModal();
else dialog.close();
}, [isOpen]);
useOutsideClick(modalContentRef, () => {
if (isOpen) onClose();
});
return (
<dialog ref={dialogRef} onClose={onClose} className={cn(styles.root, className)} {...rest}>
<div ref={modalContentRef} className={styles.content}>
<div className={styles.close} onClick={onClose}>
<Icon name={'x'} size={20} />
</div>
<Heading className={styles.heading}>{title}</Heading>
<Body className={styles.body}>{body}</Body>
<div className={styles.buttonsGroup}>
<Button variant={'secondary'} onClick={onClose}>
{buttonCancelText || 'Назад'}
</Button>
<Button
danger={buttonOkIsDanger}
onClick={() => {
if (onOk) onOk();
onClose();
}}
>
{buttonOkText || 'ОК'}
</Button>
</div>
</div>
</dialog>
);
};
export default Dialog;