@fangxinyan/lumina 0.6.14 → 0.6.16
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/{Calendar-RUTPKREW.css → Calendar-I6NHCXIB.css} +65 -0
- package/dist/Calendar.cjs +2 -2
- package/dist/Calendar.d.cts +2 -0
- package/dist/Calendar.d.ts +2 -0
- package/dist/Calendar.js +1 -1
- package/dist/DatePicker-VDVSIARF.css +60 -0
- package/dist/DatePicker.cjs +16 -0
- package/dist/DatePicker.d.cts +49 -0
- package/dist/DatePicker.d.ts +49 -0
- package/dist/DatePicker.js +7 -0
- package/dist/DateTimePicker-DRX7XA74.css +224 -0
- package/dist/DateTimePicker.cjs +16 -0
- package/dist/DateTimePicker.d.cts +61 -0
- package/dist/DateTimePicker.d.ts +61 -0
- package/dist/DateTimePicker.js +7 -0
- package/dist/TimePicker-ZBJOXH3U.css +151 -0
- package/dist/TimePicker.cjs +15 -0
- package/dist/TimePicker.d.cts +63 -0
- package/dist/TimePicker.d.ts +63 -0
- package/dist/TimePicker.js +6 -0
- package/dist/chunk-32FWB5NO.cjs +505 -0
- package/dist/chunk-4KDABJSY.cjs +241 -0
- package/dist/chunk-DU4VSUBF.js +393 -0
- package/dist/chunk-FKP5D5IS.js +271 -0
- package/dist/chunk-I7TOBKJO.js +219 -0
- package/dist/chunk-KHRYPNUV.cjs +293 -0
- package/dist/chunk-SFEWMO45.cjs +415 -0
- package/dist/chunk-YPE6CDXQ.js +483 -0
- package/dist/index.cjs +66 -51
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +15 -12
- package/dist/styles.css +439 -0
- package/docs/llms/calendar.md +2 -1
- package/docs/llms/datepicker.md +69 -0
- package/docs/llms/datetimepicker.md +83 -0
- package/docs/llms/timepicker.md +81 -0
- package/docs/llms.md +5 -2
- package/package.json +7 -3
- package/dist/chunk-XG5D777V.js +0 -90
- package/dist/chunk-ZBTGYTQE.cjs +0 -112
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
|
|
4
|
+
var chunkVS3I5OKA_cjs = require('./chunk-VS3I5OKA.cjs');
|
|
5
|
+
var chunkSW2HMNCA_cjs = require('./chunk-SW2HMNCA.cjs');
|
|
6
|
+
var chunk4KDABJSY_cjs = require('./chunk-4KDABJSY.cjs');
|
|
7
|
+
require('./tokens-RYJ3DFTU.css');
|
|
8
|
+
require('./shared-NJHRNLRH.css');
|
|
9
|
+
require('./DatePicker-VDVSIARF.css');
|
|
10
|
+
var React = require('react');
|
|
11
|
+
var reactDom = require('react-dom');
|
|
12
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
+
|
|
14
|
+
function _interopNamespace(e) {
|
|
15
|
+
if (e && e.__esModule) return e;
|
|
16
|
+
var n = Object.create(null);
|
|
17
|
+
if (e) {
|
|
18
|
+
Object.keys(e).forEach(function (k) {
|
|
19
|
+
if (k !== 'default') {
|
|
20
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return e[k]; }
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
n.default = e;
|
|
29
|
+
return Object.freeze(n);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
|
+
|
|
34
|
+
var pad = (value) => String(value).padStart(2, "0");
|
|
35
|
+
var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
36
|
+
var isValidDate = (date) => date instanceof Date && !Number.isNaN(date.getTime());
|
|
37
|
+
var formatDate = (date, format) => {
|
|
38
|
+
if (!isValidDate(date)) return "";
|
|
39
|
+
if (typeof format === "function") return format(date);
|
|
40
|
+
const year = String(date.getFullYear());
|
|
41
|
+
const month = pad(date.getMonth() + 1);
|
|
42
|
+
const day = pad(date.getDate());
|
|
43
|
+
if (format === "YYYY/MM/DD") return `${year}/${month}/${day}`;
|
|
44
|
+
if (format === "YYYY\u5E74MM\u6708DD\u65E5") return `${year}\u5E74${month}\u6708${day}\u65E5`;
|
|
45
|
+
return `${year}-${month}-${day}`;
|
|
46
|
+
};
|
|
47
|
+
var parseDateInput = (input) => {
|
|
48
|
+
const text = input.trim();
|
|
49
|
+
if (!text) return null;
|
|
50
|
+
const match = text.match(/^(\d{4})[-/.年](\d{1,2})[-/.月](\d{1,2})日?$/);
|
|
51
|
+
if (!match) return null;
|
|
52
|
+
const year = Number(match[1]);
|
|
53
|
+
const month = Number(match[2]);
|
|
54
|
+
const day = Number(match[3]);
|
|
55
|
+
const date = new Date(year, month - 1, day);
|
|
56
|
+
if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
59
|
+
return date;
|
|
60
|
+
};
|
|
61
|
+
var DatePicker = React__namespace.forwardRef(
|
|
62
|
+
({
|
|
63
|
+
value,
|
|
64
|
+
defaultValue = null,
|
|
65
|
+
onChange,
|
|
66
|
+
format = "YYYY-MM-DD",
|
|
67
|
+
placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
|
|
68
|
+
disabled,
|
|
69
|
+
readOnly,
|
|
70
|
+
invalid,
|
|
71
|
+
size = "md",
|
|
72
|
+
allowClear,
|
|
73
|
+
min,
|
|
74
|
+
max,
|
|
75
|
+
disabledDate,
|
|
76
|
+
placement = "bottom",
|
|
77
|
+
open: openProp,
|
|
78
|
+
defaultOpen = false,
|
|
79
|
+
onOpenChange,
|
|
80
|
+
popupClassName = "",
|
|
81
|
+
dropdownClassName = "",
|
|
82
|
+
className = "",
|
|
83
|
+
onKeyDown,
|
|
84
|
+
...rest
|
|
85
|
+
}, ref) => {
|
|
86
|
+
const controlled = value !== void 0;
|
|
87
|
+
const [inner, setInner] = React__namespace.useState(
|
|
88
|
+
isValidDate(defaultValue) ? startOfDay(defaultValue) : null
|
|
89
|
+
);
|
|
90
|
+
const current = controlled ? isValidDate(value) ? startOfDay(value) : null : inner;
|
|
91
|
+
const currentTime = current?.getTime() ?? null;
|
|
92
|
+
const formattedCurrent = React__namespace.useMemo(
|
|
93
|
+
() => currentTime == null ? "" : formatDate(new Date(currentTime), format),
|
|
94
|
+
[currentTime, format]
|
|
95
|
+
);
|
|
96
|
+
const [draft, setDraft] = React__namespace.useState(formattedCurrent);
|
|
97
|
+
React__namespace.useEffect(() => {
|
|
98
|
+
setDraft(formattedCurrent);
|
|
99
|
+
}, [formattedCurrent]);
|
|
100
|
+
const openControlled = openProp !== void 0;
|
|
101
|
+
const [innerOpen, setInnerOpen] = React__namespace.useState(defaultOpen);
|
|
102
|
+
const open = openControlled ? !!openProp : innerOpen;
|
|
103
|
+
const setOpen = React__namespace.useCallback(
|
|
104
|
+
(next) => {
|
|
105
|
+
if (disabled || readOnly) return;
|
|
106
|
+
if (!openControlled) setInnerOpen(next);
|
|
107
|
+
onOpenChange?.(next);
|
|
108
|
+
},
|
|
109
|
+
[disabled, onOpenChange, openControlled, readOnly]
|
|
110
|
+
);
|
|
111
|
+
const rootRef = React__namespace.useRef(null);
|
|
112
|
+
const panelRef = React__namespace.useRef(null);
|
|
113
|
+
const { triggerRef, floatingStyle } = chunkYB3IWIOJ_cjs.useFloating({
|
|
114
|
+
open,
|
|
115
|
+
placement,
|
|
116
|
+
panelWidth: 344,
|
|
117
|
+
panelHeight: 404
|
|
118
|
+
});
|
|
119
|
+
const setRootRef = React__namespace.useCallback(
|
|
120
|
+
(node) => {
|
|
121
|
+
rootRef.current = node;
|
|
122
|
+
triggerRef.current = node;
|
|
123
|
+
if (typeof ref === "function") ref(node);
|
|
124
|
+
else if (ref) ref.current = node;
|
|
125
|
+
},
|
|
126
|
+
[ref, triggerRef]
|
|
127
|
+
);
|
|
128
|
+
const normalizedMin = React__namespace.useMemo(() => isValidDate(min) ? startOfDay(min) : void 0, [min]);
|
|
129
|
+
const normalizedMax = React__namespace.useMemo(() => isValidDate(max) ? startOfDay(max) : void 0, [max]);
|
|
130
|
+
const isDisabledDate = React__namespace.useCallback(
|
|
131
|
+
(date) => {
|
|
132
|
+
const day = startOfDay(date);
|
|
133
|
+
if (normalizedMin && day < normalizedMin) return true;
|
|
134
|
+
if (normalizedMax && day > normalizedMax) return true;
|
|
135
|
+
return disabledDate?.(day) ?? false;
|
|
136
|
+
},
|
|
137
|
+
[disabledDate, normalizedMax, normalizedMin]
|
|
138
|
+
);
|
|
139
|
+
const commit = React__namespace.useCallback(
|
|
140
|
+
(next, close = false) => {
|
|
141
|
+
if (!next) {
|
|
142
|
+
if (!controlled) setInner(null);
|
|
143
|
+
setDraft("");
|
|
144
|
+
onChange?.(null, "");
|
|
145
|
+
if (close) setOpen(false);
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
const normalized = startOfDay(next);
|
|
149
|
+
if (isDisabledDate(normalized)) return;
|
|
150
|
+
if (!controlled) setInner(normalized);
|
|
151
|
+
const nextString = formatDate(normalized, format);
|
|
152
|
+
setDraft(nextString);
|
|
153
|
+
onChange?.(normalized, nextString);
|
|
154
|
+
if (close) setOpen(false);
|
|
155
|
+
},
|
|
156
|
+
[controlled, format, isDisabledDate, onChange, setOpen]
|
|
157
|
+
);
|
|
158
|
+
React__namespace.useEffect(() => {
|
|
159
|
+
if (!open) return;
|
|
160
|
+
const onDown = (event) => {
|
|
161
|
+
const target = event.target;
|
|
162
|
+
if (rootRef.current?.contains(target)) return;
|
|
163
|
+
if (panelRef.current?.contains(target)) return;
|
|
164
|
+
setOpen(false);
|
|
165
|
+
};
|
|
166
|
+
const onDocKey = (event) => {
|
|
167
|
+
if (event.key === "Escape") setOpen(false);
|
|
168
|
+
};
|
|
169
|
+
document.addEventListener("mousedown", onDown);
|
|
170
|
+
document.addEventListener("keydown", onDocKey);
|
|
171
|
+
return () => {
|
|
172
|
+
document.removeEventListener("mousedown", onDown);
|
|
173
|
+
document.removeEventListener("keydown", onDocKey);
|
|
174
|
+
};
|
|
175
|
+
}, [open, setOpen]);
|
|
176
|
+
const handleInputChange = (next) => {
|
|
177
|
+
setDraft(next);
|
|
178
|
+
if (next.trim() === "") commit(null);
|
|
179
|
+
};
|
|
180
|
+
const handleInputBlur = () => {
|
|
181
|
+
if (!draft.trim()) {
|
|
182
|
+
setDraft(formattedCurrent);
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
if (typeof format === "function") {
|
|
186
|
+
setDraft(formattedCurrent);
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
const parsed = parseDateInput(draft);
|
|
190
|
+
if (!parsed || isDisabledDate(parsed)) {
|
|
191
|
+
setDraft(formattedCurrent);
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
194
|
+
commit(parsed);
|
|
195
|
+
};
|
|
196
|
+
const handleRootKeyDown = (event) => {
|
|
197
|
+
onKeyDown?.(event);
|
|
198
|
+
if (event.defaultPrevented) return;
|
|
199
|
+
if ((event.key === "ArrowDown" || event.key === "Enter") && !open) {
|
|
200
|
+
event.preventDefault();
|
|
201
|
+
setOpen(true);
|
|
202
|
+
}
|
|
203
|
+
if (event.key === "Escape" && open) {
|
|
204
|
+
event.preventDefault();
|
|
205
|
+
setOpen(false);
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
const today = startOfDay(/* @__PURE__ */ new Date());
|
|
209
|
+
const calendarValue = current ?? today;
|
|
210
|
+
const mergedPanelClassName = [popupClassName, dropdownClassName].filter(Boolean).join(" ");
|
|
211
|
+
const rootClassName = [
|
|
212
|
+
"date-picker",
|
|
213
|
+
size,
|
|
214
|
+
open && "open",
|
|
215
|
+
disabled && "disabled",
|
|
216
|
+
readOnly && "readonly",
|
|
217
|
+
invalid && "invalid",
|
|
218
|
+
className
|
|
219
|
+
].filter(Boolean).join(" ");
|
|
220
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: [
|
|
221
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
222
|
+
chunkVS3I5OKA_cjs.Input,
|
|
223
|
+
{
|
|
224
|
+
value: draft,
|
|
225
|
+
size,
|
|
226
|
+
placeholder,
|
|
227
|
+
disabled,
|
|
228
|
+
readOnly,
|
|
229
|
+
invalid,
|
|
230
|
+
allowClear,
|
|
231
|
+
leadingIcon: "calendar",
|
|
232
|
+
onFocus: () => setOpen(true),
|
|
233
|
+
onClick: () => setOpen(true),
|
|
234
|
+
onValueChange: handleInputChange,
|
|
235
|
+
onBlur: handleInputBlur,
|
|
236
|
+
inputMode: "numeric",
|
|
237
|
+
"aria-expanded": open,
|
|
238
|
+
"aria-haspopup": "dialog"
|
|
239
|
+
}
|
|
240
|
+
),
|
|
241
|
+
open && !disabled && !readOnly && typeof document !== "undefined" && reactDom.createPortal(
|
|
242
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
243
|
+
"div",
|
|
244
|
+
{
|
|
245
|
+
ref: panelRef,
|
|
246
|
+
className: `date-picker-panel ${mergedPanelClassName}`,
|
|
247
|
+
role: "dialog",
|
|
248
|
+
style: floatingStyle,
|
|
249
|
+
children: [
|
|
250
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
251
|
+
chunk4KDABJSY_cjs.Calendar,
|
|
252
|
+
{
|
|
253
|
+
value: calendarValue,
|
|
254
|
+
min: normalizedMin,
|
|
255
|
+
max: normalizedMax,
|
|
256
|
+
disabledDate: isDisabledDate,
|
|
257
|
+
onChange: (next) => commit(next, true)
|
|
258
|
+
}
|
|
259
|
+
),
|
|
260
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "date-picker-footer", children: [
|
|
261
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
262
|
+
chunkSW2HMNCA_cjs.Button,
|
|
263
|
+
{
|
|
264
|
+
size: "sm",
|
|
265
|
+
variant: "ghost",
|
|
266
|
+
disabled: isDisabledDate(today),
|
|
267
|
+
onClick: () => commit(today, true),
|
|
268
|
+
children: "\u4ECA\u5929"
|
|
269
|
+
}
|
|
270
|
+
),
|
|
271
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "date-picker-footer-spacer" }),
|
|
272
|
+
allowClear && /* @__PURE__ */ jsxRuntime.jsx(
|
|
273
|
+
chunkSW2HMNCA_cjs.Button,
|
|
274
|
+
{
|
|
275
|
+
size: "sm",
|
|
276
|
+
variant: "ghost",
|
|
277
|
+
onClick: () => commit(null, true),
|
|
278
|
+
children: "\u6E05\u7A7A"
|
|
279
|
+
}
|
|
280
|
+
),
|
|
281
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { size: "sm", variant: "primary", onClick: () => setOpen(false), children: "\u786E\u5B9A" })
|
|
282
|
+
] })
|
|
283
|
+
]
|
|
284
|
+
}
|
|
285
|
+
),
|
|
286
|
+
document.body
|
|
287
|
+
)
|
|
288
|
+
] });
|
|
289
|
+
}
|
|
290
|
+
);
|
|
291
|
+
DatePicker.displayName = "DatePicker";
|
|
292
|
+
|
|
293
|
+
exports.DatePicker = DatePicker;
|
|
@@ -0,0 +1,415 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
|
|
4
|
+
var chunkVS3I5OKA_cjs = require('./chunk-VS3I5OKA.cjs');
|
|
5
|
+
var chunkSW2HMNCA_cjs = require('./chunk-SW2HMNCA.cjs');
|
|
6
|
+
require('./tokens-RYJ3DFTU.css');
|
|
7
|
+
require('./shared-NJHRNLRH.css');
|
|
8
|
+
require('./TimePicker-ZBJOXH3U.css');
|
|
9
|
+
var React = require('react');
|
|
10
|
+
var reactDom = require('react-dom');
|
|
11
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
+
|
|
13
|
+
function _interopNamespace(e) {
|
|
14
|
+
if (e && e.__esModule) return e;
|
|
15
|
+
var n = Object.create(null);
|
|
16
|
+
if (e) {
|
|
17
|
+
Object.keys(e).forEach(function (k) {
|
|
18
|
+
if (k !== 'default') {
|
|
19
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
20
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function () { return e[k]; }
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
n.default = e;
|
|
28
|
+
return Object.freeze(n);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
32
|
+
|
|
33
|
+
var clampStep = (value) => {
|
|
34
|
+
if (!Number.isFinite(value) || !value || value < 1) return 1;
|
|
35
|
+
return Math.floor(value);
|
|
36
|
+
};
|
|
37
|
+
var pad = (value) => String(value).padStart(2, "0");
|
|
38
|
+
var parseTime = (value) => {
|
|
39
|
+
if (!value) return null;
|
|
40
|
+
const match = value.trim().match(/^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/);
|
|
41
|
+
if (!match) return null;
|
|
42
|
+
const hour = Number(match[1]);
|
|
43
|
+
const minute = Number(match[2]);
|
|
44
|
+
const second = match[3] == null ? 0 : Number(match[3]);
|
|
45
|
+
if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || second < 0 || second > 59) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
return { hour, minute, second };
|
|
49
|
+
};
|
|
50
|
+
var formatTime = (time, includeSecond) => {
|
|
51
|
+
const base = `${pad(time.hour)}:${pad(time.minute)}`;
|
|
52
|
+
return includeSecond ? `${base}:${pad(time.second)}` : base;
|
|
53
|
+
};
|
|
54
|
+
var normalizeTime = (value, includeSecond) => {
|
|
55
|
+
const parsed = parseTime(value);
|
|
56
|
+
return parsed ? formatTime(parsed, includeSecond) : null;
|
|
57
|
+
};
|
|
58
|
+
var toSeconds = (time) => time.hour * 3600 + time.minute * 60 + time.second;
|
|
59
|
+
var getNow = () => {
|
|
60
|
+
const now = /* @__PURE__ */ new Date();
|
|
61
|
+
return {
|
|
62
|
+
hour: now.getHours(),
|
|
63
|
+
minute: now.getMinutes(),
|
|
64
|
+
second: now.getSeconds()
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
var buildOptions = (max, step, selected) => {
|
|
68
|
+
const safeStep = clampStep(step);
|
|
69
|
+
const values = [];
|
|
70
|
+
for (let value = 0; value <= max; value += safeStep) {
|
|
71
|
+
values.push(value);
|
|
72
|
+
}
|
|
73
|
+
if (selected != null && !values.includes(selected)) {
|
|
74
|
+
values.push(selected);
|
|
75
|
+
values.sort((a, b) => a - b);
|
|
76
|
+
}
|
|
77
|
+
return values;
|
|
78
|
+
};
|
|
79
|
+
var compose = (base, key, value) => ({
|
|
80
|
+
hour: key === "hour" ? value : base.hour,
|
|
81
|
+
minute: key === "minute" ? value : base.minute,
|
|
82
|
+
second: key === "second" ? value : base.second
|
|
83
|
+
});
|
|
84
|
+
var byDistanceFrom = (preferred) => (a, b) => Math.abs(a - preferred) - Math.abs(b - preferred) || a - b;
|
|
85
|
+
var TimePicker = React__namespace.forwardRef(
|
|
86
|
+
({
|
|
87
|
+
value,
|
|
88
|
+
defaultValue = null,
|
|
89
|
+
onChange,
|
|
90
|
+
format = "HH:mm",
|
|
91
|
+
showSecond,
|
|
92
|
+
placeholder = "\u8BF7\u9009\u62E9\u65F6\u95F4",
|
|
93
|
+
disabled,
|
|
94
|
+
readOnly,
|
|
95
|
+
invalid,
|
|
96
|
+
size = "md",
|
|
97
|
+
allowClear,
|
|
98
|
+
hourStep = 1,
|
|
99
|
+
minuteStep = 1,
|
|
100
|
+
secondStep = 1,
|
|
101
|
+
min,
|
|
102
|
+
max,
|
|
103
|
+
disabledTime,
|
|
104
|
+
placement = "bottom",
|
|
105
|
+
open: openProp,
|
|
106
|
+
defaultOpen = false,
|
|
107
|
+
onOpenChange,
|
|
108
|
+
popupClassName = "",
|
|
109
|
+
dropdownClassName = "",
|
|
110
|
+
className = "",
|
|
111
|
+
onKeyDown,
|
|
112
|
+
...rest
|
|
113
|
+
}, ref) => {
|
|
114
|
+
const includeSecond = showSecond ?? format === "HH:mm:ss";
|
|
115
|
+
const controlled = value !== void 0;
|
|
116
|
+
const initial = normalizeTime(defaultValue, includeSecond);
|
|
117
|
+
const [inner, setInner] = React__namespace.useState(initial);
|
|
118
|
+
const current = controlled ? normalizeTime(value, includeSecond) : inner;
|
|
119
|
+
const scrollSignature = current ?? "";
|
|
120
|
+
const currentParts = parseTime(current);
|
|
121
|
+
const [draft, setDraft] = React__namespace.useState(current ?? "");
|
|
122
|
+
React__namespace.useEffect(() => {
|
|
123
|
+
setDraft(current ?? "");
|
|
124
|
+
}, [current]);
|
|
125
|
+
const openControlled = openProp !== void 0;
|
|
126
|
+
const [innerOpen, setInnerOpen] = React__namespace.useState(defaultOpen);
|
|
127
|
+
const open = openControlled ? !!openProp : innerOpen;
|
|
128
|
+
const wasOpenRef = React__namespace.useRef(false);
|
|
129
|
+
const scrollSignatureRef = React__namespace.useRef(null);
|
|
130
|
+
const scrollFramesRef = React__namespace.useRef(/* @__PURE__ */ new Map());
|
|
131
|
+
const setOpen = React__namespace.useCallback(
|
|
132
|
+
(next) => {
|
|
133
|
+
if (disabled || readOnly) return;
|
|
134
|
+
if (!openControlled) setInnerOpen(next);
|
|
135
|
+
onOpenChange?.(next);
|
|
136
|
+
},
|
|
137
|
+
[disabled, onOpenChange, openControlled, readOnly]
|
|
138
|
+
);
|
|
139
|
+
const rootRef = React__namespace.useRef(null);
|
|
140
|
+
const panelRef = React__namespace.useRef(null);
|
|
141
|
+
const { triggerRef, floatingStyle } = chunkYB3IWIOJ_cjs.useFloating({
|
|
142
|
+
open,
|
|
143
|
+
placement,
|
|
144
|
+
panelWidth: includeSecond ? 312 : 236,
|
|
145
|
+
panelHeight: 330
|
|
146
|
+
});
|
|
147
|
+
const setRootRef = React__namespace.useCallback(
|
|
148
|
+
(node) => {
|
|
149
|
+
rootRef.current = node;
|
|
150
|
+
triggerRef.current = node;
|
|
151
|
+
if (typeof ref === "function") ref(node);
|
|
152
|
+
else if (ref) ref.current = node;
|
|
153
|
+
},
|
|
154
|
+
[ref, triggerRef]
|
|
155
|
+
);
|
|
156
|
+
const minParts = React__namespace.useMemo(() => parseTime(min), [min]);
|
|
157
|
+
const maxParts = React__namespace.useMemo(() => parseTime(max), [max]);
|
|
158
|
+
const minSeconds = minParts ? toSeconds(minParts) : null;
|
|
159
|
+
const maxSeconds = maxParts ? toSeconds(maxParts) : null;
|
|
160
|
+
const isDisabledTime = React__namespace.useCallback(
|
|
161
|
+
(time) => {
|
|
162
|
+
const seconds = toSeconds(time);
|
|
163
|
+
if (minSeconds != null && seconds < minSeconds) return true;
|
|
164
|
+
if (maxSeconds != null && seconds > maxSeconds) return true;
|
|
165
|
+
return disabledTime?.(time) ?? false;
|
|
166
|
+
},
|
|
167
|
+
[disabledTime, maxSeconds, minSeconds]
|
|
168
|
+
);
|
|
169
|
+
const commit = React__namespace.useCallback(
|
|
170
|
+
(next) => {
|
|
171
|
+
if (!next) {
|
|
172
|
+
if (!controlled) setInner(null);
|
|
173
|
+
setDraft("");
|
|
174
|
+
onChange?.(null, null);
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
if (isDisabledTime(next)) return;
|
|
178
|
+
const nextValue = formatTime(next, includeSecond);
|
|
179
|
+
if (!controlled) setInner(nextValue);
|
|
180
|
+
setDraft(nextValue);
|
|
181
|
+
onChange?.(nextValue, next);
|
|
182
|
+
},
|
|
183
|
+
[controlled, includeSecond, isDisabledTime, onChange]
|
|
184
|
+
);
|
|
185
|
+
React__namespace.useEffect(() => {
|
|
186
|
+
if (!open) return;
|
|
187
|
+
const onDown = (event) => {
|
|
188
|
+
const target = event.target;
|
|
189
|
+
if (rootRef.current?.contains(target)) return;
|
|
190
|
+
if (panelRef.current?.contains(target)) return;
|
|
191
|
+
setOpen(false);
|
|
192
|
+
};
|
|
193
|
+
const onDocKey = (event) => {
|
|
194
|
+
if (event.key === "Escape") setOpen(false);
|
|
195
|
+
};
|
|
196
|
+
document.addEventListener("mousedown", onDown);
|
|
197
|
+
document.addEventListener("keydown", onDocKey);
|
|
198
|
+
return () => {
|
|
199
|
+
document.removeEventListener("mousedown", onDown);
|
|
200
|
+
document.removeEventListener("keydown", onDocKey);
|
|
201
|
+
};
|
|
202
|
+
}, [open, setOpen]);
|
|
203
|
+
const scrollListTo = React__namespace.useCallback(
|
|
204
|
+
(list, top, animate) => {
|
|
205
|
+
const frame = scrollFramesRef.current.get(list);
|
|
206
|
+
if (frame != null) cancelAnimationFrame(frame);
|
|
207
|
+
if (!animate) {
|
|
208
|
+
list.scrollTop = top;
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
const start = list.scrollTop;
|
|
212
|
+
const distance = top - start;
|
|
213
|
+
if (Math.abs(distance) < 1) {
|
|
214
|
+
list.scrollTop = top;
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
const startedAt = performance.now();
|
|
218
|
+
const duration = 180;
|
|
219
|
+
const tick = (now2) => {
|
|
220
|
+
const progress = Math.min((now2 - startedAt) / duration, 1);
|
|
221
|
+
const eased = 1 - Math.pow(1 - progress, 3);
|
|
222
|
+
list.scrollTop = start + distance * eased;
|
|
223
|
+
if (progress < 1) {
|
|
224
|
+
scrollFramesRef.current.set(list, requestAnimationFrame(tick));
|
|
225
|
+
return;
|
|
226
|
+
}
|
|
227
|
+
scrollFramesRef.current.delete(list);
|
|
228
|
+
list.scrollTop = top;
|
|
229
|
+
};
|
|
230
|
+
scrollFramesRef.current.set(list, requestAnimationFrame(tick));
|
|
231
|
+
},
|
|
232
|
+
[]
|
|
233
|
+
);
|
|
234
|
+
React__namespace.useEffect(() => {
|
|
235
|
+
if (!open) return;
|
|
236
|
+
const shouldAnimate = wasOpenRef.current && scrollSignatureRef.current != null && scrollSignatureRef.current !== scrollSignature;
|
|
237
|
+
requestAnimationFrame(() => {
|
|
238
|
+
panelRef.current?.querySelectorAll(".time-picker-list").forEach((list) => {
|
|
239
|
+
const selected = list.querySelector(".time-picker-option.selected");
|
|
240
|
+
if (!selected) return;
|
|
241
|
+
const top = selected.offsetTop - list.offsetTop - list.clientHeight / 2 + selected.offsetHeight / 2;
|
|
242
|
+
scrollListTo(list, top, shouldAnimate);
|
|
243
|
+
});
|
|
244
|
+
});
|
|
245
|
+
wasOpenRef.current = open;
|
|
246
|
+
scrollSignatureRef.current = scrollSignature;
|
|
247
|
+
}, [open, scrollListTo, scrollSignature]);
|
|
248
|
+
React__namespace.useEffect(() => {
|
|
249
|
+
if (open) return;
|
|
250
|
+
wasOpenRef.current = false;
|
|
251
|
+
scrollSignatureRef.current = null;
|
|
252
|
+
}, [open]);
|
|
253
|
+
React__namespace.useEffect(
|
|
254
|
+
() => () => {
|
|
255
|
+
scrollFramesRef.current.forEach((frame) => cancelAnimationFrame(frame));
|
|
256
|
+
scrollFramesRef.current.clear();
|
|
257
|
+
},
|
|
258
|
+
[]
|
|
259
|
+
);
|
|
260
|
+
const panelBase = currentParts ?? getNow();
|
|
261
|
+
const hourOptions = buildOptions(23, hourStep, currentParts?.hour);
|
|
262
|
+
const minuteOptions = buildOptions(59, minuteStep, currentParts?.minute);
|
|
263
|
+
const secondOptions = buildOptions(59, secondStep, currentParts?.second);
|
|
264
|
+
const findAvailableTime = (key, value2) => {
|
|
265
|
+
const preferred = compose(panelBase, key, value2);
|
|
266
|
+
if (!isDisabledTime(preferred)) return preferred;
|
|
267
|
+
const hours = key === "hour" ? [value2] : [...hourOptions].sort(byDistanceFrom(panelBase.hour));
|
|
268
|
+
const minutes = key === "minute" ? [value2] : [...minuteOptions].sort(byDistanceFrom(panelBase.minute));
|
|
269
|
+
const seconds = key === "second" ? [value2] : includeSecond ? [...secondOptions].sort(byDistanceFrom(panelBase.second)) : [0];
|
|
270
|
+
for (const hour of hours) {
|
|
271
|
+
for (const minute of minutes) {
|
|
272
|
+
for (const second of seconds) {
|
|
273
|
+
const candidate = { hour, minute, second };
|
|
274
|
+
if (!isDisabledTime(candidate)) return candidate;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
return null;
|
|
279
|
+
};
|
|
280
|
+
const pick = (key, nextValue) => {
|
|
281
|
+
const next = findAvailableTime(key, nextValue);
|
|
282
|
+
if (next) commit(next);
|
|
283
|
+
};
|
|
284
|
+
const handleInputChange = (next) => {
|
|
285
|
+
setDraft(next);
|
|
286
|
+
if (next.trim() === "") commit(null);
|
|
287
|
+
};
|
|
288
|
+
const handleInputBlur = () => {
|
|
289
|
+
if (!draft.trim()) {
|
|
290
|
+
setDraft(current ?? "");
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
const parsed = parseTime(draft);
|
|
294
|
+
if (!parsed || isDisabledTime(parsed)) {
|
|
295
|
+
setDraft(current ?? "");
|
|
296
|
+
return;
|
|
297
|
+
}
|
|
298
|
+
commit(parsed);
|
|
299
|
+
};
|
|
300
|
+
const handleRootKeyDown = (event) => {
|
|
301
|
+
onKeyDown?.(event);
|
|
302
|
+
if (event.defaultPrevented) return;
|
|
303
|
+
if ((event.key === "ArrowDown" || event.key === "Enter") && !open) {
|
|
304
|
+
event.preventDefault();
|
|
305
|
+
setOpen(true);
|
|
306
|
+
}
|
|
307
|
+
if (event.key === "Escape" && open) {
|
|
308
|
+
event.preventDefault();
|
|
309
|
+
setOpen(false);
|
|
310
|
+
}
|
|
311
|
+
};
|
|
312
|
+
const renderColumn = (label, key, options) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-picker-column", children: [
|
|
313
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "time-picker-column-label", children: label }),
|
|
314
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "time-picker-list", role: "listbox", "aria-label": label, children: options.map((option) => {
|
|
315
|
+
const selected = currentParts?.[key] === option;
|
|
316
|
+
const optionDisabled = findAvailableTime(key, option) == null;
|
|
317
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
318
|
+
"button",
|
|
319
|
+
{
|
|
320
|
+
type: "button",
|
|
321
|
+
role: "option",
|
|
322
|
+
"aria-selected": selected,
|
|
323
|
+
disabled: optionDisabled,
|
|
324
|
+
className: `time-picker-option ${selected ? "selected" : ""}`,
|
|
325
|
+
onClick: () => pick(key, option),
|
|
326
|
+
children: pad(option)
|
|
327
|
+
},
|
|
328
|
+
option
|
|
329
|
+
);
|
|
330
|
+
}) })
|
|
331
|
+
] });
|
|
332
|
+
const mergedPanelClassName = [popupClassName, dropdownClassName].filter(Boolean).join(" ");
|
|
333
|
+
const now = getNow();
|
|
334
|
+
const nowDisabled = isDisabledTime(now);
|
|
335
|
+
const rootClassName = [
|
|
336
|
+
"time-picker",
|
|
337
|
+
size,
|
|
338
|
+
open && "open",
|
|
339
|
+
disabled && "disabled",
|
|
340
|
+
readOnly && "readonly",
|
|
341
|
+
invalid && "invalid",
|
|
342
|
+
className
|
|
343
|
+
].filter(Boolean).join(" ");
|
|
344
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: [
|
|
345
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
346
|
+
chunkVS3I5OKA_cjs.Input,
|
|
347
|
+
{
|
|
348
|
+
value: draft,
|
|
349
|
+
size,
|
|
350
|
+
placeholder,
|
|
351
|
+
disabled,
|
|
352
|
+
readOnly,
|
|
353
|
+
invalid,
|
|
354
|
+
allowClear,
|
|
355
|
+
leadingIcon: "clock",
|
|
356
|
+
onFocus: () => setOpen(true),
|
|
357
|
+
onClick: () => setOpen(true),
|
|
358
|
+
onValueChange: handleInputChange,
|
|
359
|
+
onBlur: handleInputBlur,
|
|
360
|
+
inputMode: "numeric",
|
|
361
|
+
"aria-expanded": open,
|
|
362
|
+
"aria-haspopup": "dialog"
|
|
363
|
+
}
|
|
364
|
+
),
|
|
365
|
+
open && !disabled && !readOnly && typeof document !== "undefined" && reactDom.createPortal(
|
|
366
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
367
|
+
"div",
|
|
368
|
+
{
|
|
369
|
+
ref: panelRef,
|
|
370
|
+
className: `time-picker-panel ${includeSecond ? "with-second" : "without-second"} ${mergedPanelClassName}`,
|
|
371
|
+
role: "dialog",
|
|
372
|
+
style: floatingStyle,
|
|
373
|
+
children: [
|
|
374
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-picker-columns", children: [
|
|
375
|
+
renderColumn("\u65F6", "hour", hourOptions),
|
|
376
|
+
renderColumn("\u5206", "minute", minuteOptions),
|
|
377
|
+
includeSecond && renderColumn("\u79D2", "second", secondOptions)
|
|
378
|
+
] }),
|
|
379
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-picker-footer", children: [
|
|
380
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
381
|
+
chunkSW2HMNCA_cjs.Button,
|
|
382
|
+
{
|
|
383
|
+
size: "sm",
|
|
384
|
+
variant: "ghost",
|
|
385
|
+
disabled: nowDisabled,
|
|
386
|
+
onClick: () => commit(now),
|
|
387
|
+
children: "\u73B0\u5728"
|
|
388
|
+
}
|
|
389
|
+
),
|
|
390
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "time-picker-footer-spacer" }),
|
|
391
|
+
allowClear && /* @__PURE__ */ jsxRuntime.jsx(
|
|
392
|
+
chunkSW2HMNCA_cjs.Button,
|
|
393
|
+
{
|
|
394
|
+
size: "sm",
|
|
395
|
+
variant: "ghost",
|
|
396
|
+
onClick: () => {
|
|
397
|
+
commit(null);
|
|
398
|
+
setOpen(false);
|
|
399
|
+
},
|
|
400
|
+
children: "\u6E05\u7A7A"
|
|
401
|
+
}
|
|
402
|
+
),
|
|
403
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { size: "sm", variant: "primary", onClick: () => setOpen(false), children: "\u786E\u5B9A" })
|
|
404
|
+
] })
|
|
405
|
+
]
|
|
406
|
+
}
|
|
407
|
+
),
|
|
408
|
+
document.body
|
|
409
|
+
)
|
|
410
|
+
] });
|
|
411
|
+
}
|
|
412
|
+
);
|
|
413
|
+
TimePicker.displayName = "TimePicker";
|
|
414
|
+
|
|
415
|
+
exports.TimePicker = TimePicker;
|