@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
33 lines (32 loc) • 4.12 kB
JavaScript
import { addEventListener as f, setAttribute as l, insert as V, effect as $, className as E, delegateEvents as j, template as z } from "solid-js/web";
import { createSignal as a, onMount as C, createEffect as A } from "solid-js";
import { leadingZeros as b } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/utils.js";
import { cn as I } from "../../utils/class.js";
var Z = z("<button role=option type=button><span>");
const G = (e) => {
const [c, h] = a(12), [p, y] = a(1), [i, r] = a(), [d, o] = a(), [L, N] = a(1), [T, U] = a(1), [s, v] = a(!1);
return C(() => {
e.type === "hour" ? (h(12), y(1)) : e.type !== "minute" && e.type !== "second" || (h(60), y(5));
}), C(() => {
N(100 * Math.cos(e.index() / c() * 2 * Math.PI)), U(100 * Math.sin(e.index() / c() * 2 * Math.PI)), e.type !== "minute" && e.type !== "second" || (e.index() % p() == 0 ? e.index() + 15 >= 60 ? (r(b(e.index() + 15 - 60).toString()), o(e.index() + 15 - 60)) : (r(b(e.index() + 15).toString()), o(e.index() + 15)) : e.index() + 15 >= 60 ? (r(""), o(e.index() + 15 - 60)) : (r(""), o(e.index() + 15))), e.type === "hour" && (e.index() % p() == 0 ? e.index() + 3 >= 12 ? (r((e.index() + 3 - 12).toString()), o(e.index() + 3 - 12)) : (r((e.index() + 3).toString()), o(e.index() + 3)) : e.index() + 3 >= 12 ? (r(""), o(e.index() + 3 - 12)) : (r(""), o(e.index() + 3))), e.type === "hour" && i() === "0" && r("12");
}), A(() => {
e.selectedValue() === d() || e.selectedValue() === 12 && d() === 0 && e.type === "hour" ? v(!0) : v(!1);
}), n = Z(), u = n.firstChild, f(n, "pointercancel", e.onPointerCancel), f(n, "mouseup", e.onMouseUp, !0), f(n, "pointerup", e.onPointerUp, !0), n.addEventListener("pointerenter", (t) => e.onPointerEnter(t, e.type, d())), f(n, "touchstart", e.onTouchStart, !0), n.$$click = () => e.onClick(e.type, d()), l(n, "data-time-analog-number", !0), V(u, i), $((t) => {
var g = I(`
time-analog-number
rn-absolute
rn-h-time
rn-w-time
rn-select-none
rn-rounded-full
rn-leading-time
hover:rn-bg-transparent
`, { "\n before:rn-content[''] \n rn-text-white \n before:rn-pointer-events-none \n before:rn-absolute \n before:rn-left-1/2 \n before:rn-top-1/2 \n before:rn-h-time-2 \n before:rn-w-time-2 \n before:rn--translate-x-1/2 \n before:rn--translate-y-1/2 \n before:rn-transform\n before:rn-rounded-full\n before:rn-bg-dark-time\n dark:rn-text-white\n dark:before:rn-bg-dark-time\n dark:before:rn-text-white\n ": s(), "": e.index() % p() == 0, "dark:rn-text-white": !s() }, e.class), k = b(d() || 0) + " " + e.type + "s", x = L() + 15 + "px", m = T() + 15 + "px", P = d(), w = s() ? 0 : -1, M = s(), S = I(" rn-relative rn-z-[1]", { "\n after:rn-content['']\n dark:rn-text-red\n dark:after:rn-bg-red\n after:rn-absolute\n after:rn-left-1/2\n after:rn-top-1/2\n after:rn-h-[3px]\n after:rn-w-[3px]\n after:rn--translate-x-1/2\n after:rn--translate-y-1/2\n after:rn-transform\n after:rn-rounded-full\n after:rn-bg-white\n \n ": e.type !== "hour" && !i() && s() });
return g !== t.e && E(n, t.e = g), k !== t.t && l(n, "aria-label", t.t = k), x !== t.a && ((t.a = x) != null ? n.style.setProperty("left", x) : n.style.removeProperty("left")), m !== t.o && ((t.o = m) != null ? n.style.setProperty("top", m) : n.style.removeProperty("top")), P !== t.i && l(n, "data-value", t.i = P), w !== t.n && l(n, "tabindex", t.n = w), M !== t.s && l(n, "data-selected", t.s = M), S !== t.h && E(u, t.h = S), t;
}, { e: void 0, t: void 0, a: void 0, o: void 0, i: void 0, n: void 0, s: void 0, h: void 0 }), n;
var n, u;
};
j(["click", "touchstart", "pointerup", "mouseup"]);
export {
G as TimeNumber
};