@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
91 lines (90 loc) • 4 kB
JavaScript
import { use as d, insert as l, createComponent as P, mergeProps as N, effect as g, className as h, style as W, delegateEvents as b, template as $ } from "solid-js/web";
import { createSignal as s, createEffect as p, onCleanup as j, onMount as B } from "solid-js";
import { CustomPortal as M } from "../CustomPortal/index.js";
import { smartDropDownPosition as T } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/utils.js";
import { cn as k } from "../../utils/class.js";
var E = $("<div data-type=dropdown>"), x = $("<div><div>");
const J = (e) => {
const [f, z] = s(), [w, D] = s(), [L, O] = s(), [v, R] = s(), [r, a] = s(!1), [u, y] = s(!1), m = (t) => {
t || (t = { x: e.positionX || "center", y: e.positionY || "auto" });
const { left: n, top: o } = T({ inputRef: v, dropDownRef: L, positionX: t.x, positionY: t.y });
D(n), z(o);
};
p(() => {
const t = () => {
(e.isShown || r()) && m({ y: e.positionY || "auto", x: e.positionX || "center" });
};
document.addEventListener("scroll", t), window.addEventListener("resize", t), j(() => {
document.removeEventListener("scroll", t), window.removeEventListener("resize", t);
});
}), p(() => {
e.isShown || r() ? setTimeout(() => {
y(!0);
}, 100) : y(!1);
}), p(() => {
var t, n;
e.isShown || r() ? ((t = e.onOpen) == null || t.call(e), m()) : (n = e.onClose) == null || n.call(e);
}), p(() => {
u() && m({ y: e.positionY || "auto", x: e.positionX || "center" });
}), B(() => {
if (e.portalContainer || document.getElementById("portal-island"))
return;
const t = document.createElement("div");
t.id = "portal-island", document.body.appendChild(t);
});
const X = () => {
e.handleChildrenClick ? e.handleChildrenClick(e.setIsShown || a) : e.setIsShown ? e.setIsShown(!e.isShown) : a(!r());
}, C = () => {
e.setIsShown ? e.setIsShown(!1) : a(!1);
}, Y = () => {
if (typeof e.content == "function") {
const o = e.content({ close: C });
return t = E(), l(t, o), t;
}
var t, n;
return n = E(), l(n, () => e.content), n;
};
return c = x(), i = c.firstChild, c.$$keyup = (t) => {
t.key === "Escape" && (e.isShown || r()) && C();
}, i.$$click = X, d(R, i), l(i, () => e.children), l(c, P(M, N({ get setIsShown() {
return e.setIsShown || a;
}, get isShown() {
return e.isShown || r();
} }, () => e.portalContainer ? { portalContainer: e.portalContainer } : { referenceId: "portal-island" }, { hideDefaultStyle: !0, get onClickOutside() {
return e.onClickOutside ? (t) => {
var n;
return (n = e.onClickOutside) == null ? void 0 : n.call(e, t, e.setIsShown || a);
} : void 0;
}, reference: v, get useRefWidth() {
return e.useRefWidth;
}, get style() {
return { "z-index": e.zIndex || 1e3, position: "fixed", ...f() && { top: f() }, ...w() && { left: w() } };
}, get children() {
var t = x(), n = t.firstChild;
return d(O, t), l(n, Y), g((o) => {
var S = `
${u() ? "rn-translate-y-[0rem] rn-opacity-100" : "-rn-translate-y-[1rem] rn-opacity-0"}
rn-duration-350
rn-delay-50
rn-transition-transform
rn-ease-in-out
motion-reduce:rn-transition-none
`, I = k(`
${u() ? "scale-100 rn-opacity-100" : "scale-90 rn-opacity-0"}
rn-duration-350
rn-transition-opacity
rn-ease-in-out
motion-reduce:rn-transition-none
`, e.contentClassName);
return S !== o.e && h(t, o.e = S), I !== o.t && h(n, o.t = I), o;
}, { e: void 0, t: void 0 }), t;
} })), null), g((t) => {
var n = { ...e.width && { width: e.width || "100%" } }, o = k(e.className);
return t.e = W(i, n, t.e), o !== t.t && h(i, t.t = o), t;
}, { e: void 0, t: void 0 }), c;
var c, i;
};
b(["keyup", "click"]);
export {
J as Popover
};