@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
170 lines (164 loc) • 8.88 kB
JavaScript
import { use as o, spread as C, mergeProps as w, insert as b, createComponent as t, memo as E, delegateEvents as f, template as k } from "solid-js/web";
import { createSignal as d, createEffect as m, Show as s } from "solid-js";
import { Button as x } from "../Button/index.js";
import { cn as h } from "../../utils/class.js";
var S = k('<div class="rn-absolute rn-left-0 rn-top-0 rn-h-full rn-w-full rn-rounded-full">'), v = k("<div>");
const M = (e) => {
const [p, R] = d(), [r, y] = d(!1), [a, u] = d(!0);
return m(() => {
e.dayRangeStart || e.dayRangeEnd || e.isMultipleSelected ? y(!0) : y(!1), e.dayRangeStart || e.dayRangeEnd || e.isMultipleSelected ? u(!1) : u(!0);
}), m(() => {
p() && (e.secondaryColor && document.documentElement.style.setProperty("--date-picker-before-bg", e.secondaryColor), e.secondaryTextColor && document.documentElement.style.setProperty("--date-picker-before-color", e.secondaryTextColor));
}), n = v(), o(R, n), C(n, w({ get class() {
return h({ "date-picker-weekday-name\n rn-block\n rn-text-[0.75rem]": e.header, "date-picker-day-number-area\n rn-flex\n rn-items-center\n rn-justify-center\n rn-text-[0.9375rem]": !e.header }, `
${e.header ? `
date-picker-weekday-name
rn-block
rn-text-[0.75rem]` : `
date-picker-day-number-area
rn-flex
rn-items-center
rn-justify-center
rn-text-[0.9375rem]
`}
rn-relative
rn-text-center
rn-font-bold
rn-uppercase
rn-tracking-[0.02em]
rn-text-[#909090]
dark:rn-text-white
${e.hidden && "day-number-area-outside-days rn-pointer-events-none"}
${e.dayRangeBetween && !e.hidden ? "rn-bg-primary-focus rn-bg-opacity-50 dark:rn-bg-black-tie" : ""}
before:rn-absolute
before:rn-top-0
before:rn-h-full
before:rn-bg-opacity-50
before:rn-content-[""]
${e.dayRangeStart && e.dayRangeStartEnd && !e.hidden || e.dayRangeEnd && e.dayRangeStartEnd && !e.hidden ? "" : "before:rn-hidden"}
${e.dayRangeStart && e.dayRangeStartEnd && "before:rn-left-[15%] before:rn-block before:rn-w-[86%] before:rn-rounded-l-full"}
${e.dayRangeEnd && e.dayRangeStartEnd && "before:rn-right-[15%] before:rn-block before:rn-w-[85%] before:rn-rounded-r-full"}
${r() && "date-picker-day-number-area-selected"}
`, e.weekNamesClass, e.daysWrapperClass, { [e.daysActiveRangeStartWrapperClass || ""]: e.dayRangeStart, [e.daysActiveRangeEndWrapperClass || ""]: e.dayRangeEnd, [e.daysActivePrimaryWrapperClass || ""]: r(), [e.daysActiveRangeBetweenWrapperClass || ""]: e.dayRangeBetween });
}, get "aria-selected"() {
return r();
}, get "data-value"() {
return e.header ? e.headerValue : e.dateValue;
}, get "data-day-number-area"() {
return !e.header;
}, get "data-day-number-area-range-start-or-end"() {
return e.dayRangeStart || e.dayRangeEnd;
}, get "data-day-number-area-range-between"() {
return e.dayRangeBetween;
}, get "data-day-number-area-range-start"() {
return e.dayRangeStart;
}, get "data-day-number-area-range-end"() {
return e.dayRangeEnd;
}, get "data-day-number-area-current-day"() {
return e.daysCurrent;
}, get "data-day-number-area-not-current-month"() {
return e.daysNotCurrentMonth;
}, get "data-day-number-area-range-tip"() {
return e.dayRangeStart && e.dayRangeStartEnd || e.dayRangeEnd && e.dayRangeStartEnd;
}, get "data-day-number-area-range-tip-start"() {
return e.dayRangeStart && e.dayRangeStartEnd;
}, get "data-day-number-area-range-tip-end"() {
return e.dayRangeEnd && e.dayRangeStartEnd;
}, get "data-day-name"() {
return e.header;
}, get style() {
return { ...e.dayRangeBetween ? { "background-color": e.secondaryColor } : {}, ...e.weekDaysNameColor && e.header ? { color: e.weekDaysNameColor } : {} };
}, get onMouseEnter() {
return e.onHover;
}, get onMouseLeave() {
return e.onHoverEnd;
} }, () => e.wrapperProps), !1, !0), b(n, t(s, { get when() {
return e.header && !e.hidden;
}, keyed: !0, get children() {
return e.children;
} }), null), b(n, t(s, { get when() {
return !e.header && !e.hidden;
}, keyed: !0, get children() {
return [t(x, { setHeight: !0, get tabindex() {
return r() ? 0 : -1;
}, get class() {
return h(`
date-picker-day-number
rn-relative
rn-z-10
rn-h-8
rn-w-8
rn-p-0
rn-text-center
rn-text-[0.9375rem]
rn-transition-none
${e.daysNotCurrentMonth ? e.dayRangeStart || e.dayRangeEnd ? "rn-opacity-95" : "day-number-not-current-month rn-opacity-50 dark:rn-text-white" : "day-number-current-month rn-opacity-100"}
${e.dayRangeBetween && "hover:rn-bg-transparent dark:hover:rn-bg-black-tie"}
${e.shouldHighlightWeekends && e.isWeekend && a() ? "rn-text-red-500 dark:rn-text-red-500" : ""}
${r() ? "rn-bg-primary hover:rn-bg-primary dark:rn-bg-white dark:rn-text-black dark:hover:rn-bg-white" : e.daysCurrent ? "day-number-current-day rn-border rn-border-dashed rn-border-black hover:rn-border hover:rn-border-dashed hover:rn-border-black dark:rn-border-white" : ""}
${e.dayRangeStart || e.dayRangeEnd ? "day-number-range-start-or-end rn-text-white dark:rn-text-black" : e.isMultipleSelected ? "day-number-multiple-select rn-text-white dark:rn-text-black" : e.dayRangeBetween ? "day-range-between rn-text-black" : "rn-text-black"}
rn-cursor-pointer
rn-rounded-full
disabled:rn-text-black
disabled:rn-opacity-30
`, { "dark:rn-text-white": a() }, e.daysBtnClass, e.customDayClass, { [e.daysActivePrimaryBtnClass || ""]: r(), [e.daysActiveRangeBetweenBtnClass || ""]: e.dayRangeBetween, [e.currentDayBtnClass || ""]: e.daysCurrent, [e.weekEndDaysBtnClass || ""]: e.isWeekend, [e.sundaysBtnClass || ""]: e.isSunday, [e.saturdaysBtnClass || ""]: e.isSaturday, [e.daysNotInCurrentMonthBtnClass || ""]: e.daysNotCurrentMonth, [e.daysActiveRangeStartBtnClass || ""]: e.dayRangeStart, [e.daysActiveRangeEndBtnClass || ""]: e.dayRangeEnd });
}, "data-day-number": !0, get "data-day-number-selected"() {
return r();
}, get "data-day-number-range-end-hover"() {
return e.dayRangeEndHover;
}, get "data-day-number-range-end-selected"() {
return E(() => !e.dayRangeEndHover)() && r();
}, get "data-day-number-range-start-or-end"() {
return e.dayRangeStart || e.dayRangeEnd;
}, get "data-day-number-range-between"() {
return e.dayRangeBetween;
}, get "data-day-number-range-start"() {
return e.dayRangeStart;
}, get "data-day-number-range-end"() {
return e.dayRangeEnd;
}, get "data-day-number-current-day"() {
return e.daysCurrent;
}, get "data-day-number-not-current-month"() {
return e.daysNotCurrentMonth;
}, get "data-day-number-is-weekend"() {
return e.isWeekend;
}, get "data-day-number-is-sunday"() {
return e.isSunday;
}, get "data-day-number-is-saturday"() {
return e.isSaturday;
}, get "data-day-number-is-multiple-selected"() {
return e.isMultipleSelected;
}, "data-scope": "date-picker", get "data-highlight-weekend"() {
return e.shouldHighlightWeekends;
}, "data-part": "cell-trigger", role: "button", get "aria-label"() {
return "Choose " + e.date;
}, get "data-value"() {
return e.dateValue;
}, "data-type": "day", get onClick() {
return e.onClick;
}, get disabled() {
return e.disabled;
}, get selected() {
return r();
}, get style() {
return { ...r() && (e.primaryColor || e.primaryTextColor) ? { "background-color": e.primaryColor, color: e.primaryTextColor } : {}, ...e.dayRangeBetween ? { color: e.secondaryTextColor } : {}, ...(e.weekEndDayTextColor || e.weekEndDayBgColor) && a() && e.isWeekend ? { color: e.weekEndDayTextColor, "background-color": e.weekEndDayBgColor } : {}, ...e.textColor && a() ? e.shouldHighlightWeekends && e.isWeekend ? {} : { color: e.textColor } : {} };
}, get noButtonAnimation() {
return e.noButtonAnimation;
}, get children() {
return e.children;
} }), t(s, { keyed: !0, get when() {
return e.disabled;
}, get children() {
var l = S();
return l.$$click = () => {
var g, i, c;
return (c = e.onDisabledDayError) == null ? void 0 : c.call(e, { day: e.day, month: (g = e.month) == null ? void 0 : g.call(e), year: (i = e.year) == null ? void 0 : i.call(e) });
}, l;
} })];
} }), null), n;
var n;
};
f(["click"]);
export {
M as DatePickerDay
};