fui-fancyui
Version:
FancyUI Libary
117 lines (116 loc) • 4.25 kB
JavaScript
"use client";
import { jsxs as v, jsx as p } from "react/jsx-runtime";
import { useId as L, useRef as l, useState as k, useCallback as y, useEffect as B } from "react";
import N from "../../atoms/BackDrop/BackDrop.js";
import Q from "../../atoms/ScalingSection/ScalingSection.js";
import V from "../../atoms/SwipeUpContainer/SwipeUpContainer.js";
import X from "../../../utils/hooks/useWindowDimensions/useWindowDimensions.js";
import { WrapperModal as Z, ContentBox as _, WrapperContent as F, Content as R } from "./SwipeUpModal.style.js";
import { useBodyOverflow as tt } from "../../../utils/hooks/useBodyOverflow/useBodyOverflow.js";
function at(H) {
var $;
const {
children: f,
isOpen: E = !0,
isCloseable: w = !0,
isScalable: I = !0,
themeType: W = "primary",
layer: j = 1,
backdrop: D = !0,
externalStyle: U,
onClose: S,
...A
} = H, b = L(), x = l(0), t = l(null), C = l(null), g = l(null), q = l(null), a = l(null), { height: e } = X(), [z, M] = k(0), [o, h] = k("closed"), [G, T] = k(120), P = l(0);
tt("hidden");
const Y = y(() => {
var i, r;
const n = ((i = t == null ? void 0 : t.current) == null ? void 0 : i.offsetHeight) ?? 0, s = ((r = a.current) == null ? void 0 : r.offsetHeight) ?? 0, c = Math.min(n + s, e), d = O(c, e);
x.current = c, T(d), h("opening");
}, [e]), u = y(
(n) => {
n === "interaction" && !w || (t.current && (t.current.style.height = "", t.current.style.maxHeight = ""), document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, P.current), h("closing"));
},
[w]
);
B(() => {
E ? (g.current = document.activeElement, Y()) : u("status");
}, [E, Y, u]);
const J = y(
(n) => {
var i, r, m;
if (n.target.id !== b) return;
const c = ((i = t == null ? void 0 : t.current) == null ? void 0 : i.offsetHeight) ?? 0, d = ((r = a.current) == null ? void 0 : r.offsetHeight) ?? 0;
o === "opening" ? (C.current && C.current.focus(), P.current = window.scrollY, document.body.style.position = "fixed", document.body.style.top = `-${P.current}px`, document.body.style.width = "100%", M(e - c + d / 2), h("open")) : o === "closing" && (h("closed"), S && S(), (m = g == null ? void 0 : g.current) == null || m.focus());
},
[b, S, o, e]
), K = y(
(n, s) => {
var r;
const c = ((r = a.current) == null ? void 0 : r.offsetHeight) ?? 0, d = e - s + c / 2, i = O(d, e);
if (n === "move")
M(e - (d + c)), T(i);
else if (n === "end") {
const m = O(x.current, e) + 100;
x.current !== 0 && i > m * 0.4 && u("interaction");
}
},
[e, u]
);
return B(() => {
var n, s;
M(
e - ((((n = t == null ? void 0 : t.current) == null ? void 0 : n.offsetHeight) ?? 0) + (((s = a.current) == null ? void 0 : s.offsetHeight) ?? 0))
);
}, [e]), /* @__PURE__ */ v(Z, { ref: q, children: [
/* @__PURE__ */ v(
V,
{
ref: C,
tabIndex: -1,
id: b,
isOpen: o === "opening",
onTransitionEnd: J,
isScalable: I,
themeType: W,
layer: j,
style: {
transform: o === "open" || o === "opening" ? `translateY(${Math.max(G, 0)}%)` : "translateY(120%)",
transition: o !== "open" ? "transform 0.3s ease-in-out" : ""
},
externalStyle: U,
...A,
children: [
I && w && /* @__PURE__ */ p(
Q,
{
ref: a,
handleScaling: K,
onClick: () => u("interaction")
}
),
/* @__PURE__ */ p(
_,
{
$spaceTop: (($ = a.current) == null ? void 0 : $.offsetHeight) ?? 0,
style: {
height: `${e - (z ?? 0)}px`
},
children: /* @__PURE__ */ p(F, { children: /* @__PURE__ */ p(R, { ref: t, children: f }) })
}
)
]
}
),
D && /* @__PURE__ */ p(
N,
{
isOpen: o === "opening" || o === "open",
onClick: () => u("interaction")
}
)
] });
}
const O = (H, f) => (f - H) / f * 100;
export {
at as default
};