@rnwonder/solid-date-picker
Version:
A responsive, highly-customizable datepicker component for SolidJS.
69 lines (68 loc) • 3.17 kB
JavaScript
import { createComponent as l, use as g, setAttribute as i, insert as b, mergeProps as f, effect as h, className as y, style as w, template as x } from "solid-js/web";
import { createSignal as C, For as N } from "solid-js";
import { Popover as k } from "../Popover/index.js";
import { handleSelectorOptionClick as v } from "../../../node_modules/.pnpm/@rnwonder_simple-datejs@1.1.1/node_modules/@rnwonder/simple-datejs/dist/datePicker.js";
import { SelectorOptionButton as A } from "../SelectorOptionButton/index.js";
import { SelectorTriggerButton as S } from "../SelectorTriggerButton/index.js";
import { cn as p } from "../../utils/class.js";
var T = x("<div data-part=grid data-scope=date-picker role=grid data-type=date-selector-wrapper>");
const P = (e) => {
const [d, c] = C(!1), m = (n, r, o) => {
v(n, r, e, o);
};
return l(k, { get zIndex() {
return e.zIndex;
}, get className() {
return p("date-selector-trigger-wrapper rn-w-fit", e.monthYearTriggerBtnWrapperClass);
}, onOpen: () => {
c(!0);
const n = document.querySelector("[date-selector-option-selected=true]");
n == null || n.scrollIntoView({ block: "center", inline: "center" });
}, onClose: () => c(!1), content: ({ close: n }) => {
return r = T(), typeof (o = e.ref) == "function" ? g(o, r) : e.ref = r, i(r, "aria-multiselectable", !1), i(r, "aria-readonly", !1), i(r, "aria-disabled", !1), b(r, l(N, { get each() {
return e.optionsArray;
}, children: (t, a) => l(A, f(e, { handleOptionClick: m, value: t, index: a, callback: n, get className() {
return p(`
date-selector-option
rn-px-[5px]
rn-text-sm
rn-text-black
disabled:rn-opacity-40
smallMobile:rn-text-[12px]
`, e.className);
} })) })), h((t) => {
var a = p(`
date-selector-wrapper
rn-grid
rn-max-h-[10.625rem]
rn-max-w-[25rem]
rn-gap-2
rn-overflow-y-auto
rn-rounded-lg
rn-bg-white
rn-p-2
rn-drop-shadow-lg
dark:rn-bg-eerie-black
`, { "rn-grid-cols-3": e.gridTemplateColumnsNo === "3" && e.gridTemplateColumnsNo, "rn-grid-cols-4": !e.gridTemplateColumnsNo || e.gridTemplateColumnsNo && e.gridTemplateColumnsNo !== "3" }, e.monthYearSelectorWrapperClass), s = e.useValueAsName ? "calendar year" : "calendar month", u = { ...e.backgroundColor && { "background-color": e.backgroundColor } };
return a !== t.e && y(r, t.e = a), s !== t.t && i(r, "aria-roledescription", t.t = s), t.a = w(r, u, t.a), t;
}, { e: void 0, t: void 0, a: void 0 }), r;
var r, o;
}, get children() {
return l(S, { get option() {
return e.option;
}, get optionsArray() {
return e.optionsArray;
}, get useValueAsName() {
return e.useValueAsName;
}, type: "compact-dropdown", get isOpen() {
return d();
}, get twoMonthsDisplay() {
return e.twoMonthsDisplay;
}, get noButtonAnimation() {
return e.noButtonAnimation;
} });
} });
};
export {
P as Selector
};