@mui/x-date-pickers 8.0.0-beta.0 → 8.0.0-beta.2
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/CHANGELOG.md +171 -0
- package/DateCalendar/DateCalendar.js +4 -8
- package/DateCalendar/DayCalendar.d.ts +3 -7
- package/DateCalendar/DayCalendar.js +18 -10
- package/DateCalendar/index.d.ts +0 -1
- package/DateField/useDateField.d.ts +1 -1
- package/DateField/useDateField.js +2 -16
- package/DatePicker/DatePicker.js +1 -0
- package/DatePicker/shared.js +3 -9
- package/DateTimeField/useDateTimeField.d.ts +1 -1
- package/DateTimeField/useDateTimeField.js +2 -16
- package/DateTimePicker/DateTimePicker.js +1 -0
- package/DateTimePicker/shared.js +3 -13
- package/DesktopDatePicker/DesktopDatePicker.js +1 -0
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -0
- package/DesktopTimePicker/DesktopTimePicker.js +1 -0
- package/MobileDatePicker/MobileDatePicker.js +1 -0
- package/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
- package/MobileTimePicker/MobileTimePicker.js +1 -0
- package/MonthCalendar/MonthCalendar.js +4 -9
- package/PickersDay/PickersDay.d.ts +1 -72
- package/PickersDay/PickersDay.js +30 -28
- package/PickersDay/PickersDay.types.d.ts +114 -0
- package/PickersDay/PickersDay.types.js +5 -0
- package/PickersDay/index.d.ts +1 -1
- package/PickersDay/usePickerDayOwnerState.d.ts +14 -0
- package/PickersDay/usePickerDayOwnerState.js +40 -0
- package/PickersSectionList/PickersSectionList.d.ts +1 -1
- package/PickersSectionList/PickersSectionList.types.d.ts +2 -6
- package/TimeField/useTimeField.d.ts +1 -1
- package/TimeField/useTimeField.js +2 -16
- package/TimePicker/TimePicker.js +1 -0
- package/TimePicker/shared.js +3 -3
- package/YearCalendar/YearCalendar.js +4 -10
- package/esm/DateCalendar/DateCalendar.js +6 -10
- package/esm/DateCalendar/DayCalendar.d.ts +3 -7
- package/esm/DateCalendar/DayCalendar.js +18 -10
- package/esm/DateCalendar/index.d.ts +0 -1
- package/esm/DateField/useDateField.d.ts +1 -1
- package/esm/DateField/useDateField.js +3 -17
- package/esm/DatePicker/DatePicker.js +1 -0
- package/esm/DatePicker/shared.js +3 -9
- package/esm/DateTimeField/useDateTimeField.d.ts +1 -1
- package/esm/DateTimeField/useDateTimeField.js +3 -17
- package/esm/DateTimePicker/DateTimePicker.js +1 -0
- package/esm/DateTimePicker/shared.js +4 -14
- package/esm/DesktopDatePicker/DesktopDatePicker.js +1 -0
- package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -0
- package/esm/DesktopTimePicker/DesktopTimePicker.js +1 -0
- package/esm/MobileDatePicker/MobileDatePicker.js +1 -0
- package/esm/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
- package/esm/MobileTimePicker/MobileTimePicker.js +1 -0
- package/esm/MonthCalendar/MonthCalendar.js +6 -11
- package/esm/PickersDay/PickersDay.d.ts +1 -72
- package/esm/PickersDay/PickersDay.js +30 -28
- package/esm/PickersDay/PickersDay.types.d.ts +114 -0
- package/esm/PickersDay/PickersDay.types.js +1 -0
- package/esm/PickersDay/index.d.ts +1 -1
- package/esm/PickersDay/usePickerDayOwnerState.d.ts +14 -0
- package/esm/PickersDay/usePickerDayOwnerState.js +32 -0
- package/esm/PickersSectionList/PickersSectionList.d.ts +1 -1
- package/esm/PickersSectionList/PickersSectionList.types.d.ts +2 -6
- package/esm/TimeField/useTimeField.d.ts +1 -1
- package/esm/TimeField/useTimeField.js +3 -17
- package/esm/TimePicker/TimePicker.js +1 -0
- package/esm/TimePicker/shared.js +3 -3
- package/esm/YearCalendar/YearCalendar.js +5 -11
- package/esm/hooks/useSplitFieldProps.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/internals/components/PickerFieldUI.d.ts +5 -5
- package/esm/internals/hooks/useField/buildSectionsFromFormat.d.ts +2 -2
- package/esm/internals/hooks/useField/buildSectionsFromFormat.js +9 -9
- package/esm/internals/hooks/useField/index.d.ts +1 -1
- package/esm/internals/hooks/useField/syncSelectionToDOM.d.ts +9 -0
- package/esm/internals/hooks/useField/syncSelectionToDOM.js +50 -0
- package/esm/internals/hooks/useField/useField.d.ts +2 -4
- package/esm/internals/hooks/useField/useField.js +5 -229
- package/esm/internals/hooks/useField/useField.types.d.ts +55 -68
- package/esm/internals/hooks/useField/useField.utils.d.ts +3 -8
- package/esm/internals/hooks/useField/useField.utils.js +7 -149
- package/esm/internals/hooks/useField/useFieldCharacterEditing.d.ts +19 -26
- package/esm/internals/hooks/useField/useFieldCharacterEditing.js +42 -60
- package/esm/internals/hooks/useField/useFieldHiddenInputProps.d.ts +20 -0
- package/esm/internals/hooks/useField/useFieldHiddenInputProps.js +31 -0
- package/esm/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +8 -10
- package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.d.ts +16 -0
- package/esm/internals/hooks/useField/useFieldRootHandleKeyDown.js +205 -0
- package/esm/internals/hooks/useField/useFieldRootProps.d.ts +32 -0
- package/esm/internals/hooks/useField/useFieldRootProps.js +150 -0
- package/esm/internals/hooks/useField/useFieldSectionContainerProps.d.ts +15 -0
- package/esm/internals/hooks/useField/useFieldSectionContainerProps.js +29 -0
- package/esm/internals/hooks/useField/useFieldSectionContentProps.d.ts +23 -0
- package/esm/internals/hooks/useField/useFieldSectionContentProps.js +226 -0
- package/esm/internals/hooks/useField/useFieldState.d.ts +23 -13
- package/esm/internals/hooks/useField/useFieldState.js +103 -30
- package/esm/internals/hooks/useField/useFieldV6TextField.d.ts +3 -3
- package/esm/internals/hooks/useField/useFieldV6TextField.js +202 -135
- package/esm/internals/hooks/useField/useFieldV7TextField.d.ts +3 -2
- package/esm/internals/hooks/useField/useFieldV7TextField.js +200 -367
- package/esm/internals/hooks/usePicker/usePicker.types.d.ts +1 -0
- package/esm/internals/index.d.ts +6 -5
- package/esm/internals/index.js +4 -3
- package/esm/locales/deDE.js +2 -3
- package/esm/managers/useDateManager.d.ts +4 -13
- package/esm/managers/useDateManager.js +21 -31
- package/esm/managers/useDateTimeManager.d.ts +4 -13
- package/esm/managers/useDateTimeManager.js +26 -36
- package/esm/managers/useTimeManager.d.ts +4 -13
- package/esm/managers/useTimeManager.js +17 -27
- package/esm/models/fields.d.ts +2 -2
- package/esm/models/manager.d.ts +6 -10
- package/esm/validation/validateDate.js +3 -4
- package/hooks/useSplitFieldProps.d.ts +1 -1
- package/index.js +1 -1
- package/internals/components/PickerFieldUI.d.ts +5 -5
- package/internals/hooks/useField/buildSectionsFromFormat.d.ts +2 -2
- package/internals/hooks/useField/buildSectionsFromFormat.js +9 -9
- package/internals/hooks/useField/index.d.ts +1 -1
- package/internals/hooks/useField/syncSelectionToDOM.d.ts +9 -0
- package/internals/hooks/useField/syncSelectionToDOM.js +56 -0
- package/internals/hooks/useField/useField.d.ts +2 -4
- package/internals/hooks/useField/useField.js +5 -231
- package/internals/hooks/useField/useField.types.d.ts +55 -68
- package/internals/hooks/useField/useField.utils.d.ts +3 -8
- package/internals/hooks/useField/useField.utils.js +9 -154
- package/internals/hooks/useField/useFieldCharacterEditing.d.ts +19 -26
- package/internals/hooks/useField/useFieldCharacterEditing.js +41 -59
- package/internals/hooks/useField/useFieldHiddenInputProps.d.ts +20 -0
- package/internals/hooks/useField/useFieldHiddenInputProps.js +39 -0
- package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +8 -10
- package/internals/hooks/useField/useFieldRootHandleKeyDown.d.ts +16 -0
- package/internals/hooks/useField/useFieldRootHandleKeyDown.js +211 -0
- package/internals/hooks/useField/useFieldRootProps.d.ts +32 -0
- package/internals/hooks/useField/useFieldRootProps.js +156 -0
- package/internals/hooks/useField/useFieldSectionContainerProps.d.ts +15 -0
- package/internals/hooks/useField/useFieldSectionContainerProps.js +37 -0
- package/internals/hooks/useField/useFieldSectionContentProps.d.ts +23 -0
- package/internals/hooks/useField/useFieldSectionContentProps.js +234 -0
- package/internals/hooks/useField/useFieldState.d.ts +23 -13
- package/internals/hooks/useField/useFieldState.js +102 -29
- package/internals/hooks/useField/useFieldV6TextField.d.ts +3 -3
- package/internals/hooks/useField/useFieldV6TextField.js +202 -135
- package/internals/hooks/useField/useFieldV7TextField.d.ts +3 -2
- package/internals/hooks/useField/useFieldV7TextField.js +200 -367
- package/internals/hooks/usePicker/usePicker.types.d.ts +1 -0
- package/internals/index.d.ts +6 -5
- package/internals/index.js +25 -18
- package/locales/deDE.js +2 -3
- package/managers/useDateManager.d.ts +4 -13
- package/managers/useDateManager.js +21 -31
- package/managers/useDateTimeManager.d.ts +4 -13
- package/managers/useDateTimeManager.js +26 -36
- package/managers/useTimeManager.d.ts +4 -13
- package/managers/useTimeManager.js +18 -28
- package/models/fields.d.ts +2 -2
- package/models/manager.d.ts +6 -10
- package/modern/DateCalendar/DateCalendar.js +6 -10
- package/modern/DateCalendar/DayCalendar.d.ts +3 -7
- package/modern/DateCalendar/DayCalendar.js +18 -10
- package/modern/DateCalendar/index.d.ts +0 -1
- package/modern/DateField/useDateField.d.ts +1 -1
- package/modern/DateField/useDateField.js +3 -17
- package/modern/DatePicker/DatePicker.js +1 -0
- package/modern/DatePicker/shared.js +3 -9
- package/modern/DateTimeField/useDateTimeField.d.ts +1 -1
- package/modern/DateTimeField/useDateTimeField.js +3 -17
- package/modern/DateTimePicker/DateTimePicker.js +1 -0
- package/modern/DateTimePicker/shared.js +4 -14
- package/modern/DesktopDatePicker/DesktopDatePicker.js +1 -0
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +1 -0
- package/modern/DesktopTimePicker/DesktopTimePicker.js +1 -0
- package/modern/MobileDatePicker/MobileDatePicker.js +1 -0
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +1 -0
- package/modern/MobileTimePicker/MobileTimePicker.js +1 -0
- package/modern/MonthCalendar/MonthCalendar.js +6 -11
- package/modern/PickersDay/PickersDay.d.ts +1 -72
- package/modern/PickersDay/PickersDay.js +30 -28
- package/modern/PickersDay/PickersDay.types.d.ts +114 -0
- package/modern/PickersDay/PickersDay.types.js +1 -0
- package/modern/PickersDay/index.d.ts +1 -1
- package/modern/PickersDay/usePickerDayOwnerState.d.ts +14 -0
- package/modern/PickersDay/usePickerDayOwnerState.js +32 -0
- package/modern/PickersSectionList/PickersSectionList.d.ts +1 -1
- package/modern/PickersSectionList/PickersSectionList.types.d.ts +2 -6
- package/modern/TimeField/useTimeField.d.ts +1 -1
- package/modern/TimeField/useTimeField.js +3 -17
- package/modern/TimePicker/TimePicker.js +1 -0
- package/modern/TimePicker/shared.js +3 -3
- package/modern/YearCalendar/YearCalendar.js +5 -11
- package/modern/hooks/useSplitFieldProps.d.ts +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/components/PickerFieldUI.d.ts +5 -5
- package/modern/internals/hooks/useField/buildSectionsFromFormat.d.ts +2 -2
- package/modern/internals/hooks/useField/buildSectionsFromFormat.js +9 -9
- package/modern/internals/hooks/useField/index.d.ts +1 -1
- package/modern/internals/hooks/useField/syncSelectionToDOM.d.ts +9 -0
- package/modern/internals/hooks/useField/syncSelectionToDOM.js +50 -0
- package/modern/internals/hooks/useField/useField.d.ts +2 -4
- package/modern/internals/hooks/useField/useField.js +5 -229
- package/modern/internals/hooks/useField/useField.types.d.ts +55 -68
- package/modern/internals/hooks/useField/useField.utils.d.ts +3 -8
- package/modern/internals/hooks/useField/useField.utils.js +7 -149
- package/modern/internals/hooks/useField/useFieldCharacterEditing.d.ts +19 -26
- package/modern/internals/hooks/useField/useFieldCharacterEditing.js +42 -60
- package/modern/internals/hooks/useField/useFieldHiddenInputProps.d.ts +20 -0
- package/modern/internals/hooks/useField/useFieldHiddenInputProps.js +31 -0
- package/modern/internals/hooks/useField/useFieldInternalPropsWithDefaults.js +8 -10
- package/modern/internals/hooks/useField/useFieldRootHandleKeyDown.d.ts +16 -0
- package/modern/internals/hooks/useField/useFieldRootHandleKeyDown.js +205 -0
- package/modern/internals/hooks/useField/useFieldRootProps.d.ts +32 -0
- package/modern/internals/hooks/useField/useFieldRootProps.js +150 -0
- package/modern/internals/hooks/useField/useFieldSectionContainerProps.d.ts +15 -0
- package/modern/internals/hooks/useField/useFieldSectionContainerProps.js +29 -0
- package/modern/internals/hooks/useField/useFieldSectionContentProps.d.ts +23 -0
- package/modern/internals/hooks/useField/useFieldSectionContentProps.js +226 -0
- package/modern/internals/hooks/useField/useFieldState.d.ts +23 -13
- package/modern/internals/hooks/useField/useFieldState.js +103 -30
- package/modern/internals/hooks/useField/useFieldV6TextField.d.ts +3 -3
- package/modern/internals/hooks/useField/useFieldV6TextField.js +202 -135
- package/modern/internals/hooks/useField/useFieldV7TextField.d.ts +3 -2
- package/modern/internals/hooks/useField/useFieldV7TextField.js +200 -367
- package/modern/internals/hooks/usePicker/usePicker.types.d.ts +1 -0
- package/modern/internals/index.d.ts +6 -5
- package/modern/internals/index.js +4 -3
- package/modern/locales/deDE.js +2 -3
- package/modern/managers/useDateManager.d.ts +4 -13
- package/modern/managers/useDateManager.js +21 -31
- package/modern/managers/useDateTimeManager.d.ts +4 -13
- package/modern/managers/useDateTimeManager.js +26 -36
- package/modern/managers/useTimeManager.d.ts +4 -13
- package/modern/managers/useTimeManager.js +17 -27
- package/modern/models/fields.d.ts +2 -2
- package/modern/models/manager.d.ts +6 -10
- package/modern/validation/validateDate.js +3 -4
- package/package.json +2 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/validation/validateDate.js +3 -4
|
@@ -1,242 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports.useField = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
|
|
12
|
-
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
|
|
13
|
-
var _RtlProvider = require("@mui/system/RtlProvider");
|
|
14
|
-
var _validation = require("../../../validation");
|
|
15
|
-
var _useUtils = require("../useUtils");
|
|
16
|
-
var _useField = require("./useField.utils");
|
|
17
|
-
var _useFieldState = require("./useFieldState");
|
|
18
|
-
var _useFieldCharacterEditing = require("./useFieldCharacterEditing");
|
|
19
7
|
var _useFieldV7TextField = require("./useFieldV7TextField");
|
|
20
8
|
var _useFieldV6TextField = require("./useFieldV6TextField");
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
internalProps: {
|
|
26
|
-
unstableFieldRef,
|
|
27
|
-
minutesStep,
|
|
28
|
-
enableAccessibleFieldDOMStructure = true,
|
|
29
|
-
disabled = false,
|
|
30
|
-
readOnly = false,
|
|
31
|
-
autoFocus = false
|
|
32
|
-
},
|
|
33
|
-
forwardedProps: {
|
|
34
|
-
onKeyDown,
|
|
35
|
-
error,
|
|
36
|
-
clearable,
|
|
37
|
-
onClear
|
|
38
|
-
},
|
|
39
|
-
fieldValueManager,
|
|
40
|
-
validator,
|
|
41
|
-
getOpenPickerButtonAriaLabel: getOpenDialogAriaText
|
|
42
|
-
} = params;
|
|
43
|
-
const isRtl = (0, _RtlProvider.useRtl)();
|
|
44
|
-
const stateResponse = (0, _useFieldState.useFieldState)(params);
|
|
45
|
-
const {
|
|
46
|
-
state,
|
|
47
|
-
value,
|
|
48
|
-
activeSectionIndex,
|
|
49
|
-
parsedSelectedSections,
|
|
50
|
-
setSelectedSections,
|
|
51
|
-
clearValue,
|
|
52
|
-
clearActiveSection,
|
|
53
|
-
updateSectionValue,
|
|
54
|
-
setTempAndroidValueStr,
|
|
55
|
-
sectionsValueBoundaries,
|
|
56
|
-
localizedDigits,
|
|
57
|
-
timezone
|
|
58
|
-
} = stateResponse;
|
|
59
|
-
const characterEditingResponse = (0, _useFieldCharacterEditing.useFieldCharacterEditing)({
|
|
60
|
-
sections: state.sections,
|
|
61
|
-
updateSectionValue,
|
|
62
|
-
sectionsValueBoundaries,
|
|
63
|
-
localizedDigits,
|
|
64
|
-
setTempAndroidValueStr,
|
|
65
|
-
timezone
|
|
66
|
-
});
|
|
67
|
-
const {
|
|
68
|
-
resetCharacterQuery
|
|
69
|
-
} = characterEditingResponse;
|
|
70
|
-
const areAllSectionsEmpty = React.useMemo(() => state.sections.every(section => section.value === ''), [state.sections]);
|
|
9
|
+
var _useNullableFieldPrivateContext = require("../useNullableFieldPrivateContext");
|
|
10
|
+
const useField = parameters => {
|
|
11
|
+
const fieldPrivateContext = (0, _useNullableFieldPrivateContext.useNullableFieldPrivateContext)();
|
|
12
|
+
const enableAccessibleFieldDOMStructure = parameters.props.enableAccessibleFieldDOMStructure ?? fieldPrivateContext?.enableAccessibleFieldDOMStructure ?? true;
|
|
71
13
|
const useFieldTextField = enableAccessibleFieldDOMStructure ? _useFieldV7TextField.useFieldV7TextField : _useFieldV6TextField.useFieldV6TextField;
|
|
72
|
-
|
|
73
|
-
const {
|
|
74
|
-
returnedValue,
|
|
75
|
-
interactions
|
|
76
|
-
} = useFieldTextField((0, _extends2.default)({}, params, stateResponse, characterEditingResponse, {
|
|
77
|
-
areAllSectionsEmpty,
|
|
78
|
-
sectionOrder
|
|
79
|
-
}));
|
|
80
|
-
const handleContainerKeyDown = (0, _useEventCallback.default)(event => {
|
|
81
|
-
onKeyDown?.(event);
|
|
82
|
-
if (disabled) {
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
// eslint-disable-next-line default-case
|
|
86
|
-
switch (true) {
|
|
87
|
-
// Select all
|
|
88
|
-
case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
|
|
89
|
-
{
|
|
90
|
-
// prevent default to make sure that the next line "select all" while updating
|
|
91
|
-
// the internal state at the same time.
|
|
92
|
-
event.preventDefault();
|
|
93
|
-
setSelectedSections('all');
|
|
94
|
-
break;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// Move selection to next section
|
|
98
|
-
case event.key === 'ArrowRight':
|
|
99
|
-
{
|
|
100
|
-
event.preventDefault();
|
|
101
|
-
if (parsedSelectedSections == null) {
|
|
102
|
-
setSelectedSections(sectionOrder.startIndex);
|
|
103
|
-
} else if (parsedSelectedSections === 'all') {
|
|
104
|
-
setSelectedSections(sectionOrder.endIndex);
|
|
105
|
-
} else {
|
|
106
|
-
const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].rightIndex;
|
|
107
|
-
if (nextSectionIndex !== null) {
|
|
108
|
-
setSelectedSections(nextSectionIndex);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
break;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
// Move selection to previous section
|
|
115
|
-
case event.key === 'ArrowLeft':
|
|
116
|
-
{
|
|
117
|
-
event.preventDefault();
|
|
118
|
-
if (parsedSelectedSections == null) {
|
|
119
|
-
setSelectedSections(sectionOrder.endIndex);
|
|
120
|
-
} else if (parsedSelectedSections === 'all') {
|
|
121
|
-
setSelectedSections(sectionOrder.startIndex);
|
|
122
|
-
} else {
|
|
123
|
-
const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].leftIndex;
|
|
124
|
-
if (nextSectionIndex !== null) {
|
|
125
|
-
setSelectedSections(nextSectionIndex);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
break;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
// Reset the value of the selected section
|
|
132
|
-
case event.key === 'Delete':
|
|
133
|
-
{
|
|
134
|
-
event.preventDefault();
|
|
135
|
-
if (readOnly) {
|
|
136
|
-
break;
|
|
137
|
-
}
|
|
138
|
-
if (parsedSelectedSections == null || parsedSelectedSections === 'all') {
|
|
139
|
-
clearValue();
|
|
140
|
-
} else {
|
|
141
|
-
clearActiveSection();
|
|
142
|
-
}
|
|
143
|
-
resetCharacterQuery();
|
|
144
|
-
break;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
// Increment / decrement the selected section value
|
|
148
|
-
case ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key):
|
|
149
|
-
{
|
|
150
|
-
event.preventDefault();
|
|
151
|
-
if (readOnly || activeSectionIndex == null) {
|
|
152
|
-
break;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// if all sections are selected, mark the currently editing one as selected
|
|
156
|
-
if (parsedSelectedSections === 'all') {
|
|
157
|
-
setSelectedSections(activeSectionIndex);
|
|
158
|
-
}
|
|
159
|
-
const activeSection = state.sections[activeSectionIndex];
|
|
160
|
-
const newSectionValue = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
|
|
161
|
-
minutesStep
|
|
162
|
-
});
|
|
163
|
-
updateSectionValue({
|
|
164
|
-
section: activeSection,
|
|
165
|
-
newSectionValue,
|
|
166
|
-
shouldGoToNextSection: false
|
|
167
|
-
});
|
|
168
|
-
break;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
(0, _useEnhancedEffect.default)(() => {
|
|
173
|
-
interactions.syncSelectionToDOM();
|
|
174
|
-
});
|
|
175
|
-
const {
|
|
176
|
-
hasValidationError
|
|
177
|
-
} = (0, _validation.useValidation)({
|
|
178
|
-
props: internalProps,
|
|
179
|
-
validator,
|
|
180
|
-
timezone,
|
|
181
|
-
value,
|
|
182
|
-
onError: internalProps.onError
|
|
183
|
-
});
|
|
184
|
-
const inputError = React.useMemo(() => {
|
|
185
|
-
// only override when `error` is undefined.
|
|
186
|
-
// in case of multi input fields, the `error` value is provided externally and will always be defined.
|
|
187
|
-
if (error !== undefined) {
|
|
188
|
-
return error;
|
|
189
|
-
}
|
|
190
|
-
return hasValidationError;
|
|
191
|
-
}, [hasValidationError, error]);
|
|
192
|
-
React.useEffect(() => {
|
|
193
|
-
if (!inputError && activeSectionIndex == null) {
|
|
194
|
-
resetCharacterQuery();
|
|
195
|
-
}
|
|
196
|
-
}, [state.referenceValue, activeSectionIndex, inputError]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
197
|
-
|
|
198
|
-
// If `tempValueStrAndroid` is still defined for some section when running `useEffect`,
|
|
199
|
-
// Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
|
|
200
|
-
// This causes a small flickering on Android,
|
|
201
|
-
// But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
|
|
202
|
-
React.useEffect(() => {
|
|
203
|
-
if (state.tempValueStrAndroid != null && activeSectionIndex != null) {
|
|
204
|
-
resetCharacterQuery();
|
|
205
|
-
clearActiveSection();
|
|
206
|
-
}
|
|
207
|
-
}, [state.sections]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
208
|
-
|
|
209
|
-
React.useImperativeHandle(unstableFieldRef, () => ({
|
|
210
|
-
getSections: () => state.sections,
|
|
211
|
-
getActiveSectionIndex: interactions.getActiveSectionIndexFromDOM,
|
|
212
|
-
setSelectedSections: interactions.setSelectedSections,
|
|
213
|
-
focusField: interactions.focusField,
|
|
214
|
-
isFieldFocused: interactions.isFieldFocused
|
|
215
|
-
}));
|
|
216
|
-
const handleClearValue = (0, _useEventCallback.default)((event, ...args) => {
|
|
217
|
-
event.preventDefault();
|
|
218
|
-
onClear?.(event, ...args);
|
|
219
|
-
clearValue();
|
|
220
|
-
if (!interactions.isFieldFocused()) {
|
|
221
|
-
// setSelectedSections is called internally
|
|
222
|
-
interactions.focusField(0);
|
|
223
|
-
} else {
|
|
224
|
-
setSelectedSections(sectionOrder.startIndex);
|
|
225
|
-
}
|
|
226
|
-
});
|
|
227
|
-
const commonForwardedProps = {
|
|
228
|
-
onKeyDown: handleContainerKeyDown,
|
|
229
|
-
onClear: handleClearValue,
|
|
230
|
-
error: inputError,
|
|
231
|
-
clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
|
|
232
|
-
};
|
|
233
|
-
const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(value), [getOpenDialogAriaText, value]);
|
|
234
|
-
const commonAdditionalProps = {
|
|
235
|
-
disabled,
|
|
236
|
-
readOnly,
|
|
237
|
-
autoFocus,
|
|
238
|
-
openPickerAriaLabel
|
|
239
|
-
};
|
|
240
|
-
return (0, _extends2.default)({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
|
|
14
|
+
return useFieldTextField(parameters);
|
|
241
15
|
};
|
|
242
16
|
exports.useField = useField;
|
|
@@ -1,20 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps,
|
|
3
|
-
import
|
|
4
|
-
import type {
|
|
5
|
-
import type { UseFieldStateResponse } from './useFieldState';
|
|
6
|
-
import type { UseFieldCharacterEditingResponse } from './useFieldCharacterEditing';
|
|
7
|
-
import { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.js";
|
|
2
|
+
import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
|
|
3
|
+
import { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
|
|
4
|
+
import type { PickersSectionElement, PickersSectionListRef } from '../../../PickersSectionList';
|
|
8
5
|
import { FormProps, InferNonNullablePickerValue, PickerValidValue } from "../../models/index.js";
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
valueManager: PickerValueManager<TValue, InferError<TInternalProps>>;
|
|
14
|
-
fieldValueManager: FieldValueManager<TValue>;
|
|
15
|
-
validator: Validator<TValue, InferError<TInternalProps>, TInternalProps>;
|
|
16
|
-
valueType: PickerValueType;
|
|
17
|
-
getOpenPickerButtonAriaLabel: (value: TValue) => string;
|
|
6
|
+
export interface UseFieldParameters<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
|
|
7
|
+
manager: PickerManager<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, any>;
|
|
8
|
+
props: TProps;
|
|
9
|
+
skipContextFieldRefAssignment?: boolean;
|
|
18
10
|
}
|
|
19
11
|
export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends TimezoneProps, FormProps, OnErrorProps<TValue, TError> {
|
|
20
12
|
/**
|
|
@@ -98,39 +90,47 @@ export interface UseFieldInternalProps<TValue extends PickerValidValue, TEnableA
|
|
|
98
90
|
*/
|
|
99
91
|
focused?: boolean;
|
|
100
92
|
}
|
|
101
|
-
export
|
|
102
|
-
|
|
103
|
-
* The aria label to set on the button that opens the Picker.
|
|
104
|
-
*/
|
|
105
|
-
openPickerAriaLabel: string;
|
|
106
|
-
}
|
|
107
|
-
export interface UseFieldCommonForwardedProps extends Pick<ExportedPickerFieldUIProps, 'clearable' | 'onClear'> {
|
|
108
|
-
onKeyDown?: React.KeyboardEventHandler;
|
|
93
|
+
export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? {
|
|
94
|
+
clearable?: boolean;
|
|
109
95
|
error?: boolean;
|
|
110
|
-
|
|
111
|
-
export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldCommonForwardedProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6ForwardedProps : UseFieldV7ForwardedProps);
|
|
112
|
-
export interface UseFieldV6ForwardedProps {
|
|
96
|
+
placeholder?: string;
|
|
113
97
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
114
|
-
onBlur?: React.FocusEventHandler;
|
|
115
98
|
onClick?: React.MouseEventHandler;
|
|
116
99
|
onFocus?: React.FocusEventHandler;
|
|
100
|
+
onKeyDown?: React.KeyboardEventHandler;
|
|
101
|
+
onBlur?: React.FocusEventHandler;
|
|
117
102
|
onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
focused?: boolean;
|
|
123
|
-
}
|
|
124
|
-
export interface UseFieldV7ForwardedProps {
|
|
103
|
+
onClear?: React.MouseEventHandler;
|
|
104
|
+
} : {
|
|
105
|
+
clearable?: boolean;
|
|
106
|
+
error?: boolean;
|
|
125
107
|
focused?: boolean;
|
|
126
108
|
sectionListRef?: React.Ref<PickersSectionListRef>;
|
|
127
|
-
onBlur?: React.FocusEventHandler;
|
|
128
109
|
onClick?: React.MouseEventHandler;
|
|
110
|
+
onKeyDown?: React.KeyboardEventHandler;
|
|
129
111
|
onFocus?: React.FocusEventHandler;
|
|
112
|
+
onBlur?: React.FocusEventHandler;
|
|
130
113
|
onInput?: React.FormEventHandler<HTMLDivElement>;
|
|
131
114
|
onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
|
|
132
|
-
|
|
133
|
-
|
|
115
|
+
onClear?: React.MouseEventHandler;
|
|
116
|
+
};
|
|
117
|
+
type UseFieldAdditionalProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? {
|
|
118
|
+
/**
|
|
119
|
+
* The aria label to set on the button that opens the Picker.
|
|
120
|
+
*/
|
|
121
|
+
openPickerAriaLabel: string;
|
|
122
|
+
enableAccessibleFieldDOMStructure: false;
|
|
123
|
+
focused: boolean | undefined;
|
|
124
|
+
inputMode: 'text' | 'numeric';
|
|
125
|
+
placeholder: string;
|
|
126
|
+
value: string;
|
|
127
|
+
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
128
|
+
autoComplete: 'off';
|
|
129
|
+
} : {
|
|
130
|
+
/**
|
|
131
|
+
* The aria label to set on the button that opens the Picker.
|
|
132
|
+
*/
|
|
133
|
+
openPickerAriaLabel: string;
|
|
134
134
|
enableAccessibleFieldDOMStructure: true;
|
|
135
135
|
elements: PickersSectionElement[];
|
|
136
136
|
tabIndex: number | undefined;
|
|
@@ -139,10 +139,8 @@ interface UseFieldV7AdditionalProps {
|
|
|
139
139
|
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
140
140
|
areAllSectionsEmpty: boolean;
|
|
141
141
|
focused: boolean;
|
|
142
|
-
}
|
|
143
|
-
export type
|
|
144
|
-
[key: string]: any;
|
|
145
|
-
}> = Omit<TForwardedProps, keyof UseFieldCommonForwardedProps> & Required<UseFieldCommonForwardedProps> & UseFieldCommonAdditionalProps & (TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>);
|
|
142
|
+
};
|
|
143
|
+
export type UseFieldReturnValue<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> = Required<Pick<UseFieldInternalProps<any, any, any>, 'disabled' | 'readOnly' | 'autoFocus'>> & Required<UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>> & UseFieldAdditionalProps<TEnableAccessibleFieldDOMStructure> & Omit<TProps, InternalPropNames<PickerValueType>>;
|
|
146
144
|
export type FieldSectionValueBoundaries<SectionType extends FieldSectionType> = {
|
|
147
145
|
minimum: number;
|
|
148
146
|
maximum: number;
|
|
@@ -282,8 +280,11 @@ export interface UseFieldState<TValue extends PickerValidValue> {
|
|
|
282
280
|
* The property below allows us to set the first `onChange` value into state waiting for the second one.
|
|
283
281
|
*/
|
|
284
282
|
tempValueStrAndroid: string | null;
|
|
283
|
+
/**
|
|
284
|
+
* The current query when editing the field using letters or digits.
|
|
285
|
+
*/
|
|
286
|
+
characterQuery: CharacterEditingQuery | null;
|
|
285
287
|
}
|
|
286
|
-
export type AvailableAdjustKeyCode = 'ArrowUp' | 'ArrowDown' | 'PageUp' | 'PageDown' | 'Home' | 'End';
|
|
287
288
|
export type SectionNeighbors = {
|
|
288
289
|
[sectionIndex: number]: {
|
|
289
290
|
/**
|
|
@@ -310,33 +311,19 @@ export type SectionOrdering = {
|
|
|
310
311
|
*/
|
|
311
312
|
endIndex: number;
|
|
312
313
|
};
|
|
313
|
-
export interface
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
syncSelectionToDOM: () => void;
|
|
318
|
-
/**
|
|
319
|
-
* Returns the index of the active section (the first focused section).
|
|
320
|
-
* If no section is active, returns `null`.
|
|
321
|
-
* @returns {number | null} The index of the active section.
|
|
322
|
-
*/
|
|
323
|
-
getActiveSectionIndexFromDOM: () => number | null;
|
|
324
|
-
/**
|
|
325
|
-
* Focuses the field.
|
|
326
|
-
* @param {number | FieldSectionType} newSelectedSection The section to select once focused.
|
|
327
|
-
*/
|
|
328
|
-
focusField: (newSelectedSection?: number | FieldSectionType) => void;
|
|
329
|
-
setSelectedSections: (newSelectedSections: FieldSelectedSections) => void;
|
|
330
|
-
isFieldFocused: () => boolean;
|
|
314
|
+
export interface CharacterEditingQuery {
|
|
315
|
+
value: string;
|
|
316
|
+
sectionIndex: number;
|
|
317
|
+
sectionType: FieldSectionType;
|
|
331
318
|
}
|
|
332
|
-
export type
|
|
333
|
-
|
|
334
|
-
}>(params: UseFieldTextFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => {
|
|
335
|
-
interactions: UseFieldTextFieldInteractions;
|
|
336
|
-
returnedValue: TEnableAccessibleFieldDOMStructure extends false ? UseFieldV6AdditionalProps & Required<UseFieldV6ForwardedProps> : UseFieldV7AdditionalProps & Required<UseFieldV7ForwardedProps>;
|
|
319
|
+
export type UseFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure> & {
|
|
320
|
+
enableAccessibleFieldDOMStructure?: boolean;
|
|
337
321
|
};
|
|
338
|
-
interface
|
|
339
|
-
|
|
340
|
-
|
|
322
|
+
export interface UseFieldDOMGetters {
|
|
323
|
+
isReady: () => boolean;
|
|
324
|
+
getRoot: () => HTMLElement;
|
|
325
|
+
getSectionContainer: (sectionIndex: number) => HTMLElement;
|
|
326
|
+
getSectionContent: (sectionIndex: number) => HTMLElement;
|
|
327
|
+
getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
|
|
341
328
|
}
|
|
342
329
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
|
|
2
2
|
import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.js";
|
|
3
3
|
import { PickerValidValue } from "../../models/index.js";
|
|
4
4
|
export declare const getDateSectionConfigFromFormatToken: (utils: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
|
|
@@ -12,15 +12,12 @@ export declare const removeLocalizedDigits: (valueStr: string, localizedDigits:
|
|
|
12
12
|
export declare const applyLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
|
|
13
13
|
export declare const isStringNumber: (valueStr: string, localizedDigits: string[]) => boolean;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* Make sure the value of a digit section have the right amount of leading zeros.
|
|
16
16
|
* E.g.: `03` => `3`
|
|
17
17
|
* Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
|
|
18
18
|
*/
|
|
19
19
|
export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
|
|
20
20
|
export declare const cleanDigitSectionValue: (utils: MuiPickersAdapter, value: number, sectionBoundaries: FieldSectionValueBoundaries<any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
|
|
21
|
-
export declare const adjustSectionValue: <TValue extends PickerValidValue>(utils: MuiPickersAdapter, timezone: PickersTimezone, section: InferFieldSection<TValue>, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries, localizedDigits: string[], activeDate: PickerValidDate | null, stepsAttributes?: {
|
|
22
|
-
minutesStep?: number;
|
|
23
|
-
}) => string;
|
|
24
21
|
export declare const getSectionVisibleValue: (section: FieldSection, target: "input-rtl" | "input-ltr" | "non-input", localizedDigits: string[]) => string;
|
|
25
22
|
export declare const changeSectionValueFormat: (utils: MuiPickersAdapter, valueStr: string, currentFormat: string, newFormat: string) => string;
|
|
26
23
|
export declare const doesSectionFormatHaveLeadingZeros: (utils: MuiPickersAdapter, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
|
|
@@ -36,6 +33,4 @@ export declare const validateSections: <TValue extends PickerValidValue>(section
|
|
|
36
33
|
export declare const mergeDateIntoReferenceDate: (utils: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
|
|
37
34
|
export declare const isAndroid: () => boolean;
|
|
38
35
|
export declare const getSectionOrder: (sections: FieldSection[], shouldApplyRTL: boolean) => SectionOrdering;
|
|
39
|
-
export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;
|
|
40
|
-
export declare const getSectionValueText: (section: FieldSection, utils: MuiPickersAdapter) => string | undefined;
|
|
41
|
-
export declare const getSectionValueNow: (section: FieldSection, utils: MuiPickersAdapter) => number | undefined;
|
|
36
|
+
export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.
|
|
6
|
+
exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForV7HiddenInputFromSections = exports.createDateStrForV6InputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
|
|
7
7
|
var _dateUtils = require("../../utils/date-utils");
|
|
8
8
|
const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
|
|
9
9
|
const config = utils.formatTokenMap[formatToken];
|
|
@@ -24,20 +24,6 @@ const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
|
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
26
|
exports.getDateSectionConfigFromFormatToken = getDateSectionConfigFromFormatToken;
|
|
27
|
-
const getDeltaFromKeyCode = keyCode => {
|
|
28
|
-
switch (keyCode) {
|
|
29
|
-
case 'ArrowUp':
|
|
30
|
-
return 1;
|
|
31
|
-
case 'ArrowDown':
|
|
32
|
-
return -1;
|
|
33
|
-
case 'PageUp':
|
|
34
|
-
return 5;
|
|
35
|
-
case 'PageDown':
|
|
36
|
-
return -5;
|
|
37
|
-
default:
|
|
38
|
-
return 0;
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
27
|
const getDaysInWeekStr = (utils, format) => {
|
|
42
28
|
const elements = [];
|
|
43
29
|
const now = utils.date(undefined, 'default');
|
|
@@ -120,22 +106,14 @@ const isStringNumber = (valueStr, localizedDigits) => {
|
|
|
120
106
|
};
|
|
121
107
|
|
|
122
108
|
/**
|
|
123
|
-
*
|
|
109
|
+
* Make sure the value of a digit section have the right amount of leading zeros.
|
|
124
110
|
* E.g.: `03` => `3`
|
|
125
111
|
* Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
|
|
126
112
|
*/
|
|
127
113
|
exports.isStringNumber = isStringNumber;
|
|
128
114
|
const cleanLeadingZeros = (valueStr, size) => {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
// Remove the leading zeros
|
|
132
|
-
cleanValueStr = Number(cleanValueStr).toString();
|
|
133
|
-
|
|
134
|
-
// Add enough leading zeros to fill the section
|
|
135
|
-
while (cleanValueStr.length < size) {
|
|
136
|
-
cleanValueStr = `0${cleanValueStr}`;
|
|
137
|
-
}
|
|
138
|
-
return cleanValueStr;
|
|
115
|
+
// Remove the leading zeros and then add back as many as needed.
|
|
116
|
+
return Number(valueStr).toString().padStart(size, '0');
|
|
139
117
|
};
|
|
140
118
|
exports.cleanLeadingZeros = cleanLeadingZeros;
|
|
141
119
|
const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits, section) => {
|
|
@@ -158,69 +136,6 @@ const cleanDigitSectionValue = (utils, value, sectionBoundaries, localizedDigits
|
|
|
158
136
|
return applyLocalizedDigits(valueStr, localizedDigits);
|
|
159
137
|
};
|
|
160
138
|
exports.cleanDigitSectionValue = cleanDigitSectionValue;
|
|
161
|
-
const adjustSectionValue = (utils, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) => {
|
|
162
|
-
const delta = getDeltaFromKeyCode(keyCode);
|
|
163
|
-
const isStart = keyCode === 'Home';
|
|
164
|
-
const isEnd = keyCode === 'End';
|
|
165
|
-
const shouldSetAbsolute = section.value === '' || isStart || isEnd;
|
|
166
|
-
const adjustDigitSection = () => {
|
|
167
|
-
const sectionBoundaries = sectionsValueBoundaries[section.type]({
|
|
168
|
-
currentDate: activeDate,
|
|
169
|
-
format: section.format,
|
|
170
|
-
contentType: section.contentType
|
|
171
|
-
});
|
|
172
|
-
const getCleanValue = value => cleanDigitSectionValue(utils, value, sectionBoundaries, localizedDigits, section);
|
|
173
|
-
const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
|
|
174
|
-
const currentSectionValue = parseInt(removeLocalizedDigits(section.value, localizedDigits), 10);
|
|
175
|
-
let newSectionValueNumber = currentSectionValue + delta * step;
|
|
176
|
-
if (shouldSetAbsolute) {
|
|
177
|
-
if (section.type === 'year' && !isEnd && !isStart) {
|
|
178
|
-
return utils.formatByString(utils.date(undefined, timezone), section.format);
|
|
179
|
-
}
|
|
180
|
-
if (delta > 0 || isStart) {
|
|
181
|
-
newSectionValueNumber = sectionBoundaries.minimum;
|
|
182
|
-
} else {
|
|
183
|
-
newSectionValueNumber = sectionBoundaries.maximum;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
if (newSectionValueNumber % step !== 0) {
|
|
187
|
-
if (delta < 0 || isStart) {
|
|
188
|
-
newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
|
|
189
|
-
}
|
|
190
|
-
if (delta > 0 || isEnd) {
|
|
191
|
-
newSectionValueNumber -= newSectionValueNumber % step;
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
if (newSectionValueNumber > sectionBoundaries.maximum) {
|
|
195
|
-
return getCleanValue(sectionBoundaries.minimum + (newSectionValueNumber - sectionBoundaries.maximum - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
|
|
196
|
-
}
|
|
197
|
-
if (newSectionValueNumber < sectionBoundaries.minimum) {
|
|
198
|
-
return getCleanValue(sectionBoundaries.maximum - (sectionBoundaries.minimum - newSectionValueNumber - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
|
|
199
|
-
}
|
|
200
|
-
return getCleanValue(newSectionValueNumber);
|
|
201
|
-
};
|
|
202
|
-
const adjustLetterSection = () => {
|
|
203
|
-
const options = getLetterEditingOptions(utils, timezone, section.type, section.format);
|
|
204
|
-
if (options.length === 0) {
|
|
205
|
-
return section.value;
|
|
206
|
-
}
|
|
207
|
-
if (shouldSetAbsolute) {
|
|
208
|
-
if (delta > 0 || isStart) {
|
|
209
|
-
return options[0];
|
|
210
|
-
}
|
|
211
|
-
return options[options.length - 1];
|
|
212
|
-
}
|
|
213
|
-
const currentOptionIndex = options.indexOf(section.value);
|
|
214
|
-
const newOptionIndex = (currentOptionIndex + delta) % options.length;
|
|
215
|
-
const clampedIndex = (newOptionIndex + options.length) % options.length;
|
|
216
|
-
return options[clampedIndex];
|
|
217
|
-
};
|
|
218
|
-
if (section.contentType === 'digit' || section.contentType === 'digit-with-letter') {
|
|
219
|
-
return adjustDigitSection();
|
|
220
|
-
}
|
|
221
|
-
return adjustLetterSection();
|
|
222
|
-
};
|
|
223
|
-
exports.adjustSectionValue = adjustSectionValue;
|
|
224
139
|
const getSectionVisibleValue = (section, target, localizedDigits) => {
|
|
225
140
|
let value = section.value || section.placeholder;
|
|
226
141
|
const hasLeadingZeros = target === 'non-input' ? section.hasLeadingZerosInFormat : section.hasLeadingZerosInInput;
|
|
@@ -262,12 +177,11 @@ const doesSectionFormatHaveLeadingZeros = (utils, contentType, sectionType, form
|
|
|
262
177
|
// We can't use `changeSectionValueFormat`, because `utils.parse('1', 'YYYY')` returns `1971` instead of `1`.
|
|
263
178
|
case 'year':
|
|
264
179
|
{
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
return
|
|
180
|
+
// Remove once https://github.com/iamkun/dayjs/pull/2847 is merged and bump dayjs version
|
|
181
|
+
if (utils.lib === 'dayjs' && format === 'YY') {
|
|
182
|
+
return true;
|
|
268
183
|
}
|
|
269
|
-
|
|
270
|
-
return formatted2001 === '01';
|
|
184
|
+
return utils.formatByString(utils.setYear(now, 1), format).startsWith('0');
|
|
271
185
|
}
|
|
272
186
|
case 'month':
|
|
273
187
|
{
|
|
@@ -606,63 +520,4 @@ const parseSelectedSections = (selectedSections, sections) => {
|
|
|
606
520
|
}
|
|
607
521
|
return selectedSections;
|
|
608
522
|
};
|
|
609
|
-
exports.parseSelectedSections = parseSelectedSections;
|
|
610
|
-
const getSectionValueText = (section, utils) => {
|
|
611
|
-
if (!section.value) {
|
|
612
|
-
return undefined;
|
|
613
|
-
}
|
|
614
|
-
switch (section.type) {
|
|
615
|
-
case 'month':
|
|
616
|
-
{
|
|
617
|
-
if (section.contentType === 'digit') {
|
|
618
|
-
return utils.format(utils.setMonth(utils.date(), Number(section.value) - 1), 'month');
|
|
619
|
-
}
|
|
620
|
-
const parsedDate = utils.parse(section.value, section.format);
|
|
621
|
-
return parsedDate ? utils.format(parsedDate, 'month') : undefined;
|
|
622
|
-
}
|
|
623
|
-
case 'day':
|
|
624
|
-
return section.contentType === 'digit' ? utils.format(utils.setDate(utils.startOfYear(utils.date()), Number(section.value)), 'dayOfMonthFull') : section.value;
|
|
625
|
-
case 'weekDay':
|
|
626
|
-
// TODO: improve by providing the label of the week day
|
|
627
|
-
return undefined;
|
|
628
|
-
default:
|
|
629
|
-
return undefined;
|
|
630
|
-
}
|
|
631
|
-
};
|
|
632
|
-
exports.getSectionValueText = getSectionValueText;
|
|
633
|
-
const getSectionValueNow = (section, utils) => {
|
|
634
|
-
if (!section.value) {
|
|
635
|
-
return undefined;
|
|
636
|
-
}
|
|
637
|
-
switch (section.type) {
|
|
638
|
-
case 'weekDay':
|
|
639
|
-
{
|
|
640
|
-
if (section.contentType === 'letter') {
|
|
641
|
-
// TODO: improve by resolving the week day number from a letter week day
|
|
642
|
-
return undefined;
|
|
643
|
-
}
|
|
644
|
-
return Number(section.value);
|
|
645
|
-
}
|
|
646
|
-
case 'meridiem':
|
|
647
|
-
{
|
|
648
|
-
const parsedDate = utils.parse(`01:00 ${section.value}`, `${utils.formats.hours12h}:${utils.formats.minutes} ${section.format}`);
|
|
649
|
-
if (parsedDate) {
|
|
650
|
-
return utils.getHours(parsedDate) >= 12 ? 1 : 0;
|
|
651
|
-
}
|
|
652
|
-
return undefined;
|
|
653
|
-
}
|
|
654
|
-
case 'day':
|
|
655
|
-
return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
|
|
656
|
-
case 'month':
|
|
657
|
-
{
|
|
658
|
-
if (section.contentType === 'digit') {
|
|
659
|
-
return Number(section.value);
|
|
660
|
-
}
|
|
661
|
-
const parsedDate = utils.parse(section.value, section.format);
|
|
662
|
-
return parsedDate ? utils.getMonth(parsedDate) + 1 : undefined;
|
|
663
|
-
}
|
|
664
|
-
default:
|
|
665
|
-
return section.contentType !== 'letter' ? Number(section.value) : undefined;
|
|
666
|
-
}
|
|
667
|
-
};
|
|
668
|
-
exports.getSectionValueNow = getSectionValueNow;
|
|
523
|
+
exports.parseSelectedSections = parseSelectedSections;
|