@sb1/ffe-datepicker-react 100.12.4 → 101.0.0
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/es/button/Button.js +4 -5
- package/es/calendar/Calendar.js +88 -111
- package/es/calendar/ClickableDate.js +20 -41
- package/es/calendar/Header.js +13 -14
- package/es/calendar/NonClickableDate.js +1 -2
- package/es/datelogic/simplecalendar.js +97 -124
- package/es/datelogic/simpledate.js +66 -96
- package/es/datepicker/Datepicker.js +2 -25
- package/es/datepicker/DatepickerComp.js +61 -64
- package/es/datepicker/DatepickerContext.js +33 -36
- package/es/datepicker/SpinButton.js +8 -32
- package/es/datepicker/padZero.js +2 -2
- package/es/datepicker/testHelper.js +72 -143
- package/es/datepicker/toNumber.js +4 -6
- package/es/i18n/i18n.js +3 -3
- package/es/input/DateInput.js +3 -26
- package/es/types.js +1 -1
- package/es/util/dateRangeUtils.js +12 -12
- package/es/util/dateUtil.js +2 -2
- package/es/util/isIOSSafari.js +4 -4
- package/lib/button/Button.js +8 -9
- package/lib/calendar/Calendar.js +94 -116
- package/lib/calendar/ClickableDate.js +22 -42
- package/lib/calendar/Header.js +17 -18
- package/lib/calendar/NonClickableDate.js +2 -3
- package/lib/datelogic/simplecalendar.js +99 -125
- package/lib/datelogic/simpledate.js +67 -96
- package/lib/datepicker/Datepicker.js +5 -28
- package/lib/datepicker/DatepickerComp.js +74 -77
- package/lib/datepicker/DatepickerContext.js +36 -39
- package/lib/datepicker/SpinButton.js +10 -34
- package/lib/datepicker/padZero.js +2 -2
- package/lib/datepicker/testHelper.js +73 -177
- package/lib/datepicker/toNumber.js +4 -6
- package/lib/i18n/i18n.js +3 -3
- package/lib/input/DateInput.js +7 -30
- package/lib/types.js +1 -1
- package/lib/util/dateRangeUtils.js +14 -14
- package/lib/util/dateUtil.js +3 -3
- package/lib/util/isIOSSafari.js +4 -4
- package/package.json +13 -14
|
@@ -37,66 +37,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
39
|
exports.DatepickerComp = void 0;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
var formatDate = (0, react_1.useCallback)(function () {
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const DatepickerContext_1 = require("./DatepickerContext");
|
|
42
|
+
const SpinButton_1 = require("./SpinButton");
|
|
43
|
+
const padZero_1 = require("./padZero");
|
|
44
|
+
const button_1 = require("../button");
|
|
45
|
+
const calendar_1 = require("../calendar");
|
|
46
|
+
const dateUtil_1 = require("../util/dateUtil");
|
|
47
|
+
const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
|
|
48
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
49
|
+
const simpledate_1 = require("../datelogic/simpledate");
|
|
50
|
+
const ffe_form_react_1 = require("@sb1/ffe-form-react");
|
|
51
|
+
const i18n_1 = __importDefault(require("../i18n/i18n"));
|
|
52
|
+
const types_1 = require("../types");
|
|
53
|
+
const DatepickerComp = ({ ariaInvalid: ariaInvalidState, 'aria-invalid': ariaInvalidProp, ariaDescribedby: ariaDescribedbyState, 'aria-describedby': ariaDescribedbyProp, onBlur, calendarAbove, id, maxDate: maxDateProp, minDate: minDateProp, onChange, fullWidth, fieldMessage, labelId, dropdownCaption, disabledDates, }) => {
|
|
54
|
+
const { day, setDay, year, setYear, month, setMonth, locale, calendarActiveDate, setCalendarActiveDate, setLastChangedValue, } = (0, react_1.useContext)(DatepickerContext_1.DatepickerContext);
|
|
55
|
+
const formatDate = (0, react_1.useCallback)(() => {
|
|
57
56
|
return (0, dateUtil_1.getPaddedDateString)(day, month, year);
|
|
58
57
|
}, [day, month, year]);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return fieldMessage ?
|
|
58
|
+
const [displayDatePicker, setDisplayDatePicker] = (0, react_1.useState)(false);
|
|
59
|
+
const [minDate, setMinDate] = (0, react_1.useState)(minDateProp);
|
|
60
|
+
const [maxDate, setMaxDate] = (0, react_1.useState)(maxDateProp);
|
|
61
|
+
const [lastValidDate, setLastValidDate] = (0, react_1.useState)(formatDate());
|
|
62
|
+
const datepickerId = (0, react_1.useId)();
|
|
63
|
+
const buttonRef = (0, react_1.useRef)(null);
|
|
64
|
+
const dayRef = (0, react_1.useRef)(null);
|
|
65
|
+
const monthRef = (0, react_1.useRef)(null);
|
|
66
|
+
const yearRef = (0, react_1.useRef)(null);
|
|
67
|
+
const getFieldMessageId = () => {
|
|
68
|
+
return fieldMessage ? `${datepickerId}-fieldmessage` : undefined;
|
|
70
69
|
};
|
|
71
|
-
|
|
70
|
+
const _onChange = (0, react_1.useCallback)((date) => {
|
|
72
71
|
setLastChangedValue(date);
|
|
73
72
|
onChange(date);
|
|
74
73
|
}, [onChange, setLastChangedValue]);
|
|
75
|
-
|
|
74
|
+
const fieldMessageId = getFieldMessageId();
|
|
76
75
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
|
-
|
|
76
|
+
const debounceCalendar = (0, react_1.useCallback)((0, lodash_debounce_1.default)((newValue) => {
|
|
78
77
|
if (newValue !== lastValidDate && (0, dateUtil_1.validateDate)(newValue)) {
|
|
79
78
|
setCalendarActiveDate(newValue);
|
|
80
79
|
setLastValidDate(newValue);
|
|
81
80
|
}
|
|
82
81
|
}, 250), [lastValidDate]);
|
|
83
|
-
|
|
84
|
-
(0, react_1.useEffect)(
|
|
85
|
-
return
|
|
82
|
+
const hasMessage = !!fieldMessage;
|
|
83
|
+
(0, react_1.useEffect)(() => {
|
|
84
|
+
return () => {
|
|
86
85
|
debounceCalendar.cancel();
|
|
87
86
|
};
|
|
88
87
|
}, [debounceCalendar]);
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
(0, simpledate_1.getSimpleDateFromString)(dateString,
|
|
92
|
-
|
|
88
|
+
const validateDateIntervals = (0, react_1.useCallback)(() => {
|
|
89
|
+
const dateString = formatDate();
|
|
90
|
+
(0, simpledate_1.getSimpleDateFromString)(dateString, date => {
|
|
91
|
+
const maxDateValidated = maxDateProp
|
|
93
92
|
? (0, simpledate_1.getSimpleDateFromString)(maxDateProp)
|
|
94
93
|
: null;
|
|
95
94
|
if ((maxDateValidated === null || maxDateValidated === void 0 ? void 0 : maxDateValidated.isBefore(date)) &&
|
|
96
95
|
(0, dateUtil_1.isDateInputWithTwoDigitYear)(dateString)) {
|
|
97
96
|
date.adjust({ period: 'Y', offset: -100 });
|
|
98
97
|
}
|
|
99
|
-
|
|
98
|
+
const formattedDate = date.format();
|
|
100
99
|
if (formattedDate !== dateString) {
|
|
101
100
|
setDay([date.date]);
|
|
102
101
|
setMonth([date.month + 1]);
|
|
@@ -105,7 +104,7 @@ var DatepickerComp = function (_a) {
|
|
|
105
104
|
setLastValidDate(formattedDate);
|
|
106
105
|
});
|
|
107
106
|
}, [formatDate, maxDateProp, setDay, setMonth, setYear]);
|
|
108
|
-
(0, react_1.useEffect)(
|
|
107
|
+
(0, react_1.useEffect)(() => {
|
|
109
108
|
if (minDateProp !== minDate || maxDateProp !== maxDate) {
|
|
110
109
|
setMinDate(minDateProp);
|
|
111
110
|
setMaxDate(maxDateProp);
|
|
@@ -121,43 +120,43 @@ var DatepickerComp = function (_a) {
|
|
|
121
120
|
maxDate,
|
|
122
121
|
validateDateIntervals,
|
|
123
122
|
]);
|
|
124
|
-
|
|
123
|
+
const closeCalendarSetInputFocus = () => {
|
|
125
124
|
var _a;
|
|
126
125
|
setDisplayDatePicker(false);
|
|
127
126
|
(_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
128
127
|
validateDateIntervals();
|
|
129
128
|
};
|
|
130
|
-
|
|
129
|
+
const escKeyHandler = (evt) => {
|
|
131
130
|
if (evt.key === 'Escape') {
|
|
132
131
|
closeCalendarSetInputFocus();
|
|
133
132
|
}
|
|
134
133
|
};
|
|
135
|
-
|
|
134
|
+
const globalClickHandler = (evt) => {
|
|
136
135
|
if (displayDatePicker && evt.__datepickerID !== datepickerId) {
|
|
137
136
|
closeCalendarSetInputFocus();
|
|
138
137
|
}
|
|
139
138
|
};
|
|
140
|
-
|
|
139
|
+
const addGlobalEventListeners = () => {
|
|
141
140
|
window.addEventListener('click', globalClickHandler);
|
|
142
141
|
window.addEventListener('keyup', escKeyHandler);
|
|
143
142
|
};
|
|
144
|
-
|
|
143
|
+
const removeGlobalEventListeners = () => {
|
|
145
144
|
window.removeEventListener('click', globalClickHandler);
|
|
146
145
|
window.removeEventListener('keyup', escKeyHandler);
|
|
147
146
|
};
|
|
148
|
-
(0, react_1.useEffect)(
|
|
147
|
+
(0, react_1.useEffect)(() => {
|
|
149
148
|
if (displayDatePicker) {
|
|
150
149
|
addGlobalEventListeners();
|
|
151
150
|
}
|
|
152
151
|
else {
|
|
153
152
|
removeGlobalEventListeners();
|
|
154
153
|
}
|
|
155
|
-
return
|
|
154
|
+
return () => {
|
|
156
155
|
removeGlobalEventListeners();
|
|
157
156
|
};
|
|
158
157
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
159
158
|
}, [displayDatePicker]);
|
|
160
|
-
|
|
159
|
+
const calendarButtonClickHandler = () => {
|
|
161
160
|
validateDateIntervals();
|
|
162
161
|
setDisplayDatePicker(!displayDatePicker);
|
|
163
162
|
};
|
|
@@ -165,11 +164,11 @@ var DatepickerComp = function (_a) {
|
|
|
165
164
|
* Adds a flag on the click event so that the globalClickHandler()
|
|
166
165
|
* can determine whether the ID matches. Makes it so that only one datepicker can be open at the same time
|
|
167
166
|
*/
|
|
168
|
-
|
|
169
|
-
|
|
167
|
+
const addFlagOnClickEventClickHandler = (evt) => {
|
|
168
|
+
const nativeEvent = evt.nativeEvent;
|
|
170
169
|
nativeEvent.__datepickerID = datepickerId;
|
|
171
170
|
};
|
|
172
|
-
|
|
171
|
+
const focusSpinButton = (evt) => {
|
|
173
172
|
var _a;
|
|
174
173
|
if (evt.target !== yearRef.current &&
|
|
175
174
|
evt.target !== buttonRef.current &&
|
|
@@ -178,9 +177,9 @@ var DatepickerComp = function (_a) {
|
|
|
178
177
|
(_a = dayRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
179
178
|
}
|
|
180
179
|
};
|
|
181
|
-
|
|
180
|
+
const datePickedHandler = (date) => {
|
|
182
181
|
var _a;
|
|
183
|
-
|
|
182
|
+
const simpleDate = (0, simpledate_1.getSimpleDateFromString)(date);
|
|
184
183
|
if (simpleDate) {
|
|
185
184
|
setDay([simpleDate.date]);
|
|
186
185
|
setMonth([simpleDate.month + 1]);
|
|
@@ -190,34 +189,34 @@ var DatepickerComp = function (_a) {
|
|
|
190
189
|
(_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
191
190
|
}
|
|
192
191
|
};
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
192
|
+
const ariaInvalid = () => {
|
|
193
|
+
const ariaInvalidTotal = ariaInvalidProp === 'true' || ariaInvalidState;
|
|
194
|
+
const isAriaInvalid = ariaInvalidTotal === 'true' || ariaInvalidTotal === true
|
|
196
195
|
? 'true'
|
|
197
196
|
: undefined;
|
|
198
197
|
return isAriaInvalid;
|
|
199
198
|
};
|
|
200
|
-
|
|
201
|
-
|
|
199
|
+
const ariaDescribedby = () => {
|
|
200
|
+
const ariaDescribedbyTotal = ariaDescribedbyProp !== null && ariaDescribedbyProp !== void 0 ? ariaDescribedbyProp : ariaDescribedbyState;
|
|
202
201
|
return ariaDescribedbyTotal;
|
|
203
202
|
};
|
|
204
|
-
|
|
203
|
+
const handlePaste = (evt) => {
|
|
205
204
|
evt.preventDefault();
|
|
206
|
-
|
|
207
|
-
|
|
205
|
+
const paste = (evt.clipboardData || window.Clipboard).getData('text');
|
|
206
|
+
const date = (0, simpledate_1.getSimpleDateFromString)(paste);
|
|
208
207
|
if (date) {
|
|
209
208
|
setDay([date.date]);
|
|
210
209
|
setMonth([date.month + 1]);
|
|
211
210
|
setYear([date.year]);
|
|
212
211
|
}
|
|
213
212
|
};
|
|
214
|
-
|
|
215
|
-
(0, react_1.useEffect)(
|
|
213
|
+
const [init, setInit] = (0, react_1.useState)(true);
|
|
214
|
+
(0, react_1.useEffect)(() => {
|
|
216
215
|
if (init) {
|
|
217
216
|
setInit(false);
|
|
218
217
|
return;
|
|
219
218
|
}
|
|
220
|
-
|
|
219
|
+
const [day, month, year] = lastValidDate.split('.').map(Number);
|
|
221
220
|
if (day * month * year > 0) {
|
|
222
221
|
_onChange(lastValidDate);
|
|
223
222
|
return;
|
|
@@ -230,12 +229,12 @@ var DatepickerComp = function (_a) {
|
|
|
230
229
|
'ffe-datepicker--full-width': fullWidth,
|
|
231
230
|
'ffe-input-group--message': hasMessage,
|
|
232
231
|
'ffe-datepicker--invalid': ariaInvalid(),
|
|
233
|
-
}), "data-testid": "date-picker", onClick:
|
|
232
|
+
}), "data-testid": "date-picker", onClick: e => {
|
|
234
233
|
addFlagOnClickEventClickHandler(e);
|
|
235
234
|
focusSpinButton(e);
|
|
236
235
|
}, role: 'group', id: id },
|
|
237
|
-
react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-dateinput'), onBlur:
|
|
238
|
-
|
|
236
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-dateinput'), onBlur: evt => {
|
|
237
|
+
const elementReceivingFocus = evt.relatedTarget;
|
|
239
238
|
if (elementReceivingFocus !== yearRef.current &&
|
|
240
239
|
elementReceivingFocus !== dayRef.current &&
|
|
241
240
|
elementReceivingFocus !== monthRef.current) {
|
|
@@ -243,22 +242,20 @@ var DatepickerComp = function (_a) {
|
|
|
243
242
|
validateDateIntervals();
|
|
244
243
|
}
|
|
245
244
|
} },
|
|
246
|
-
react_1.default.createElement(SpinButton_1.SpinButton, { ref: dayRef, value: day !== null && day !== void 0 ? day : undefined, min: 1, max: 31, onPaste: handlePaste, onSpinButtonChange:
|
|
247
|
-
if (allowFocusNext === void 0) { allowFocusNext = true; }
|
|
245
|
+
react_1.default.createElement(SpinButton_1.SpinButton, { ref: dayRef, value: day !== null && day !== void 0 ? day : undefined, min: 1, max: 31, onPaste: handlePaste, onSpinButtonChange: (newValue, allowFocusNext = true) => {
|
|
248
246
|
return allowFocusNext
|
|
249
|
-
? setDay(newValue,
|
|
247
|
+
? setDay(newValue, () => {
|
|
250
248
|
var _a;
|
|
251
249
|
return (_a = monthRef.current) === null || _a === void 0 ? void 0 : _a.focus({
|
|
252
250
|
preventScroll: true,
|
|
253
251
|
});
|
|
254
252
|
})
|
|
255
253
|
: setDay(newValue);
|
|
256
|
-
}, nextSpinButton: monthRef, maxLength: 2, "aria-invalid": ariaInvalid(), "aria-valuenow": typeof day === 'number' ? day : undefined, "aria-valuetext":
|
|
254
|
+
}, nextSpinButton: monthRef, maxLength: 2, "aria-invalid": ariaInvalid(), "aria-valuenow": typeof day === 'number' ? day : undefined, "aria-valuetext": `${day}`, "aria-label": i18n_1.default[locale].DAY, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, day ? (0, padZero_1.padZero)(day) : 'dd'),
|
|
257
255
|
".",
|
|
258
|
-
react_1.default.createElement(SpinButton_1.SpinButton, { ref: monthRef, value: month !== null && month !== void 0 ? month : undefined, min: 1, max: 12, onPaste: handlePaste, onSpinButtonChange:
|
|
259
|
-
if (allowFocusNext === void 0) { allowFocusNext = true; }
|
|
256
|
+
react_1.default.createElement(SpinButton_1.SpinButton, { ref: monthRef, value: month !== null && month !== void 0 ? month : undefined, min: 1, max: 12, onPaste: handlePaste, onSpinButtonChange: (newValue, allowFocusNext = true) => {
|
|
260
257
|
return allowFocusNext
|
|
261
|
-
? setMonth(newValue,
|
|
258
|
+
? setMonth(newValue, () => {
|
|
262
259
|
var _a;
|
|
263
260
|
return (_a = yearRef.current) === null || _a === void 0 ? void 0 : _a.focus({
|
|
264
261
|
preventScroll: true,
|
|
@@ -266,12 +263,12 @@ var DatepickerComp = function (_a) {
|
|
|
266
263
|
})
|
|
267
264
|
: setMonth(newValue);
|
|
268
265
|
}, nextSpinButton: yearRef, prevSpinButton: dayRef, maxLength: 2, "aria-invalid": ariaInvalid(), "aria-valuenow": typeof month === 'number' ? month : undefined, "aria-valuetext": (0, types_1.isMonth)(month)
|
|
269
|
-
?
|
|
266
|
+
? `${month} - ${i18n_1.default[locale][`MONTH_${month}`]}`
|
|
270
267
|
: undefined, "aria-label": i18n_1.default[locale].MONTH, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, month ? (0, padZero_1.padZero)(month) : 'mm'),
|
|
271
268
|
".",
|
|
272
|
-
react_1.default.createElement(SpinButton_1.SpinButton, { ref: yearRef, className: 'ffe-dateinput__field-year', value: year !== null && year !== void 0 ? year : undefined, min: 1, max: 9999, onPaste: handlePaste, onSpinButtonChange:
|
|
269
|
+
react_1.default.createElement(SpinButton_1.SpinButton, { ref: yearRef, className: 'ffe-dateinput__field-year', value: year !== null && year !== void 0 ? year : undefined, min: 1, max: 9999, onPaste: handlePaste, onSpinButtonChange: newValue => {
|
|
273
270
|
setYear(newValue);
|
|
274
|
-
}, prevSpinButton: monthRef, maxLength: 4, "aria-invalid": ariaInvalid(), "aria-valuetext":
|
|
271
|
+
}, prevSpinButton: monthRef, maxLength: 4, "aria-invalid": ariaInvalid(), "aria-valuetext": `${year}`, "aria-valuenow": typeof year === 'number' ? year : undefined, "aria-label": i18n_1.default[locale].YEAR, "aria-describedby": ariaDescribedby(), "aria-labelledby": labelId }, year ? year : 'yyyy')),
|
|
275
272
|
react_1.default.createElement(button_1.Button, { onClick: calendarButtonClickHandler, locale: locale, value: calendarActiveDate || '', ref: buttonRef }),
|
|
276
273
|
displayDatePicker && (react_1.default.createElement(calendar_1.Calendar, { calendarClassName: (0, classnames_1.default)('ffe-calendar ffe-calendar--datepicker', { 'ffe-calendar--datepicker--above': calendarAbove }), locale: locale, onDatePicked: datePickedHandler, selectedDate: calendarActiveDate, focusOnMount: true, dropdownCaption: dropdownCaption, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates })),
|
|
277
274
|
!!fieldMessage && (react_1.default.createElement(ffe_form_react_1.ErrorFieldMessage, { as: "p", id: fieldMessageId }, fieldMessage))));
|
|
@@ -34,34 +34,33 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
exports.DatepickerProvider = exports.DatepickerContext = void 0;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
const react_1 = __importStar(require("react"));
|
|
38
|
+
const simpledate_1 = require("../datelogic/simpledate");
|
|
39
|
+
const dateUtil_1 = require("../util/dateUtil");
|
|
40
|
+
const toNumber_1 = require("./toNumber");
|
|
41
41
|
exports.DatepickerContext = (0, react_1.createContext)({
|
|
42
42
|
day: null,
|
|
43
43
|
month: null,
|
|
44
44
|
year: null,
|
|
45
|
-
setDay:
|
|
46
|
-
setMonth:
|
|
47
|
-
setYear:
|
|
45
|
+
setDay: () => null,
|
|
46
|
+
setMonth: () => null,
|
|
47
|
+
setYear: () => null,
|
|
48
48
|
locale: 'nb',
|
|
49
49
|
calendarActiveDate: '',
|
|
50
|
-
setCalendarActiveDate:
|
|
51
|
-
setLastChangedValue:
|
|
50
|
+
setCalendarActiveDate: () => null,
|
|
51
|
+
setLastChangedValue: () => null,
|
|
52
52
|
});
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
var
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
(0, react_1.useEffect)(function () {
|
|
53
|
+
const MONTHS_PER_YEAR = 12;
|
|
54
|
+
const MAX_DAYS = 31;
|
|
55
|
+
const DatepickerProvider = ({ children, value = '', locale, }) => {
|
|
56
|
+
var _a;
|
|
57
|
+
const newDate = (0, dateUtil_1.validateDate)(value) ? (0, simpledate_1.getSimpleDateFromString)(value) : '';
|
|
58
|
+
const [day, setDay] = (0, react_1.useState)(newDate ? newDate.date : null);
|
|
59
|
+
const [month, setMonth] = (0, react_1.useState)(newDate ? newDate.month + 1 : null);
|
|
60
|
+
const [year, setYear] = (0, react_1.useState)(newDate ? newDate.year : null);
|
|
61
|
+
const [calendarActiveDate, setCalendarActiveDate] = (0, react_1.useState)((_a = newDate === null || newDate === void 0 ? void 0 : newDate.toString()) !== null && _a !== void 0 ? _a : '');
|
|
62
|
+
const [lastChangedValue, setLastChangedValue] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
|
|
63
|
+
(0, react_1.useEffect)(() => {
|
|
65
64
|
var _a;
|
|
66
65
|
if (value !== lastChangedValue) {
|
|
67
66
|
setDay(newDate ? newDate.date : null);
|
|
@@ -72,14 +71,13 @@ var DatepickerProvider = function (_a) {
|
|
|
72
71
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
73
72
|
}, [value]);
|
|
74
73
|
return (react_1.default.createElement(exports.DatepickerContext.Provider, { value: {
|
|
75
|
-
day
|
|
76
|
-
month
|
|
77
|
-
year
|
|
78
|
-
setDay:
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
var total = (0, toNumber_1.toNumber)(numbers);
|
|
74
|
+
day,
|
|
75
|
+
month,
|
|
76
|
+
year,
|
|
77
|
+
setDay: (newValue, focusNext = undefined) => {
|
|
78
|
+
const numbers = newValue.slice(-2);
|
|
79
|
+
const [first, second] = numbers;
|
|
80
|
+
const total = (0, toNumber_1.toNumber)(numbers);
|
|
83
81
|
if (total > MAX_DAYS) {
|
|
84
82
|
focusNext === null || focusNext === void 0 ? void 0 : focusNext();
|
|
85
83
|
}
|
|
@@ -94,11 +92,10 @@ var DatepickerProvider = function (_a) {
|
|
|
94
92
|
}
|
|
95
93
|
}
|
|
96
94
|
},
|
|
97
|
-
setMonth:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
var total = (0, toNumber_1.toNumber)(numbers);
|
|
95
|
+
setMonth: (newValue, focusNext = undefined) => {
|
|
96
|
+
const numbers = newValue.slice(-2);
|
|
97
|
+
const [first, second] = numbers;
|
|
98
|
+
const total = (0, toNumber_1.toNumber)(numbers);
|
|
102
99
|
if (total > MONTHS_PER_YEAR) {
|
|
103
100
|
focusNext === null || focusNext === void 0 ? void 0 : focusNext();
|
|
104
101
|
}
|
|
@@ -113,15 +110,15 @@ var DatepickerProvider = function (_a) {
|
|
|
113
110
|
}
|
|
114
111
|
}
|
|
115
112
|
},
|
|
116
|
-
setYear:
|
|
113
|
+
setYear: newValue => {
|
|
117
114
|
setYear((0, toNumber_1.toNumber)(newValue.slice(-4)));
|
|
118
115
|
},
|
|
119
|
-
calendarActiveDate
|
|
120
|
-
setCalendarActiveDate:
|
|
116
|
+
calendarActiveDate,
|
|
117
|
+
setCalendarActiveDate: date => {
|
|
121
118
|
setCalendarActiveDate(date);
|
|
122
119
|
},
|
|
123
|
-
locale
|
|
124
|
-
setLastChangedValue:
|
|
120
|
+
locale,
|
|
121
|
+
setLastChangedValue: val => {
|
|
125
122
|
setLastChangedValue(val);
|
|
126
123
|
},
|
|
127
124
|
} }, children));
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -43,30 +32,17 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
43
32
|
return result;
|
|
44
33
|
};
|
|
45
34
|
})();
|
|
46
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
-
var t = {};
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
-
t[p] = s[p];
|
|
50
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
-
t[p[i]] = s[p[i]];
|
|
54
|
-
}
|
|
55
|
-
return t;
|
|
56
|
-
};
|
|
57
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
58
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
59
37
|
};
|
|
60
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
61
39
|
exports.SpinButton = void 0;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
exports.SpinButton = react_1.default.forwardRef(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
var handleKeyDown = function (evt) {
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
exports.SpinButton = react_1.default.forwardRef(({ className, onSpinButtonChange, maxLength, min, max, value, nextSpinButton, prevSpinButton, children, ...rest }, ref) => {
|
|
43
|
+
const history = (0, react_1.useRef)([]);
|
|
44
|
+
const handleKeyDown = (evt) => {
|
|
68
45
|
var _a, _b, _c;
|
|
69
|
-
evt.stopPropagation();
|
|
70
46
|
if (/\d/.test(evt.key)) {
|
|
71
47
|
history.current =
|
|
72
48
|
history.current.length === maxLength
|
|
@@ -80,7 +56,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
|
|
|
80
56
|
(_a = prevSpinButton === null || prevSpinButton === void 0 ? void 0 : prevSpinButton.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
81
57
|
return;
|
|
82
58
|
}
|
|
83
|
-
|
|
59
|
+
const newValue = value === null || value === void 0 ? void 0 : value.toString().slice(0, -1);
|
|
84
60
|
history.current = newValue
|
|
85
61
|
? newValue.split('').map(Number)
|
|
86
62
|
: [];
|
|
@@ -88,7 +64,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
|
|
|
88
64
|
}
|
|
89
65
|
else if (evt.key === 'ArrowUp') {
|
|
90
66
|
evt.preventDefault();
|
|
91
|
-
|
|
67
|
+
let newValue = (value !== null && value !== void 0 ? value : 0) + 1;
|
|
92
68
|
if (newValue && newValue !== null && newValue > max) {
|
|
93
69
|
newValue = min;
|
|
94
70
|
}
|
|
@@ -96,7 +72,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
|
|
|
96
72
|
}
|
|
97
73
|
else if (evt.key === 'ArrowDown') {
|
|
98
74
|
evt.preventDefault();
|
|
99
|
-
|
|
75
|
+
let newValue = (value !== null && value !== void 0 ? value : 0) - 1;
|
|
100
76
|
if (newValue < min) {
|
|
101
77
|
newValue = max;
|
|
102
78
|
}
|
|
@@ -111,7 +87,7 @@ exports.SpinButton = react_1.default.forwardRef(function (_a, ref) {
|
|
|
111
87
|
(_c = nextSpinButton === null || nextSpinButton === void 0 ? void 0 : nextSpinButton.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
112
88
|
}
|
|
113
89
|
};
|
|
114
|
-
return (react_1.default.createElement("span",
|
|
90
|
+
return (react_1.default.createElement("span", { role: 'spinbutton', inputMode: 'numeric', className: (0, classnames_1.default)(className, 'ffe-dateinput__field'), tabIndex: 0, onFocus: () => {
|
|
115
91
|
history.current = [];
|
|
116
|
-
}, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, ref: ref, onKeyDown: handleKeyDown
|
|
92
|
+
}, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, ref: ref, onKeyDown: handleKeyDown, ...rest }, children));
|
|
117
93
|
});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.padZero = void 0;
|
|
4
|
-
|
|
4
|
+
const padZero = (value) => {
|
|
5
5
|
if (value < 10) {
|
|
6
|
-
return
|
|
6
|
+
return `0${value}`;
|
|
7
7
|
}
|
|
8
8
|
return value;
|
|
9
9
|
};
|