@itilite/lumina-ui 1.0.1-beta.4 → 1.0.2-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-ozItnkhp.d.mts +57 -0
- package/dist/AdvancedDateRangePicker-ozItnkhp.d.ts +57 -0
- package/dist/Table-BOq-_9Nr.d.mts +121 -0
- package/dist/Table-BOq-_9Nr.d.ts +121 -0
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.d.mts +2 -0
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.d.ts +2 -0
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.js +791 -0
- package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.mjs +11 -0
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.d.mts +17 -0
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.d.ts +17 -0
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.js +370 -0
- package/dist/atom/AdvancedDateRangePicker/InternalCalendar.mjs +8 -0
- package/dist/{Avatar.d.mts → atom/Avatar/Avatar.d.mts} +1 -9
- package/dist/{Avatar.d.ts → atom/Avatar/Avatar.d.ts} +1 -9
- package/dist/{Avatar.js → atom/Avatar/Avatar.js} +4 -2
- package/dist/{Avatar.mjs → atom/Avatar/Avatar.mjs} +2 -2
- package/dist/{Button.js → atom/Button/Button.js} +1 -1
- package/dist/{Button.mjs → atom/Button/Button.mjs} +2 -2
- package/dist/{Checkbox.mjs → atom/Checkbox/Checkbox.mjs} +2 -2
- package/dist/atom/LoadingSpinner/LoadingSpinner.d.mts +19 -0
- package/dist/atom/LoadingSpinner/LoadingSpinner.d.ts +19 -0
- package/dist/atom/LoadingSpinner/LoadingSpinner.js +90 -0
- package/dist/atom/LoadingSpinner/LoadingSpinner.mjs +9 -0
- package/dist/{Modal.d.mts → atom/Modal/Modal.d.mts} +1 -1
- package/dist/{Modal.d.ts → atom/Modal/Modal.d.ts} +1 -1
- package/dist/{Modal.js → atom/Modal/Modal.js} +1 -1
- package/dist/atom/Modal/Modal.mjs +10 -0
- package/dist/{Radio.mjs → atom/Radio/Radio.mjs} +2 -2
- package/dist/atom/RangePicker/Chevron.d.mts +13 -0
- package/dist/atom/RangePicker/Chevron.d.ts +13 -0
- package/dist/atom/RangePicker/Chevron.js +110 -0
- package/dist/atom/RangePicker/Chevron.mjs +7 -0
- package/dist/atom/RangePicker/RangePicker.d.mts +26 -0
- package/dist/atom/RangePicker/RangePicker.d.ts +26 -0
- package/dist/atom/RangePicker/RangePicker.js +1465 -0
- package/dist/atom/RangePicker/RangePicker.mjs +13 -0
- package/dist/atom/Select/Select.d.mts +40 -0
- package/dist/atom/Select/Select.d.ts +40 -0
- package/dist/atom/Select/Select.js +805 -0
- package/dist/atom/Select/Select.mjs +11 -0
- package/dist/atom/Slider/Slider.d.mts +34 -0
- package/dist/atom/Slider/Slider.d.ts +34 -0
- package/dist/atom/Slider/Slider.js +107 -0
- package/dist/atom/Slider/Slider.mjs +9 -0
- package/dist/{Switch.mjs → atom/Switch/Switch.mjs} +2 -2
- package/dist/atom/Table/Table.d.mts +3 -0
- package/dist/atom/Table/Table.d.ts +3 -0
- package/dist/atom/Table/Table.js +306 -0
- package/dist/atom/Table/Table.mjs +9 -0
- package/dist/atom/Tag/Tag.d.mts +6 -0
- package/dist/atom/Tag/Tag.d.ts +6 -0
- package/dist/atom/Tag/Tag.js +108 -0
- package/dist/atom/Tag/Tag.mjs +9 -0
- package/dist/{Tooltip.mjs → atom/Tooltip/Tooltip.mjs} +2 -2
- package/dist/chunk-4JX54OKI.mjs +627 -0
- package/dist/chunk-4VZB2KR2.mjs +51 -0
- package/dist/chunk-53O7JM5I.mjs +424 -0
- package/dist/{chunk-HISCHZ5H.mjs → chunk-AF2RKLH6.mjs} +1 -1
- package/dist/chunk-D3N7VFER.mjs +73 -0
- package/dist/chunk-GU5F7Z7I.mjs +681 -0
- package/dist/{chunk-X76GNSBB.mjs → chunk-IWO2Y5QX.mjs} +4 -2
- package/dist/chunk-J4YYP4IZ.mjs +0 -0
- package/dist/chunk-N2WTNCQU.mjs +66 -0
- package/dist/chunk-N4DPPZVJ.mjs +269 -0
- package/dist/chunk-PQ3B2FEB.mjs +249 -0
- package/dist/chunk-QKTMWS4J.mjs +43 -0
- package/dist/{chunk-N355RJGH.mjs → chunk-UQJ3BDM4.mjs} +1 -1
- package/dist/chunk-V3CHJHUX.mjs +424 -0
- package/dist/chunk-ZTRM4HZJ.mjs +53 -0
- package/dist/index.d.mts +18 -7
- package/dist/index.d.ts +18 -7
- package/dist/index.js +2461 -8
- package/dist/index.mjs +46 -12
- package/dist/molecules/UserProfile/UserProfile.d.mts +23 -0
- package/dist/molecules/UserProfile/UserProfile.d.ts +23 -0
- package/dist/molecules/UserProfile/UserProfile.js +243 -0
- package/dist/molecules/UserProfile/UserProfile.mjs +11 -0
- package/dist/styles.css +1795 -146
- package/dist/types-D4MD2w3_.d.mts +9 -0
- package/dist/types-D4MD2w3_.d.ts +9 -0
- package/dist/types-mhQmqhsR.d.mts +10 -0
- package/dist/types-mhQmqhsR.d.ts +10 -0
- package/package.json +8 -36
- package/dist/Modal.mjs +0 -10
- /package/dist/{Button.d.mts → atom/Button/Button.d.mts} +0 -0
- /package/dist/{Button.d.ts → atom/Button/Button.d.ts} +0 -0
- /package/dist/{Checkbox.d.mts → atom/Checkbox/Checkbox.d.mts} +0 -0
- /package/dist/{Checkbox.d.ts → atom/Checkbox/Checkbox.d.ts} +0 -0
- /package/dist/{Checkbox.js → atom/Checkbox/Checkbox.js} +0 -0
- /package/dist/{Radio.d.mts → atom/Radio/Radio.d.mts} +0 -0
- /package/dist/{Radio.d.ts → atom/Radio/Radio.d.ts} +0 -0
- /package/dist/{Radio.js → atom/Radio/Radio.js} +0 -0
- /package/dist/{Switch.d.mts → atom/Switch/Switch.d.mts} +0 -0
- /package/dist/{Switch.d.ts → atom/Switch/Switch.d.ts} +0 -0
- /package/dist/{Switch.js → atom/Switch/Switch.js} +0 -0
- /package/dist/{Tooltip.d.mts → atom/Tooltip/Tooltip.d.mts} +0 -0
- /package/dist/{Tooltip.d.ts → atom/Tooltip/Tooltip.d.ts} +0 -0
- /package/dist/{Tooltip.js → atom/Tooltip/Tooltip.js} +0 -0
|
@@ -0,0 +1,791 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(from))
|
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return to;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
|
|
59
|
+
// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
|
|
60
|
+
var AdvancedDateRangePicker_exports = {};
|
|
61
|
+
__export(AdvancedDateRangePicker_exports, {
|
|
62
|
+
AdvancedDateRangePicker: () => AdvancedDateRangePicker,
|
|
63
|
+
default: () => AdvancedDateRangePicker_default
|
|
64
|
+
});
|
|
65
|
+
module.exports = __toCommonJS(AdvancedDateRangePicker_exports);
|
|
66
|
+
var import_react2 = require("react");
|
|
67
|
+
var import_clsx = __toESM(require("clsx"));
|
|
68
|
+
var import_dayjs2 = __toESM(require("dayjs"));
|
|
69
|
+
var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
|
|
70
|
+
var import_isSameOrBefore = __toESM(require("dayjs/plugin/isSameOrBefore.js"));
|
|
71
|
+
|
|
72
|
+
// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.module.scss
|
|
73
|
+
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", "headerGroup": "AdvancedDateRangePicker-module__headerGroup___J7mJB", "headerLabel": "AdvancedDateRangePicker-module__headerLabel___Yvhkr", "timezoneWrapper": "AdvancedDateRangePicker-module__timezoneWrapper___886Qm", "dateTimeWrapper": "AdvancedDateRangePicker-module__dateTimeWrapper___unDQJ", "headerSeparator": "AdvancedDateRangePicker-module__headerSeparator___Vwx6P", "timezoneSelect": "AdvancedDateRangePicker-module__timezoneSelect___f4oln", "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" };
|
|
74
|
+
|
|
75
|
+
// src/atom/AdvancedDateRangePicker/InternalCalendar.tsx
|
|
76
|
+
var import_react = require("react");
|
|
77
|
+
var import_dayjs = __toESM(require("dayjs"));
|
|
78
|
+
|
|
79
|
+
// src/atom/RangePicker/Chevron.tsx
|
|
80
|
+
var React = __toESM(require("react"));
|
|
81
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
82
|
+
var Chevron = React.memo(
|
|
83
|
+
(_a) => {
|
|
84
|
+
var _b = _a, { size = "normal", color = "black", className } = _b, rest = __objRest(_b, ["size", "color", "className"]);
|
|
85
|
+
const getSize = (size2) => {
|
|
86
|
+
switch (size2) {
|
|
87
|
+
case "small":
|
|
88
|
+
return "M9.78 11.78a.75.75 0 000-1.06L7.06 8l2.72-2.72a.75.75 0 00-1.06-1.06L5.47 7.47a.75.75 0 000 1.06l3.25 3.25a.75.75 0 001.06 0z";
|
|
89
|
+
case "normal":
|
|
90
|
+
return "M14.78 17.78a.75.75 0 000-1.06L10.06 12l4.72-4.72a.75.75 0 00-1.06-1.06l-5.25 5.25a.75.75 0 000 1.06l5.25 5.25a.75.75 0 001.06 0z";
|
|
91
|
+
default:
|
|
92
|
+
return "M14.78 17.78a.75.75 0 000-1.06L10.06 12l4.72-4.72a.75.75 0 00-1.06-1.06l-5.25 5.25a.75.75 0 000 1.06l5.25 5.25a.75.75 0 001.06 0z";
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
const getContainer = (size2) => {
|
|
96
|
+
switch (size2) {
|
|
97
|
+
case "small":
|
|
98
|
+
return 16;
|
|
99
|
+
case "medium":
|
|
100
|
+
return 20;
|
|
101
|
+
case "normal":
|
|
102
|
+
return 24;
|
|
103
|
+
default:
|
|
104
|
+
return 24;
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
|
+
"svg",
|
|
109
|
+
__spreadProps(__spreadValues({
|
|
110
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
111
|
+
width: getContainer(size),
|
|
112
|
+
height: getContainer(size),
|
|
113
|
+
fill: "none",
|
|
114
|
+
viewBox: `0 0 ${getContainer(size)} ${getContainer(size)}`,
|
|
115
|
+
className
|
|
116
|
+
}, rest), {
|
|
117
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: color, d: getSize(size) })
|
|
118
|
+
})
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
// src/atom/AdvancedDateRangePicker/InternalCalendar.tsx
|
|
124
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
125
|
+
var InternalCalendar = ({
|
|
126
|
+
id = "",
|
|
127
|
+
onChange = () => {
|
|
128
|
+
},
|
|
129
|
+
dateRange = ["", ""],
|
|
130
|
+
showSingleCalendar: showSingleCalendarProp = false,
|
|
131
|
+
disablePastDates = false,
|
|
132
|
+
minDate = null,
|
|
133
|
+
maxDate = null,
|
|
134
|
+
minYear = 1900,
|
|
135
|
+
maxYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
|
|
136
|
+
allowSameDates = false
|
|
137
|
+
}) => {
|
|
138
|
+
const onChangeRef = (0, import_react.useRef)(onChange);
|
|
139
|
+
(0, import_react.useEffect)(() => {
|
|
140
|
+
onChangeRef.current = onChange;
|
|
141
|
+
}, [onChange]);
|
|
142
|
+
const getInitialDate = () => {
|
|
143
|
+
const today2 = /* @__PURE__ */ new Date();
|
|
144
|
+
today2.setHours(0, 0, 0, 0);
|
|
145
|
+
if (dateRange[0]) return new Date(dateRange[0]);
|
|
146
|
+
if (today2.getFullYear() >= minYear && today2.getFullYear() <= maxYear) {
|
|
147
|
+
return today2;
|
|
148
|
+
}
|
|
149
|
+
if (minDate) {
|
|
150
|
+
const minDateTime = new Date(minDate);
|
|
151
|
+
minDateTime.setHours(0, 0, 0, 0);
|
|
152
|
+
return minDateTime;
|
|
153
|
+
}
|
|
154
|
+
return today2;
|
|
155
|
+
};
|
|
156
|
+
const [currentDate, setCurrentDate] = (0, import_react.useState)(() => getInitialDate());
|
|
157
|
+
const [startDate, setStartDate] = (0, import_react.useState)(
|
|
158
|
+
dateRange[0] ? new Date(dateRange[0]) : null
|
|
159
|
+
);
|
|
160
|
+
const [endDate, setEndDate] = (0, import_react.useState)(
|
|
161
|
+
dateRange[0] && dateRange[1] ? new Date(dateRange[1]) : null
|
|
162
|
+
);
|
|
163
|
+
const [hoverDate, setHoverDate] = (0, import_react.useState)(null);
|
|
164
|
+
const [isSelectingEnd, setIsSelectingEnd] = (0, import_react.useState)(
|
|
165
|
+
dateRange[0] && !dateRange[1] ? true : false
|
|
166
|
+
);
|
|
167
|
+
const [isMobile, setIsMobile] = (0, import_react.useState)(false);
|
|
168
|
+
(0, import_react.useEffect)(() => {
|
|
169
|
+
const checkMobile = () => {
|
|
170
|
+
setIsMobile(window.innerWidth < 1024);
|
|
171
|
+
};
|
|
172
|
+
checkMobile();
|
|
173
|
+
window.addEventListener("resize", checkMobile);
|
|
174
|
+
return () => window.removeEventListener("resize", checkMobile);
|
|
175
|
+
}, []);
|
|
176
|
+
const showSingle = showSingleCalendarProp || isMobile;
|
|
177
|
+
const prevRangeRef = (0, import_react.useRef)(dateRange);
|
|
178
|
+
(0, import_react.useEffect)(() => {
|
|
179
|
+
const isSameRange = dateRange[0] === prevRangeRef.current[0] && dateRange[1] === prevRangeRef.current[1];
|
|
180
|
+
if (isSameRange) return;
|
|
181
|
+
prevRangeRef.current = dateRange;
|
|
182
|
+
const nextStart = dateRange[0] ? new Date(dateRange[0]) : null;
|
|
183
|
+
const nextEnd = dateRange[1] ? new Date(dateRange[1]) : null;
|
|
184
|
+
setStartDate(nextStart);
|
|
185
|
+
setEndDate(nextEnd);
|
|
186
|
+
if (nextStart) {
|
|
187
|
+
const startMonth = nextStart.getFullYear() * 12 + nextStart.getMonth();
|
|
188
|
+
const currentMonthVal = currentDate.getFullYear() * 12 + currentDate.getMonth();
|
|
189
|
+
const isVisibleInFirst = startMonth === currentMonthVal;
|
|
190
|
+
const isVisibleInSecond = !showSingle && startMonth === currentMonthVal + 1;
|
|
191
|
+
if (!isVisibleInFirst && !isVisibleInSecond) {
|
|
192
|
+
setCurrentDate(new Date(nextStart.getFullYear(), nextStart.getMonth(), 1));
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}, [dateRange, showSingle]);
|
|
196
|
+
const today = /* @__PURE__ */ new Date();
|
|
197
|
+
today.setHours(0, 0, 0, 0);
|
|
198
|
+
const firstMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
|
|
199
|
+
const secondMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
|
|
200
|
+
const monthNames = [
|
|
201
|
+
"January",
|
|
202
|
+
"February",
|
|
203
|
+
"March",
|
|
204
|
+
"April",
|
|
205
|
+
"May",
|
|
206
|
+
"June",
|
|
207
|
+
"July",
|
|
208
|
+
"August",
|
|
209
|
+
"September",
|
|
210
|
+
"October",
|
|
211
|
+
"November",
|
|
212
|
+
"December"
|
|
213
|
+
];
|
|
214
|
+
const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
215
|
+
const generateCalendarDays = (monthDate) => {
|
|
216
|
+
const year = monthDate.getFullYear();
|
|
217
|
+
const month = monthDate.getMonth();
|
|
218
|
+
const firstDay = new Date(year, month, 1);
|
|
219
|
+
const lastDay = new Date(year, month + 1, 0);
|
|
220
|
+
const daysInMonth = lastDay.getDate();
|
|
221
|
+
const startingDayOfWeek = firstDay.getDay();
|
|
222
|
+
const days = [];
|
|
223
|
+
for (let i = 0; i < startingDayOfWeek; i++) days.push(null);
|
|
224
|
+
for (let day = 1; day <= daysInMonth; day++) days.push(new Date(year, month, day));
|
|
225
|
+
return days;
|
|
226
|
+
};
|
|
227
|
+
const isSameDate = (d1, d2) => {
|
|
228
|
+
if (!d1 || !d2) return false;
|
|
229
|
+
return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
|
|
230
|
+
};
|
|
231
|
+
const isDateDisabled = (date) => {
|
|
232
|
+
if (!date) return false;
|
|
233
|
+
const checkDate = new Date(date);
|
|
234
|
+
checkDate.setHours(0, 0, 0, 0);
|
|
235
|
+
if (disablePastDates && checkDate < today) return true;
|
|
236
|
+
if (minDate) {
|
|
237
|
+
const m = new Date(minDate);
|
|
238
|
+
m.setHours(0, 0, 0, 0);
|
|
239
|
+
if (checkDate < m) return true;
|
|
240
|
+
}
|
|
241
|
+
if (maxDate) {
|
|
242
|
+
const m = new Date(maxDate);
|
|
243
|
+
m.setHours(0, 0, 0, 0);
|
|
244
|
+
if (checkDate > m) return true;
|
|
245
|
+
}
|
|
246
|
+
return false;
|
|
247
|
+
};
|
|
248
|
+
const isDateBetweenRange = (date) => {
|
|
249
|
+
if (!startDate || !date) return false;
|
|
250
|
+
const comp = endDate || hoverDate;
|
|
251
|
+
if (!comp) return false;
|
|
252
|
+
const s = startDate < comp ? startDate : comp;
|
|
253
|
+
const e = startDate < comp ? comp : startDate;
|
|
254
|
+
return date > s && date < e;
|
|
255
|
+
};
|
|
256
|
+
const isDateInRange = (date) => {
|
|
257
|
+
if (!startDate || !date) return false;
|
|
258
|
+
const comp = endDate || hoverDate;
|
|
259
|
+
if (!comp) return false;
|
|
260
|
+
const s = startDate < comp ? startDate : comp;
|
|
261
|
+
const e = startDate < comp ? comp : startDate;
|
|
262
|
+
return date >= s && date <= e;
|
|
263
|
+
};
|
|
264
|
+
const handleDateClick = (date) => {
|
|
265
|
+
if (isDateDisabled(date)) return;
|
|
266
|
+
let nextStart = startDate;
|
|
267
|
+
let nextEnd = endDate;
|
|
268
|
+
const isSame = startDate && (0, import_dayjs.default)(date).isSame(startDate, "day");
|
|
269
|
+
if (!allowSameDates && isSame) {
|
|
270
|
+
setStartDate(null);
|
|
271
|
+
setEndDate(null);
|
|
272
|
+
setIsSelectingEnd(false);
|
|
273
|
+
onChangeRef.current(["", ""]);
|
|
274
|
+
return;
|
|
275
|
+
}
|
|
276
|
+
if (!startDate || startDate && endDate) {
|
|
277
|
+
nextStart = date;
|
|
278
|
+
nextEnd = null;
|
|
279
|
+
setStartDate(nextStart);
|
|
280
|
+
setEndDate(nextEnd);
|
|
281
|
+
setIsSelectingEnd(true);
|
|
282
|
+
} else {
|
|
283
|
+
if (date < startDate) {
|
|
284
|
+
nextEnd = startDate;
|
|
285
|
+
nextStart = date;
|
|
286
|
+
} else {
|
|
287
|
+
nextEnd = date;
|
|
288
|
+
}
|
|
289
|
+
setStartDate(nextStart);
|
|
290
|
+
setEndDate(nextEnd);
|
|
291
|
+
setIsSelectingEnd(false);
|
|
292
|
+
}
|
|
293
|
+
onChangeRef.current([
|
|
294
|
+
nextStart ? (0, import_dayjs.default)(nextStart).format("D MMM, YYYY") : "",
|
|
295
|
+
nextEnd ? (0, import_dayjs.default)(nextEnd).format("D MMM, YYYY") : ""
|
|
296
|
+
]);
|
|
297
|
+
};
|
|
298
|
+
const handleDateHover = (date) => {
|
|
299
|
+
if (isDateDisabled(date)) return;
|
|
300
|
+
if (isSelectingEnd && startDate && !endDate) setHoverDate(date);
|
|
301
|
+
};
|
|
302
|
+
const navigateMonth = (direction) => {
|
|
303
|
+
const newDate = new Date(currentDate);
|
|
304
|
+
newDate.setMonth(currentDate.getMonth() + direction);
|
|
305
|
+
setCurrentDate(newDate);
|
|
306
|
+
};
|
|
307
|
+
const renderCalendar = (monthDate) => {
|
|
308
|
+
const days = generateCalendarDays(monthDate);
|
|
309
|
+
const monthName = monthNames[monthDate.getMonth()];
|
|
310
|
+
const year = monthDate.getFullYear();
|
|
311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tw-flex-1 tw-mb-2", children: [
|
|
312
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-text-center tw-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { className: "tw-typography-footNoteBold tw-text-gray-900 tw-m-0", children: [
|
|
313
|
+
monthName,
|
|
314
|
+
" ",
|
|
315
|
+
year
|
|
316
|
+
] }) }),
|
|
317
|
+
/* @__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)) }),
|
|
318
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
|
|
319
|
+
if (!date) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-h-10" }, index);
|
|
320
|
+
const isStart = isSameDate(date, startDate);
|
|
321
|
+
const isEnd = isSameDate(date, endDate);
|
|
322
|
+
const isInRange = isDateBetweenRange(date);
|
|
323
|
+
const isSelected = isDateInRange(date);
|
|
324
|
+
const isDisabled = isDateDisabled(date);
|
|
325
|
+
const isHovering = isSelectingEnd && hoverDate && isSameDate(date, hoverDate);
|
|
326
|
+
let cellClasses = "tw-relative tw-z-20 tw-h-10 tw-w-10 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold tw-cursor-pointer tw-transition-all ";
|
|
327
|
+
if (isDisabled) {
|
|
328
|
+
cellClasses += "tw-text-gray-300 tw-cursor-not-allowed ";
|
|
329
|
+
} else if (isStart || isEnd) {
|
|
330
|
+
cellClasses += "tw-bg-black tw-text-white tw-rounded-full ";
|
|
331
|
+
} else if (isInRange) {
|
|
332
|
+
cellClasses += "tw-text-gray-900 ";
|
|
333
|
+
} else {
|
|
334
|
+
cellClasses += "tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-full ";
|
|
335
|
+
}
|
|
336
|
+
if (isHovering && !isEnd) {
|
|
337
|
+
cellClasses += "tw-border-2 tw-border-gray-400 tw-border-dashed ";
|
|
338
|
+
}
|
|
339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tw-relative tw-flex tw-justify-center", children: [
|
|
340
|
+
isInRange && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-inset-x-0 tw-bg-[#f2efec] tw-z-10" }),
|
|
341
|
+
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-[#f2efec] tw-z-10" }),
|
|
342
|
+
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-[#f2efec] tw-z-10" }),
|
|
343
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
344
|
+
"div",
|
|
345
|
+
{
|
|
346
|
+
className: cellClasses,
|
|
347
|
+
onClick: () => handleDateClick(date),
|
|
348
|
+
onMouseEnter: () => handleDateHover(date),
|
|
349
|
+
children: date.getDate()
|
|
350
|
+
}
|
|
351
|
+
)
|
|
352
|
+
] }, date.toISOString());
|
|
353
|
+
}) })
|
|
354
|
+
] });
|
|
355
|
+
};
|
|
356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tw-relative tw-bg-white tw-w-full", children: [
|
|
357
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tw-flex tw-items-center tw-justify-between tw-absolute tw-inset-x-0 tw-top-0 tw-z-30 tw-px-4", children: [
|
|
358
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
359
|
+
"div",
|
|
360
|
+
{
|
|
361
|
+
className: "tw-cursor-pointer tw-p-2 tw-rounded-full hover:tw-bg-gray-100",
|
|
362
|
+
onClick: () => navigateMonth(-1),
|
|
363
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chevron, { size: "medium" })
|
|
364
|
+
}
|
|
365
|
+
),
|
|
366
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
367
|
+
"div",
|
|
368
|
+
{
|
|
369
|
+
className: "tw-cursor-pointer tw-p-2 tw-rounded-full hover:tw-bg-gray-100",
|
|
370
|
+
onClick: () => navigateMonth(1),
|
|
371
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chevron, { size: "medium", className: "tw-rotate-180" })
|
|
372
|
+
}
|
|
373
|
+
)
|
|
374
|
+
] }),
|
|
375
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tw-flex tw-gap-8 tw-pt-2", children: [
|
|
376
|
+
renderCalendar(firstMonth),
|
|
377
|
+
!showSingle && renderCalendar(secondMonth)
|
|
378
|
+
] })
|
|
379
|
+
] });
|
|
380
|
+
};
|
|
381
|
+
var InternalCalendar_default = (0, import_react.memo)(InternalCalendar);
|
|
382
|
+
|
|
383
|
+
// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
|
|
384
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
385
|
+
import_dayjs2.default.extend(import_customParseFormat.default);
|
|
386
|
+
import_dayjs2.default.extend(import_isSameOrBefore.default);
|
|
387
|
+
var DEFAULT_TIME = { hour: "12", minute: "00", period: "PM" };
|
|
388
|
+
function getPresets() {
|
|
389
|
+
const today = /* @__PURE__ */ new Date();
|
|
390
|
+
today.setHours(0, 0, 0, 0);
|
|
391
|
+
return [
|
|
392
|
+
{
|
|
393
|
+
label: "Custom",
|
|
394
|
+
key: "custom",
|
|
395
|
+
getRange: () => [null, null]
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
label: "Yesterday",
|
|
399
|
+
key: "yesterday",
|
|
400
|
+
getRange: () => {
|
|
401
|
+
const d = new Date(today);
|
|
402
|
+
d.setDate(d.getDate() - 1);
|
|
403
|
+
return [d, d];
|
|
404
|
+
}
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
label: "Previous week",
|
|
408
|
+
key: "previous-week",
|
|
409
|
+
getRange: () => {
|
|
410
|
+
const dayOfWeek = today.getDay();
|
|
411
|
+
const start = new Date(today);
|
|
412
|
+
start.setDate(today.getDate() - dayOfWeek - 6);
|
|
413
|
+
const end = new Date(today);
|
|
414
|
+
return [start, end];
|
|
415
|
+
}
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
label: "This month",
|
|
419
|
+
key: "this-month",
|
|
420
|
+
getRange: () => {
|
|
421
|
+
const start = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
422
|
+
const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
|
|
423
|
+
return [start, end];
|
|
424
|
+
}
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
label: "Previous month",
|
|
428
|
+
key: "previous-month",
|
|
429
|
+
getRange: () => {
|
|
430
|
+
const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
|
|
431
|
+
const end = new Date(today.getFullYear(), today.getMonth(), 0);
|
|
432
|
+
return [start, end];
|
|
433
|
+
}
|
|
434
|
+
},
|
|
435
|
+
{
|
|
436
|
+
label: "Previous quarter",
|
|
437
|
+
key: "previous-quarter",
|
|
438
|
+
getRange: () => {
|
|
439
|
+
const month = today.getMonth();
|
|
440
|
+
const quarter = Math.floor(month / 3);
|
|
441
|
+
const startMonth = (quarter - 1) * 3;
|
|
442
|
+
const start = new Date(today.getFullYear(), startMonth, 1);
|
|
443
|
+
const end = new Date(today.getFullYear(), startMonth + 3, 0);
|
|
444
|
+
return [start, end];
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
];
|
|
448
|
+
}
|
|
449
|
+
function applyDateMask(v, prev) {
|
|
450
|
+
if (v.length < prev.length) return v;
|
|
451
|
+
const digits = v.replace(/[^\d]/g, "").slice(0, 8);
|
|
452
|
+
if (digits.length >= 2) {
|
|
453
|
+
const d = Number(digits.slice(0, 2));
|
|
454
|
+
if (d < 1 || d > 31) return prev;
|
|
455
|
+
}
|
|
456
|
+
if (digits.length >= 4) {
|
|
457
|
+
const m = Number(digits.slice(2, 4));
|
|
458
|
+
if (m < 1 || m > 12) return prev;
|
|
459
|
+
}
|
|
460
|
+
let result = "";
|
|
461
|
+
if (digits.length > 0) result += digits.slice(0, 2);
|
|
462
|
+
if (digits.length >= 2) result += "-";
|
|
463
|
+
if (digits.length > 2) result += digits.slice(2, 4);
|
|
464
|
+
if (digits.length >= 4) result += "-";
|
|
465
|
+
if (digits.length > 4) result += digits.slice(4, 8);
|
|
466
|
+
return result.slice(0, 10);
|
|
467
|
+
}
|
|
468
|
+
function applyTimeMask(v, prev) {
|
|
469
|
+
if (v.length < prev.length) return v;
|
|
470
|
+
const digits = v.replace(/[^\d]/g, "").slice(0, 4);
|
|
471
|
+
if (digits.length >= 2) {
|
|
472
|
+
const h = Number(digits.slice(0, 2));
|
|
473
|
+
if (h < 1 || h > 12) return prev;
|
|
474
|
+
}
|
|
475
|
+
if (digits.length >= 4) {
|
|
476
|
+
const m = Number(digits.slice(2, 4));
|
|
477
|
+
if (m > 59) return prev;
|
|
478
|
+
}
|
|
479
|
+
let result = "";
|
|
480
|
+
if (digits.length > 0) result += digits.slice(0, 2);
|
|
481
|
+
if (digits.length >= 2) result += ":";
|
|
482
|
+
if (digits.length > 2) result += digits.slice(2, 4);
|
|
483
|
+
if (v.toUpperCase().includes("A")) result += " AM";
|
|
484
|
+
else if (v.toUpperCase().includes("P")) result += " PM";
|
|
485
|
+
else if (digits.length === 4) result += " ";
|
|
486
|
+
return result.slice(0, 8);
|
|
487
|
+
}
|
|
488
|
+
function formatForDisplay(date) {
|
|
489
|
+
if (!date) return "";
|
|
490
|
+
return (0, import_dayjs2.default)(date).format("DD-MM-YYYY");
|
|
491
|
+
}
|
|
492
|
+
function validateDateString(raw) {
|
|
493
|
+
const regex = /^(0[1-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
|
|
494
|
+
if (!regex.test(raw)) return false;
|
|
495
|
+
const [d, m, y] = raw.split("-").map(Number);
|
|
496
|
+
const date = new Date(y, m - 1, d);
|
|
497
|
+
return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d;
|
|
498
|
+
}
|
|
499
|
+
function validateTimeString(raw) {
|
|
500
|
+
const regex = /^(0[1-9]|1[0-2]):(0[0-9]|[1-5][0-9])\s(AM|PM)$/i;
|
|
501
|
+
return regex.test(raw);
|
|
502
|
+
}
|
|
503
|
+
function parseDateInput(raw) {
|
|
504
|
+
if (!validateDateString(raw)) return null;
|
|
505
|
+
return (0, import_dayjs2.default)(raw, "DD-MM-YYYY", true).toDate();
|
|
506
|
+
}
|
|
507
|
+
function parseTimeInput(raw) {
|
|
508
|
+
if (!validateTimeString(raw)) return null;
|
|
509
|
+
const match = raw.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
|
|
510
|
+
if (!match) return null;
|
|
511
|
+
return {
|
|
512
|
+
hour: match[1].padStart(2, "0"),
|
|
513
|
+
minute: match[2].padStart(2, "0"),
|
|
514
|
+
period: match[3].toUpperCase()
|
|
515
|
+
};
|
|
516
|
+
}
|
|
517
|
+
function formatTime(t) {
|
|
518
|
+
return `${t.hour}:${t.minute} ${t.period}`;
|
|
519
|
+
}
|
|
520
|
+
var DateTimeInputGroup = (0, import_react2.memo)(function DateTimeInputGroup2({
|
|
521
|
+
label,
|
|
522
|
+
dateValue,
|
|
523
|
+
timeValue,
|
|
524
|
+
dateError,
|
|
525
|
+
timeError,
|
|
526
|
+
onDateChange,
|
|
527
|
+
onTimeChange
|
|
528
|
+
}) {
|
|
529
|
+
const [isDateFocused, setIsDateFocused] = (0, import_react2.useState)(false);
|
|
530
|
+
const [isTimeFocused, setIsTimeFocused] = (0, import_react2.useState)(false);
|
|
531
|
+
const showDateError = dateError && !isDateFocused;
|
|
532
|
+
const showTimeError = timeError && !isTimeFocused && !showDateError;
|
|
533
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.headerGroup, children: [
|
|
534
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: label }),
|
|
535
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeColumn, children: [
|
|
536
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeGroup, children: [
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
538
|
+
"input",
|
|
539
|
+
{
|
|
540
|
+
type: "text",
|
|
541
|
+
placeholder: "DD-MM-YYYY",
|
|
542
|
+
value: dateValue,
|
|
543
|
+
onFocus: () => setIsDateFocused(true),
|
|
544
|
+
onBlur: () => setIsDateFocused(false),
|
|
545
|
+
onChange: (e) => onDateChange(e.target.value),
|
|
546
|
+
className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.dateInput, { [AdvancedDateRangePicker_module_default.inputError]: showDateError })
|
|
547
|
+
}
|
|
548
|
+
),
|
|
549
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
550
|
+
"input",
|
|
551
|
+
{
|
|
552
|
+
type: "text",
|
|
553
|
+
placeholder: "12:00 PM",
|
|
554
|
+
value: timeValue,
|
|
555
|
+
onFocus: () => setIsTimeFocused(true),
|
|
556
|
+
onBlur: () => setIsTimeFocused(false),
|
|
557
|
+
onChange: (e) => onTimeChange(e.target.value),
|
|
558
|
+
className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.timeInput, { [AdvancedDateRangePicker_module_default.inputError]: showTimeError })
|
|
559
|
+
}
|
|
560
|
+
)
|
|
561
|
+
] }),
|
|
562
|
+
showDateError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid date" }),
|
|
563
|
+
showTimeError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid time" })
|
|
564
|
+
] })
|
|
565
|
+
] });
|
|
566
|
+
});
|
|
567
|
+
function AdvancedDateRangePicker({
|
|
568
|
+
value,
|
|
569
|
+
onChange,
|
|
570
|
+
confirmLabel = "Done",
|
|
571
|
+
className = "",
|
|
572
|
+
disabled = false,
|
|
573
|
+
disablePastDates = false,
|
|
574
|
+
minDate = null,
|
|
575
|
+
maxDate = null,
|
|
576
|
+
showSingleCalendar = false,
|
|
577
|
+
id = "adv-drp",
|
|
578
|
+
defaultTimezone = "UTC",
|
|
579
|
+
isTimezoneDisabled = false,
|
|
580
|
+
timezoneOptions = []
|
|
581
|
+
}) {
|
|
582
|
+
var _a, _b, _c;
|
|
583
|
+
const PRESETS = (0, import_react2.useMemo)(() => getPresets(), []);
|
|
584
|
+
const [startDate, setStartDate] = (0, import_react2.useState)((_a = value == null ? void 0 : value.startDate) != null ? _a : null);
|
|
585
|
+
const [endDate, setEndDate] = (0, import_react2.useState)((_b = value == null ? void 0 : value.endDate) != null ? _b : null);
|
|
586
|
+
const [timezone, setTimezone] = (0, import_react2.useState)((_c = value == null ? void 0 : value.timezone) != null ? _c : defaultTimezone);
|
|
587
|
+
const [fromDateStr, setFromDateStr] = (0, import_react2.useState)(formatForDisplay(startDate));
|
|
588
|
+
const [toDateStr, setToDateStr] = (0, import_react2.useState)(formatForDisplay(endDate));
|
|
589
|
+
const [fromTimeStr, setFromTimeStr] = (0, import_react2.useState)(
|
|
590
|
+
(value == null ? void 0 : value.startTime) ? formatTime(value.startTime) : "12:00 PM"
|
|
591
|
+
);
|
|
592
|
+
const [toTimeStr, setToTimeStr] = (0, import_react2.useState)(
|
|
593
|
+
(value == null ? void 0 : value.endTime) ? formatTime(value.endTime) : "12:00 PM"
|
|
594
|
+
);
|
|
595
|
+
const [activePreset, setActivePreset] = (0, import_react2.useState)("custom");
|
|
596
|
+
const fromDateError = (0, import_react2.useMemo)(() => fromDateStr.length > 0 && (fromDateStr.length < 10 || !validateDateString(fromDateStr)), [fromDateStr]);
|
|
597
|
+
const toDateError = (0, import_react2.useMemo)(() => toDateStr.length > 0 && (toDateStr.length < 10 || !validateDateString(toDateStr)), [toDateStr]);
|
|
598
|
+
const fromTimeError = (0, import_react2.useMemo)(() => fromTimeStr.length > 0 && (fromTimeStr.length < 8 || !validateTimeString(fromTimeStr)), [fromTimeStr]);
|
|
599
|
+
const toTimeError = (0, import_react2.useMemo)(() => toTimeStr.length > 0 && (toTimeStr.length < 8 || !validateTimeString(toTimeStr)), [toTimeStr]);
|
|
600
|
+
const isReady = (0, import_react2.useMemo)(() => {
|
|
601
|
+
return startDate !== null && endDate !== null && validateDateString(fromDateStr) && validateDateString(toDateStr) && validateTimeString(fromTimeStr) && validateTimeString(toTimeStr) && (0, import_dayjs2.default)(startDate).isSameOrBefore((0, import_dayjs2.default)(endDate), "day");
|
|
602
|
+
}, [startDate, endDate, fromDateStr, toDateStr, fromTimeStr, toTimeStr]);
|
|
603
|
+
(0, import_react2.useEffect)(() => {
|
|
604
|
+
var _a2, _b2, _c2;
|
|
605
|
+
if (value) {
|
|
606
|
+
setStartDate((_a2 = value.startDate) != null ? _a2 : null);
|
|
607
|
+
setEndDate((_b2 = value.endDate) != null ? _b2 : null);
|
|
608
|
+
setTimezone((_c2 = value.timezone) != null ? _c2 : defaultTimezone);
|
|
609
|
+
if (value.startTime) setFromTimeStr(formatTime(value.startTime));
|
|
610
|
+
if (value.endTime) setToTimeStr(formatTime(value.endTime));
|
|
611
|
+
}
|
|
612
|
+
}, [value, defaultTimezone]);
|
|
613
|
+
(0, import_react2.useEffect)(() => {
|
|
614
|
+
setFromDateStr(formatForDisplay(startDate));
|
|
615
|
+
}, [startDate]);
|
|
616
|
+
(0, import_react2.useEffect)(() => {
|
|
617
|
+
setToDateStr(formatForDisplay(endDate));
|
|
618
|
+
}, [endDate]);
|
|
619
|
+
const rangeValue = (0, import_react2.useMemo)(() => [
|
|
620
|
+
startDate ? startDate.toISOString() : "",
|
|
621
|
+
endDate ? endDate.toISOString() : ""
|
|
622
|
+
], [startDate, endDate]);
|
|
623
|
+
const handleRangeChange = (0, import_react2.useCallback)(
|
|
624
|
+
(range) => {
|
|
625
|
+
const [s, e] = range;
|
|
626
|
+
if (s) {
|
|
627
|
+
const sDateByDayjs = (0, import_dayjs2.default)(s, "D MMM, YYYY").toDate();
|
|
628
|
+
setStartDate(sDateByDayjs);
|
|
629
|
+
} else {
|
|
630
|
+
setStartDate(null);
|
|
631
|
+
}
|
|
632
|
+
if (e) {
|
|
633
|
+
const eDateByDayjs = (0, import_dayjs2.default)(e, "D MMM, YYYY").toDate();
|
|
634
|
+
setEndDate(eDateByDayjs);
|
|
635
|
+
} else {
|
|
636
|
+
setEndDate(null);
|
|
637
|
+
}
|
|
638
|
+
setActivePreset("custom");
|
|
639
|
+
},
|
|
640
|
+
[]
|
|
641
|
+
);
|
|
642
|
+
const handlePreset = (0, import_react2.useCallback)(
|
|
643
|
+
(preset) => {
|
|
644
|
+
const [s, e] = preset.getRange();
|
|
645
|
+
setStartDate(s);
|
|
646
|
+
setEndDate(e);
|
|
647
|
+
setActivePreset(preset.key);
|
|
648
|
+
},
|
|
649
|
+
[]
|
|
650
|
+
);
|
|
651
|
+
const handleFromDateChange = (0, import_react2.useCallback)((v) => {
|
|
652
|
+
const masked = applyDateMask(v, fromDateStr);
|
|
653
|
+
setFromDateStr(masked);
|
|
654
|
+
setActivePreset("custom");
|
|
655
|
+
if (masked.length === 10) {
|
|
656
|
+
const parsed = parseDateInput(masked);
|
|
657
|
+
if (parsed) {
|
|
658
|
+
setStartDate(parsed);
|
|
659
|
+
if (endDate && (0, import_dayjs2.default)(parsed).isAfter((0, import_dayjs2.default)(endDate), "day")) {
|
|
660
|
+
setEndDate(null);
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
}, [fromDateStr, endDate]);
|
|
665
|
+
const handleToDateChange = (0, import_react2.useCallback)((v) => {
|
|
666
|
+
const masked = applyDateMask(v, toDateStr);
|
|
667
|
+
setToDateStr(masked);
|
|
668
|
+
setActivePreset("custom");
|
|
669
|
+
if (masked.length === 10) {
|
|
670
|
+
const parsed = parseDateInput(masked);
|
|
671
|
+
if (parsed) {
|
|
672
|
+
setEndDate(parsed);
|
|
673
|
+
if (startDate && (0, import_dayjs2.default)(parsed).isBefore((0, import_dayjs2.default)(startDate), "day")) {
|
|
674
|
+
setStartDate(null);
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
}
|
|
678
|
+
}, [toDateStr, startDate]);
|
|
679
|
+
const handleFromTimeChange = (0, import_react2.useCallback)((v) => {
|
|
680
|
+
const masked = applyTimeMask(v, fromTimeStr);
|
|
681
|
+
setFromTimeStr(masked);
|
|
682
|
+
setActivePreset("custom");
|
|
683
|
+
}, [fromTimeStr]);
|
|
684
|
+
const handleToTimeChange = (0, import_react2.useCallback)((v) => {
|
|
685
|
+
const masked = applyTimeMask(v, toTimeStr);
|
|
686
|
+
setToTimeStr(masked);
|
|
687
|
+
setActivePreset("custom");
|
|
688
|
+
}, [toTimeStr]);
|
|
689
|
+
const handleDone = (0, import_react2.useCallback)(() => {
|
|
690
|
+
var _a2, _b2;
|
|
691
|
+
if (!isReady) return;
|
|
692
|
+
const fromTime = (_a2 = parseTimeInput(fromTimeStr)) != null ? _a2 : DEFAULT_TIME;
|
|
693
|
+
const toTime = (_b2 = parseTimeInput(toTimeStr)) != null ? _b2 : DEFAULT_TIME;
|
|
694
|
+
onChange == null ? void 0 : onChange({
|
|
695
|
+
startDate,
|
|
696
|
+
endDate,
|
|
697
|
+
startTime: fromTime,
|
|
698
|
+
endTime: toTime,
|
|
699
|
+
timezone
|
|
700
|
+
});
|
|
701
|
+
}, [isReady, onChange, startDate, endDate, fromTimeStr, toTimeStr, timezone]);
|
|
702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.root, className), id, children: [
|
|
703
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.inner, children: [
|
|
704
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("aside", { className: AdvancedDateRangePicker_module_default.left, children: PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
705
|
+
"button",
|
|
706
|
+
{
|
|
707
|
+
type: "button",
|
|
708
|
+
onClick: () => handlePreset(p),
|
|
709
|
+
className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.sidebarItem, {
|
|
710
|
+
[AdvancedDateRangePicker_module_default.sidebarItemActive]: activePreset === p.key
|
|
711
|
+
}),
|
|
712
|
+
children: p.label
|
|
713
|
+
},
|
|
714
|
+
p.key
|
|
715
|
+
)) }),
|
|
716
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.main, children: [
|
|
717
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: AdvancedDateRangePicker_module_default.header, children: [
|
|
718
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.headerGroup, AdvancedDateRangePicker_module_default.timezoneWrapper), children: [
|
|
719
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: "Timezone" }),
|
|
720
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
721
|
+
"select",
|
|
722
|
+
{
|
|
723
|
+
value: timezone,
|
|
724
|
+
onChange: (e) => setTimezone(e.target.value),
|
|
725
|
+
className: AdvancedDateRangePicker_module_default.timezoneSelect,
|
|
726
|
+
disabled: isTimezoneDisabled,
|
|
727
|
+
children: timezoneOptions.map((tz) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: tz.value, children: tz.label }, tz.value))
|
|
728
|
+
}
|
|
729
|
+
)
|
|
730
|
+
] }),
|
|
731
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AdvancedDateRangePicker_module_default.headerSeparator }),
|
|
732
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeWrapper, children: [
|
|
733
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
734
|
+
DateTimeInputGroup,
|
|
735
|
+
{
|
|
736
|
+
label: "From",
|
|
737
|
+
dateValue: fromDateStr,
|
|
738
|
+
timeValue: fromTimeStr,
|
|
739
|
+
dateError: fromDateError,
|
|
740
|
+
timeError: fromTimeError,
|
|
741
|
+
onDateChange: handleFromDateChange,
|
|
742
|
+
onTimeChange: handleFromTimeChange
|
|
743
|
+
}
|
|
744
|
+
),
|
|
745
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AdvancedDateRangePicker_module_default.headerSeparator }),
|
|
746
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
747
|
+
DateTimeInputGroup,
|
|
748
|
+
{
|
|
749
|
+
label: "To",
|
|
750
|
+
dateValue: toDateStr,
|
|
751
|
+
timeValue: toTimeStr,
|
|
752
|
+
dateError: toDateError,
|
|
753
|
+
timeError: toTimeError,
|
|
754
|
+
onDateChange: handleToDateChange,
|
|
755
|
+
onTimeChange: handleToTimeChange
|
|
756
|
+
}
|
|
757
|
+
)
|
|
758
|
+
] })
|
|
759
|
+
] }),
|
|
760
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AdvancedDateRangePicker_module_default.body, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
761
|
+
InternalCalendar_default,
|
|
762
|
+
{
|
|
763
|
+
id: `${id}-calendar`,
|
|
764
|
+
dateRange: rangeValue,
|
|
765
|
+
onChange: handleRangeChange,
|
|
766
|
+
disablePastDates,
|
|
767
|
+
minDate,
|
|
768
|
+
maxDate,
|
|
769
|
+
showSingleCalendar
|
|
770
|
+
}
|
|
771
|
+
) })
|
|
772
|
+
] })
|
|
773
|
+
] }),
|
|
774
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("footer", { className: AdvancedDateRangePicker_module_default.footer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
775
|
+
"button",
|
|
776
|
+
{
|
|
777
|
+
type: "button",
|
|
778
|
+
onClick: handleDone,
|
|
779
|
+
disabled: disabled || !isReady,
|
|
780
|
+
className: AdvancedDateRangePicker_module_default.doneBtn,
|
|
781
|
+
children: confirmLabel
|
|
782
|
+
}
|
|
783
|
+
) })
|
|
784
|
+
] });
|
|
785
|
+
}
|
|
786
|
+
AdvancedDateRangePicker.displayName = "AdvancedDateRangePicker";
|
|
787
|
+
var AdvancedDateRangePicker_default = AdvancedDateRangePicker;
|
|
788
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
789
|
+
0 && (module.exports = {
|
|
790
|
+
AdvancedDateRangePicker
|
|
791
|
+
});
|