@enumura/chatbot-flow-editor
Version:
Visual chatbot flow editor - Development tool for creating conversational flows
54 lines (53 loc) • 2.35 kB
JavaScript
import { j as jsxRuntimeExports } from "./index-BV-DVq2p.js";
import { useRef, useEffect } from "react";
function SimpleDialog({ open, onClose, title, children, footer }) {
const dialogRef = useRef(null);
useEffect(() => {
if (!open) return;
const handleEsc = (e) => {
if (e.key === "Escape") onClose();
};
const previousOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
document.addEventListener("keydown", handleEsc);
dialogRef.current?.focus();
return () => {
document.body.style.overflow = previousOverflow;
document.removeEventListener("keydown", handleEsc);
};
}, [open, onClose]);
if (!open) return null;
return /* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50",
onClick: (e) => e.target === e.currentTarget && onClose(),
children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
"div",
{
ref: dialogRef,
className: "bg-white rounded-lg shadow-lg w-full max-w-md max-h-[90vh] overflow-hidden",
tabIndex: -1,
children: [
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-lg font-semibold", children: title }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"button",
{
onClick: onClose,
className: "text-gray-400 hover:text-gray-600 p-1",
children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
}
)
] }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 max-h-96 overflow-y-auto", children }),
footer && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-t bg-gray-50 flex justify-end gap-2", children: footer })
]
}
)
}
);
}
export {
SimpleDialog as S
};