@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
225 lines (224 loc) • 12.4 kB
JavaScript
import { use as Pe, insert as b, createComponent as f, mergeProps as z, memo as Be, effect as Ne, className as me, style as Ee, template as be } from "solid-js/web";
import { createSignal as w, onMount as Ie, createEffect as ye, Show as k } from "solid-js";
import { handleDateRange as pe } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/datePicker.js";
import { convertDateObjectToDate as W, convertDateToDateObject as ve } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/utils.js";
import { CalendarArea as He } from "../CalendarArea/index.js";
import { DatePickerTop as Ve } from "../DatePickerTop/index.js";
import Le from "../SelectorTwo/index.js";
import { s as De, f as q, k as ze, o as we, e as We } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/general-DZqASQRm.js";
import { cn as fe } from "../../utils/class.js";
var Se = be("<div data-type=custom-jsx>"), qe = be("<div data-type=date-picker-wrapper data-scope=date-picker data-part=content role=application aria-label=calendar aria-roledescription=date-picker><div>");
const tt = (e) => {
const [M, y] = w((/* @__PURE__ */ new Date()).getMonth()), [O, p] = w(De), [S, T] = w(), [R, G] = w(void 0), [j, H] = w([]), [K, X] = w(!0), [Me, Q] = w(!1), [P, C] = w({}), [Ce, Ye] = w([]);
Ie(() => {
var t, r, n, s, l, u, c, D, A, x, F, J, h, i, m, E, te, re, ae, ne, oe, le, se, ce, ue, ie, he;
if (!((t = e.value) != null && t.selected || (r = e.value) != null && r.start || (n = e.value) != null && n.end || (s = e.value) != null && s.selectedDateObject || (l = e.value) != null && l.startDateObject || (u = e.value) != null && u.endDateObject || (c = e.value) != null && c.multiple || (A = (D = e.value) == null ? void 0 : D.multipleDateObject) != null && A.length))
return (x = e.month) != null && x.call(e) || ((F = e.setMonth) == null || F.call(e, (/* @__PURE__ */ new Date()).getMonth())), (J = e.year) != null && J.call(e) || ((h = e.setYear) == null || h.call(e, De)), void U();
if (U(), Q(!0), e.value.selected || e.value.selectedDateObject) {
const o = e.value.selected ? new Date(e.value.selected) : W(e.value.selectedDateObject);
y(o.getMonth()), (i = e.setMonth) == null || i.call(e, o.getMonth()), p(o.getFullYear()), (m = e.setYear) == null || m.call(e, o.getFullYear()), T({ year: o.getFullYear(), month: o.getMonth(), day: o.getDate() });
}
if (e.value.start || e.value.end || e.value.startDateObject || e.value.endDateObject) {
const o = e.value.start ? new Date(e.value.start) : (E = e.value.startDateObject) != null && E.day ? W(e.value.startDateObject) : void 0, a = e.value.end ? new Date(e.value.end) : (te = e.value.endDateObject) != null && te.day ? W(e.value.endDateObject) : void 0;
if (!o && !a)
return;
if (!o && a) {
y(a.getMonth()), (re = e.setMonth) == null || re.call(e, a.getMonth()), p(a.getFullYear()), (ae = e.setYear) == null || ae.call(e, a.getFullYear());
const ge = { year: a.getFullYear(), month: a.getMonth(), day: a.getDate() };
return T(ge), void C({ start: ge });
}
y(o.getMonth()), (ne = e.setMonth) == null || ne.call(e, o.getMonth()), p(o.getFullYear()), (oe = e.setYear) == null || oe.call(e, o.getFullYear());
const I = { year: o.getFullYear(), month: o.getMonth(), day: o.getDate() };
if (T(I), C({ start: I }), !a)
return;
G({ year: a.getFullYear(), month: a.getMonth(), day: a.getDate() }), C({ start: void 0 }), e.showEndOfRange && (y(a.getMonth()), (le = e.setMonth) == null || le.call(e, a.getMonth()), p(a.getFullYear()), (se = e.setYear) == null || se.call(e, a.getFullYear()));
}
if ((ce = e.value.multipleDateObject) != null && ce.length || e.value.multiple) {
const o = (ue = e.value.multipleDateObject) != null && ue.length ? e.value.multipleDateObject : e.value.multiple ? e.value.multiple.map((I) => ve(new Date(I))) : void 0;
if (!o)
return;
H(o);
const a = o.at(-1);
a != null && a.month && (y(a.month), (ie = e.setMonth) == null || ie.call(e, a.month)), a != null && a.year && (p(a.year), (he = e.setYear) == null || he.call(e, a.year));
}
});
const B = (t) => {
var r, n;
e.handleOnChange(t), (r = e == null ? void 0 : e.onChange) == null || r.call(e, t), (n = e.onValueChange) == null || n.call(e, t);
}, U = () => {
var t, r;
e.startingMonth !== void 0 && (y(e.startingMonth), (t = e.setMonth) == null || t.call(e, e.startingMonth)), e.startingYear !== void 0 && (p(e.startingYear), (r = e.setYear) == null || r.call(e, e.startingYear));
};
ye(() => {
K() || X(!0);
});
const Z = (t, r, n, s = !1) => {
var D, A, x, F, J;
Me() || Q(!0);
const l = Number(r()), u = q(l, t.month), c = ze(n(), r(), t.month);
if (e.type === "range") {
const { end: h, start: i, initial: m } = pe({ day: t, month: r, year: n, endDay: R(), startDay: S(), disabledDays: e.disabledDays, enabledDays: e.enabledDays, disallowSameDayRange: e.disallowSameDayRange });
T(i), G(h), m && !e.disableRangeHoverEffect && C({ start: i, end: void 0 }), h && i && (C({}), e.shouldCloseOnSelect && ((D = e.close) == null || D.call(e))), B({ startDate: i, endDate: h, type: "range" });
}
if (e.type === "single") {
const h = new Date(c, q(l, t.month), t.value);
h.setFullYear(c);
const i = ve(h);
T(i), B({ selectedDate: i, type: "single" }), e.shouldCloseOnSelect && ((A = e.close) == null || A.call(e));
}
if (e.type === "multiple") {
const h = { year: c, month: q(l, t.month), day: t.value }, i = j().find((m) => we(m, h));
if (i) {
const m = j().filter((E) => !we(E, i));
return H(m), void B({ multipleDates: m, type: "multiple" });
}
H((m) => [...m, h]), B({ multipleDates: j(), type: "multiple" }), e.shouldCloseOnSelect && ((x = e.close) == null || x.call(e));
}
s || (y(u), (F = e.setMonth) == null || F.call(e, u), p(c), (J = e.setYear) == null || J.call(e, c)), X(!1);
}, N = (t, r) => {
var s, l, u, c, D;
y(t), (s = e.setMonth) == null || s.call(e, t), (l = e.onMonthChange) == null || l.call(e, t), r && (p(r), (u = e.setYear) == null || u.call(e, r), (c = e.onYearChange) == null || c.call(e, r));
const n = We({ startDay: S(), month: t, year: r, type: e.type });
n && ((D = e.onValueChange) == null || D.call(e, n));
}, _ = () => {
var r, n;
if ((((r = e.month) == null ? void 0 : r.call(e)) || M()) === 11) {
const l = O() + 1;
return void N(0, l);
}
const t = (((n = e.month) == null ? void 0 : n.call(e)) || M()) + 1;
N(t), X(!1);
}, $ = () => {
var r, n;
if ((((r = e.month) == null ? void 0 : r.call(e)) || M()) === 0) {
const l = O() - 1;
return void N(11, l);
}
const t = (((n = e.month) == null ? void 0 : n.call(e)) || M()) - 1;
N(t), X(!1);
}, Te = (t, r, n) => {
var u, c;
if (e.disableRangeHoverEffect || e.type !== "range" || !((u = P()) != null && u.start))
return;
const { end: s, start: l } = pe({ day: t, month: r, year: n, endDay: (c = P()) == null ? void 0 : c.end, startDay: S(), disabledDays: e.disabledDays, hover: !0, enabledDays: e.enabledDays });
C({ start: l, end: s });
}, ke = () => {
var t;
e.disableRangeHoverEffect || e.type === "range" && ((t = P()) != null && t.start) && (S() && R() || C({ start: S(), end: void 0 }));
}, g = (t) => {
if (t) {
if (typeof t == "function") {
const [s, l] = w();
ye(() => {
var c;
s() && ((c = e.setAllowedComponents) == null || c.call(e, (D) => [...D, s()]));
});
const u = t({ month: M, setMonth: y, handleNextMonth: _, handlePrevMonth: $, year: O, setYear: p, setRefToAllowOutsideClick: l, handleDayClick: Z, multipleDates: j, endDate: R, selectedDate: S, close: e.close });
return r = Se(), b(r, u), r;
}
var r, n;
return n = Se(), b(n, t), n;
}
}, Oe = g(e.monthSelectorJSX), je = g(e.yearSelectorJSX), Ae = g(e.calendarTopAreaJSX), V = g(e.calendarLeftAreaJSX), L = g(e.calendarRightAreaJSX), d = g(e.calendarBottomAreaJSX), xe = g(e.calendarJSX), Fe = g(e.afterNextButtonAreaJSX), Je = g(e.beforePrevButtonAreaJSX), Re = g(e.weekDaysJSX), Xe = g(e.calendarAboveTopAreaJSX);
return v = qe(), Y = v.firstChild, typeof (ee = e.setRef) == "function" ? Pe(ee, v) : e.setRef = v, b(v, f(k, { get when() {
var t;
return (t = e.showSelectorTwo) == null ? void 0 : t.call(e);
}, get children() {
return f(Le, z(() => {
var t;
return (t = e.selectorTwoProps) == null ? void 0 : t.call(e);
}, { get monthSelectorTopLabel() {
return e.monthSelectorTopLabel;
}, get setShowSelectorTwo() {
return e.setShowSelectorTwo;
}, get setSelectorTwoProps() {
return e.setSelectorTwoProps;
} }));
} }), Y), b(v, f(k, { get when() {
return !e.hideTopArea;
}, keyed: !0, get children() {
return [Xe, Be(() => Ae || f(Ve, z(() => ({ ...e, onChange: void 0 }), { get setYear() {
return e.setYear || p;
}, get setMonth() {
return e.setMonth || y;
}, get month() {
return e.month || M;
}, get year() {
return e.year || O;
}, render: K, handleNextMonth: _, handlePrevMonth: $, monthSelectorJSX: Oe, yearSelectorJSX: je, get zIndex() {
return e.zIndex;
}, get setAllowedComponents() {
return e.setAllowedComponents;
}, get monthSelectorFormat() {
return e.monthSelectorFormat;
}, get monthYearSelectorFlexDirection() {
return e.monthYearSelectorFlexDirection;
}, get onChange() {
return e.onValueChange;
}, get startDay() {
return S();
}, setStartDay: T, get yearRange() {
return e.yearRange;
}, get locale() {
return e.locale;
}, get nextIcon() {
return e.nextIcon;
}, get prevIcon() {
return e.prevIcon;
}, get removeNavButtons() {
return e.removeNavButtons;
}, nextButtonAreaJSX: Fe, prevButtonAreaJSX: Je, get primaryColor() {
return e.primaryColor;
}, get primaryTextColor() {
return e.primaryTextColor;
}, get secondaryColor() {
return e.secondaryColor;
}, get secondaryTextColor() {
return e.secondaryTextColor;
}, get setShowSelectorTwo() {
return e.setShowSelectorTwo;
}, get setSelectorTwoProps() {
return e.setSelectorTwoProps;
}, get showSelectorTwo() {
return e.showSelectorTwo;
} })))];
} }), Y), b(Y, f(k, { get when() {
var t;
return V && !((t = e.showSelectorTwo) != null && t.call(e));
}, keyed: !0, children: V }), null), b(Y, f(k, { get when() {
return !e.hideCalendar;
}, keyed: !0, get children() {
return xe || f(He, z(e, { get year() {
return e.year || O;
}, get month() {
return e.month || M;
}, endDay: R, startDay: S, handleDayClick: Z, multipleObject: j, weekDaysJSX: Re, onHoverDay: Te, hoverRangeValue: P, onHoverDayEnd: ke, get showSelectorTwo() {
return e.showSelectorTwo;
}, setDayRowsArray: Ye, dayRowsArray: Ce }));
} }), null), b(Y, f(k, { get when() {
var t;
return L && !((t = e.showSelectorTwo) != null && t.call(e));
}, keyed: !0, children: L }), null), b(v, f(k, { get when() {
var t;
return d && !((t = e.showSelectorTwo) != null && t.call(e));
}, keyed: !0, children: d }), null), Ne((t) => {
var l;
var r = fe(`date-picker-wrapper
rn-relative
rn-rounded-md
rn-border-t
rn-border-solid
rn-border-gray-300
rn-bg-white
rn-pb-[0.5rem]
rn-pt-[0.625rem]
dark:rn-border-gray-700
dark:rn-bg-dreamless-sleep
`, { "rn-w-max": !V && !L, "rn-shadow-lg": !((l = e.showSelectorTwo) != null && l.call(e)) }, e.datePickerWrapperClass), n = { ...e.backgroundColor && { "background-color": e.backgroundColor } }, s = fe("date-picker-body rn-flex rn-justify-center", e.datePickerBodyAreaClass);
return r !== t.e && me(v, t.e = r), t.t = Ee(v, n, t.t), s !== t.a && me(Y, t.a = s), t;
}, { e: void 0, t: void 0, a: void 0 }), v;
var v, Y, ee;
};
export {
tt as DatePicker
};