@rnwonder/react-date-picker
Version:
A lightweight, customizable, and accessible date picker component for React applications.
670 lines (669 loc) • 23.1 kB
JavaScript
"use client";
import { jsx as a, jsxs as y, Fragment as D } from "react/jsx-runtime";
import { P as Z } from "./index-D1g166JZ.js";
import { useState as c, useEffect as C, useCallback as A, createElement as U } from "react";
import { p as X, g as _, T as z, u as G, l as J } from "./utils-CJCqI964.js";
import { c as w } from "./class-DLUjLwnh.js";
import { S, B as E } from "./Show-DCFzPwVn.js";
import { P as L, N as q } from "./index-D84JZ01v.js";
import { P as Y, I as $ } from "./format-CMbjATj9-B6oamtiF.js";
const j = (e) => {
const [d, l] = c(12), [r, V] = c(1), [m, u] = c(), [f, o] = c(), [v, k] = c(1), [n, s] = c(1), [b, t] = c(!1), i = 100, h = 15, x = 15;
return C(() => {
e.type === "hour" ? (l(12), V(1)) : (e.type === "minute" || e.type === "second") && (l(60), V(5));
}, []), C(() => {
k(i * Math.cos(e.index / d * 2 * Math.PI)), s(i * Math.sin(e.index / d * 2 * Math.PI)), (e.type === "minute" || e.type === "second") && (e.index % r === 0 ? e.index + 15 >= 60 ? (u(X(e.index + 15 - 60).toString()), o(e.index + 15 - 60)) : (u(X(e.index + 15).toString()), o(e.index + 15)) : e.index + 15 >= 60 ? (u(""), o(e.index + 15 - 60)) : (u(""), o(e.index + 15))), e.type === "hour" && (e.index % r === 0 ? e.index + 3 >= 12 ? (u((e.index + 3 - 12).toString()), o(e.index + 3 - 12)) : (u((e.index + 3).toString()), o(e.index + 3)) : e.index + 3 >= 12 ? (u(""), o(e.index + 3 - 12)) : (u(""), o(e.index + 3)));
}, [e.index, e.type, r, d]), C(() => {
e.type === "hour" && m === "0" && u("12");
}, [e.type, m]), C(() => {
e.selectedValue === f || e.selectedValue === 12 && f === 0 && e.type === "hour" ? t(!0) : t(!1);
}, [f, e.selectedValue, e.type]), /* @__PURE__ */ a(
"button",
{
className: w(
`
time-analog-number
rn-absolute
rn-h-time
rn-w-time
rn-select-none
rn-rounded-full
rn-leading-time
hover:rn-bg-transparent
`,
{
"\n before:rn-content[''] \n rn-text-white \n before:rn-pointer-events-none \n before:rn-absolute \n before:rn-left-1/2 \n before:rn-top-1/2 \n before:rn-h-time-2 \n before:rn-w-time-2 \n before:rn--translate-x-1/2 \n before:rn--translate-y-1/2 \n before:rn-transform\n before:rn-rounded-full\n before:rn-bg-dark-time\n dark:rn-text-white\n dark:before:rn-bg-dark-time\n dark:before:rn-text-white\n ": b,
"": e.index % r === 0,
"dark:rn-text-white": !b
},
e.className
),
"aria-label": X(f || 0) + " " + e.type + "s",
role: "option",
"data-time-analog-number": !0,
type: "button",
style: { left: v + h + "px", top: n + x + "px" },
"data-value": f,
onClick: () => e.onClick(e.type, f),
onTouchStart: e.onTouchStart,
onPointerEnter: (M) => e.onPointerEnter(M, e.type, f),
onPointerUp: e.onPointerUp,
onMouseUp: e.onMouseUp,
onPointerCancel: e.onPointerCancel,
tabIndex: b ? 0 : -1,
"data-selected": b,
children: /* @__PURE__ */ a(
"span",
{
className: w(" rn-relative rn-z-[1]", {
"\n after:rn-content['']\n dark:rn-text-red\n dark:after:rn-bg-red\n after:rn-absolute\n after:rn-left-1/2\n after:rn-top-1/2\n after:rn-h-[3px]\n after:rn-w-[3px]\n after:rn--translate-x-1/2\n after:rn--translate-y-1/2\n after:rn-transform\n after:rn-rounded-full\n after:rn-bg-white\n \n ": e.type !== "hour" && !m && b
}),
children: m
}
)
}
);
}, F = (e) => {
const [d, l] = c(!1), [r, V] = c(!1), [m, u] = c(!1), [f, o] = c("rotateZ(0deg)"), [v, k] = c(!1);
C(() => {
let t = {};
if (e.setCurrentTimeOnOpen && (t = _()), e.allowedView.includes("hour"))
if (e.value.hour === void 0) {
if (!e.setCurrentTimeOnOpen) return;
e.setSelectedHour(t.hour), e.setMeridiem(t.meridiem);
} else
e.setMeridiem(z(e.value.hour)), e.setSelectedHour(G(e.value.hour));
if (e.allowedView.includes("minute"))
if (e.value.minute === void 0) {
if (!e.setCurrentTimeOnOpen) return;
e.setSelectedMinute(t.minute);
} else
e.setSelectedMinute(e.value.minute);
if (e.allowedView.includes("second"))
if (e.value.second === void 0) {
if (!e.setCurrentTimeOnOpen) return;
e.setSelectedSeconds(t.second);
} else
e.setSelectedSeconds(e.value.second);
if (!e.allowedView.includes("hour")) {
if (e.allowedView.includes("minute")) {
e.setView("minute");
return;
}
e.allowedView.includes("second") && e.setView("second");
}
}, []), C(() => {
var t;
v && ((t = e.onChange) == null || t.call(e, {
hour: e.selectedHour !== void 0 ? J(e.selectedHour, e.meridiem) : void 0,
minute: e.selectedMinute,
second: e.selectedSeconds
}), e.handleTimeChange(
{
hour: e.selectedHour,
minute: e.selectedMinute,
second: e.selectedSeconds
},
e.meridiem
));
}, [
e.meridiem,
e.selectedSeconds,
e.selectedMinute,
e.selectedHour,
e.handleTimeChange,
e.onChange,
v
]), C(() => {
e.view === "hour" && o(`rotateZ(${(e.selectedHour || 0) * 30}deg)`), e.view === "minute" && o(`rotateZ(${(e.selectedMinute || 0) * 6}deg)`), e.view === "second" && o(`rotateZ(${(e.selectedSeconds || 0) * 6}deg)`);
}, [
e.selectedHour,
e.selectedMinute,
e.selectedSeconds,
e.view
]), C(() => {
if (r && !d) {
if (m) {
u(!1), V(!1);
return;
}
e.handleNext(), V(!1);
}
}, [r, d, m, e.handleNext]), C(() => {
if (e.view === "hour" && e.selectedHour !== void 0) {
k(!0);
return;
}
if (e.view === "minute" && e.selectedMinute !== void 0) {
k(!0);
return;
}
if (e.view === "second" && e.selectedSeconds !== void 0) {
k(!0);
return;
}
}, [
e.selectedHour,
e.selectedMinute,
e.selectedSeconds,
e.view
]);
const n = A(
(t, i, h) => {
if (h === void 0) return;
const x = () => {
d || l(!0), r || V(!0);
};
t.pressure > 0 && i === "hour" && (e.setSelectedHour(h), x()), t.pressure > 0 && i === "minute" && (e.setSelectedMinute(h), x()), t.pressure > 0 && i === "second" && (e.setSelectedSeconds(h), x());
},
[r, d, e.setSelectedHour]
), s = A(
(t, i) => {
if (i !== void 0) {
if (t === "hour") {
e.setSelectedHour(i), e.handleNext();
return;
}
if (t === "minute") {
e.allowedView.includes("second") || k(!0), e.setSelectedMinute(i), e.handleNext();
return;
}
t === "second" && (e.setSelectedSeconds(i), k(!0)), e.handleNext();
}
},
[e.setSelectedHour, e.handleNext]
), b = A(
(t, i, h) => {
h !== void 0 && s(i, h);
},
[s]
);
return /* @__PURE__ */ y(
"div",
{
className: w(
`
time-analog-wrapper
rn-relative
rn-flex
rn-h-[237px]
rn-w-[237px]
rn-items-center
rn-justify-center
rn-rounded-full
rn-bg-slate-100
dark:rn-bg-eerie-black
`,
e.timeAnalogWrapperClass
),
"data-time-analog-wrapper": !0,
"aria-label": "Select minutes. Selected time is 11:01AM",
role: "listbox",
tabIndex: 0,
onMouseUp: () => l(!1),
children: [
/* @__PURE__ */ a(
"div",
{
className: w(
`
time-analog-center-hand
rn-left-[calc(50%
-
1px)]
rn-absolute rn-bottom-1/2 rn-h-[39%]
rn-w-[2px]
rn-origin-center-bottom
rn-bg-dark-time
dark:rn-bg-[#8f8f8f]
`,
{
"rn-hidden": !v,
"rn-block": v
},
e.timeAnalogClockHandClass
),
style: { transform: f },
"data-time-analog-center-hand": !0
}
),
/* @__PURE__ */ a(
"div",
{
className: w(
`
time-analog-center-dot
rn-absolute
rn-left-1/2
rn-top-1/2
rn-h-[5px]
rn-w-[5px] rn--translate-x-1/2
rn--translate-y-1/2 rn-transform rn-rounded-full
rn-bg-dark-time
dark:rn-bg-dark-time
`,
e.timeAnalogClockCenterDotClass
),
"data-time-analog-center-dot": !0
}
),
/* @__PURE__ */ y(
"div",
{
className: w(`
rn-relative
rn-h-[50px]
rn-w-[50px]
rn-bg-transparent
`),
children: [
/* @__PURE__ */ a(S, { when: e.view === "hour", children: Array.from(Array(12).keys(), (t) => t + 1).map((t, i) => /* @__PURE__ */ U(
j,
{
...e,
type: e.view,
key: i,
selectedValue: e.selectedHour,
onClick: s,
onMouseUp: () => l(!1),
onPointerEnter: n,
onTouchStart: () => u(!0),
onTouchEnd: b,
onPointerUp: () => l(!1),
onPointerCancel: () => l(!1),
index: i,
className: e.timeAnalogNumberClass
}
)) }),
/* @__PURE__ */ a(S, { when: e.view === "minute", children: Array.from(Array(60).keys(), (t) => t + 1).map((t, i) => /* @__PURE__ */ U(
j,
{
...e,
type: e.view,
key: i,
selectedValue: e.selectedMinute,
onClick: s,
onMouseUp: () => l(!1),
onPointerEnter: n,
onTouchStart: () => u(!0),
onTouchEnd: b,
onPointerUp: () => l(!1),
onPointerCancel: () => l(!1),
index: i,
className: e.timeAnalogNumberClass
}
)) }),
/* @__PURE__ */ a(S, { when: e.view === "second", children: Array.from(Array(60).keys(), (t) => t + 1).map((t, i) => /* @__PURE__ */ U(
j,
{
...e,
type: e.view,
key: i,
selectedValue: e.selectedSeconds,
onClick: s,
onMouseUp: () => l(!1),
onPointerEnter: n,
onTouchStart: () => u(!0),
onTouchEnd: b,
onPointerUp: () => l(!1),
onPointerCancel: () => l(!1),
index: i,
className: e.timeAnalogNumberClass
}
)) })
]
}
)
]
}
);
}, K = (e) => {
var d, l, r;
return /* @__PURE__ */ y(
"div",
{
className: w(`
rn-mb-2
rn-flex
rn-justify-between`),
children: [
/* @__PURE__ */ a("div", { className: "rn-flex rn-items-center rn-justify-center rn-font-medium dark:rn-text-white", children: e.view === "hour" ? "HH" : e.view === "minute" ? "MM" : "SS" }),
/* @__PURE__ */ y("div", { children: [
/* @__PURE__ */ a(
E,
{
className: w(
`
time-analog-prev-next-btn
time-analog-prev-btn
rn-h-[2rem]
rn-w-[2rem]
rn-rounded-full
rn-text-black
disabled:rn-cursor-not-allowed
disabled:rn-bg-transparent
dark:rn-text-white
`,
e.prevTimeViewBtnClass,
e.prevNextTimeViewBtnClass
),
"data-prev": !0,
"data-type": "time-analog-prev-next-btn",
"aria-label": "Move backward to switch to the previous time view",
"data-scope": "button",
"data-part": "root",
disabled: e.view === "hour" || e.view === "minute" && !((d = e.allowedView) != null && d.includes("hour")) || e.view === "second" && !((l = e.allowedView) != null && l.includes("minute")),
onClick: e.handlePrev,
style: {
...e.arrowsColor && { color: e.arrowsColor }
},
noButtonAnimation: e.noButtonAnimation,
children: e.prevIcon || /* @__PURE__ */ a(L, { className: "rn-w-[17px]", color: e.arrowsColor })
}
),
/* @__PURE__ */ a(
E,
{
className: w(
`
time-analog-prev-next-btn
time-analog-next-btn
rn-h-[2rem]
rn-w-[2rem]
rn-rounded-full
rn-text-black
disabled:rn-cursor-not-allowed
disabled:rn-bg-transparent
dark:rn-text-white
`,
e.nextTimeViewBtnClass,
e.prevNextTimeViewBtnClass
),
"data-next": !0,
"aria-label": "Move forward to switch to the next time view.",
"data-scope": "button",
"data-part": "root",
"data-type": "time-analog-prev-next-btn",
onClick: e.handleNext,
disabled: e.view === "second" || e.view === "minute" && !((r = e.allowedView) != null && r.includes("second")),
style: {
...e.arrowsColor && { color: e.arrowsColor }
},
noButtonAnimation: e.noButtonAnimation,
children: e.nextIcon || /* @__PURE__ */ a(q, { className: "rn-w-[17px]", color: e.arrowsColor })
}
)
] })
]
}
);
}, Q = (e) => {
const d = (l) => w(
`
time-picker-meridiem-btn
rn-aspect-square
rn-w-[2.3rem]
rn-flex-shrink-0
rn-rounded-full
dark:rn-text-white
`,
{
"\n dark:rn-bg-dark-time\n dark:hover:rn-bg-dark-time\n rn-bg-dark-time\n rn-text-white\n hover:rn-bg-dark-time\n ": e.meridiem === l
},
e.timePickerMeridiemBtnClass
);
return /* @__PURE__ */ y(
"div",
{
className: w(
`
time-picker-analog-bottom
rn-flex
rn-justify-between
`,
e.timePickerBottomAreaClass
),
children: [
/* @__PURE__ */ a(
E,
{
className: d("AM"),
onClick: () => e.setMeridiem("AM"),
noButtonAnimation: e.noButtonAnimation,
children: "AM"
}
),
/* @__PURE__ */ a(
E,
{
className: d("PM"),
onClick: () => e.setMeridiem("PM"),
noButtonAnimation: e.noButtonAnimation,
children: "PM"
}
)
]
}
);
}, R = (e) => {
const [d, l] = c("hour"), [r, V] = c([
"hour",
"minute"
]), [m, u] = c("AM"), [f, o] = c(), [v, k] = c(), [n, s] = c(), [b, t] = c();
C(() => {
var g, N, B, I, O;
e.allowedView && V(e.allowedView), !((g = e.allowedView) != null && g.includes("hour")) && ((N = e.allowedView) != null && N.includes("minute")) && l("minute"), !((B = e.allowedView) != null && B.includes("hour")) && !((I = e.allowedView) != null && I.includes("minute")) && ((O = e.allowedView) != null && O.includes("second")) && l("second");
}, []), C(() => {
t({
hour: f !== void 0 ? J(f, m) : void 0,
minute: v,
second: n
});
}, [m, f, v, n]);
const i = A(() => {
var g;
if (d === "hour" && r.includes("minute")) {
l("minute");
return;
}
if (d === "minute" && r.includes("second")) {
l("second");
return;
}
e.shouldCloseOnSelect && ((g = e.setIsShown) == null || g.call(e, !1));
}, [r, e.setIsShown, e.shouldCloseOnSelect, d]), h = A(() => {
if (d === "second" && r.includes("minute")) {
l("minute");
return;
}
d === "minute" && r.includes("hour") && l("hour");
}, [r, d]), x = (g) => {
if (g) {
if (typeof g == "function") {
const N = g({
handleNext: i,
handlePrev: h,
setView: l,
view: d,
meridiem: m,
setMeridiem: u,
time: b
});
return /* @__PURE__ */ a("div", { "data-type": "custom-jsx", children: N });
}
return /* @__PURE__ */ a("div", { "data-type": "custom-jsx", children: g });
}
}, M = x(e.topAreaJSX), P = x(e.bottomAreaJSX), T = x(e.leftAreaJSX), H = x(e.rightAreaJSX);
return /* @__PURE__ */ y(
"div",
{
className: w(
`
time-picker-wrapper
rn-rounded-md
rn-border-t
rn-border-solid
rn-border-gray-300
rn-bg-white
rn-px-[1rem]
rn-pb-[0.5rem]
rn-pt-[0.625rem]
rn-shadow-lg
dark:rn-border-gray-700
dark:rn-bg-dreamless-sleep
`,
e.timePickerWrapperClass
),
children: [
/* @__PURE__ */ a(S, { when: !!M, children: M }),
/* @__PURE__ */ y("div", { className: "rn-flex rn-flex-row", children: [
/* @__PURE__ */ a(S, { when: !!T, children: T }),
/* @__PURE__ */ y("div", { children: [
/* @__PURE__ */ a(S, { when: !e.hideTopArea, children: /* @__PURE__ */ a(
K,
{
...e,
view: d,
allowedView: r,
handleNext: i,
handlePrev: h
}
) }),
/* @__PURE__ */ a(
F,
{
...e,
allowedView: r,
view: d,
setView: l,
handleNext: i,
meridiem: m,
handleTimeChange: e.handleTimeChange,
setMeridiem: u,
selectedHour: f,
selectedMinute: v,
selectedSeconds: n,
setSelectedHour: o,
setSelectedMinute: k,
setSelectedSeconds: s
}
),
/* @__PURE__ */ a(S, { when: r.includes("hour") && !e.hideBottomArea, children: /* @__PURE__ */ a(
Q,
{
...e,
meridiem: m,
setMeridiem: u
}
) })
] }),
/* @__PURE__ */ a(S, { when: !!H, children: H })
] }),
/* @__PURE__ */ a(S, { when: !!P, children: P })
]
}
);
}, re = (e) => {
var v, k;
const [d, l] = c(!1), [r, V] = c({
value: {},
label: ""
}), m = A(
(n, s) => {
var h, x, M, P, T, H, g, N, B, I, O, W;
const b = e.setValue || V;
let t = "", i = "";
e.allowedView || (t = `${Y(n.hour)}:${$(n.minute)}`, i = s), (h = e.allowedView) != null && h.includes("hour") ? (t = `${Y(n.hour)}`, i = s, ((x = e.allowedView) != null && x.includes("minute") && (n.minute || n.minute !== void 0) || (M = e.allowedView) != null && M.includes("second") && (n.second || n.second !== void 0)) && (t += ":")) : ((P = e.allowedView) != null && P.includes("minute") && !((T = e.allowedView) != null && T.includes("second")) && (i = n.minute === 1 ? "min" : "mins"), (H = e.allowedView) != null && H.includes("second") && !((g = e.allowedView) != null && g.includes("minute")) && (i = n.second === 1 ? "sec" : "secs"), (N = e.allowedView) != null && N.includes("second") && ((B = e.allowedView) != null && B.includes("minute")) && (i = n.second === 1 ? "sec" : "secs")), (I = e.allowedView) != null && I.includes("minute") && (t += `${$(n.minute)}`, (O = e.allowedView) != null && O.includes("second") && (n.second || n.second !== void 0) && (t += ":")), (W = e.allowedView) != null && W.includes("second") && (t += `${$(n.second)}`), t += ` ${i}`, b({
value: {
...n,
hour: n.hour !== void 0 ? J(n.hour, s) : void 0
},
label: t
});
},
[e.allowedView, e.setValue]
), u = A(() => {
l(!0);
}, []), o = ((n) => {
if (n) {
if (typeof n == "function") {
const s = n({
value: e.value || r,
showTime: u
});
return /* @__PURE__ */ a(D, { children: s });
}
return /* @__PURE__ */ a(D, { children: n });
}
})(e.renderInput);
return /* @__PURE__ */ a(
Z,
{
isShown: d,
setIsShown: l,
handleChildrenClick: o ? () => {
} : void 0,
onClose: () => {
var n;
(n = e.onClose) == null || n.call(e);
},
onOpen: () => {
var n;
(n = e.onOpen) == null || n.call(e);
},
content: ({ close: n }) => {
var s;
return /* @__PURE__ */ a(
R,
{
...e,
value: ((s = e.value) == null ? void 0 : s.value) || r.value,
handleTimeChange: m,
close: n,
setIsShown: l
}
);
},
positionX: e.pickerPositionX,
positionY: e.pickerPositionY,
zIndex: e.zIndex,
width: e.inputWrapperWidth,
className: w(e.inputWrapperClass, "time-picker-input-wrapper"),
children: /* @__PURE__ */ y(
"div",
{
className: "time-picker-input-area",
"data-time-picker-input-area": !0,
"data-scope": "time-picker",
"data-part": "control",
children: [
/* @__PURE__ */ a(S, { when: !!o, children: o }),
/* @__PURE__ */ a(S, { when: !o, children: /* @__PURE__ */ a(
"input",
{
readOnly: !0,
"data-scope": "time-picker",
"data-type": "time-picker-input",
"data-part": "input",
"aria-label": "time picker input",
placeholder: e.placeholder,
type: "text",
value: e.inputLabel || ((v = e.value) == null ? void 0 : v.label) || r.label,
...e.inputProps,
className: void 0,
className: w(
"time-picker-input rn-w-full rn-px-1",
(k = e.inputProps) == null ? void 0 : k.className,
e.inputClass
)
}
) })
]
}
)
}
);
};
export {
re as default
};