@progress/kendo-react-dateinputs 9.4.0-develop.1 → 9.4.0-develop.10
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/calendar/components/Calendar.js +1 -1
- package/calendar/components/Calendar.mjs +0 -1
- package/calendar/components/CalendarCell.js +1 -1
- package/calendar/components/CalendarCell.mjs +12 -13
- package/calendar/components/CalendarHeaderTitle.js +1 -1
- package/calendar/components/CalendarHeaderTitle.mjs +3 -4
- package/calendar/components/CalendarNavigationItem.js +1 -1
- package/calendar/components/CalendarNavigationItem.mjs +2 -3
- package/calendar/components/CalendarWeekCell.js +1 -1
- package/calendar/components/CalendarWeekCell.mjs +8 -9
- package/calendar/components/Header.js +1 -1
- package/calendar/components/Header.mjs +0 -1
- package/calendar/components/HorizontalViewList.js +1 -1
- package/calendar/components/HorizontalViewList.mjs +0 -1
- package/calendar/components/MultiViewCalendar.js +1 -1
- package/calendar/components/MultiViewCalendar.mjs +0 -1
- package/calendar/components/Navigation.js +1 -1
- package/calendar/components/Navigation.mjs +0 -1
- package/calendar/components/TodayCommand.js +1 -1
- package/calendar/components/TodayCommand.mjs +0 -1
- package/calendar/components/View.js +1 -1
- package/calendar/components/View.mjs +0 -1
- package/calendar/components/ViewList.js +1 -1
- package/calendar/components/ViewList.mjs +0 -1
- package/calendar/models/CalendarViewEnum.js +1 -1
- package/calendar/models/CalendarViewEnum.mjs +0 -1
- package/calendar/models/NavigationAction.js +1 -1
- package/calendar/models/NavigationAction.mjs +0 -1
- package/calendar/models/SelectionRange.js +1 -1
- package/calendar/models/SelectionRange.mjs +0 -1
- package/calendar/services/BusViewService.js +1 -1
- package/calendar/services/BusViewService.mjs +0 -1
- package/calendar/services/CenturyViewService.js +1 -1
- package/calendar/services/CenturyViewService.mjs +0 -1
- package/calendar/services/DOMService.js +1 -1
- package/calendar/services/DOMService.mjs +0 -1
- package/calendar/services/DecadeViewService.js +1 -1
- package/calendar/services/DecadeViewService.mjs +0 -1
- package/calendar/services/MonthViewService.js +1 -1
- package/calendar/services/MonthViewService.mjs +0 -1
- package/calendar/services/NavigationService.js +1 -1
- package/calendar/services/NavigationService.mjs +18 -19
- package/calendar/services/ScrollSyncService.js +1 -1
- package/calendar/services/ScrollSyncService.mjs +0 -1
- package/calendar/services/WeekNamesService.js +1 -1
- package/calendar/services/WeekNamesService.mjs +5 -6
- package/calendar/services/YearViewService.js +1 -1
- package/calendar/services/YearViewService.mjs +0 -1
- package/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +7 -8
- package/common/ClearButton.js +1 -1
- package/common/ClearButton.mjs +7 -8
- package/common/PickerWrap.js +1 -1
- package/common/PickerWrap.mjs +3 -4
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +69 -68
- package/dateinput/dateInputIntl.js +1 -1
- package/dateinput/dateInputIntl.mjs +3 -4
- package/dateinput/utils.js +1 -1
- package/dateinput/utils.mjs +4 -5
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +131 -132
- package/datepicker/ToggleButton.js +1 -1
- package/datepicker/ToggleButton.mjs +3 -4
- package/daterangepicker/DateRangePicker.js +1 -1
- package/daterangepicker/DateRangePicker.mjs +0 -1
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +0 -1
- package/datetimepicker/DateTimeSelector.js +1 -1
- package/datetimepicker/DateTimeSelector.mjs +0 -1
- package/dist/cdn/js/kendo-react-dateinputs.js +8 -1
- package/hooks/usePickerFloatingLabel.js +1 -1
- package/hooks/usePickerFloatingLabel.mjs +5 -6
- package/index.js +2 -1
- package/messages/index.js +1 -1
- package/messages/index.mjs +5 -6
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -3
- package/package.json +8 -8
- package/timepicker/TimeList.js +1 -1
- package/timepicker/TimeList.mjs +16 -17
- package/timepicker/TimePart.js +1 -1
- package/timepicker/TimePart.mjs +0 -1
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +0 -1
- package/timepicker/TimeSelector.js +1 -1
- package/timepicker/TimeSelector.mjs +0 -1
- package/timepicker/models/TimePart.js +1 -1
- package/timepicker/models/TimePart.mjs +2 -3
- package/timepicker/services/DOMService.js +1 -1
- package/timepicker/services/DOMService.mjs +0 -1
- package/timepicker/services/DayPeriodService.js +1 -1
- package/timepicker/services/DayPeriodService.mjs +3 -4
- package/timepicker/services/HoursService.js +1 -1
- package/timepicker/services/HoursService.mjs +3 -4
- package/timepicker/services/MinutesService.js +1 -1
- package/timepicker/services/MinutesService.mjs +5 -6
- package/timepicker/services/SecondsService.js +1 -1
- package/timepicker/services/SecondsService.mjs +0 -1
- package/timepicker/utils.js +1 -1
- package/timepicker/utils.mjs +0 -1
- package/utils.js +1 -1
- package/utils.mjs +18 -19
- package/virtualization/Virtualization.js +1 -1
- package/virtualization/Virtualization.mjs +0 -1
- package/virtualization/services/ScrollerService.js +1 -1
- package/virtualization/services/ScrollerService.mjs +0 -1
|
@@ -5,105 +5,104 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as o from "react";
|
|
10
9
|
import e from "prop-types";
|
|
11
10
|
import { Popup as Je } from "@progress/kendo-react-popup";
|
|
12
11
|
import { cloneDate as ne, getDate as Qe } from "@progress/kendo-date-math";
|
|
13
|
-
import { validatePackage as et, useId as tt, useAdaptiveModeContext as nt, usePropsContext as ot, canUseDOM as oe, AsyncFocusBlur as rt, classNames as re, kendoThemeMaps as ae, createPropsContext as at, Keys as
|
|
14
|
-
import { calendarIcon as
|
|
15
|
-
import { packageMetadata as
|
|
16
|
-
import { DateInput as
|
|
12
|
+
import { validatePackage as et, useId as tt, useAdaptiveModeContext as nt, usePropsContext as ot, canUseDOM as oe, AsyncFocusBlur as rt, classNames as re, kendoThemeMaps as ae, createPropsContext as at, Keys as O } from "@progress/kendo-react-common";
|
|
13
|
+
import { calendarIcon as lt } from "@progress/kendo-svg-icons";
|
|
14
|
+
import { packageMetadata as ut } from "../package-metadata.mjs";
|
|
15
|
+
import { DateInput as it } from "../dateinput/DateInput.mjs";
|
|
17
16
|
import { Calendar as st } from "../calendar/components/Calendar.mjs";
|
|
18
|
-
import { nullable as
|
|
19
|
-
import { toggleCalendar as
|
|
17
|
+
import { nullable as a, MAX_DATE as ct, MIN_DATE as dt, isInDateRange as ft, setTime as mt } from "../utils.mjs";
|
|
18
|
+
import { toggleCalendar as le, messages as pt } from "../messages/index.mjs";
|
|
20
19
|
import { useLocalization as gt } from "@progress/kendo-react-intl";
|
|
21
20
|
import { ToggleButton as ht } from "./ToggleButton.mjs";
|
|
22
21
|
import { PickerWrap as vt } from "../common/PickerWrap.mjs";
|
|
23
22
|
import { PickerFloatingLabel as wt } from "../hooks/usePickerFloatingLabel.mjs";
|
|
24
23
|
import { ActionSheetContent as bt } from "@progress/kendo-react-layout";
|
|
25
24
|
import { AdaptiveMode as yt } from "../common/AdaptiveMode.mjs";
|
|
26
|
-
const
|
|
27
|
-
et(
|
|
28
|
-
const
|
|
29
|
-
defaultShow: ce =
|
|
30
|
-
defaultValue: de =
|
|
31
|
-
dateInput: fe =
|
|
32
|
-
calendar: me =
|
|
33
|
-
toggleButton: pe =
|
|
34
|
-
popup: ge =
|
|
35
|
-
pickerWrap:
|
|
36
|
-
disabled: h =
|
|
37
|
-
format: he =
|
|
38
|
-
max:
|
|
39
|
-
min: I =
|
|
40
|
-
popupSettings: v =
|
|
41
|
-
tabIndex: ve =
|
|
42
|
-
weekNumber: we =
|
|
43
|
-
validityStyles:
|
|
44
|
-
size: S =
|
|
45
|
-
rounded: E =
|
|
46
|
-
fillMode: x =
|
|
47
|
-
autoFocus: be =
|
|
48
|
-
show:
|
|
25
|
+
const ue = o.forwardRef((n, ie) => {
|
|
26
|
+
et(ut);
|
|
27
|
+
const F = tt(n.id), se = gt(), g = nt(), {
|
|
28
|
+
defaultShow: ce = l.defaultShow,
|
|
29
|
+
defaultValue: de = l.defaultValue,
|
|
30
|
+
dateInput: fe = l.dateInput,
|
|
31
|
+
calendar: me = l.calendar,
|
|
32
|
+
toggleButton: pe = l.toggleButton,
|
|
33
|
+
popup: ge = l.popup,
|
|
34
|
+
pickerWrap: kt = l.pickerWrap,
|
|
35
|
+
disabled: h = l.disabled,
|
|
36
|
+
format: he = l.format,
|
|
37
|
+
max: R = l.max,
|
|
38
|
+
min: I = l.min,
|
|
39
|
+
popupSettings: v = l.popupSettings,
|
|
40
|
+
tabIndex: ve = l.tabIndex,
|
|
41
|
+
weekNumber: we = l.weekNumber,
|
|
42
|
+
validityStyles: N = l.validityStyles,
|
|
43
|
+
size: S = l.size,
|
|
44
|
+
rounded: E = l.rounded,
|
|
45
|
+
fillMode: x = l.fillMode,
|
|
46
|
+
autoFocus: be = l.autoFocus,
|
|
47
|
+
show: z,
|
|
49
48
|
autoSwitchParts: ye,
|
|
50
49
|
autoSwitchKeys: Ce,
|
|
51
|
-
twoDigitYearMax:
|
|
52
|
-
ariaLabel:
|
|
53
|
-
adaptive:
|
|
54
|
-
adaptiveTitle:
|
|
55
|
-
inputAttributes:
|
|
56
|
-
validationMessage:
|
|
57
|
-
_adaptiveMode:
|
|
58
|
-
valid:
|
|
59
|
-
focusedDate:
|
|
60
|
-
...
|
|
50
|
+
twoDigitYearMax: ke,
|
|
51
|
+
ariaLabel: De,
|
|
52
|
+
adaptive: Dt,
|
|
53
|
+
adaptiveTitle: Oe,
|
|
54
|
+
inputAttributes: Me,
|
|
55
|
+
validationMessage: W,
|
|
56
|
+
_adaptiveMode: Ot = g,
|
|
57
|
+
valid: L,
|
|
58
|
+
focusedDate: Pe,
|
|
59
|
+
...K
|
|
61
60
|
} = ot(Ct, n), B = () => {
|
|
62
61
|
if (oe)
|
|
63
62
|
return b.current && b.current.ownerDocument || window.document;
|
|
64
63
|
}, s = () => !!(p.windowWidth && g && p.windowWidth <= (g == null ? void 0 : g.medium) && n.adaptive), d = () => {
|
|
65
64
|
const t = C.current !== void 0 && C.current !== null ? C.current : n.value !== void 0 ? n.value : p.value;
|
|
66
65
|
return t !== null ? ne(t) : null;
|
|
67
|
-
},
|
|
68
|
-
const t = d() || n.value || null, r = I,
|
|
66
|
+
}, u = () => M.current !== void 0 ? M.current : z !== void 0 ? z : p.show, Re = () => fe || l.dateInput, Ie = () => pe || l.toggleButton, Se = () => me || l.calendar, Ee = () => ge || l.popup, q = () => n.required !== void 0 ? n.required : !1, T = () => {
|
|
67
|
+
const t = d() || n.value || null, r = I, i = R, P = ft(t, r, i), _ = W !== void 0, A = (!q() || t != null) && P, V = L !== void 0 ? L : A;
|
|
69
68
|
return {
|
|
70
69
|
customError: _,
|
|
71
|
-
rangeOverflow: t &&
|
|
70
|
+
rangeOverflow: t && i.getTime() < t.getTime() || !1,
|
|
72
71
|
rangeUnderflow: t && t.getTime() < r.getTime() || !1,
|
|
73
|
-
valid:
|
|
72
|
+
valid: V,
|
|
74
73
|
valueMissing: t === null
|
|
75
74
|
};
|
|
76
75
|
}, xe = (t) => {
|
|
77
76
|
for (const r of t)
|
|
78
|
-
|
|
77
|
+
D({ windowWidth: r.target.clientWidth });
|
|
79
78
|
}, Be = () => {
|
|
80
79
|
c.current && c.current.focus();
|
|
81
80
|
}, H = (t) => {
|
|
82
81
|
y.current = t;
|
|
83
82
|
}, f = (t) => {
|
|
84
|
-
|
|
83
|
+
u() !== t && (D({ show: t }), t && n.onOpen && n.onOpen.call(void 0, { target: w.current }), !t && n.onClose && n.onClose.call(void 0, { target: w.current }));
|
|
85
84
|
}, Te = (t) => {
|
|
86
85
|
const r = d();
|
|
87
86
|
return r && t ? mt(t, r) : t;
|
|
88
87
|
}, _e = (t) => {
|
|
89
88
|
v != null && v.onMouseDownOutside && v.onMouseDownOutside.call(void 0, t);
|
|
90
89
|
}, U = (t, r) => {
|
|
91
|
-
|
|
90
|
+
D({ value: ne(t || void 0) }), C.current = t, M.current = !1, s() || (m.current = !0), n.onChange && n.onChange.call(void 0, {
|
|
92
91
|
syntheticEvent: r.syntheticEvent,
|
|
93
92
|
nativeEvent: r.nativeEvent,
|
|
94
93
|
value: d(),
|
|
95
|
-
show:
|
|
94
|
+
show: u(),
|
|
96
95
|
target: w.current
|
|
97
|
-
}), C.current = void 0,
|
|
98
|
-
},
|
|
96
|
+
}), C.current = void 0, M.current = void 0, f(!1);
|
|
97
|
+
}, Ae = (t) => {
|
|
99
98
|
const r = Te(t.value);
|
|
100
99
|
U(r, t);
|
|
101
100
|
}, Y = () => {
|
|
102
|
-
const { popupClass: t, ...r } = v,
|
|
101
|
+
const { popupClass: t, ...r } = v, i = u(), P = d(), _ = P && Qe(P), A = re(t), V = {
|
|
103
102
|
popupClass: "k-datepicker-popup",
|
|
104
|
-
show:
|
|
103
|
+
show: i,
|
|
105
104
|
anchor: b.current,
|
|
106
|
-
className:
|
|
105
|
+
className: A,
|
|
107
106
|
id: Z,
|
|
108
107
|
anchorAlign: {
|
|
109
108
|
horizontal: "left",
|
|
@@ -119,41 +118,41 @@ const le = o.forwardRef((n, ue) => {
|
|
|
119
118
|
disabled: h,
|
|
120
119
|
value: _,
|
|
121
120
|
min: I,
|
|
122
|
-
max:
|
|
121
|
+
max: R,
|
|
123
122
|
weekNumber: we,
|
|
124
|
-
focusedDate:
|
|
123
|
+
focusedDate: Pe,
|
|
125
124
|
className: s() ? "k-calendar-lg" : "",
|
|
126
125
|
navigation: !s(),
|
|
127
|
-
onChange:
|
|
126
|
+
onChange: Ae
|
|
128
127
|
}, te = Se(), Ge = Ee();
|
|
129
|
-
return s() ? /* @__PURE__ */ o.createElement(te, { _ref: H, ...ee }) : /* @__PURE__ */ o.createElement(Ge, { ...
|
|
128
|
+
return s() ? /* @__PURE__ */ o.createElement(te, { _ref: H, ...ee }) : /* @__PURE__ */ o.createElement(Ge, { ...V }, /* @__PURE__ */ o.createElement(te, { _ref: H, ...ee }));
|
|
130
129
|
}, $ = () => {
|
|
131
|
-
|
|
132
|
-
},
|
|
130
|
+
D({ focused: !1 }), f(!1);
|
|
131
|
+
}, Ve = () => {
|
|
133
132
|
const { windowWidth: t = 0 } = p, r = {
|
|
134
|
-
expand:
|
|
133
|
+
expand: u(),
|
|
135
134
|
onClose: $,
|
|
136
|
-
adaptiveTitle:
|
|
135
|
+
adaptiveTitle: Oe,
|
|
137
136
|
windowWidth: t
|
|
138
|
-
},
|
|
139
|
-
return /* @__PURE__ */ o.createElement(yt, { ...r }, /* @__PURE__ */ o.createElement(bt, { overflowHidden: !0 },
|
|
140
|
-
},
|
|
137
|
+
}, i = Y();
|
|
138
|
+
return /* @__PURE__ */ o.createElement(yt, { ...r }, /* @__PURE__ */ o.createElement(bt, { overflowHidden: !0 }, i));
|
|
139
|
+
}, Fe = (t) => {
|
|
141
140
|
U(t.value, t);
|
|
142
|
-
}, Fe = () => {
|
|
143
|
-
k({ focused: !0 });
|
|
144
141
|
}, Ne = () => {
|
|
145
|
-
|
|
142
|
+
D({ focused: !0 });
|
|
143
|
+
}, ze = () => {
|
|
144
|
+
f(!u());
|
|
146
145
|
}, j = () => {
|
|
147
|
-
h || (m.current = !0, f(!
|
|
148
|
-
}, ze = (t) => {
|
|
149
|
-
t.preventDefault();
|
|
146
|
+
h || (m.current = !0, f(!u()));
|
|
150
147
|
}, We = (t) => {
|
|
151
|
-
|
|
152
|
-
|
|
148
|
+
t.preventDefault();
|
|
149
|
+
}, Le = (t) => {
|
|
150
|
+
const { altKey: r, keyCode: i } = t;
|
|
151
|
+
if (i === O.esc && u()) {
|
|
153
152
|
m.current = !0, f(!1);
|
|
154
153
|
return;
|
|
155
154
|
}
|
|
156
|
-
r && (
|
|
155
|
+
r && (i === O.up || i === O.down) && (t.preventDefault(), t.stopPropagation(), m.current = i === O.up, f(i === O.down));
|
|
157
156
|
}, w = o.useRef(null), b = o.useRef(null), c = o.useRef(null), y = o.useRef(null);
|
|
158
157
|
o.useImperativeHandle(
|
|
159
158
|
w,
|
|
@@ -172,7 +171,7 @@ const le = o.forwardRef((n, ue) => {
|
|
|
172
171
|
return n.name;
|
|
173
172
|
},
|
|
174
173
|
get show() {
|
|
175
|
-
return
|
|
174
|
+
return u();
|
|
176
175
|
},
|
|
177
176
|
get validity() {
|
|
178
177
|
return T();
|
|
@@ -183,65 +182,65 @@ const le = o.forwardRef((n, ue) => {
|
|
|
183
182
|
get mobileMode() {
|
|
184
183
|
return s();
|
|
185
184
|
},
|
|
186
|
-
togglePopup:
|
|
185
|
+
togglePopup: ze,
|
|
187
186
|
// Hidden Methods but still accessible
|
|
188
187
|
focus: Be
|
|
189
188
|
})
|
|
190
|
-
), o.useImperativeHandle(
|
|
191
|
-
const C = o.useRef(null),
|
|
189
|
+
), o.useImperativeHandle(ie, () => w.current);
|
|
190
|
+
const C = o.useRef(null), M = o.useRef(void 0), Ke = o.useRef(null), m = o.useRef(!1), X = o.useRef(!1), k = o.useRef(null), [p, qe] = o.useState({
|
|
192
191
|
value: de,
|
|
193
192
|
show: ce,
|
|
194
193
|
focused: !1
|
|
195
|
-
}), [, He] = o.useReducer((t) => t, !0),
|
|
196
|
-
|
|
194
|
+
}), [, He] = o.useReducer((t) => t, !0), D = (t) => {
|
|
195
|
+
qe((r) => ({ ...r, ...t }));
|
|
197
196
|
};
|
|
198
197
|
o.useEffect(() => {
|
|
199
|
-
y.current && y.current.element &&
|
|
198
|
+
y.current && y.current.element && u() && !X.current && y.current.element.focus({ preventScroll: !0 }), c.current && c.current.element && !u() && m.current && c.current.element.focus({ preventScroll: !0 }), X.current = u(), m.current = !1;
|
|
200
199
|
}), o.useEffect(() => {
|
|
201
200
|
var t;
|
|
202
|
-
return
|
|
201
|
+
return k.current = oe && window.ResizeObserver && new window.ResizeObserver((r) => xe(r)), u() && He(), (t = B()) != null && t.body && k.current && k.current.observe(B().body), () => {
|
|
203
202
|
var r;
|
|
204
|
-
clearTimeout(
|
|
203
|
+
clearTimeout(Ke.current), (r = B()) != null && r.body && k.current && k.current.disconnect();
|
|
205
204
|
};
|
|
206
205
|
}, []);
|
|
207
|
-
const Z =
|
|
206
|
+
const Z = F + "-popup-id", Ue = Y(), Ye = Re(), $e = d(), je = Ie(), Xe = Ve(), G = !N || T().valid, J = se.toLanguageString(le, pt[le]), Ze = {
|
|
208
207
|
disabled: h,
|
|
209
208
|
format: he,
|
|
210
209
|
formatPlaceholder: n.formatPlaceholder,
|
|
211
210
|
id: n.id,
|
|
212
211
|
ariaLabelledBy: n.ariaLabelledBy,
|
|
213
212
|
ariaDescribedBy: n.ariaDescribedBy,
|
|
214
|
-
ariaLabel:
|
|
215
|
-
max:
|
|
213
|
+
ariaLabel: De,
|
|
214
|
+
max: R,
|
|
216
215
|
min: I,
|
|
217
216
|
name: n.name,
|
|
218
|
-
onChange:
|
|
217
|
+
onChange: Fe,
|
|
219
218
|
required: n.required,
|
|
220
219
|
_ref: c,
|
|
221
|
-
tabIndex:
|
|
220
|
+
tabIndex: u() ? -1 : ve,
|
|
222
221
|
title: n.title,
|
|
223
222
|
valid: T().valid,
|
|
224
|
-
validationMessage:
|
|
225
|
-
validityStyles:
|
|
223
|
+
validationMessage: W,
|
|
224
|
+
validityStyles: N,
|
|
226
225
|
value: $e,
|
|
227
226
|
label: void 0,
|
|
228
227
|
placeholder: p.focused ? null : n.placeholder,
|
|
229
|
-
ariaExpanded:
|
|
228
|
+
ariaExpanded: u(),
|
|
230
229
|
size: null,
|
|
231
230
|
fillMode: null,
|
|
232
231
|
rounded: null,
|
|
233
232
|
autoFill: n.autoFill,
|
|
234
|
-
twoDigitYearMax:
|
|
233
|
+
twoDigitYearMax: ke,
|
|
235
234
|
enableMouseWheel: n.enableMouseWheel,
|
|
236
235
|
autoCorrectParts: n.autoCorrectParts,
|
|
237
236
|
autoSwitchParts: ye,
|
|
238
237
|
autoSwitchKeys: Ce,
|
|
239
238
|
allowCaretMode: n.allowCaretMode,
|
|
240
|
-
inputAttributes:
|
|
239
|
+
inputAttributes: Me
|
|
241
240
|
}, Q = /* @__PURE__ */ o.createElement(
|
|
242
241
|
rt,
|
|
243
242
|
{
|
|
244
|
-
onFocus:
|
|
243
|
+
onFocus: Ne,
|
|
245
244
|
onBlur: s() ? void 0 : $,
|
|
246
245
|
onSyncBlur: n.onBlur,
|
|
247
246
|
onSyncFocus: n.onFocus
|
|
@@ -249,7 +248,7 @@ const le = o.forwardRef((n, ue) => {
|
|
|
249
248
|
(t) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
|
|
250
249
|
"span",
|
|
251
250
|
{
|
|
252
|
-
...n.label ? {} :
|
|
251
|
+
...n.label ? {} : K,
|
|
253
252
|
ref: b,
|
|
254
253
|
className: re(
|
|
255
254
|
"k-input",
|
|
@@ -259,12 +258,12 @@ const le = o.forwardRef((n, ue) => {
|
|
|
259
258
|
[`k-rounded-${ae.roundedMap[E] || E}`]: E,
|
|
260
259
|
[`k-input-${x}`]: x,
|
|
261
260
|
"k-invalid": !G,
|
|
262
|
-
"k-required":
|
|
261
|
+
"k-required": q(),
|
|
263
262
|
"k-disabled": h
|
|
264
263
|
},
|
|
265
264
|
n.className
|
|
266
265
|
),
|
|
267
|
-
onKeyDown:
|
|
266
|
+
onKeyDown: Le,
|
|
268
267
|
style: { width: n.width },
|
|
269
268
|
onFocus: t.onFocus,
|
|
270
269
|
onBlur: t.onBlur,
|
|
@@ -275,7 +274,7 @@ const le = o.forwardRef((n, ue) => {
|
|
|
275
274
|
{
|
|
276
275
|
_ref: c,
|
|
277
276
|
ariaRole: "combobox",
|
|
278
|
-
ariaExpanded:
|
|
277
|
+
ariaExpanded: u(),
|
|
279
278
|
ariaControls: Z,
|
|
280
279
|
autoFocus: be,
|
|
281
280
|
...Ze
|
|
@@ -286,14 +285,14 @@ const le = o.forwardRef((n, ue) => {
|
|
|
286
285
|
{
|
|
287
286
|
type: "button",
|
|
288
287
|
icon: "calendar",
|
|
289
|
-
svgIcon:
|
|
288
|
+
svgIcon: lt,
|
|
290
289
|
title: J,
|
|
291
290
|
className: "k-input-button",
|
|
292
291
|
rounded: null,
|
|
293
292
|
onClick: s() ? void 0 : j,
|
|
294
293
|
"aria-label": J,
|
|
295
294
|
fillMode: x,
|
|
296
|
-
onMouseDown:
|
|
295
|
+
onMouseDown: We
|
|
297
296
|
}
|
|
298
297
|
),
|
|
299
298
|
!s() && Ue
|
|
@@ -304,16 +303,16 @@ const le = o.forwardRef((n, ue) => {
|
|
|
304
303
|
{
|
|
305
304
|
dateInput: c,
|
|
306
305
|
label: n.label,
|
|
307
|
-
editorId:
|
|
306
|
+
editorId: F,
|
|
308
307
|
editorValid: G,
|
|
309
308
|
editorDisabled: h,
|
|
310
309
|
children: Q,
|
|
311
310
|
style: { width: n.width },
|
|
312
|
-
...
|
|
311
|
+
...K
|
|
313
312
|
}
|
|
314
313
|
) : Q;
|
|
315
314
|
});
|
|
316
|
-
|
|
315
|
+
ue.propTypes = {
|
|
317
316
|
className: e.string,
|
|
318
317
|
defaultShow: e.bool,
|
|
319
318
|
defaultValue: e.instanceOf(Date),
|
|
@@ -322,32 +321,32 @@ le.propTypes = {
|
|
|
322
321
|
format: e.oneOfType([
|
|
323
322
|
e.string,
|
|
324
323
|
e.shape({
|
|
325
|
-
skeleton:
|
|
326
|
-
pattern:
|
|
327
|
-
date:
|
|
328
|
-
time:
|
|
329
|
-
datetime:
|
|
330
|
-
era:
|
|
331
|
-
year:
|
|
332
|
-
month:
|
|
333
|
-
day:
|
|
334
|
-
weekday:
|
|
335
|
-
hour:
|
|
336
|
-
hour12:
|
|
337
|
-
minute:
|
|
338
|
-
second:
|
|
339
|
-
timeZoneName:
|
|
324
|
+
skeleton: a(e.string),
|
|
325
|
+
pattern: a(e.string),
|
|
326
|
+
date: a(e.oneOf(["short", "medium", "long", "full"])),
|
|
327
|
+
time: a(e.oneOf(["short", "medium", "long", "full"])),
|
|
328
|
+
datetime: a(e.oneOf(["short", "medium", "long", "full"])),
|
|
329
|
+
era: a(e.oneOf(["narrow", "short", "long"])),
|
|
330
|
+
year: a(e.oneOf(["numeric", "2-digit"])),
|
|
331
|
+
month: a(e.oneOf(["numeric", "2-digit", "narrow", "short", "long"])),
|
|
332
|
+
day: a(e.oneOf(["numeric", "2-digit"])),
|
|
333
|
+
weekday: a(e.oneOf(["narrow", "short", "long"])),
|
|
334
|
+
hour: a(e.oneOf(["numeric", "2-digit"])),
|
|
335
|
+
hour12: a(e.bool),
|
|
336
|
+
minute: a(e.oneOf(["numeric", "2-digit"])),
|
|
337
|
+
second: a(e.oneOf(["numeric", "2-digit"])),
|
|
338
|
+
timeZoneName: a(e.oneOf(["short", "long"]))
|
|
340
339
|
})
|
|
341
340
|
]),
|
|
342
341
|
formatPlaceholder: e.oneOfType([
|
|
343
|
-
e.oneOf(["wide", "narrow", "short", "formatPattern"])
|
|
342
|
+
a(e.oneOf(["wide", "narrow", "short", "formatPattern"])),
|
|
344
343
|
e.shape({
|
|
345
|
-
year: e.string
|
|
346
|
-
month: e.string
|
|
347
|
-
day: e.string
|
|
348
|
-
hour: e.string
|
|
349
|
-
minute: e.string
|
|
350
|
-
second: e.string
|
|
344
|
+
year: a(e.string),
|
|
345
|
+
month: a(e.string),
|
|
346
|
+
day: a(e.string),
|
|
347
|
+
hour: a(e.string),
|
|
348
|
+
minute: a(e.string),
|
|
349
|
+
second: a(e.string)
|
|
351
350
|
})
|
|
352
351
|
]),
|
|
353
352
|
id: e.string,
|
|
@@ -358,9 +357,9 @@ le.propTypes = {
|
|
|
358
357
|
max: e.instanceOf(Date),
|
|
359
358
|
name: e.string,
|
|
360
359
|
popupSettings: e.shape({
|
|
361
|
-
animate: e.bool
|
|
362
|
-
appendTo: e.any
|
|
363
|
-
popupClass: e.string
|
|
360
|
+
animate: a(e.bool),
|
|
361
|
+
appendTo: a(e.any),
|
|
362
|
+
popupClass: a(e.string)
|
|
364
363
|
}),
|
|
365
364
|
show: e.bool,
|
|
366
365
|
tabIndex: e.number,
|
|
@@ -379,10 +378,10 @@ le.propTypes = {
|
|
|
379
378
|
autoFocus: e.bool,
|
|
380
379
|
inputAttributes: e.object
|
|
381
380
|
};
|
|
382
|
-
const
|
|
381
|
+
const l = {
|
|
383
382
|
defaultShow: !1,
|
|
384
383
|
defaultValue: null,
|
|
385
|
-
dateInput:
|
|
384
|
+
dateInput: it,
|
|
386
385
|
calendar: st,
|
|
387
386
|
toggleButton: ht,
|
|
388
387
|
popup: Je,
|
|
@@ -400,9 +399,9 @@ const a = {
|
|
|
400
399
|
fillMode: "solid",
|
|
401
400
|
autoFocus: !1
|
|
402
401
|
}, Ct = at();
|
|
403
|
-
|
|
402
|
+
ue.displayName = "KendoReactDatePicker";
|
|
404
403
|
export {
|
|
405
|
-
|
|
404
|
+
ue as DatePicker,
|
|
406
405
|
Ct as DatePickerPropsContext,
|
|
407
|
-
|
|
406
|
+
l as datePickerDefaultProps
|
|
408
407
|
};
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@progress/kendo-react-buttons"),e=t.Button;exports.ToggleButton=e;
|
|
@@ -5,9 +5,8 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const e = t;
|
|
8
|
+
import { Button as o } from "@progress/kendo-react-buttons";
|
|
9
|
+
const n = o;
|
|
11
10
|
export {
|
|
12
|
-
|
|
11
|
+
n as ToggleButton
|
|
13
12
|
};
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),T=require("@progress/kendo-svg-icons"),x=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),P=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),n=require("../messages/index.js"),_=require("@progress/kendo-react-buttons"),A=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function F(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=F(k),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(P.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(A.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{overflowHidden:!0},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(x.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a,inputAttributes:e}=this.props,s=this.value||h.EMPTY_SELECTIONRANGE,r=this.mobileMode&&this.show?this.state.currentValue:s,m=(this.props.startDateInputSettings||{}).id||this._startInputId,w=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),C=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),y=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:r.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:r.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},R=i.createElement(_.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":m+" "+w,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:T.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:O=>{this._element=O},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?R:y,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInput.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date)),end:u.nullable(t.instanceOf(Date))}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const b=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(b,o.withAdaptiveModeContext(p)));I.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=I;exports.DateRangePickerPropsContext=b;exports.DateRangePickerWithoutContext=p;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),T=require("@progress/kendo-svg-icons"),x=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),P=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),n=require("../messages/index.js"),_=require("@progress/kendo-react-buttons"),A=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function F(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=F(k),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(P.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(A.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{overflowHidden:!0},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(x.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a,inputAttributes:e}=this.props,s=this.value||h.EMPTY_SELECTIONRANGE,r=this.mobileMode&&this.show?this.state.currentValue:s,m=(this.props.startDateInputSettings||{}).id||this._startInputId,w=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),C=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),y=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:r.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:r.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},R=i.createElement(_.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":m+" "+w,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:T.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:O=>{this._element=O},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?R:y,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInput.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date)),end:u.nullable(t.instanceOf(Date))}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const b=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(b,o.withAdaptiveModeContext(p)));I.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=I;exports.DateRangePickerPropsContext=b;exports.DateRangePickerWithoutContext=p;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";
|
|
9
8
|
import * as i from "react";
|
|
10
9
|
import e from "prop-types";
|
|
11
10
|
import { Popup as _ } from "@progress/kendo-react-popup";
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),T=require("@progress/kendo-date-math"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),ie=require("../package-metadata.js"),p=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),se=require("./DateTimeSelector.js"),oe=require("../timepicker/utils.js"),ae=require("../hooks/usePickerFloatingLabel.js"),ne=require("../common/AdaptiveMode.js"),re=require("@progress/kendo-react-layout");function le(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,o.get?o:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=le(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:o,maxTime:n,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(se.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:o,maxTime:n,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,o=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle,windowWidth:t,footer:{cancelText:o,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ne.AdaptiveMode,{...c},r.createElement(re.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:T.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:o,keyCode:n}=t;if(n===s.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}o&&(n===s.Keys.up||n===s.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===s.Keys.up,this.setShow(n===s.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),s.validatePackage(ie.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?T.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&oe.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,o=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:o;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:o=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:O,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:z,maxTime:A,ariaLabelledBy:B,ariaDescribedBy:N,popup:L=J.Popup,unstyled:y,autoFill:_,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:H,allowCaretMode:W}=this.props,D=y&&y.uDateTimePicker,S=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:O,max:k,minTime:z,maxTime:A,name:q,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,size:null,fillMode:null,rounded:null,unstyled:y,autoFill:_,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:H,allowCaretMode:W},I=r.createElement(s.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:s.classNames(s.uDateTimePicker.wrapper({c:D,size:i,fillMode:o,rounded:t,disabled:d,required:this.required,invalid:!S}),C),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?void 0:Y,onBlur:Z,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:c,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:s.classNames(s.uDateTimePicker.inputButton({c:D})),rounded:null,fillMode:o,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(L,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:s.classNames(s.uDateTimePicker.popup({c:D})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(ae.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:S,editorDisabled:this.props.disabled,children:I,style:{width:this.props.width}}):I}setShow(i){const{onOpen:t,onClose:o}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&o&&o.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=a;const P=s.createPropsContext(),M=s.withIdHOC(s.withPropsContext(P,s.withUnstyledHOC(s.withAdaptiveModeContext(g))));M.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=M;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),T=require("@progress/kendo-date-math"),s=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),ie=require("../package-metadata.js"),p=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),se=require("./DateTimeSelector.js"),oe=require("../timepicker/utils.js"),ae=require("../hooks/usePickerFloatingLabel.js"),ne=require("../common/AdaptiveMode.js"),re=require("@progress/kendo-react-layout");function le(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,o.get?o:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=le(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:o,maxTime:n,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(se.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:o,maxTime:n,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,o=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle,windowWidth:t,footer:{cancelText:o,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ne.AdaptiveMode,{...c},r.createElement(re.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:T.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:o,keyCode:n}=t;if(n===s.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}o&&(n===s.Keys.up||n===s.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===s.Keys.up,this.setShow(n===s.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),s.validatePackage(ie.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(s.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?T.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&oe.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,o=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:o;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var i;this.observerResize=s.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:o=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:O,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:z,maxTime:A,ariaLabelledBy:B,ariaDescribedBy:N,popup:L=J.Popup,unstyled:y,autoFill:_,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:H,allowCaretMode:W}=this.props,D=y&&y.uDateTimePicker,S=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:O,max:k,minTime:z,maxTime:A,name:q,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,size:null,fillMode:null,rounded:null,unstyled:y,autoFill:_,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:H,allowCaretMode:W},I=r.createElement(s.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:s.classNames(s.uDateTimePicker.wrapper({c:D,size:i,fillMode:o,rounded:t,disabled:d,required:this.required,invalid:!S}),C),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?void 0:Y,onBlur:Z,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:c,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:s.classNames(s.uDateTimePicker.inputButton({c:D})),rounded:null,fillMode:o,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(L,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:s.classNames(s.uDateTimePicker.popup({c:D})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(ae.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:S,editorDisabled:this.props.disabled,children:I,style:{width:this.props.width}}):I}setShow(i){const{onOpen:t,onClose:o}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&o&&o.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=a;const P=s.createPropsContext(),M=s.withIdHOC(s.withPropsContext(P,s.withUnstyledHOC(s.withAdaptiveModeContext(g))));M.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=M;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
|