@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
147 lines (146 loc) • 6.79 kB
JavaScript
import { setAttribute as x, insert as y, createComponent as i, mergeProps as k, effect as $, className as g, delegateEvents as Z, template as j } from "solid-js/web";
import { createSignal as c, onMount as D, createEffect as h, Show as A, For as M } from "solid-js";
import { TimeNumber as T } from "../TimeNumber/index.js";
import { getCurrentTime as F, getAmPm as W, convert24HourTo12Hour as q, convert12HourTo24Hour as z } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/utils.js";
import { cn as p } from "../../utils/class.js";
var B = j('<div aria-label="Select minutes. Selected time is 11:01AM"role=listbox tabindex=0><div></div><div></div><div>');
const Q = (e) => {
const [H, r] = c(!1), [P, f] = c(!1), [O, m] = c(!1), [U, w] = c("rotateZ(0deg)"), [S, V] = c(!1);
D(() => {
let n = {};
if (e.setCurrentTimeOnOpen && (n = F()), e.allowedView.includes("hour"))
if (e.value.hour === void 0) {
if (!e.setCurrentTimeOnOpen)
return;
e.setSelectedHour(n.hour), e.setMeridiem(n.meridiem);
} else
e.setMeridiem(W(e.value.hour)), e.setSelectedHour(q(e.value.hour));
if (e.allowedView.includes("minute"))
if (e.value.minute === void 0) {
if (!e.setCurrentTimeOnOpen)
return;
e.setSelectedMinute(n.minute);
} else
e.setSelectedMinute(e.value.minute);
if (e.allowedView.includes("second"))
if (e.value.second === void 0) {
if (!e.setCurrentTimeOnOpen)
return;
e.setSelectedSeconds(n.second);
} else
e.setSelectedSeconds(e.value.second);
e.allowedView.includes("hour") || (e.allowedView.includes("minute") ? e.setView("minute") : e.allowedView.includes("second") && e.setView("second"));
}), h(() => {
var n;
S() && ((n = e.onChange) == null || n.call(e, { hour: e.selectedHour() !== void 0 ? z(e.selectedHour(), e.meridiem()) : void 0, minute: e.selectedMinute(), second: e.selectedSeconds() }), e.handleTimeChange({ hour: e.selectedHour(), minute: e.selectedMinute(), second: e.selectedSeconds() }, e.meridiem()));
}), h(() => {
e.view() === "hour" && w(`rotateZ(${30 * (e.selectedHour() || 0)}deg)`), e.view() === "minute" && w(`rotateZ(${6 * (e.selectedMinute() || 0)}deg)`), e.view() === "second" && w(`rotateZ(${6 * (e.selectedSeconds() || 0)}deg)`);
}), h(() => {
if (P() && !H()) {
if (O())
return m(!1), void f(!1);
e.handleNext(), f(!1);
}
}), h(() => {
(e.view() !== "hour" || e.selectedHour() === void 0) && !(e.view() === "minute" && e.selectedMinute() !== void 0 || e.view() === "second" && e.selectedSeconds() !== void 0) ? V(!1) : V(!0);
});
const b = (n, t, o) => {
if (o === void 0)
return;
const s = () => {
H() || r(!0), P() || f(!0);
};
n.pressure > 0 && t === "hour" && (e.setSelectedHour(o), s()), n.pressure > 0 && t === "minute" && (e.setSelectedMinute(o), s()), n.pressure > 0 && t === "second" && (e.setSelectedSeconds(o), s());
}, C = (n, t, o) => {
o !== void 0 && d(t, o);
}, d = (n, t) => {
if (t !== void 0) {
if (n === "hour")
return e.setSelectedHour(t), void e.handleNext();
if (n === "minute")
return e.setSelectedMinute(t), void e.handleNext();
n === "second" && e.setSelectedSeconds(t), e.handleNext();
}
};
return l = B(), a = l.firstChild, v = a.nextSibling, u = v.nextSibling, l.$$mouseup = () => r(!1), x(l, "data-time-analog-wrapper", !0), x(a, "data-time-analog-center-hand", !0), x(v, "data-time-analog-center-dot", !0), y(u, i(A, { get when() {
return e.view() === "hour";
}, keyed: !0, get children() {
return i(M, { get each() {
return Array.from(Array(12).keys(), (n) => n + 1);
}, children: (n, t) => i(T, k(e, { get type() {
return e.view();
}, get selectedValue() {
return e.selectedHour;
}, onClick: d, onMouseUp: () => r(!1), onPointerEnter: b, onTouchStart: () => m(!0), onTouchEnd: C, onPointerUp: () => r(!1), onPointerCancel: () => r(!1), index: t, get class() {
return e.timeAnalogNumberClass;
} })) });
} }), null), y(u, i(A, { get when() {
return e.view() === "minute";
}, keyed: !0, get children() {
return i(M, { get each() {
return Array.from(Array(60).keys(), (n) => n + 1);
}, children: (n, t) => i(T, k(e, { get type() {
return e.view();
}, get selectedValue() {
return e.selectedMinute;
}, onClick: d, onMouseUp: () => r(!1), onPointerEnter: b, onTouchStart: () => m(!0), onTouchEnd: C, onPointerUp: () => r(!1), onPointerCancel: () => r(!1), index: t, get class() {
return e.timeAnalogNumberClass;
} })) });
} }), null), y(u, i(A, { get when() {
return e.view() === "second";
}, keyed: !0, get children() {
return i(M, { get each() {
return Array.from(Array(60).keys(), (n) => n + 1);
}, children: (n, t) => i(T, k(e, { get type() {
return e.view();
}, get selectedValue() {
return e.selectedSeconds;
}, onClick: d, onMouseUp: () => r(!1), onPointerEnter: b, onTouchStart: () => m(!0), onTouchEnd: C, onPointerUp: () => r(!1), onPointerCancel: () => r(!1), index: t, get class() {
return e.timeAnalogNumberClass;
} })) });
} }), null), $((n) => {
var t = p(`
time-analog-wrapper
rn-relative
rn-flex
rn-h-[237px]
rn-w-[237px]
rn-items-center
rn-justify-center
rn-rounded-full
rn-bg-slate-100
dark:rn-bg-eerie-black
`, e.timeAnalogWrapperClass), o = p(`
time-analog-center-hand
rn-left-[calc(50%
-
1px)]
rn-absolute rn-bottom-1/2 rn-h-[39%]
rn-w-[2px]
rn-origin-center-bottom
rn-bg-dark-time
dark:rn-bg-[#8f8f8f]
`, { "rn-hidden": !S(), "rn-block": S() }, e.timeAnalogClockHandClass), s = U(), N = p(`
time-analog-center-dot
rn-absolute
rn-left-1/2
rn-top-1/2
rn-h-[5px]
rn-w-[5px] rn--translate-x-1/2
rn--translate-y-1/2 rn-transform rn-rounded-full
rn-bg-dark-time
dark:rn-bg-dark-time
`, e.timeAnalogClockCenterDotClass), E = p(`
rn-relative
rn-h-[50px]
rn-w-[50px]
rn-bg-transparent
`);
return t !== n.e && g(l, n.e = t), o !== n.t && g(a, n.t = o), s !== n.a && ((n.a = s) != null ? a.style.setProperty("transform", s) : a.style.removeProperty("transform")), N !== n.o && g(v, n.o = N), E !== n.i && g(u, n.i = E), n;
}, { e: void 0, t: void 0, a: void 0, o: void 0, i: void 0 }), l;
var l, a, v, u;
};
Z(["mouseup"]);
export {
Q as TimeAnalog
};