@itilite/lumina-ui 1.0.2-alpha → 1.0.4-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AdvancedDateRangePicker-D7xn4So6.d.mts +59 -0
- package/dist/AdvancedDateRangePicker-D7xn4So6.d.ts +59 -0
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.d.mts +1 -1
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.d.ts +1 -1
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.js +896 -77
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.mjs +6 -2
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.js +5 -5
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.mjs +1 -1
- package/dist/atom/Table/Table.js +4 -3
- package/dist/atom/Table/Table.mjs +1 -1
- package/dist/chunk-27LRL4RO.mjs +428 -0
- package/dist/chunk-3HXZIFV6.mjs +438 -0
- package/dist/chunk-62VAYFZA.mjs +437 -0
- package/dist/chunk-6ON32H2N.mjs +431 -0
- package/dist/chunk-6XIT27XY.mjs +269 -0
- package/dist/chunk-772C454L.mjs +438 -0
- package/dist/chunk-7L267Y4P.mjs +429 -0
- package/dist/chunk-7WSVCE2C.mjs +269 -0
- package/dist/chunk-BFFLWW7N.mjs +250 -0
- package/dist/chunk-FTL3PFC2.mjs +438 -0
- package/dist/chunk-GZ4P7OL3.mjs +429 -0
- package/dist/chunk-K2A4TWA3.mjs +430 -0
- package/dist/chunk-L3L42SIL.mjs +429 -0
- package/dist/chunk-MA23J4WQ.mjs +430 -0
- package/dist/chunk-QRGHJP7U.mjs +437 -0
- package/dist/chunk-RC6IGURJ.mjs +428 -0
- package/dist/chunk-TQDZWJZP.mjs +269 -0
- package/dist/chunk-ZGV6QMVM.mjs +437 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +41 -32
- package/dist/index.mjs +17 -17
- package/dist/styles.css +1008 -873
- package/package.json +1 -1
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
AdvancedDateRangePicker,
|
|
3
3
|
AdvancedDateRangePicker_default
|
|
4
|
-
} from "../../chunk-
|
|
5
|
-
import "../../chunk-
|
|
4
|
+
} from "../../chunk-772C454L.mjs";
|
|
5
|
+
import "../../chunk-GU5F7Z7I.mjs";
|
|
6
|
+
import "../../chunk-MLCMZRUC.mjs";
|
|
7
|
+
import "../../chunk-6XIT27XY.mjs";
|
|
6
8
|
import "../../chunk-ZTRM4HZJ.mjs";
|
|
9
|
+
import "../../chunk-QKTMWS4J.mjs";
|
|
10
|
+
import "../../chunk-AF2RKLH6.mjs";
|
|
7
11
|
import "../../chunk-FWCSY2DS.mjs";
|
|
8
12
|
export {
|
|
9
13
|
AdvancedDateRangePicker,
|
|
@@ -305,14 +305,14 @@ var InternalCalendar = ({
|
|
|
305
305
|
] }) }),
|
|
306
306
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-py-2 tw-text-center tw-typography-caption2 tw-text-gray-500", children: day }, day)) }),
|
|
307
307
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
|
|
308
|
-
if (!date) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-h-
|
|
308
|
+
if (!date) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-h-7" }, index);
|
|
309
309
|
const isStart = isSameDate(date, startDate);
|
|
310
310
|
const isEnd = isSameDate(date, endDate);
|
|
311
311
|
const isInRange = isDateBetweenRange(date);
|
|
312
312
|
const isSelected = isDateInRange(date);
|
|
313
313
|
const isDisabled = isDateDisabled(date);
|
|
314
314
|
const isHovering = isSelectingEnd && hoverDate && isSameDate(date, hoverDate);
|
|
315
|
-
let cellClasses = "tw-relative tw-z-20 tw-h-
|
|
315
|
+
let cellClasses = "tw-relative tw-z-20 tw-h-7 tw-w-7 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold tw-cursor-pointer tw-transition-all ";
|
|
316
316
|
if (isDisabled) {
|
|
317
317
|
cellClasses += "tw-text-gray-300 tw-cursor-not-allowed ";
|
|
318
318
|
} else if (isStart || isEnd) {
|
|
@@ -326,9 +326,9 @@ var InternalCalendar = ({
|
|
|
326
326
|
cellClasses += "tw-border-2 tw-border-gray-400 tw-border-dashed ";
|
|
327
327
|
}
|
|
328
328
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tw-relative tw-flex tw-justify-center", children: [
|
|
329
|
-
isInRange && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-inset-x-0 tw-bg-[#
|
|
330
|
-
isStart && endDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-right-0 tw-left-1/2 tw-bg-[#
|
|
331
|
-
isEnd && startDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-left-0 tw-right-1/2 tw-bg-[#
|
|
329
|
+
isInRange && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-inset-x-0 tw-bg-[#E5E9ED] tw-z-10" }),
|
|
330
|
+
isStart && endDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-right-0 tw-left-1/2 tw-bg-[#E5E9ED] tw-z-10" }),
|
|
331
|
+
isEnd && startDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-left-0 tw-right-1/2 tw-bg-[#E5E9ED] tw-z-10" }),
|
|
332
332
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
333
333
|
"div",
|
|
334
334
|
{
|
package/dist/atom/Table/Table.js
CHANGED
|
@@ -178,6 +178,7 @@ function processColumns(columns) {
|
|
|
178
178
|
});
|
|
179
179
|
}
|
|
180
180
|
function Table(props) {
|
|
181
|
+
var _b;
|
|
181
182
|
const _a = props, {
|
|
182
183
|
size = "middle",
|
|
183
184
|
variant = "default",
|
|
@@ -243,10 +244,10 @@ function Table(props) {
|
|
|
243
244
|
return __spreadProps(__spreadValues({}, base), {
|
|
244
245
|
style: __spreadValues({ cursor: "pointer" }, base.style),
|
|
245
246
|
onClick: (e) => {
|
|
246
|
-
var _a3,
|
|
247
|
+
var _a3, _b2;
|
|
247
248
|
(_a3 = base.onClick) == null ? void 0 : _a3.call(base, e);
|
|
248
249
|
const key = getKey(record, index);
|
|
249
|
-
const current2 = (
|
|
250
|
+
const current2 = (_b2 = rowSelection.selectedRowKeys) != null ? _b2 : [];
|
|
250
251
|
const isSelected = current2.some((k) => k === key);
|
|
251
252
|
const newKeys = isSelected ? current2.filter((k) => k !== key) : [...current2, key];
|
|
252
253
|
const newRows = (dataSource != null ? dataSource : []).filter(
|
|
@@ -285,7 +286,7 @@ function Table(props) {
|
|
|
285
286
|
emptyText: loading && loadingIndicator ? loadingIndicator : loading ? " " : emptyState
|
|
286
287
|
}
|
|
287
288
|
}, rest), {
|
|
288
|
-
loading: loadingIndicator ?
|
|
289
|
+
loading: loadingIndicator ? { spinning: !!loading && ((_b = dataSource == null ? void 0 : dataSource.length) != null ? _b : 0) > 0, indicator: loadingIndicator } : loading,
|
|
289
290
|
rowClassName: (_, index) => {
|
|
290
291
|
var _a2;
|
|
291
292
|
return (0, import_clsx.default)({
|
|
@@ -0,0 +1,428 @@
|
|
|
1
|
+
import {
|
|
2
|
+
InternalCalendar_default
|
|
3
|
+
} from "./chunk-N4DPPZVJ.mjs";
|
|
4
|
+
|
|
5
|
+
// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
|
|
6
|
+
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
|
7
|
+
import clsx from "clsx";
|
|
8
|
+
import dayjs from "dayjs";
|
|
9
|
+
import customParseFormat from "dayjs/plugin/customParseFormat.js";
|
|
10
|
+
import isSameOrBefore from "dayjs/plugin/isSameOrBefore.js";
|
|
11
|
+
|
|
12
|
+
// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.module.scss
|
|
13
|
+
var AdvancedDateRangePicker_module_default = { "root": "AdvancedDateRangePicker-module__root___udir8", "inner": "AdvancedDateRangePicker-module__inner___P4OHa", "left": "AdvancedDateRangePicker-module__left___T6E84", "sidebarItem": "AdvancedDateRangePicker-module__sidebarItem___-NXPm", "sidebarItemActive": "AdvancedDateRangePicker-module__sidebarItemActive___5GmBY", "main": "AdvancedDateRangePicker-module__main___G4MU9", "header": "AdvancedDateRangePicker-module__header___mxXEE", "timezoneWrapper": "AdvancedDateRangePicker-module__timezoneWrapper___886Qm", "dateTimeWrapper": "AdvancedDateRangePicker-module__dateTimeWrapper___unDQJ", "headerGroup": "AdvancedDateRangePicker-module__headerGroup___J7mJB", "headerLabel": "AdvancedDateRangePicker-module__headerLabel___Yvhkr", "headerSeparator": "AdvancedDateRangePicker-module__headerSeparator___Vwx6P", "timezoneSelect": "AdvancedDateRangePicker-module__timezoneSelect___f4oln", "timezoneDisabledBadge": "AdvancedDateRangePicker-module__timezoneDisabledBadge___VBxOd", "inputWrapper": "AdvancedDateRangePicker-module__inputWrapper___bFFNF", "dateTimeColumn": "AdvancedDateRangePicker-module__dateTimeColumn___tdDV3", "dateTimeGroup": "AdvancedDateRangePicker-module__dateTimeGroup___azF09", "dateInput": "AdvancedDateRangePicker-module__dateInput___0t9ww", "inputError": "AdvancedDateRangePicker-module__inputError___A5hid", "timeInput": "AdvancedDateRangePicker-module__timeInput___Jalr9", "errorMessage": "AdvancedDateRangePicker-module__errorMessage___gx7ag", "body": "AdvancedDateRangePicker-module__body___f8XYj", "footer": "AdvancedDateRangePicker-module__footer___rsJ2w", "doneBtn": "AdvancedDateRangePicker-module__doneBtn___mt-Sv" };
|
|
14
|
+
|
|
15
|
+
// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
|
|
16
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
|
+
dayjs.extend(customParseFormat);
|
|
18
|
+
dayjs.extend(isSameOrBefore);
|
|
19
|
+
var DEFAULT_TIME = { hour: "12", minute: "00", period: "PM" };
|
|
20
|
+
function getPresets() {
|
|
21
|
+
const today = /* @__PURE__ */ new Date();
|
|
22
|
+
today.setHours(0, 0, 0, 0);
|
|
23
|
+
return [
|
|
24
|
+
{
|
|
25
|
+
label: "Custom",
|
|
26
|
+
key: "custom",
|
|
27
|
+
getRange: () => [null, null]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: "Yesterday",
|
|
31
|
+
key: "yesterday",
|
|
32
|
+
getRange: () => {
|
|
33
|
+
const d = new Date(today);
|
|
34
|
+
d.setDate(d.getDate() - 1);
|
|
35
|
+
return [d, d];
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
label: "Previous week",
|
|
40
|
+
key: "previous-week",
|
|
41
|
+
getRange: () => {
|
|
42
|
+
const dayOfWeek = today.getDay();
|
|
43
|
+
const start = new Date(today);
|
|
44
|
+
start.setDate(today.getDate() - dayOfWeek - 6);
|
|
45
|
+
const end = new Date(today);
|
|
46
|
+
return [start, end];
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: "This month",
|
|
51
|
+
key: "this-month",
|
|
52
|
+
getRange: () => {
|
|
53
|
+
const start = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
54
|
+
const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
|
|
55
|
+
return [start, end];
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Previous month",
|
|
60
|
+
key: "previous-month",
|
|
61
|
+
getRange: () => {
|
|
62
|
+
const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
|
|
63
|
+
const end = new Date(today.getFullYear(), today.getMonth(), 0);
|
|
64
|
+
return [start, end];
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
label: "Previous quarter",
|
|
69
|
+
key: "previous-quarter",
|
|
70
|
+
getRange: () => {
|
|
71
|
+
const month = today.getMonth();
|
|
72
|
+
const quarter = Math.floor(month / 3);
|
|
73
|
+
const startMonth = (quarter - 1) * 3;
|
|
74
|
+
const start = new Date(today.getFullYear(), startMonth, 1);
|
|
75
|
+
const end = new Date(today.getFullYear(), startMonth + 3, 0);
|
|
76
|
+
return [start, end];
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
];
|
|
80
|
+
}
|
|
81
|
+
function applyDateMask(v, prev) {
|
|
82
|
+
if (v.length < prev.length) return v;
|
|
83
|
+
const digits = v.replace(/[^\d]/g, "").slice(0, 8);
|
|
84
|
+
if (digits.length >= 2) {
|
|
85
|
+
const d = Number(digits.slice(0, 2));
|
|
86
|
+
if (d < 1 || d > 31) return prev;
|
|
87
|
+
}
|
|
88
|
+
if (digits.length >= 4) {
|
|
89
|
+
const m = Number(digits.slice(2, 4));
|
|
90
|
+
if (m < 1 || m > 12) return prev;
|
|
91
|
+
}
|
|
92
|
+
let result = "";
|
|
93
|
+
if (digits.length > 0) result += digits.slice(0, 2);
|
|
94
|
+
if (digits.length >= 2) result += "-";
|
|
95
|
+
if (digits.length > 2) result += digits.slice(2, 4);
|
|
96
|
+
if (digits.length >= 4) result += "-";
|
|
97
|
+
if (digits.length > 4) result += digits.slice(4, 8);
|
|
98
|
+
return result.slice(0, 10);
|
|
99
|
+
}
|
|
100
|
+
function applyTimeMask(v, prev) {
|
|
101
|
+
if (v.length < prev.length) return v;
|
|
102
|
+
const digits = v.replace(/[^\d]/g, "").slice(0, 4);
|
|
103
|
+
if (digits.length >= 2) {
|
|
104
|
+
const h = Number(digits.slice(0, 2));
|
|
105
|
+
if (h < 1 || h > 12) return prev;
|
|
106
|
+
}
|
|
107
|
+
if (digits.length >= 4) {
|
|
108
|
+
const m = Number(digits.slice(2, 4));
|
|
109
|
+
if (m > 59) return prev;
|
|
110
|
+
}
|
|
111
|
+
let result = "";
|
|
112
|
+
if (digits.length > 0) result += digits.slice(0, 2);
|
|
113
|
+
if (digits.length >= 2) result += ":";
|
|
114
|
+
if (digits.length > 2) result += digits.slice(2, 4);
|
|
115
|
+
if (v.toUpperCase().includes("A")) result += " AM";
|
|
116
|
+
else if (v.toUpperCase().includes("P")) result += " PM";
|
|
117
|
+
else if (digits.length === 4) result += " ";
|
|
118
|
+
return result.slice(0, 8);
|
|
119
|
+
}
|
|
120
|
+
function formatForDisplay(date) {
|
|
121
|
+
if (!date) return "";
|
|
122
|
+
return dayjs(date).format("DD-MM-YYYY");
|
|
123
|
+
}
|
|
124
|
+
function validateDateString(raw) {
|
|
125
|
+
const regex = /^(0[1-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
|
|
126
|
+
if (!regex.test(raw)) return false;
|
|
127
|
+
const [d, m, y] = raw.split("-").map(Number);
|
|
128
|
+
const date = new Date(y, m - 1, d);
|
|
129
|
+
return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d;
|
|
130
|
+
}
|
|
131
|
+
function validateTimeString(raw) {
|
|
132
|
+
const regex = /^(0[1-9]|1[0-2]):(0[0-9]|[1-5][0-9])\s(AM|PM)$/i;
|
|
133
|
+
return regex.test(raw);
|
|
134
|
+
}
|
|
135
|
+
function parseDateInput(raw) {
|
|
136
|
+
if (!validateDateString(raw)) return null;
|
|
137
|
+
return dayjs(raw, "DD-MM-YYYY", true).toDate();
|
|
138
|
+
}
|
|
139
|
+
function parseTimeInput(raw) {
|
|
140
|
+
if (!validateTimeString(raw)) return null;
|
|
141
|
+
const match = raw.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
|
|
142
|
+
if (!match) return null;
|
|
143
|
+
return {
|
|
144
|
+
hour: match[1].padStart(2, "0"),
|
|
145
|
+
minute: match[2].padStart(2, "0"),
|
|
146
|
+
period: match[3].toUpperCase()
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
function formatTime(t) {
|
|
150
|
+
return `${t.hour}:${t.minute} ${t.period}`;
|
|
151
|
+
}
|
|
152
|
+
var DateTimeInputGroup = memo(function DateTimeInputGroup2({
|
|
153
|
+
label,
|
|
154
|
+
dateValue,
|
|
155
|
+
timeValue,
|
|
156
|
+
dateError,
|
|
157
|
+
timeError,
|
|
158
|
+
onDateChange,
|
|
159
|
+
onTimeChange
|
|
160
|
+
}) {
|
|
161
|
+
const [isDateFocused, setIsDateFocused] = useState(false);
|
|
162
|
+
const [isTimeFocused, setIsTimeFocused] = useState(false);
|
|
163
|
+
const showDateError = dateError && !isDateFocused;
|
|
164
|
+
const showTimeError = timeError && !isTimeFocused && !showDateError;
|
|
165
|
+
return /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.headerGroup, children: [
|
|
166
|
+
/* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: label }),
|
|
167
|
+
/* @__PURE__ */ jsx("div", { className: AdvancedDateRangePicker_module_default.dateTimeColumn, children: /* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.dateTimeGroup, children: [
|
|
168
|
+
/* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.inputWrapper, children: [
|
|
169
|
+
/* @__PURE__ */ jsx(
|
|
170
|
+
"input",
|
|
171
|
+
{
|
|
172
|
+
type: "text",
|
|
173
|
+
placeholder: "DD-MM-YYYY",
|
|
174
|
+
value: dateValue,
|
|
175
|
+
onFocus: () => setIsDateFocused(true),
|
|
176
|
+
onBlur: () => setIsDateFocused(false),
|
|
177
|
+
onChange: (e) => onDateChange(e.target.value),
|
|
178
|
+
className: clsx(AdvancedDateRangePicker_module_default.dateInput, { [AdvancedDateRangePicker_module_default.inputError]: showDateError })
|
|
179
|
+
}
|
|
180
|
+
),
|
|
181
|
+
showDateError && /* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid date" })
|
|
182
|
+
] }),
|
|
183
|
+
/* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.inputWrapper, children: [
|
|
184
|
+
/* @__PURE__ */ jsx(
|
|
185
|
+
"input",
|
|
186
|
+
{
|
|
187
|
+
type: "text",
|
|
188
|
+
placeholder: "12:00 PM",
|
|
189
|
+
value: timeValue,
|
|
190
|
+
onFocus: () => setIsTimeFocused(true),
|
|
191
|
+
onBlur: () => setIsTimeFocused(false),
|
|
192
|
+
onChange: (e) => onTimeChange(e.target.value),
|
|
193
|
+
className: clsx(AdvancedDateRangePicker_module_default.timeInput, { [AdvancedDateRangePicker_module_default.inputError]: showTimeError })
|
|
194
|
+
}
|
|
195
|
+
),
|
|
196
|
+
showTimeError && /* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid time" })
|
|
197
|
+
] })
|
|
198
|
+
] }) })
|
|
199
|
+
] });
|
|
200
|
+
});
|
|
201
|
+
function AdvancedDateRangePicker({
|
|
202
|
+
value,
|
|
203
|
+
onChange,
|
|
204
|
+
confirmLabel = "Done",
|
|
205
|
+
className = "",
|
|
206
|
+
disabled = false,
|
|
207
|
+
disablePastDates = false,
|
|
208
|
+
minDate = null,
|
|
209
|
+
maxDate = null,
|
|
210
|
+
showSingleCalendar = false,
|
|
211
|
+
id = "adv-drp",
|
|
212
|
+
defaultTimezone = "UTC",
|
|
213
|
+
isTimezoneDisabled = false,
|
|
214
|
+
timezoneOptions = [],
|
|
215
|
+
defaultPreset = "custom"
|
|
216
|
+
}) {
|
|
217
|
+
var _a, _b, _c;
|
|
218
|
+
const PRESETS = useMemo(() => getPresets(), []);
|
|
219
|
+
const [startDate, setStartDate] = useState((_a = value == null ? void 0 : value.startDate) != null ? _a : null);
|
|
220
|
+
const [endDate, setEndDate] = useState((_b = value == null ? void 0 : value.endDate) != null ? _b : null);
|
|
221
|
+
const [timezone, setTimezone] = useState((_c = value == null ? void 0 : value.timezone) != null ? _c : defaultTimezone);
|
|
222
|
+
const [fromDateStr, setFromDateStr] = useState(formatForDisplay(startDate));
|
|
223
|
+
const [toDateStr, setToDateStr] = useState(formatForDisplay(endDate));
|
|
224
|
+
const [fromTimeStr, setFromTimeStr] = useState(
|
|
225
|
+
(value == null ? void 0 : value.startTime) ? formatTime(value.startTime) : "12:00 PM"
|
|
226
|
+
);
|
|
227
|
+
const [toTimeStr, setToTimeStr] = useState(
|
|
228
|
+
(value == null ? void 0 : value.endTime) ? formatTime(value.endTime) : "12:00 PM"
|
|
229
|
+
);
|
|
230
|
+
const [activePreset, setActivePreset] = useState(defaultPreset);
|
|
231
|
+
const fromDateError = useMemo(() => fromDateStr.length > 0 && (fromDateStr.length < 10 || !validateDateString(fromDateStr)), [fromDateStr]);
|
|
232
|
+
const toDateError = useMemo(() => toDateStr.length > 0 && (toDateStr.length < 10 || !validateDateString(toDateStr)), [toDateStr]);
|
|
233
|
+
const fromTimeError = useMemo(() => fromTimeStr.length > 0 && (fromTimeStr.length < 8 || !validateTimeString(fromTimeStr)), [fromTimeStr]);
|
|
234
|
+
const toTimeError = useMemo(() => toTimeStr.length > 0 && (toTimeStr.length < 8 || !validateTimeString(toTimeStr)), [toTimeStr]);
|
|
235
|
+
const isReady = useMemo(() => {
|
|
236
|
+
return startDate !== null && endDate !== null && validateDateString(fromDateStr) && validateDateString(toDateStr) && validateTimeString(fromTimeStr) && validateTimeString(toTimeStr) && dayjs(startDate).isSameOrBefore(dayjs(endDate), "day");
|
|
237
|
+
}, [startDate, endDate, fromDateStr, toDateStr, fromTimeStr, toTimeStr]);
|
|
238
|
+
useEffect(() => {
|
|
239
|
+
var _a2, _b2, _c2;
|
|
240
|
+
if (value) {
|
|
241
|
+
setStartDate((_a2 = value.startDate) != null ? _a2 : null);
|
|
242
|
+
setEndDate((_b2 = value.endDate) != null ? _b2 : null);
|
|
243
|
+
setTimezone((_c2 = value.timezone) != null ? _c2 : defaultTimezone);
|
|
244
|
+
if (value.startTime) setFromTimeStr(formatTime(value.startTime));
|
|
245
|
+
if (value.endTime) setToTimeStr(formatTime(value.endTime));
|
|
246
|
+
}
|
|
247
|
+
}, [value, defaultTimezone]);
|
|
248
|
+
useEffect(() => {
|
|
249
|
+
setFromDateStr(formatForDisplay(startDate));
|
|
250
|
+
}, [startDate]);
|
|
251
|
+
useEffect(() => {
|
|
252
|
+
setToDateStr(formatForDisplay(endDate));
|
|
253
|
+
}, [endDate]);
|
|
254
|
+
const rangeValue = useMemo(() => [
|
|
255
|
+
startDate ? startDate.toISOString() : "",
|
|
256
|
+
endDate ? endDate.toISOString() : ""
|
|
257
|
+
], [startDate, endDate]);
|
|
258
|
+
const handleRangeChange = useCallback(
|
|
259
|
+
(range) => {
|
|
260
|
+
const [s, e] = range;
|
|
261
|
+
if (s) {
|
|
262
|
+
const sDateByDayjs = dayjs(s, "D MMM, YYYY").toDate();
|
|
263
|
+
setStartDate(sDateByDayjs);
|
|
264
|
+
} else {
|
|
265
|
+
setStartDate(null);
|
|
266
|
+
}
|
|
267
|
+
if (e) {
|
|
268
|
+
const eDateByDayjs = dayjs(e, "D MMM, YYYY").toDate();
|
|
269
|
+
setEndDate(eDateByDayjs);
|
|
270
|
+
} else {
|
|
271
|
+
setEndDate(null);
|
|
272
|
+
}
|
|
273
|
+
setActivePreset("custom");
|
|
274
|
+
},
|
|
275
|
+
[]
|
|
276
|
+
);
|
|
277
|
+
const handlePreset = useCallback(
|
|
278
|
+
(preset) => {
|
|
279
|
+
const [s, e] = preset.getRange();
|
|
280
|
+
setStartDate(s);
|
|
281
|
+
setEndDate(e);
|
|
282
|
+
setActivePreset(preset.key);
|
|
283
|
+
},
|
|
284
|
+
[]
|
|
285
|
+
);
|
|
286
|
+
const handleFromDateChange = useCallback((v) => {
|
|
287
|
+
const masked = applyDateMask(v, fromDateStr);
|
|
288
|
+
setFromDateStr(masked);
|
|
289
|
+
setActivePreset("custom");
|
|
290
|
+
if (masked.length === 10) {
|
|
291
|
+
const parsed = parseDateInput(masked);
|
|
292
|
+
if (parsed) {
|
|
293
|
+
setStartDate(parsed);
|
|
294
|
+
if (endDate && dayjs(parsed).isAfter(dayjs(endDate), "day")) {
|
|
295
|
+
setEndDate(null);
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
}, [fromDateStr, endDate]);
|
|
300
|
+
const handleToDateChange = useCallback((v) => {
|
|
301
|
+
const masked = applyDateMask(v, toDateStr);
|
|
302
|
+
setToDateStr(masked);
|
|
303
|
+
setActivePreset("custom");
|
|
304
|
+
if (masked.length === 10) {
|
|
305
|
+
const parsed = parseDateInput(masked);
|
|
306
|
+
if (parsed) {
|
|
307
|
+
setEndDate(parsed);
|
|
308
|
+
if (startDate && dayjs(parsed).isBefore(dayjs(startDate), "day")) {
|
|
309
|
+
setStartDate(null);
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
}, [toDateStr, startDate]);
|
|
314
|
+
const handleFromTimeChange = useCallback((v) => {
|
|
315
|
+
const masked = applyTimeMask(v, fromTimeStr);
|
|
316
|
+
setFromTimeStr(masked);
|
|
317
|
+
setActivePreset("custom");
|
|
318
|
+
}, [fromTimeStr]);
|
|
319
|
+
const handleToTimeChange = useCallback((v) => {
|
|
320
|
+
const masked = applyTimeMask(v, toTimeStr);
|
|
321
|
+
setToTimeStr(masked);
|
|
322
|
+
setActivePreset("custom");
|
|
323
|
+
}, [toTimeStr]);
|
|
324
|
+
const handleDone = useCallback(() => {
|
|
325
|
+
var _a2, _b2;
|
|
326
|
+
if (!isReady) return;
|
|
327
|
+
const fromTime = (_a2 = parseTimeInput(fromTimeStr)) != null ? _a2 : DEFAULT_TIME;
|
|
328
|
+
const toTime = (_b2 = parseTimeInput(toTimeStr)) != null ? _b2 : DEFAULT_TIME;
|
|
329
|
+
onChange == null ? void 0 : onChange({
|
|
330
|
+
startDate,
|
|
331
|
+
endDate,
|
|
332
|
+
startTime: fromTime,
|
|
333
|
+
endTime: toTime,
|
|
334
|
+
timezone
|
|
335
|
+
});
|
|
336
|
+
}, [isReady, onChange, startDate, endDate, fromTimeStr, toTimeStr, timezone]);
|
|
337
|
+
return /* @__PURE__ */ jsxs("div", { className: clsx(AdvancedDateRangePicker_module_default.root, className), id, children: [
|
|
338
|
+
/* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.inner, children: [
|
|
339
|
+
/* @__PURE__ */ jsx("aside", { className: AdvancedDateRangePicker_module_default.left, children: PRESETS.map((p) => /* @__PURE__ */ jsx(
|
|
340
|
+
"button",
|
|
341
|
+
{
|
|
342
|
+
type: "button",
|
|
343
|
+
onClick: () => handlePreset(p),
|
|
344
|
+
className: clsx(AdvancedDateRangePicker_module_default.sidebarItem, {
|
|
345
|
+
[AdvancedDateRangePicker_module_default.sidebarItemActive]: activePreset === p.key
|
|
346
|
+
}),
|
|
347
|
+
children: p.label
|
|
348
|
+
},
|
|
349
|
+
p.key
|
|
350
|
+
)) }),
|
|
351
|
+
/* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.main, children: [
|
|
352
|
+
/* @__PURE__ */ jsxs("header", { className: AdvancedDateRangePicker_module_default.header, children: [
|
|
353
|
+
/* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.timezoneWrapper, children: [
|
|
354
|
+
/* @__PURE__ */ jsx("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: "Timezone" }),
|
|
355
|
+
isTimezoneDisabled ? (
|
|
356
|
+
/* Disabled state: plain text badge instead of empty dropdown */
|
|
357
|
+
/* @__PURE__ */ jsx("div", { className: AdvancedDateRangePicker_module_default.timezoneDisabledBadge, children: timezone })
|
|
358
|
+
) : /* @__PURE__ */ jsx(
|
|
359
|
+
"select",
|
|
360
|
+
{
|
|
361
|
+
value: timezone,
|
|
362
|
+
onChange: (e) => setTimezone(e.target.value),
|
|
363
|
+
className: AdvancedDateRangePicker_module_default.timezoneSelect,
|
|
364
|
+
children: timezoneOptions.map((tz) => /* @__PURE__ */ jsx("option", { value: tz.value, children: tz.label }, tz.value))
|
|
365
|
+
}
|
|
366
|
+
)
|
|
367
|
+
] }),
|
|
368
|
+
/* @__PURE__ */ jsxs("div", { className: AdvancedDateRangePicker_module_default.dateTimeWrapper, children: [
|
|
369
|
+
/* @__PURE__ */ jsx(
|
|
370
|
+
DateTimeInputGroup,
|
|
371
|
+
{
|
|
372
|
+
label: "From",
|
|
373
|
+
dateValue: fromDateStr,
|
|
374
|
+
timeValue: fromTimeStr,
|
|
375
|
+
dateError: fromDateError,
|
|
376
|
+
timeError: fromTimeError,
|
|
377
|
+
onDateChange: handleFromDateChange,
|
|
378
|
+
onTimeChange: handleFromTimeChange
|
|
379
|
+
}
|
|
380
|
+
),
|
|
381
|
+
/* @__PURE__ */ jsx("div", { className: AdvancedDateRangePicker_module_default.headerSeparator }),
|
|
382
|
+
/* @__PURE__ */ jsx(
|
|
383
|
+
DateTimeInputGroup,
|
|
384
|
+
{
|
|
385
|
+
label: "To",
|
|
386
|
+
dateValue: toDateStr,
|
|
387
|
+
timeValue: toTimeStr,
|
|
388
|
+
dateError: toDateError,
|
|
389
|
+
timeError: toTimeError,
|
|
390
|
+
onDateChange: handleToDateChange,
|
|
391
|
+
onTimeChange: handleToTimeChange
|
|
392
|
+
}
|
|
393
|
+
)
|
|
394
|
+
] })
|
|
395
|
+
] }),
|
|
396
|
+
/* @__PURE__ */ jsx("div", { className: AdvancedDateRangePicker_module_default.body, children: /* @__PURE__ */ jsx(
|
|
397
|
+
InternalCalendar_default,
|
|
398
|
+
{
|
|
399
|
+
id: `${id}-calendar`,
|
|
400
|
+
dateRange: rangeValue,
|
|
401
|
+
onChange: handleRangeChange,
|
|
402
|
+
disablePastDates,
|
|
403
|
+
minDate,
|
|
404
|
+
maxDate,
|
|
405
|
+
showSingleCalendar
|
|
406
|
+
}
|
|
407
|
+
) })
|
|
408
|
+
] })
|
|
409
|
+
] }),
|
|
410
|
+
/* @__PURE__ */ jsx("footer", { className: AdvancedDateRangePicker_module_default.footer, children: /* @__PURE__ */ jsx(
|
|
411
|
+
"button",
|
|
412
|
+
{
|
|
413
|
+
type: "button",
|
|
414
|
+
onClick: handleDone,
|
|
415
|
+
disabled: disabled || !isReady,
|
|
416
|
+
className: AdvancedDateRangePicker_module_default.doneBtn,
|
|
417
|
+
children: confirmLabel
|
|
418
|
+
}
|
|
419
|
+
) })
|
|
420
|
+
] });
|
|
421
|
+
}
|
|
422
|
+
AdvancedDateRangePicker.displayName = "AdvancedDateRangePicker";
|
|
423
|
+
var AdvancedDateRangePicker_default = AdvancedDateRangePicker;
|
|
424
|
+
|
|
425
|
+
export {
|
|
426
|
+
AdvancedDateRangePicker,
|
|
427
|
+
AdvancedDateRangePicker_default
|
|
428
|
+
};
|