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