@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
135 lines (134 loc) • 7.14 kB
JavaScript
import { createComponent as h, mergeProps as k, setAttribute as E, insert as j, spread as X, template as x } from "solid-js/web";
import { createSignal as l, onMount as G, Show as I } from "solid-js";
import { convertDateToDateObject as S, convertDateObjectToDate as p, labelFormat as d } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/utils.js";
import { DatePicker as M } from "../DatePicker/index.js";
import { Popover as N } from "../Popover/index.js";
import { defaultSelectorProps as P } from "../SelectorTwo/index.js";
import { cn as R } from "../../utils/class.js";
var U = x('<input readonly type=text data-scope=date-picker data-part=input aria-label="date picker input"data-type=date-picker-input>'), V = x("<div class=date-picker-input-area data-scope=date-picker data-part=control>");
const ee = (e) => {
const [m, L] = l({ label: "", value: {} }), [T, b] = l(!1), [Y, v] = l([]), [A, O] = l(!1), [F, y] = l(P), [q, W] = l(null), D = (t) => {
const o = e.value || m, n = e.setValue || L;
if (t.type === "single") {
const r = p((t == null ? void 0 : t.selectedDate) || {}), a = d({ date: r, option: (e == null ? void 0 : e.localeOptions) || { month: "short", day: "numeric", year: "numeric" }, format: e.formatInputLabel, locale: e.locale });
n({ value: { selected: (r == null ? void 0 : r.toISOString()) || "", selectedDateObject: (t == null ? void 0 : t.selectedDate) || {} }, label: a });
}
if (t.type === "range") {
const r = t.startDate ? p(t.startDate) : void 0, a = t.endDate ? p(t.endDate) : void 0;
let c = "";
const u = { month: "short", day: "numeric", year: "numeric", ...(e == null ? void 0 : e.localeOptions) || {}, ...e != null && e.alwaysShowRangeStartYear ? {} : { year: void 0 } }, s = (e == null ? void 0 : e.localeOptions) || { month: "short", day: "numeric", year: "numeric" };
let i = "", g = "";
if (r && a) {
if (r.getFullYear() === a.getFullYear()) {
if (e.alwaysShowRangeStartYear)
return;
u.year = void 0;
} else
u.year = "numeric";
i = d({ date: r, option: u, format: e.formatInputLabelRangeStart, locale: e.locale }), g = d({ date: a, option: s, format: e.formatInputLabelRangeEnd, locale: e.locale });
}
r && !a && (i = d({ date: r, option: u, format: e.formatInputLabelRangeStart, locale: e.locale })), !r && a && (g = d({ date: a, option: s, format: e.formatInputLabelRangeEnd, locale: e.locale })), c = `${i} ${e.rangeDatesSeparator || "-"} ${g}`, n({ value: { start: (r == null ? void 0 : r.toISOString()) || "", startDateObject: (t == null ? void 0 : t.startDate) || {}, end: (a == null ? void 0 : a.toISOString()) || "", endDateObject: (t == null ? void 0 : t.endDate) || {} }, label: c });
}
if (t.type === "multiple") {
const r = o().value.multipleDateObject || [], a = t.multipleDates || [];
if (!o().label && a.length === 0 || r.toString() === a.toString() && o().label)
return;
const c = a.map((s) => {
const i = p(s);
return d({ date: i, option: (e == null ? void 0 : e.localeOptions) || { month: "short", day: "numeric", year: "numeric" }, format: e.formatInputLabel, locale: e.locale });
}), u = a.map((s) => {
var i;
return ((i = p(s)) == null ? void 0 : i.toISOString()) || "";
}).sort((s, i) => s.localeCompare(i));
n({ value: { multiple: u, multipleDateObject: a.sort((s, i) => {
var w, C;
const g = ((w = p(s)) == null ? void 0 : w.toISOString()) || "", z = ((C = p(i)) == null ? void 0 : C.toISOString()) || "";
return g.localeCompare(z);
}) }, label: c.join(e.multipleDatesSeparator || ", ") });
}
}, $ = () => {
b(!0);
}, f = ((t) => {
if (t)
return typeof t == "function" ? t({ value: e.value || m, showDate: $ }) : t;
})(e.renderInput);
return G(() => {
var o, n, r;
const t = ((n = (o = e.value) == null ? void 0 : o.call(e)) == null ? void 0 : n.value) || m().value;
if (t.selected || t.selectedDateObject) {
const a = t.selected ? S(new Date(t.selected)) : t.selectedDateObject;
D({ type: "single", selectedDate: a });
}
if (t.start || t.startDateObject) {
const a = t.start ? S(new Date(t.start)) : t.startDateObject, c = t.end ? S(new Date(t.end)) : t.endDateObject;
D({ type: "range", startDate: a, endDate: c });
}
if (t.multiple || t.multipleDateObject) {
const a = (r = t.multipleDateObject) != null && r.length ? t.multipleDateObject : t.multiple ? t.multiple.map((c) => S(new Date(c))) : void 0;
if (!(a != null && a.length))
return;
D({ type: "multiple", multipleDates: a });
}
}), h(N, { get isShown() {
return T();
}, setIsShown: b, onClose: () => {
var t;
v([]), O(!1), y(P), (t = e.onClose) == null || t.call(e);
}, onOpen: () => {
var t;
(t = e.onOpen) == null || t.call(e);
}, content: ({ close: t }) => h(M, k(e, { get type() {
return e.type || "single";
}, get value() {
var o, n;
return ((n = (o = e.value) == null ? void 0 : o.call(e)) == null ? void 0 : n.value) || m().value;
}, handleOnChange: D, get onChange() {
return e.onChange;
}, get maxDate() {
return e.maxDate;
}, get minDate() {
return e.minDate;
}, setAllowedComponents: v, close: t, get yearSelectorCount() {
return e.yearSelectorCount || 20;
}, setShowSelectorTwo: O, showSelectorTwo: A, setSelectorTwoProps: y, selectorTwoProps: F, get locale() {
return e.locale || "en-US";
}, get setRef() {
return e.setRef || W;
} })), get portalContainer() {
return e.portalContainer;
}, onClickOutside: (t, o) => {
var n;
(n = Y().concat(e.componentsToAllowOutsideClick || [])) != null && n.some((r) => {
var a;
return (a = r == null ? void 0 : r.contains) == null ? void 0 : a.call(r, t == null ? void 0 : t.target);
}) || (o == null || o(!1));
}, get positionX() {
return e.pickerPositionX;
}, get positionY() {
return e.pickerPositionY;
}, get zIndex() {
return e.zIndex;
}, handleChildrenClick: f ? () => {
} : void 0, get width() {
return e.inputWrapperWidth;
}, get className() {
return R(e.inputWrapperClass, "date-picker-input-wrapper");
}, get children() {
var t = V();
return E(t, "data-date-picker-input-area", !0), j(t, h(I, { when: f, keyed: !0, children: f }), null), j(t, h(I, { when: !f, keyed: !0, get children() {
var o = U();
return X(o, k({ get placeholder() {
return e.placeholder;
}, get value() {
var n, r, a;
return ((n = e.inputLabel) == null ? void 0 : n.call(e)) || ((a = (r = e.value) == null ? void 0 : r.call(e)) == null ? void 0 : a.label) || m().label;
} }, () => ({ ...e.inputProps, class: void 0 }), { get class() {
var n;
return R("date-picker-input rn-w-full rn-px-1", (n = e.inputProps) == null ? void 0 : n.class, e.inputClass);
} }), !1, !1), o;
} }), null), t;
} });
};
export {
ee as DatePickerGroup
};