@replyke/ui-core-react-js
Version:
Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.
85 lines • 2.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Modal = ({ show, onClose, children }) => {
const [isVisible, setIsVisible] = (0, react_1.useState)(show);
(0, react_1.useEffect)(() => {
if (show) {
setIsVisible(true);
}
}, [show]);
const handleOverlayClick = (e) => {
e.stopPropagation();
onClose?.();
};
// const handleContentClick = (e: MouseEvent<HTMLDivElement>) => {
// e.stopPropagation();
// };
const handleAnimationEnd = () => {
if (!show) {
setIsVisible(false);
}
};
(0, react_1.useEffect)(() => {
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = `
@keyframes fadeIn {
from {
background: rgba(0, 0, 0, 0);
}
to {
background: rgba(0, 0, 0, 0.5);
}
}
@keyframes fadeOut {
from {
background: rgba(0, 0, 0, 0.5);
}
to {
background: rgba(0, 0, 0, 0);
}
}
`;
document.head.appendChild(styleSheet);
return () => {
document.head.removeChild(styleSheet);
};
}, []);
if (!isVisible) {
return null;
}
const modalOverlayStyle = {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: show ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0)", // Background based on show state
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "stretch",
zIndex: 1000,
animation: show ? "fadeIn 0.5s forwards" : "fadeOut 0.5s forwards", // Apply fadeIn or fadeOut
visibility: show ? "visible" : "hidden",
};
// const modalContentStyle: React.CSSProperties = {
// position: "relative",
// width: "max-content",
// backgroundColor:"yellow",
// };
// const modalCloseStyle: React.CSSProperties = {
// position: 'absolute',
// top: '10px',
// right: '10px',
// background: 'none',
// border: 'none',
// fontSize: '20px',
// cursor: 'pointer',
// };
return ((0, jsx_runtime_1.jsx)("div", { style: modalOverlayStyle, onAnimationEnd: handleAnimationEnd, onClick: handleOverlayClick, children: children }));
};
exports.default = Modal;
//# sourceMappingURL=Modal.js.map