@brightsoftware/date-np
Version:
Simple & minimal Nepali date picker that just works.
106 lines (105 loc) • 3.41 kB
JavaScript
import { jsx as x } from "react/jsx-runtime";
import { useRef as y, useEffect as b } from "react";
import { cn as P } from "../../../utils/clsx.js";
import { createPortal as X } from "react-dom";
import { useOutsideClick as Y } from "../../hooks/useOutsideClick.js";
const E = (t) => {
const c = t.offset || 10, v = t.directionPriority ?? ["bottom", "right", "top", "left"], s = y(null), h = ({ x: r, y: l }) => {
const f = window.scrollX, a = window.scrollX + window.innerWidth, g = window.scrollY, e = window.scrollY + window.innerHeight;
return r >= f && r <= a && l >= g && l <= e;
};
return b(() => {
if (!t.active)
return;
let r = -1;
const l = (f) => {
var m;
const a = s.current, g = t.activateWith === "ref" && ((m = t == null ? void 0 : t.activatorRef) == null ? void 0 : m.current);
if (!a || !g && t.activateWith === "ref")
return;
const e = t.activateWith === "position" ? {
top: t.activationPosition.y + window.scrollY,
bottom: t.activationPosition.y + window.scrollY,
left: t.activationPosition.x + window.scrollX,
width: 0,
height: 0,
right: t.activationPosition.x + window.scrollX,
x: t.activationPosition.x + window.scrollX,
y: t.activationPosition.y + window.scrollY
} : (() => {
var u;
const n = (u = t.activatorRef.current) == null ? void 0 : u.getBoundingClientRect();
return {
top: n.top + window.scrollY,
bottom: n.bottom + window.scrollY,
left: n.left + window.scrollX,
right: n.right + window.scrollX,
x: n.x + window.scrollX,
y: n.y + window.scrollY,
width: n.width,
height: n.height
};
})(), o = a.getBoundingClientRect();
let i = {
x: 0,
y: 0
}, w = !1;
const d = t.centerAlignContainer || !1;
switch (f) {
case "top":
i.x = e.x + (d ? e.width / 2 - o.width / 2 : -e.width - o.width), i.y = e.top - o.height - c, w = h({
x: i.x + o.width,
y: i.y
});
break;
case "left":
i.x = e.left - o.width - c, i.y = e.bottom - (d ? e.height / 2 : e.height - c), w = h({
x: i.x,
y: i.y + o.height
});
break;
case "right":
i.x = e.right + c, i.y = e.bottom - Math.abs(d ? e.height / 2 : e.height - c - o.height), w = h({
x: i.x + o.width,
y: i.y + o.height
});
break;
case "bottom":
i.x = e.left + (d ? e.width / 2 - o.width / 2 : 0), i.y = e.bottom + c, w = h({
x: i.x + o.width,
y: i.y + o.height
});
break;
}
if (w) {
a.style.transform = `translateX(${i.x}px) translateY(${i.y}px)`;
return;
}
r++, !(r > 4) && l(v[r] ?? "bottom");
};
l(t.direction);
}, [
t.activateWith === "ref" ? t.activatorRef : t.activationPosition,
t.active
]), Y({
ref: s,
callback: t.onOutsideClick,
active: t.active || !1
}), t.active ? X(
/* @__PURE__ */ x(
"div",
{
ref: s,
className: P(
t.className,
"absolute z-50 top-0 left-0"
),
children: t.children
}
),
document.body
) : null;
};
export {
E as default
};