@rnwonder/react-date-picker
Version:
A lightweight, customizable, and accessible date picker component for React applications.
495 lines (490 loc) • 13.1 kB
JavaScript
import { jsx as n, jsxs as f } from "react/jsx-runtime";
import { P as C } from "./index-D1g166JZ.js";
import { B as g, S as x } from "./Show-DCFzPwVn.js";
import { c as l } from "./class-DLUjLwnh.js";
import S, { useState as h, useEffect as N, createElement as w, useRef as T } from "react";
import { c as Y, W as s, $ as y, j as v } from "./general-CMKgS5rp.js";
import { P as B, N as V } from "./index-D84JZ01v.js";
import { i as O } from "./utils-CJCqI964.js";
const k = (e) => {
const t = e.useValueAsName ? Y(e.locale, {
value: e.value,
month: "current"
}).value + "" : e.value;
return /* @__PURE__ */ n(
g,
{
setHeight: !0,
className: l(
`
date-selector-option
rn-h-auto
rn-text-black
disabled:rn-opacity-40
`,
{
"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": s(t, e.index, e),
"dark:rn-text-white": !s(
t,
e.index,
e
),
[e.monthYearOptionBtnActiveClass || ""]: s(t, e.index, e)
},
e.className,
e.monthYearOptionBtnClass
),
onClick: () => e.handleOptionClick(e.index, t, e.callback),
disabled: e.disabled || y(t, e.index, e),
"aria-controls": "selector",
"aria-disabled": y(
t,
e.index,
e
),
"aria-selected": s(
t,
e.index,
e
),
"data-type": e.useValueAsName ? "year" : "month",
"aria-readonly": !1,
"data-scope": "date-picker",
"data-part": "cell-trigger",
"data-selector-option": !0,
"date-selector-option-selected": String(
s(t, e.index, e)
),
selected: s(t, e.index, e),
"aria-label": e.useValueAsName ? e.value : O(e.index) + " " + e.year,
"data-value": e.useValueAsName ? e.value : e.index + 1,
style: {
...s(t, e.index, e) ? {
backgroundColor: e.primaryColor,
color: e.primaryTextColor
} : {},
...e.textColor && !s(t, e.index, e) && {
color: e.textColor
}
},
"aria-owns": e.value,
noButtonAnimation: e.noButtonAnimation,
...e.attributes || {},
children: e.value
}
);
}, R = ({
noButtonAnimation: e,
monthYearTriggerBtnClass: t,
twoMonthsDisplay: c,
type: o,
isOpen: d,
option: a,
optionsArray: r,
useValueAsName: i,
textColor: m,
children: u,
...b
}) => /* @__PURE__ */ n(
g,
{
...b,
className: l(
`
date-selector-trigger
rn-animate-none
rn-p-[5px]
rn-text-[15px]
rn-font-bold
rn-text-black
dark:rn-text-white
breakTwoCalendar:rn-text-sm`,
t
),
"aria-haspopup": o === "compact-dropdown",
"aria-label": i ? "Select a year" : "Select a month",
"data-scope": "button",
"data-part": "root",
"aria-expanded": d,
"data-type": "date-selector-trigger",
style: {
...m && { color: m }
},
noButtonAnimation: e,
children: u || (i ? a : c ? `${r == null ? void 0 : r[a]} - ${a === 11 ? r == null ? void 0 : r[0] : r == null ? void 0 : r[a + 1]}` : r == null ? void 0 : r[a])
}
), H = S.forwardRef((e, t) => {
const [c, o] = h(!1), d = (a, r, i) => {
v(a, r, e, i);
};
return /* @__PURE__ */ n(
C,
{
zIndex: e.zIndex,
className: l(
"date-selector-trigger-wrapper rn-w-fit",
e.monthYearTriggerBtnWrapperClass
),
onOpen: () => {
o(!0);
const a = document.querySelector(
"[date-selector-option-selected=true]"
);
a == null || a.scrollIntoView({
block: "center",
inline: "center"
});
},
onClose: () => o(!1),
content: ({ close: a }) => {
var r;
return /* @__PURE__ */ n(
"div",
{
className: l(
`
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
),
ref: t,
"data-part": "grid",
"data-scope": "date-picker",
"aria-roledescription": e.useValueAsName ? "calendar year" : "calendar month",
role: "grid",
"aria-multiselectable": !1,
"aria-readonly": !1,
"aria-disabled": !1,
"data-type": "date-selector-wrapper",
style: {
...e.backgroundColor && {
backgroundColor: e.backgroundColor
}
},
children: (r = e.optionsArray) == null ? void 0 : r.map((i, m) => /* @__PURE__ */ n(
k,
{
...e,
handleOptionClick: d,
value: i,
index: m,
callback: a,
className: l(
`
date-selector-option
rn-px-[5px]
rn-text-sm
rn-text-black
disabled:rn-opacity-40
smallMobile:rn-text-[12px]
`,
e.className
)
}
))
}
);
},
children: /* @__PURE__ */ n(
R,
{
option: e.option,
optionsArray: e.optionsArray,
useValueAsName: e.useValueAsName,
type: "compact-dropdown",
isOpen: c,
twoMonthsDisplay: e.twoMonthsDisplay,
noButtonAnimation: e.noButtonAnimation
}
)
}
);
});
function P(e) {
var a, r;
const [t, c] = h(!1), [o, d] = h(!1);
return N(() => {
var i, m, u, b;
c(
!!((i = e.yearRange) != null && i.start) && !!e.startYear && !!e.count && e.startYear - 1 < ((m = e.yearRange) == null ? void 0 : m.start) || (e.startYear || 0) - 20 <= 0
), d(
!!((u = e.yearRange) != null && u.end) && !!e.endYear && !!e.count && e.endYear + 1 > ((b = e.yearRange) == null ? void 0 : b.end)
);
}, [
e.count,
e.endYear,
e.startYear,
(a = e.yearRange) == null ? void 0 : a.end,
(r = e.yearRange) == null ? void 0 : r.start
]), /* @__PURE__ */ f(
"div",
{
className: l(
`
selector-picker-top
rn-mb-[0.3125rem]
rn-flex
rn-items-center
rn-justify-between
rn-px-2
`
),
"data-type": "selector-picker-top",
children: [
/* @__PURE__ */ n(x, { when: e.isYear, children: /* @__PURE__ */ n(
g,
{
className: l(
`
selector-prev-next-btn
selector-prev-btn
rn-text-black
disabled:rn-opacity-10
dark:rn-text-white
`
),
"data-prev": !0,
"data-type": "selector-prev-next-btn",
"aria-label": "Show previous 20 years.",
"data-scope": "button",
"data-part": "root",
disabled: t,
onClick: e.handlePrev,
style: {
...e.arrowsColor && { color: e.arrowsColor }
},
children: /* @__PURE__ */ n(B, {})
}
) }),
e.isYear ? /* @__PURE__ */ n(
"div",
{
className: l(
`
date-selector-trigger
rn-text-center
rn-text-[0.9375rem]
rn-font-medium
dark:rn-text-white
`
),
"data-type": "date-selector-trigger",
children: e.range
}
) : /* @__PURE__ */ n(
"div",
{
className: l(
`
date-selector-trigger
rn-w-full
rn-pt-[0.125rem]
rn-text-center
rn-text-[0.9375rem]
rn-font-medium
dark:rn-text-white
`
),
"data-type": "date-selector-trigger",
children: e.monthSelectorTopLabel || "Select A Month"
}
),
/* @__PURE__ */ n(x, { when: e.isYear, children: /* @__PURE__ */ n(
g,
{
className: l(
`
selector-prev-next-btn
selector-next-btn
rn-text-black
disabled:rn-opacity-10
dark:rn-text-white
`
),
"data-next": !0,
"aria-label": "Show next 20 years.",
"data-scope": "button",
"data-part": "root",
"data-type": "selector-prev-next-btn",
onClick: e.handleNext,
disabled: o,
style: {
...e.arrowsColor && { color: e.arrowsColor }
},
children: /* @__PURE__ */ n(V, {})
}
) })
]
}
);
}
function z(e) {
return /* @__PURE__ */ n(
"div",
{
className: l(
`
date-year-full-size-selector-options
rn-grid
rn-grid-cols-4
rn-gap-x-1
`
),
children: e.array.map((t, c) => /* @__PURE__ */ w(
k,
{
...e,
value: t,
index: c,
key: c + t,
className: l(
`
rn-p-2
rn-text-[0.9375rem]
`,
{
"disabled:rn-bg-transparent": !t
},
e.className
),
disabled: !t,
attributes: {
...t ? {} : { "data-selector-type": "selector-option-out-of-range" }
}
}
))
}
);
}
function I(e) {
var c, o;
const t = (d, a) => {
v(d, a, e, () => {
var r, i, m;
(r = e.setSelectorTwoProps) == null || r.call(e, j), (i = e.setShowSelectorTwo) == null || i.call(e, !1), (m = e.close) == null || m.call(e);
});
};
return /* @__PURE__ */ f(
"div",
{
className: l(`
date-full-size-selector-area
rn-z-50
rn-flex
rn-flex-col
rn-justify-between
rn-gap-y-4
rn-p-2
`),
children: [
/* @__PURE__ */ n(x, { when: !e.useValueAsName, children: /* @__PURE__ */ n(
"div",
{
className: l(
`
date-month-full-size-selector-options-wrapper
rn-grid
rn-grid-cols-3
rn-gap-x-1
rn-gap-y-4
`
),
children: (c = e.optionsArray) == null ? void 0 : c.map((d, a) => /* @__PURE__ */ w(
k,
{
...e,
value: d,
index: a,
key: a + d,
className: l(
`
rn-p-2
rn-text-sm
`,
e.className
),
handleOptionClick: t
}
))
}
) }),
/* @__PURE__ */ n(x, { when: e.useValueAsName, children: (o = e.yearArray) == null ? void 0 : o.map((d, a) => /* @__PURE__ */ w(
z,
{
...e,
key: a + d.join(","),
array: d,
handleOptionClick: t
}
)) })
]
}
);
}
const j = {
option: 0,
setOption: () => {
},
optionsArray: []
}, L = ({ setAllowedComponents: e, ...t }) => {
const c = T(null);
return N(() => {
c.current && (e == null || e((o) => [...o, c.current]));
}, [e]), /* @__PURE__ */ f(
"div",
{
className: l(
`
date-selector-wrapper
rn-absolute
rn-left-0
rn-top-0
rn-z-50
rn-max-h-fit
rn-w-full
rn-rounded-md
rn-bg-white
rn-pb-[0.5rem]
rn-pt-[0.625rem]
rn-shadow-lg
dark:rn-bg-dreamless-sleep
`,
t.monthYearSelectorWrapperClass
),
"data-scope": "date-picker",
"data-type": "date-selector-wrapper",
style: {
...t.backgroundColor && {
backgroundColor: t.backgroundColor
}
},
ref: c,
"data-part": "grid",
"aria-roledescription": t.useValueAsName ? "select year" : "select month",
children: [
/* @__PURE__ */ n(P, { ...t, isYear: t.useValueAsName }),
/* @__PURE__ */ n(I, { ...t, yearArray: t.yearArray })
]
}
);
};
export {
L as S,
H as a,
R as b,
j as d
};