@smitch/fluid
Version:
A Next/React ui-component libray.
45 lines (44 loc) • 2.64 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { CloseButton } from '..';
import { useDisableBack } from './hooks/useDisableBack';
var Dialog = function (_a) {
var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.modal, modal = _c === void 0 ? true : _c, _d = _a.showClose, showClose = _d === void 0 ? true : _d, onClose = _a.onClose, title = _a.title, _e = _a.titleSize, titleSize = _e === void 0 ? 'lg' : _e, _f = _a.closeBtnSize, closeBtnSize = _f === void 0 ? 'md' : _f, _g = _a.titleBold, titleBold = _g === void 0 ? false : _g, children = _a.children;
useDisableBack(modal);
var dialog = useRef(null);
useEffect(function () {
var dialogRef = dialog.current;
var handleClose = function () {
if (modal)
document.body.style.overflow = '';
};
if (dialogRef)
dialogRef.addEventListener('close', handleClose, false);
var handleEscape = function (e) {
if (e.key === 'Escape')
onClose();
};
document.addEventListener('keyup', handleEscape, false);
if (open) {
if (modal) {
dialogRef.showModal();
document.body.style.overflow = 'hidden';
}
else
dialogRef.show();
}
else
dialogRef.close();
return function () {
handleClose();
if (dialogRef)
dialogRef.removeEventListener('close', handleClose, false);
document.removeEventListener('keyup', handleEscape, false);
};
}, [open, modal, onClose]);
return (_jsxs("dialog", { id: 'dialog', ref: dialog, className: "dialog backdrop:bg-black backdrop:opacity-60 border-none ".concat(modal
? 'shadow-none bg-light dark:bg-dark dark:text-light'
: 'shadow-md shadow-dark dark:shadow-light bg-dark text-light dark:bg-light dark:text-dark rounded-md'), children: [_jsxs("div", { className: 'dialog-header p-4', children: [title && (_jsx("h2", { className: "dialog-title ".concat(modal ? 'text-center' : 'text-start', " text-").concat(titleSize, " ").concat(titleBold ? 'font-bold' : 'font-normal'), children: title })), showClose && (_jsx(CloseButton, { onClick: onClose, layout: 'circle', size: closeBtnSize, className: "".concat(modal ? 'fixed right-3 top-3' : 'absolute right-1 top-1') }))] }), _jsx("div", { className: "dialog-content ".concat(modal ? 'p-0' : 'p-4', " pt-0 min-w-[280px] max-w-md"), children: children })] }));
};
export default Dialog;