@payfit/unity-components
Version:
46 lines (45 loc) • 1.64 kB
JavaScript
import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
import { useContext as t, useRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i } from "react/jsx-runtime";
import { OverlayTriggerStateContext as a } from "react-aria-components/Dialog";
import { useDrag as o } from "@use-gesture/react";
//#region src/components/side-panel/parts/SidePanelDragIndicator.tsx
var s = r({ slots: {
base: ["uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500", "uy:cursor-grab uy:touch-action-none"],
indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
} }), c = 100;
function l() {
let r = n(null), l = t(a), u = e(), { base: d, indicator: f } = s(), p = u === "xs" || u === "sm", m = o((e) => {
let { movement: [t, n], direction: [i, a], intentional: o, cancel: s, last: u, event: d } = e;
if (!p) {
s();
return;
}
d.preventDefault();
let f = r.current?.closest("[data-unity-side-panel]");
if (f) {
if (n < 0) {
f.style.transform = "translate3d(0, 0, 0)";
return;
}
f.style.transform = `translate3d(0, ${n}px, 0)`, f.style.transition = "none", u && o && (n > c || a > 0 ? l && setTimeout(() => {
l.close();
}, 50) : (f.style.transform = "translate3d(0, 0, 0)", f.style.transition = "transform 0.3s ease"));
}
}, {
axis: "y",
filterTaps: !0,
threshold: 5
});
return /* @__PURE__ */ i("div", {
className: d(),
"aria-hidden": "true",
ref: r,
...m(),
children: /* @__PURE__ */ i("div", { className: f() })
});
}
l.displayName = "SidePanelDragIndicator";
//#endregion
export { l as SidePanelDragIndicator };