dynamic-modal
Version:
The dynamic-modal is a solution of creation different modals into project using a json configuration file
33 lines (32 loc) • 1.42 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Portal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_dom_1 = require("react-dom");
const Portal = (props) => {
const ref = (0, react_1.useRef)(null);
const [mounted, setMounted] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
if (mounted && !props.portalOpen && props.closeTime > 0) {
const timeoutId = setTimeout(() => {
setMounted(false);
ref.current = null;
}, props.closeTime);
return () => clearTimeout(timeoutId);
}
else if (mounted && !props.portalOpen) {
setMounted(false);
ref.current = null;
}
else if (!mounted && props.portalOpen) {
ref.current = document.querySelector(props.portalTag ?? '#portal');
setMounted(true);
}
}, [mounted, props.closeTime, props.portalOpen, props.portalTag]);
if (!mounted && !ref.current)
return null;
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: `transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20 ${props.useBlur && 'backdrop-blur-sm'}`, children: props.children }), ref.current);
};
exports.Portal = Portal;