@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
46 lines (45 loc) • 2.5 kB
JavaScript
import { createComponent as i, mergeProps as l, memo as n } from "solid-js/web";
import { Button as s } from "../Button/index.js";
import { isOptionSelectedOnSelector as r, isOptionDisabledOnSelector as o } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/datePicker.js";
import { getMonthName as u } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/utils.js";
import { convertFormattedNumberBackToNumber as c } from "../../utils/general.js";
import { cn as m } from "../../utils/class.js";
const k = (e) => {
const t = e.useValueAsName ? c(e.locale, { value: e.value, month: "current" }).value + "" : e.value;
return i(s, l({ setHeight: !0, get class() {
return m(`
date-selector-option
rn-text-black
disabled:rn-opacity-40
rn-h-auto
`, { "rn-selector-option-selected rn-bg-primary rn-text-white hover:rn-bg-primary hover:rn-text-white dark:rn-bg-white dark:rn-text-black dark:hover:rn-bg-white dark:hover:rn-text-black": r(t, e.index, e), "dark:rn-text-white": !r(t, e.index, e), [e.monthYearOptionBtnActiveClass || ""]: r(t, e.index, e) }, e.className, e.monthYearOptionBtnClass);
}, onClick: () => e.handleOptionClick(e.index(), t, e.callback), get disabled() {
return e.disabled || o(t, e.index, e);
}, "aria-controls": "selector", get "aria-disabled"() {
return o(t, e.index, e);
}, get "aria-selected"() {
return r(t, e.index, e);
}, get "data-type"() {
return e.useValueAsName ? "year" : "month";
}, "aria-readonly": !1, "data-scope": "date-picker", "data-part": "cell-trigger", "data-selector-option": !0, get "date-selector-option-selected"() {
return r(t, e.index, e);
}, get selected() {
return r(t, e.index, e);
}, get "aria-label"() {
var a;
return n(() => !!e.useValueAsName)() ? e.value : u(e.index()) + " " + ((a = e.year) == null ? void 0 : a.call(e));
}, get "data-value"() {
return n(() => !!e.useValueAsName)() ? e.value : e.index() + 1;
}, get style() {
return { ...r(t, e.index, e) ? { "background-color": e.primaryColor, color: e.primaryTextColor } : {}, ...e.textColor && !r(t, e.index, e) && { color: e.textColor } };
}, get "aria-owns"() {
return e.value;
}, get noButtonAnimation() {
return e.noButtonAnimation;
} }, () => e.attributes || {}, { get children() {
return e.value;
} }));
};
export {
k as SelectorOptionButton
};