@dndbuilder.com/react
Version:
Drag and drop builder for React
186 lines (185 loc) • 4.59 kB
JavaScript
"use client";
import { jsx as a } from "react/jsx-runtime";
import { classNames as b } from "../../../../../utils.js";
import { Root as h } from "../../../../../node_modules/.pnpm/@radix-ui_react-slot@1.2.2_@types_react@19.0.10_react@19.0.0/node_modules/@radix-ui/react-slot/dist/index.js";
import { createContext as y, useRef as v, useState as g, useCallback as C, useContext as m } from "react";
import { createPortal as B } from "react-dom";
import { cva as N } from "../../../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
const f = y(void 0);
function w({ children: i, open: o, onOpenChange: t }) {
const e = v(null), [n, s] = g(!1), [r, c] = g(!1), [l, p] = g(!1), u = o !== void 0, k = u ? o : n, x = C(() => {
u ? t == null || t(!0) : s(!0), c(!1), setTimeout(() => {
var d;
(d = e.current) == null || d.showModal(), p(!0);
}, 10);
}, [u, t]), D = C(() => {
c(!0), p(!1), setTimeout(() => {
var d;
(d = e.current) == null || d.close(), c(!1), u ? t == null || t(!1) : s(!1);
}, 300);
}, [u, t]);
return /* @__PURE__ */ a(
f.Provider,
{
value: {
open: x,
close: D,
isOpen: k,
isClosing: r,
showBackdrop: l,
dialogRef: e
},
children: i
}
);
}
w.Trigger = function({
children: o,
asChild: t,
className: e,
...n
}) {
const s = m(f);
if (!s) throw new Error("Drawer.Trigger must be used within Drawer");
const r = t ? h : "button";
return /* @__PURE__ */ a(
r,
{
className: b("drawer-trigger", e),
onClick: s.open,
...r === "button" ? { type: "button" } : {},
...n,
children: o
}
);
};
const R = N("", {
variants: {
direction: {
left: "inset-y-0 left-0 w-80 h-full",
right: "inset-y-0 right-0 w-80 h-full",
top: "inset-x-0 top-0 w-full h-80",
bottom: "inset-x-0 bottom-0 w-full h-80"
},
isClosing: {
true: "",
false: ""
}
},
compoundVariants: [
{
direction: "left",
isClosing: !0,
class: "animate-slide-out-left"
},
{
direction: "left",
isClosing: !1,
class: "animate-slide-in-left"
},
{
direction: "right",
isClosing: !0,
class: "animate-slide-out-right"
},
{
direction: "right",
isClosing: !1,
class: "animate-slide-in-right"
},
{
direction: "top",
isClosing: !0,
class: "animate-slide-out-top"
},
{
direction: "top",
isClosing: !1,
class: "animate-slide-in-top"
},
{
direction: "bottom",
isClosing: !0,
class: "animate-slide-out-bottom"
},
{
direction: "bottom",
isClosing: !1,
class: "animate-slide-in-bottom"
}
],
defaultVariants: {
direction: "left",
isClosing: !1
}
});
w.Content = function({
children: o,
direction: t = "left",
className: e,
...n
}) {
const s = m(f);
if (!s) throw new Error("Drawer.Content must be used within Drawer");
const r = R({
direction: t,
isClosing: s.isClosing
}), c = (l) => {
l.key === "Escape" && (l.preventDefault(), s.close());
};
return /* @__PURE__ */ a(
"dialog",
{
ref: s.dialogRef,
onKeyDown: c,
className: "fixed inset-0 z-50 h-full w-full bg-transparent",
children: /* @__PURE__ */ a(
"div",
{
className: b(
"drawer-content fixed z-50 flex flex-col bg-white shadow-lg transition-transform duration-300 ease-out",
r,
e
),
onClick: (l) => l.stopPropagation(),
...n,
children: o
}
)
}
);
};
function T(i) {
var t;
const o = m(f);
return !o || !o.showBackdrop ? null : B(
/* @__PURE__ */ a(
"div",
{
className: `drawer-backdrop fixed inset-0 backdrop-blur-sm transition-all duration-300 ease-out ${o.showBackdrop ? "bg-black/50 opacity-100" : "bg-black/0 opacity-0"}`,
onClick: o.close,
...i
}
),
o.dialogRef.current || ((t = window.frameDocument) == null ? void 0 : t.body) || document.body
);
}
w.Backdrop = T;
function E({ children: i, className: o, ...t }) {
const e = m(f);
return e ? /* @__PURE__ */ a(
"button",
{
className: b("drawer-close-button", o),
onClick: e.close,
"aria-label": "Close drawer",
...t,
children: i
}
) : null;
}
w.CloseButton = E;
export {
w as Drawer
};
//# sourceMappingURL=drawer.js.map