@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
62 lines (61 loc) • 3.95 kB
JavaScript
import { createComponent as s, mergeProps as y, setAttribute as O, insert as P, spread as X, template as T } from "solid-js/web";
import { Popover as Y } from "../Popover/index.js";
import { TimeAnalogGroup as j } from "../TimeAnalogGroup/index.js";
import { createSignal as $, Show as x } from "solid-js";
import { convert12HourTo24Hour as G } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/utils.js";
import { n as I, o as c } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/format-CMbjATj9.js";
import { cn as S } from "../../utils/class.js";
var L = T('<input readonly data-scope=time-picker data-type=time-picker-input data-part=input aria-label="time picker input"type=text>'), N = T("<div class=time-picker-input-area data-scope=time-picker data-part=control>");
const M = (e) => {
const [W, u] = $(!1), [d, z] = $({ value: {}, label: "" }), A = (i, o) => {
var p, l, m, w, h, v, g, V, f, k, b, C;
const t = e.setValue || z;
let n = "", r = "";
e.allowedView || (n = `${I(i.hour)}:${c(i.minute)}`, r = o), (p = e.allowedView) != null && p.includes("hour") ? (n = `${I(i.hour)}`, r = o, ((l = e.allowedView) != null && l.includes("minute") && (i.minute || i.minute !== void 0) || (m = e.allowedView) != null && m.includes("second") && (i.second || i.second !== void 0)) && (n += ":")) : ((w = e.allowedView) != null && w.includes("minute") && !((h = e.allowedView) != null && h.includes("second")) && (r = i.minute === 1 ? "min" : "mins"), (v = e.allowedView) != null && v.includes("second") && !((g = e.allowedView) != null && g.includes("minute")) && (r = i.second === 1 ? "sec" : "secs"), (V = e.allowedView) != null && V.includes("second") && ((f = e.allowedView) != null && f.includes("minute")) && (r = i.second === 1 ? "sec" : "secs")), (k = e.allowedView) != null && k.includes("minute") && (n += `${c(i.minute)}`, (b = e.allowedView) != null && b.includes("second") && (i.second || i.second !== void 0) && (n += ":")), (C = e.allowedView) != null && C.includes("second") && (n += `${c(i.second)}`), n += ` ${r}`, t({ value: { ...i, hour: i.hour !== void 0 ? G(i.hour, o) : void 0 }, label: n });
}, H = () => {
u(!0);
}, a = ((i) => {
if (i)
return typeof i == "function" ? i({ value: e.value || d, showTime: H }) : i;
})(e.renderInput);
return s(Y, { get isShown() {
return W();
}, setIsShown: u, handleChildrenClick: a ? () => {
} : void 0, onClose: () => {
var i;
(i = e.onClose) == null || i.call(e);
}, onOpen: () => {
var i;
(i = e.onOpen) == null || i.call(e);
}, content: ({ close: i }) => s(j, y(e, { get value() {
var o, t;
return ((t = (o = e.value) == null ? void 0 : o.call(e)) == null ? void 0 : t.value) || d().value;
}, handleTimeChange: A, close: i, setIsShown: u })), get positionX() {
return e.pickerPositionX;
}, get positionY() {
return e.pickerPositionY;
}, get zIndex() {
return e.zIndex;
}, get width() {
return e.inputWrapperWidth;
}, get className() {
return S(e.inputWrapperClass, "time-picker-input-wrapper");
}, get children() {
var i = N();
return O(i, "data-time-picker-input-area", !0), P(i, s(x, { when: a, keyed: !0, children: a }), null), P(i, s(x, { when: !a, keyed: !0, get children() {
var o = L();
return X(o, y({ get placeholder() {
return e.placeholder;
}, get value() {
var t, n, r;
return ((t = e.inputLabel) == null ? void 0 : t.call(e)) || ((r = (n = e.value) == null ? void 0 : n.call(e)) == null ? void 0 : r.label) || d().label;
} }, () => ({ ...e.inputProps, class: void 0 }), { get class() {
var t;
return S("time-picker-input rn-w-full rn-px-1", (t = e.inputProps) == null ? void 0 : t.class, e.inputClass);
} }), !1, !1), o;
} }), null), i;
} });
};
export {
M as default
};