@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
90 lines (89 loc) • 3.85 kB
JavaScript
import { insert as n, createComponent as t, effect as d, className as m, template as c } from "solid-js/web";
import { Show as o } from "solid-js";
import { DatePickerMonthAndYearSelector as h } from "../DatePickerMonthAndYearSelector/index.js";
import { Button as i } from "../Button/index.js";
import { PrevIcon as p } from "../PrevIcon/index.js";
import { NextIcon as y } from "../NextIcon/index.js";
import { v as x, d as u, u as g } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/general-DZqASQRm.js";
import { cn as s } from "../../utils/class.js";
var v = c("<div data-type=date-picker-top>");
const A = (e) => {
return r = v(), n(r, t(o, { get when() {
return e.prevButtonAreaJSX;
}, keyed: !0, get children() {
return e.prevButtonAreaJSX;
} }), null), n(r, t(o, { get when() {
return !e.removeNavButtons;
}, keyed: !0, get children() {
return t(i, { get class() {
return s("date-prev-next-btn date-prev-btn rn-text-black disabled:rn-opacity-10 dark:rn-text-white", e.prevMonthBtnClass, e.prevNextMonthBtnClass);
}, "data-prev": !0, "data-type": "date-prev-next-btn", "aria-label": "Move backward to switch to the previous month", "data-scope": "button", "data-part": "root", get disabled() {
return (() => {
if (!e.minDate && !e.enabledDays)
return !1;
if (e.minDate && (e.year() < e.minDate.year || e.year() === e.minDate.year && e.month() - 1 < e.minDate.month))
return !0;
const { month: a, year: l } = x(e.year(), e.month());
return u({ enabledDays: e.enabledDays, year: l, month: a, prev: !0 });
})();
}, get onClick() {
return e.handlePrevMonth;
}, get style() {
return { ...e.arrowsColor && { color: e.arrowsColor } };
}, get noButtonAnimation() {
return e.noButtonAnimation;
}, get children() {
return e.prevIcon || t(p, { get color() {
return e.arrowsColor;
} });
} });
} }), null), n(r, t(o, { get when() {
return e.monthYearSelectorJSX;
}, keyed: !0, get children() {
return e.monthYearSelectorJSX;
} }), null), n(r, t(o, { get when() {
return !e.monthYearSelectorJSX;
}, keyed: !0, get children() {
return t(h, e);
} }), null), n(r, t(o, { get when() {
return !e.removeNavButtons;
}, keyed: !0, get children() {
return t(i, { get class() {
return s("date-prev-next-btn date-next-btn rn-text-black disabled:rn-opacity-10 dark:rn-text-white", e.nextMonthBtnClass, e.prevNextMonthBtnClass);
}, "data-next": !0, "aria-label": "Move forward to switch to the next month.", "data-scope": "button", "data-part": "root", "data-type": "date-prev-next-btn", get onClick() {
return e.handleNextMonth;
}, get disabled() {
return (() => {
if (!e.maxDate && !e.enabledDays)
return !1;
if (e.maxDate && (e.year() > e.maxDate.year || e.year() === e.maxDate.year && e.month() + 1 > e.maxDate.month))
return !0;
const { year: a, month: l } = g(e.year(), e.month());
return u({ enabledDays: e.enabledDays, year: a, month: l, next: !0 });
})();
}, get style() {
return { ...e.arrowsColor && { color: e.arrowsColor } };
}, get noButtonAnimation() {
return e.noButtonAnimation;
}, get children() {
return e.nextIcon || t(y, { get color() {
return e.arrowsColor;
} });
} });
} }), null), n(r, t(o, { get when() {
return e.nextButtonAreaJSX;
}, keyed: !0, get children() {
return e.nextButtonAreaJSX;
} }), null), d(() => m(r, s(`
date-picker-top
rn-mb-[0.3125rem]
rn-flex
rn-items-center
rn-justify-between
rn-px-2
`, e.datePickerTopAreaClass))), r;
var r;
};
export {
A as DatePickerTop
};