@rnwonder/react-date-picker
Version:
A lightweight, customizable, and accessible date picker component for React applications.
263 lines (262 loc) • 8.25 kB
JavaScript
"use client";
import { jsx as b, jsxs as X, Fragment as N } from "react/jsx-runtime";
import { useState as d, useCallback as B, useEffect as G } from "react";
import { a as s, f, c as h } from "./utils-CJCqI964.js";
import { D as U } from "./index-BfmjmxhR.js";
import { d as R } from "./index-C-0w3u6j.js";
import { P as q } from "./index-D1g166JZ.js";
import { c as Y } from "./class-DLUjLwnh.js";
const te = (e) => {
var x, L;
const [c, A] = d({
label: "",
value: {}
}), [F, y] = d(!1), [C, w] = d([]), [E, k] = d(!1), [T, I] = d(R), [j, P] = d(!1), D = B(
(t) => {
const n = e.value || c, i = e.setValue || A;
if (t.type === "single") {
const a = s((t == null ? void 0 : t.selectedDate) || {}), l = f({
date: a,
option: (e == null ? void 0 : e.localeOptions) || {
month: "short",
day: "numeric",
year: "numeric"
},
format: e.formatInputLabel,
locale: e.locale
});
i({
value: {
selected: (a == null ? void 0 : a.toISOString()) || "",
selectedDateObject: (t == null ? void 0 : t.selectedDate) || {}
},
label: l
});
}
if (t.type === "range") {
const a = t.startDate ? s(t.startDate) : void 0, l = t.endDate ? s(t.endDate) : void 0;
let u = "";
const m = {
month: "short",
day: "numeric",
year: "numeric",
...(e == null ? void 0 : e.localeOptions) || {},
...e != null && e.alwaysShowRangeStartYear ? {} : { year: void 0 }
}, S = (e == null ? void 0 : e.localeOptions) || {
month: "short",
day: "numeric",
year: "numeric"
};
let O = "", v = "";
if (a && l) {
if (a.getFullYear() === l.getFullYear()) {
if (e.alwaysShowRangeStartYear) return;
m.year = void 0;
} else
m.year = "numeric";
O = f({
date: a,
option: m,
format: e.formatInputLabelRangeStart,
locale: e.locale
}), v = f({
date: l,
option: S,
format: e.formatInputLabelRangeEnd,
locale: e.locale
});
}
a && !l && (O = f({
date: a,
option: m,
format: e.formatInputLabelRangeStart,
locale: e.locale
})), !a && l && (v = f({
date: l,
option: S,
format: e.formatInputLabelRangeEnd,
locale: e.locale
})), u = `${O} ${e.rangeDatesSeparator || "-"} ${v}`, i({
value: {
start: (a == null ? void 0 : a.toISOString()) || "",
startDateObject: (t == null ? void 0 : t.startDate) || {},
end: (l == null ? void 0 : l.toISOString()) || "",
endDateObject: (t == null ? void 0 : t.endDate) || {}
},
label: u
});
}
if (t.type === "multiple") {
const l = n.value.multipleDateObject || [], u = t.multipleDates || [];
if (!n.label && u.length === 0 || l.toString() === u.toString() && n.label)
return;
const m = u.map((r) => {
const o = s(r);
return f({
date: o,
option: (e == null ? void 0 : e.localeOptions) || {
month: "short",
day: "numeric",
year: "numeric"
},
format: e.formatInputLabel,
locale: e.locale
});
}), O = u.map(
(r) => {
var o;
return ((o = s(r)) == null ? void 0 : o.toISOString()) || "";
}
).sort((r, o) => r.localeCompare(o)), v = u.sort((r, o) => {
var V, M;
const $ = ((V = s(r)) == null ? void 0 : V.toISOString()) || "", z = ((M = s(o)) == null ? void 0 : M.toISOString()) || "";
return $.localeCompare(z);
});
i({
value: {
multiple: O,
multipleDateObject: v
},
label: m.join(e.multipleDatesSeparator || ", ")
});
}
},
[e, c]
), W = () => {
y(!0);
}, g = ((t) => {
if (t) {
if (typeof t == "function") {
const n = t({
value: e.value || c,
showDate: W
});
return /* @__PURE__ */ b(N, { children: n });
}
return /* @__PURE__ */ b(N, { children: t });
}
})(e.renderInput);
return G(() => {
var n, i;
if (j) return;
if (!e.value && !c.value) {
P(!0);
return;
}
const t = ((n = e.value) == null ? void 0 : n.value) || c.value;
if (t.selected || t.selectedDateObject) {
const a = t.selected ? h(new Date(t.selected)) : t.selectedDateObject;
D({
type: "single",
selectedDate: a
});
}
if (t.start || t.startDateObject) {
const a = t.start ? h(new Date(t.start)) : t.startDateObject, l = t.end ? h(new Date(t.end)) : t.endDateObject;
D({
type: "range",
startDate: a,
endDate: l
});
}
if (t.multiple || t.multipleDateObject) {
const a = (i = t.multipleDateObject) != null && i.length ? t.multipleDateObject : t.multiple ? t.multiple.map(
(l) => h(new Date(l))
) : void 0;
if (!(a != null && a.length)) return;
D({
type: "multiple",
multipleDates: a
});
}
P(!0);
}, [D, j, e.value, c.value]), /* @__PURE__ */ b(
q,
{
isShown: F,
setIsShown: y,
disableOpenAnimation: e.disableOpenAnimation,
onClose: () => {
var t;
C.length && w([]), k(!1), I(R), (t = e.onClose) == null || t.call(e);
},
onOpen: () => {
var t;
(t = e.onOpen) == null || t.call(e);
},
content: ({ close: t }) => {
var n;
return /* @__PURE__ */ b(
U,
{
...e,
type: e.type || "single",
value: ((n = e.value) == null ? void 0 : n.value) || c.value,
handleOnChange: D,
onChange: e.onChange,
maxDate: e.maxDate,
minDate: e.minDate,
setAllowedComponents: w,
close: t,
yearSelectorCount: e.yearSelectorCount || 20,
setShowSelectorTwo: k,
showSelectorTwo: E,
setSelectorTwoProps: I,
selectorTwoProps: T,
locale: e.locale || "en-US"
}
);
},
portalContainer: e.portalContainer,
onClickOutside: (t, n) => {
var i;
(i = C.concat(e.componentsToAllowOutsideClick || [])) != null && i.some((a) => {
var l;
return (l = a == null ? void 0 : a.contains) == null ? void 0 : l.call(a, t == null ? void 0 : t.target);
}) || n == null || n(!1);
},
positionX: e.pickerPositionX,
positionY: e.pickerPositionY,
zIndex: e.zIndex,
handleChildrenClick: g ? () => {
} : void 0,
width: e.inputWrapperWidth,
className: Y(e.inputWrapperClass, "date-picker-input-wrapper"),
children: /* @__PURE__ */ X(
"div",
{
className: "date-picker-input-area",
"data-date-picker-input-area": !0,
"data-scope": "date-picker",
"data-part": "control",
children: [
g && g,
!g && /* @__PURE__ */ b(
"input",
{
readOnly: !0,
type: "text",
"data-scope": "date-picker",
"data-part": "input",
"aria-label": "date picker input",
placeholder: e.placeholder,
value: e.inputLabel || ((x = e.value) == null ? void 0 : x.label) || c.label,
"data-type": "date-picker-input",
...e.inputProps,
className: void 0,
className: Y(
"date-picker-input rn-w-full rn-px-1",
(L = e.inputProps) == null ? void 0 : L.className,
e.inputClass
)
}
)
]
}
)
}
);
};
export {
te as default
};