synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
121 lines (120 loc) • 3.29 kB
JavaScript
import { jsxs as x, jsx as e } from "react/jsx-runtime";
import D from "react-draggable";
import { useTheme as R, useMediaQuery as W, Paper as M, Stack as B, Typography as C, Box as s, IconButton as E, Divider as H, DialogContent as I } from "@mui/material";
import S from "@mui/icons-material/Close";
import { useRef as k, useState as c, useEffect as j } from "react";
import { useResizable as L } from "../ResizableContainer/hooks/useResizable.js";
import { ResizableContainer as T } from "../ResizableContainer/ResizableContainer.js";
function J({
open: g = !1,
onClose: p,
title: f,
children: u
}) {
const w = R(), i = W(w.breakpoints.down("sm")), d = k(null), [b, v] = c(), [y, l] = c({ x: 100, y: 100 }), { width: n, height: r, handleResizeStart: z } = L({
initialWidth: 600,
initialHeight: 500,
minWidth: 300,
minHeight: 200,
maxWidth: 1200,
maxHeight: 800
});
if (j(() => {
function o() {
const t = {
left: -(n - 100),
top: 0,
right: window.innerWidth - 100,
bottom: window.innerHeight - 100
};
v(t), l((m) => ({
x: Math.max(t.left, Math.min(m.x, t.right)),
y: Math.max(t.top, Math.min(m.y, t.bottom))
}));
}
return o(), window.addEventListener("resize", o), () => window.removeEventListener("resize", o);
}, [n, r]), !g)
return null;
const h = /* @__PURE__ */ x(
M,
{
elevation: 5,
sx: {
display: "flex",
flexDirection: "column",
height: i ? "95vh" : `${r}px`,
width: i ? "95vw" : `${n}px`,
...i && {
position: "fixed"
}
},
children: [
/* @__PURE__ */ x(
B,
{
direction: "row",
alignItems: "center",
gap: "5px",
className: "drag-handle",
sx: {
padding: "20px",
cursor: "move"
},
children: [
/* @__PURE__ */ e(C, { variant: "headline1", children: f }),
/* @__PURE__ */ e(s, { sx: { flexGrow: 1 } }),
/* @__PURE__ */ e(E, { onClick: p, children: /* @__PURE__ */ e(S, {}) })
]
}
),
/* @__PURE__ */ e(H, { sx: { mx: 2 } }),
/* @__PURE__ */ e(
I,
{
sx: {
height: "100%",
maxWidth: "100%",
padding: "16px"
},
children: u
}
)
]
}
);
return /* @__PURE__ */ e(
s,
{
sx: {
position: "fixed",
zIndex: 1e3,
top: 0,
left: 0,
pointerEvents: i ? "auto" : "none"
},
children: i ? h : /* @__PURE__ */ e(
D,
{
position: y,
onDrag: (o, a) => l({ x: a.x, y: a.y }),
nodeRef: d,
bounds: b,
handle: ".drag-handle",
children: /* @__PURE__ */ e(s, { ref: d, sx: { pointerEvents: "auto" }, children: /* @__PURE__ */ e(
T,
{
width: n,
height: r,
onResizeStart: z,
children: h
}
) })
}
)
}
);
}
export {
J as default
};
//# sourceMappingURL=DraggableDialog.js.map