@mui/x-date-pickers 8.0.0-alpha.13 → 8.0.0-alpha.14
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 +131 -0
- package/DatePicker/shared.d.ts +1 -1
- package/DateTimePicker/DateTimePicker.types.d.ts +2 -2
- package/DateTimePicker/DateTimePickerToolbar.d.ts +1 -1
- package/DateTimePicker/DateTimePickerToolbar.js +1 -1
- package/DateTimePicker/shared.d.ts +18 -10
- package/DateTimePicker/shared.js +23 -2
- package/DesktopDateTimePicker/DesktopDateTimePicker.js +2 -11
- package/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +4 -7
- package/DesktopTimePicker/DesktopTimePicker.types.d.ts +2 -2
- package/MobileDateTimePicker/MobileDateTimePicker.d.ts +1 -2
- package/MobileDateTimePicker/MobileDateTimePicker.js +61 -6
- package/MobileDateTimePicker/MobileDateTimePicker.types.d.ts +1 -3
- package/PickersTextField/PickersTextField.js +3 -1
- package/StaticDateTimePicker/StaticDateTimePicker.js +60 -6
- package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts +1 -2
- package/TimePicker/shared.d.ts +1 -1
- package/esm/DatePicker/shared.d.ts +1 -1
- package/esm/DateTimePicker/DateTimePicker.types.d.ts +2 -2
- package/esm/DateTimePicker/DateTimePickerToolbar.d.ts +1 -1
- package/esm/DateTimePicker/DateTimePickerToolbar.js +1 -1
- package/esm/DateTimePicker/shared.d.ts +18 -10
- package/esm/DateTimePicker/shared.js +23 -2
- package/esm/DesktopDateTimePicker/DesktopDateTimePicker.js +3 -12
- package/esm/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +4 -7
- package/esm/DesktopTimePicker/DesktopTimePicker.types.d.ts +2 -2
- package/esm/MobileDateTimePicker/MobileDateTimePicker.d.ts +1 -2
- package/esm/MobileDateTimePicker/MobileDateTimePicker.js +62 -7
- package/esm/MobileDateTimePicker/MobileDateTimePicker.types.d.ts +1 -3
- package/esm/PickersTextField/PickersTextField.js +3 -1
- package/esm/StaticDateTimePicker/StaticDateTimePicker.js +61 -7
- package/esm/StaticDateTimePicker/StaticDateTimePicker.types.d.ts +1 -2
- package/esm/TimePicker/shared.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/internals/components/PickerFieldUI.js +6 -2
- package/esm/internals/components/PickerPopper/PickerPopper.js +3 -3
- package/esm/internals/components/PickerProvider.d.ts +137 -6
- package/esm/internals/components/PickerProvider.js +1 -1
- package/esm/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +4 -7
- package/esm/internals/hooks/useField/useField.js +7 -8
- package/esm/internals/hooks/useField/useField.types.d.ts +46 -43
- package/esm/internals/hooks/useField/useField.utils.js +4 -1
- package/esm/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
- package/esm/internals/hooks/useField/useFieldState.d.ts +2 -1
- package/esm/internals/hooks/useField/useFieldState.js +136 -83
- package/esm/internals/hooks/useField/useFieldV6TextField.js +1 -1
- package/esm/internals/hooks/useField/useFieldV7TextField.js +2 -1
- package/esm/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts +4 -7
- package/esm/internals/hooks/useNullableFieldPrivateContext.d.ts +5 -2
- package/esm/internals/hooks/usePicker/hooks/useOrientation.d.ts +2 -0
- package/esm/internals/hooks/usePicker/hooks/useOrientation.js +34 -0
- package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts +19 -0
- package/esm/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +210 -0
- package/esm/internals/hooks/usePicker/index.d.ts +1 -3
- package/esm/internals/hooks/usePicker/usePicker.d.ts +5 -5
- package/esm/internals/hooks/usePicker/usePicker.js +276 -34
- package/esm/internals/hooks/usePicker/usePicker.types.d.ts +181 -9
- package/esm/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts +3 -4
- package/esm/internals/hooks/useValueWithTimezone.d.ts +1 -1
- package/esm/internals/index.d.ts +3 -6
- package/esm/internals/models/manager.d.ts +108 -4
- package/esm/internals/models/props/basePickerProps.d.ts +2 -2
- package/esm/internals/models/props/time.d.ts +1 -1
- package/esm/internals/utils/date-time-utils.d.ts +2 -2
- package/esm/internals/utils/valueManagers.d.ts +1 -1
- package/esm/internals/utils/valueManagers.js +10 -18
- package/esm/managers/useDateManager.d.ts +3 -4
- package/esm/managers/useDateTimeManager.d.ts +3 -4
- package/esm/managers/useTimeManager.d.ts +3 -4
- package/esm/models/adapters.d.ts +2 -1
- package/esm/models/manager.d.ts +4 -5
- package/esm/validation/useValidation.d.ts +1 -1
- package/index.js +1 -1
- package/internals/components/PickerFieldUI.js +6 -2
- package/internals/components/PickerPopper/PickerPopper.js +3 -3
- package/internals/components/PickerProvider.d.ts +137 -6
- package/internals/components/PickerProvider.js +1 -1
- package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +4 -7
- package/internals/hooks/useField/useField.js +7 -8
- package/internals/hooks/useField/useField.types.d.ts +46 -43
- package/internals/hooks/useField/useField.utils.js +4 -1
- package/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
- package/internals/hooks/useField/useFieldState.d.ts +2 -1
- package/internals/hooks/useField/useFieldState.js +135 -82
- package/internals/hooks/useField/useFieldV6TextField.js +1 -1
- package/internals/hooks/useField/useFieldV7TextField.js +2 -1
- package/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts +4 -7
- package/internals/hooks/useNullableFieldPrivateContext.d.ts +5 -2
- package/internals/hooks/usePicker/hooks/useOrientation.d.ts +2 -0
- package/internals/hooks/usePicker/hooks/useOrientation.js +42 -0
- package/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts +19 -0
- package/internals/hooks/usePicker/{usePickerValue.js → hooks/useValueAndOpenStates.js} +97 -114
- package/internals/hooks/usePicker/index.d.ts +1 -3
- package/internals/hooks/usePicker/usePicker.d.ts +5 -5
- package/internals/hooks/usePicker/usePicker.js +278 -34
- package/internals/hooks/usePicker/usePicker.types.d.ts +181 -9
- package/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts +3 -4
- package/internals/hooks/useValueWithTimezone.d.ts +1 -1
- package/internals/index.d.ts +3 -6
- package/internals/models/manager.d.ts +108 -4
- package/internals/models/props/basePickerProps.d.ts +2 -2
- package/internals/models/props/time.d.ts +1 -1
- package/internals/utils/date-time-utils.d.ts +2 -2
- package/internals/utils/valueManagers.d.ts +1 -1
- package/internals/utils/valueManagers.js +10 -18
- package/managers/useDateManager.d.ts +3 -4
- package/managers/useDateTimeManager.d.ts +3 -4
- package/managers/useTimeManager.d.ts +3 -4
- package/models/adapters.d.ts +2 -1
- package/models/manager.d.ts +4 -5
- package/modern/DatePicker/shared.d.ts +1 -1
- package/modern/DateTimePicker/DateTimePicker.types.d.ts +2 -2
- package/modern/DateTimePicker/DateTimePickerToolbar.d.ts +1 -1
- package/modern/DateTimePicker/DateTimePickerToolbar.js +1 -1
- package/modern/DateTimePicker/shared.d.ts +18 -10
- package/modern/DateTimePicker/shared.js +23 -2
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js +3 -12
- package/modern/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts +4 -7
- package/modern/DesktopTimePicker/DesktopTimePicker.types.d.ts +2 -2
- package/modern/MobileDateTimePicker/MobileDateTimePicker.d.ts +1 -2
- package/modern/MobileDateTimePicker/MobileDateTimePicker.js +62 -7
- package/modern/MobileDateTimePicker/MobileDateTimePicker.types.d.ts +1 -3
- package/modern/PickersTextField/PickersTextField.js +3 -1
- package/modern/StaticDateTimePicker/StaticDateTimePicker.js +61 -7
- package/modern/StaticDateTimePicker/StaticDateTimePicker.types.d.ts +1 -2
- package/modern/TimePicker/shared.d.ts +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/components/PickerFieldUI.js +6 -2
- package/modern/internals/components/PickerPopper/PickerPopper.js +3 -3
- package/modern/internals/components/PickerProvider.d.ts +137 -6
- package/modern/internals/components/PickerProvider.js +1 -1
- package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts +4 -7
- package/modern/internals/hooks/useField/useField.js +7 -8
- package/modern/internals/hooks/useField/useField.types.d.ts +46 -43
- package/modern/internals/hooks/useField/useField.utils.js +4 -1
- package/modern/internals/hooks/useField/useFieldCharacterEditing.js +2 -2
- package/modern/internals/hooks/useField/useFieldState.d.ts +2 -1
- package/modern/internals/hooks/useField/useFieldState.js +136 -83
- package/modern/internals/hooks/useField/useFieldV6TextField.js +1 -1
- package/modern/internals/hooks/useField/useFieldV7TextField.js +2 -1
- package/modern/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts +4 -7
- package/modern/internals/hooks/useNullableFieldPrivateContext.d.ts +5 -2
- package/modern/internals/hooks/usePicker/hooks/useOrientation.d.ts +2 -0
- package/modern/internals/hooks/usePicker/hooks/useOrientation.js +34 -0
- package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts +19 -0
- package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.js +210 -0
- package/modern/internals/hooks/usePicker/index.d.ts +1 -3
- package/modern/internals/hooks/usePicker/usePicker.d.ts +5 -5
- package/modern/internals/hooks/usePicker/usePicker.js +276 -34
- package/modern/internals/hooks/usePicker/usePicker.types.d.ts +181 -9
- package/modern/internals/hooks/useStaticPicker/useStaticPicker.types.d.ts +3 -4
- package/modern/internals/hooks/useValueWithTimezone.d.ts +1 -1
- package/modern/internals/index.d.ts +3 -6
- package/modern/internals/models/manager.d.ts +108 -4
- package/modern/internals/models/props/basePickerProps.d.ts +2 -2
- package/modern/internals/models/props/time.d.ts +1 -1
- package/modern/internals/utils/date-time-utils.d.ts +2 -2
- package/modern/internals/utils/valueManagers.d.ts +1 -1
- package/modern/internals/utils/valueManagers.js +10 -18
- package/modern/managers/useDateManager.d.ts +3 -4
- package/modern/managers/useDateTimeManager.d.ts +3 -4
- package/modern/managers/useTimeManager.d.ts +3 -4
- package/modern/models/adapters.d.ts +2 -1
- package/modern/models/manager.d.ts +4 -5
- package/modern/validation/useValidation.d.ts +1 -1
- package/package.json +1 -1
- package/tsconfig.build.tsbuildinfo +1 -1
- package/validation/useValidation.d.ts +1 -1
- package/esm/internals/hooks/useOpenState.d.ts +0 -14
- package/esm/internals/hooks/useOpenState.js +0 -37
- package/esm/internals/hooks/usePicker/usePickerProvider.d.ts +0 -65
- package/esm/internals/hooks/usePicker/usePickerProvider.js +0 -125
- package/esm/internals/hooks/usePicker/usePickerValue.d.ts +0 -12
- package/esm/internals/hooks/usePicker/usePickerValue.js +0 -226
- package/esm/internals/hooks/usePicker/usePickerValue.types.d.ts +0 -327
- package/esm/internals/hooks/usePicker/usePickerValue.types.js +0 -1
- package/esm/internals/hooks/usePicker/usePickerViews.d.ts +0 -137
- package/esm/internals/hooks/usePicker/usePickerViews.js +0 -188
- package/internals/hooks/useOpenState.d.ts +0 -14
- package/internals/hooks/useOpenState.js +0 -46
- package/internals/hooks/usePicker/usePickerProvider.d.ts +0 -65
- package/internals/hooks/usePicker/usePickerProvider.js +0 -135
- package/internals/hooks/usePicker/usePickerValue.d.ts +0 -12
- package/internals/hooks/usePicker/usePickerValue.types.d.ts +0 -327
- package/internals/hooks/usePicker/usePickerValue.types.js +0 -5
- package/internals/hooks/usePicker/usePickerViews.d.ts +0 -137
- package/internals/hooks/usePicker/usePickerViews.js +0 -195
- package/modern/internals/hooks/useOpenState.d.ts +0 -14
- package/modern/internals/hooks/useOpenState.js +0 -37
- package/modern/internals/hooks/usePicker/usePickerProvider.d.ts +0 -65
- package/modern/internals/hooks/usePicker/usePickerProvider.js +0 -125
- package/modern/internals/hooks/usePicker/usePickerValue.d.ts +0 -12
- package/modern/internals/hooks/usePicker/usePickerValue.js +0 -226
- package/modern/internals/hooks/usePicker/usePickerValue.types.d.ts +0 -327
- package/modern/internals/hooks/usePicker/usePickerValue.types.js +0 -1
- package/modern/internals/hooks/usePicker/usePickerViews.d.ts +0 -137
- package/modern/internals/hooks/usePicker/usePickerViews.js +0 -188
|
@@ -236,7 +236,7 @@ export const useFieldCharacterEditing = ({
|
|
|
236
236
|
return applyQuery(params, getFirstSectionValueMatchingWithQuery, queryValue => isStringNumber(queryValue, localizedDigits));
|
|
237
237
|
};
|
|
238
238
|
const applyCharacterEditing = useEventCallback(params => {
|
|
239
|
-
const
|
|
239
|
+
const section = sections[params.sectionIndex];
|
|
240
240
|
const isNumericEditing = isStringNumber(params.keyPressed, localizedDigits);
|
|
241
241
|
const response = isNumericEditing ? applyNumericEditing(_extends({}, params, {
|
|
242
242
|
keyPressed: applyLocalizedDigits(params.keyPressed, localizedDigits)
|
|
@@ -246,7 +246,7 @@ export const useFieldCharacterEditing = ({
|
|
|
246
246
|
return;
|
|
247
247
|
}
|
|
248
248
|
updateSectionValue({
|
|
249
|
-
|
|
249
|
+
section,
|
|
250
250
|
newSectionValue: response.sectionValue,
|
|
251
251
|
shouldGoToNextSection: response.shouldGoToNextSection
|
|
252
252
|
});
|
|
@@ -5,7 +5,7 @@ export interface UpdateSectionValueParams<TValue extends PickerValidValue> {
|
|
|
5
5
|
/**
|
|
6
6
|
* The section on which we want to apply the new value.
|
|
7
7
|
*/
|
|
8
|
-
|
|
8
|
+
section: InferFieldSection<TValue>;
|
|
9
9
|
/**
|
|
10
10
|
* Value to apply to the active section.
|
|
11
11
|
*/
|
|
@@ -17,6 +17,7 @@ export interface UpdateSectionValueParams<TValue extends PickerValidValue> {
|
|
|
17
17
|
}
|
|
18
18
|
export interface UseFieldStateResponse<TValue extends PickerValidValue> {
|
|
19
19
|
state: UseFieldState<TValue>;
|
|
20
|
+
value: TValue;
|
|
20
21
|
activeSectionIndex: number | null;
|
|
21
22
|
parsedSelectedSections: FieldParsedSelectedSections;
|
|
22
23
|
setSelectedSections: (sections: FieldSelectedSections) => void;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import useControlled from '@mui/utils/useControlled';
|
|
4
|
+
import useTimeout from '@mui/utils/useTimeout';
|
|
4
5
|
import { useRtl } from '@mui/system/RtlProvider';
|
|
5
6
|
import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
|
|
6
7
|
import { useUtils, useLocalizationContext } from "../useUtils.js";
|
|
7
8
|
import { mergeDateIntoReferenceDate, getSectionsBoundaries, validateSections, getDateFromDateSections, parseSelectedSections, getLocalizedDigits } from "./useField.utils.js";
|
|
8
9
|
import { buildSectionsFromFormat } from "./buildSectionsFromFormat.js";
|
|
9
|
-
import {
|
|
10
|
+
import { useControlledValueWithTimezone } from "../useValueWithTimezone.js";
|
|
10
11
|
import { getSectionTypeGranularity } from "../../utils/getDefaultReferenceDate.js";
|
|
11
12
|
export const useFieldState = params => {
|
|
12
13
|
const utils = useUtils();
|
|
@@ -34,10 +35,11 @@ export const useFieldState = params => {
|
|
|
34
35
|
}
|
|
35
36
|
} = params;
|
|
36
37
|
const {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
} =
|
|
38
|
+
value,
|
|
39
|
+
handleValueChange,
|
|
40
|
+
timezone
|
|
41
|
+
} = useControlledValueWithTimezone({
|
|
42
|
+
name: 'a field component',
|
|
41
43
|
timezone: timezoneProp,
|
|
42
44
|
value: valueProp,
|
|
43
45
|
defaultValue,
|
|
@@ -45,9 +47,13 @@ export const useFieldState = params => {
|
|
|
45
47
|
onChange,
|
|
46
48
|
valueManager
|
|
47
49
|
});
|
|
50
|
+
const valueRef = React.useRef(value);
|
|
51
|
+
React.useEffect(() => {
|
|
52
|
+
valueRef.current = value;
|
|
53
|
+
}, [value]);
|
|
48
54
|
const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
|
|
49
55
|
const sectionsValueBoundaries = React.useMemo(() => getSectionsBoundaries(utils, localizedDigits, timezone), [utils, localizedDigits, timezone]);
|
|
50
|
-
const getSectionsFromValue = React.useCallback(
|
|
56
|
+
const getSectionsFromValue = React.useCallback(valueToAnalyze => fieldValueManager.getSectionsFromValue(valueToAnalyze, date => buildSectionsFromFormat({
|
|
51
57
|
utils,
|
|
52
58
|
localeText: translations,
|
|
53
59
|
localizedDigits,
|
|
@@ -59,17 +65,22 @@ export const useFieldState = params => {
|
|
|
59
65
|
isRtl
|
|
60
66
|
})), [fieldValueManager, format, translations, localizedDigits, isRtl, shouldRespectLeadingZeros, utils, formatDensity, enableAccessibleFieldDOMStructure]);
|
|
61
67
|
const [state, setState] = React.useState(() => {
|
|
62
|
-
const sections = getSectionsFromValue(
|
|
68
|
+
const sections = getSectionsFromValue(value);
|
|
63
69
|
validateSections(sections, valueType);
|
|
64
70
|
const stateWithoutReferenceDate = {
|
|
65
71
|
sections,
|
|
66
|
-
|
|
72
|
+
lastValue: value,
|
|
73
|
+
lastSectionsDependencies: {
|
|
74
|
+
format,
|
|
75
|
+
isRtl,
|
|
76
|
+
locale: utils.locale
|
|
77
|
+
},
|
|
67
78
|
tempValueStrAndroid: null
|
|
68
79
|
};
|
|
69
80
|
const granularity = getSectionTypeGranularity(sections);
|
|
70
81
|
const referenceValue = valueManager.getInitialReferenceValue({
|
|
71
82
|
referenceDate: referenceDateProp,
|
|
72
|
-
value
|
|
83
|
+
value,
|
|
73
84
|
utils,
|
|
74
85
|
props: internalProps,
|
|
75
86
|
granularity,
|
|
@@ -91,29 +102,16 @@ export const useFieldState = params => {
|
|
|
91
102
|
};
|
|
92
103
|
const parsedSelectedSections = React.useMemo(() => parseSelectedSections(selectedSections, state.sections), [selectedSections, state.sections]);
|
|
93
104
|
const activeSectionIndex = parsedSelectedSections === 'all' ? 0 : parsedSelectedSections;
|
|
94
|
-
const publishValue =
|
|
95
|
-
value,
|
|
96
|
-
referenceValue,
|
|
97
|
-
sections
|
|
98
|
-
}) => {
|
|
99
|
-
setState(prevState => _extends({}, prevState, {
|
|
100
|
-
sections,
|
|
101
|
-
value,
|
|
102
|
-
referenceValue,
|
|
103
|
-
tempValueStrAndroid: null
|
|
104
|
-
}));
|
|
105
|
-
if (valueManager.areValuesEqual(utils, state.value, value)) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
105
|
+
const publishValue = newValue => {
|
|
108
106
|
const context = {
|
|
109
107
|
validationError: validator({
|
|
110
108
|
adapter,
|
|
111
|
-
value,
|
|
109
|
+
value: newValue,
|
|
112
110
|
timezone,
|
|
113
111
|
props: internalProps
|
|
114
112
|
})
|
|
115
113
|
};
|
|
116
|
-
handleValueChange(
|
|
114
|
+
handleValueChange(newValue, context);
|
|
117
115
|
};
|
|
118
116
|
const setSectionValue = (sectionIndex, newSectionValue) => {
|
|
119
117
|
const newSections = [...state.sections];
|
|
@@ -123,27 +121,49 @@ export const useFieldState = params => {
|
|
|
123
121
|
});
|
|
124
122
|
return newSections;
|
|
125
123
|
};
|
|
126
|
-
const
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
124
|
+
const sectionToUpdateOnNextInvalidDateRef = React.useRef(null);
|
|
125
|
+
const timeoutToUpdateSectionValueOnNextInvalidDate = useTimeout();
|
|
126
|
+
const setSectionUpdateToApplyOnNextInvalidDate = newSectionValue => {
|
|
127
|
+
if (activeSectionIndex == null) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
sectionToUpdateOnNextInvalidDateRef.current = {
|
|
131
|
+
sectionIndex: activeSectionIndex,
|
|
132
|
+
value: newSectionValue
|
|
133
|
+
};
|
|
134
|
+
timeoutToUpdateSectionValueOnNextInvalidDate.start(0, () => {
|
|
135
|
+
sectionToUpdateOnNextInvalidDateRef.current = null;
|
|
131
136
|
});
|
|
132
137
|
};
|
|
138
|
+
const clearValue = () => {
|
|
139
|
+
if (valueManager.areValuesEqual(utils, value, valueManager.emptyValue)) {
|
|
140
|
+
setState(prevState => _extends({}, prevState, {
|
|
141
|
+
sections: prevState.sections.map(section => _extends({}, section, {
|
|
142
|
+
value: ''
|
|
143
|
+
})),
|
|
144
|
+
tempValueStrAndroid: null
|
|
145
|
+
}));
|
|
146
|
+
} else {
|
|
147
|
+
publishValue(valueManager.emptyValue);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
133
150
|
const clearActiveSection = () => {
|
|
134
151
|
if (activeSectionIndex == null) {
|
|
135
152
|
return;
|
|
136
153
|
}
|
|
137
154
|
const activeSection = state.sections[activeSectionIndex];
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
155
|
+
if (activeSection.value === '') {
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
setSectionUpdateToApplyOnNextInvalidDate('');
|
|
159
|
+
if (fieldValueManager.getDateFromSection(value, activeSection) === null) {
|
|
160
|
+
setState(prevState => _extends({}, prevState, {
|
|
161
|
+
sections: setSectionValue(activeSectionIndex, ''),
|
|
162
|
+
tempValueStrAndroid: null
|
|
163
|
+
}));
|
|
164
|
+
} else {
|
|
165
|
+
publishValue(fieldValueManager.updateDateInValue(value, activeSection, null));
|
|
166
|
+
}
|
|
147
167
|
};
|
|
148
168
|
const updateValueFromValueStr = valueStr => {
|
|
149
169
|
const parseDateStr = (dateStr, referenceDate) => {
|
|
@@ -165,34 +185,31 @@ export const useFieldState = params => {
|
|
|
165
185
|
return mergeDateIntoReferenceDate(utils, date, sections, referenceDate, false);
|
|
166
186
|
};
|
|
167
187
|
const newValue = fieldValueManager.parseValueStr(valueStr, state.referenceValue, parseDateStr);
|
|
168
|
-
|
|
169
|
-
publishValue({
|
|
170
|
-
value: newValue,
|
|
171
|
-
referenceValue: newReferenceValue,
|
|
172
|
-
sections: getSectionsFromValue(newValue, state.sections)
|
|
173
|
-
});
|
|
188
|
+
publishValue(newValue);
|
|
174
189
|
};
|
|
190
|
+
const timeoutToCleanActiveDateSectionsIfValueNull = useTimeout();
|
|
175
191
|
const updateSectionValue = ({
|
|
176
|
-
|
|
192
|
+
section,
|
|
177
193
|
newSectionValue,
|
|
178
194
|
shouldGoToNextSection
|
|
179
195
|
}) => {
|
|
196
|
+
timeoutToUpdateSectionValueOnNextInvalidDate.clear();
|
|
197
|
+
timeoutToCleanActiveDateSectionsIfValueNull.clear();
|
|
198
|
+
const activeDate = fieldValueManager.getDateFromSection(value, section);
|
|
199
|
+
|
|
180
200
|
/**
|
|
181
|
-
*
|
|
201
|
+
* Decide which section should be focused
|
|
182
202
|
*/
|
|
183
203
|
if (shouldGoToNextSection && activeSectionIndex < state.sections.length - 1) {
|
|
184
204
|
setSelectedSections(activeSectionIndex + 1);
|
|
185
205
|
}
|
|
186
206
|
|
|
187
207
|
/**
|
|
188
|
-
*
|
|
208
|
+
* Try to build a valid date from the new section value
|
|
189
209
|
*/
|
|
190
|
-
const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
|
|
191
210
|
const newSections = setSectionValue(activeSectionIndex, newSectionValue);
|
|
192
|
-
const newActiveDateSections =
|
|
211
|
+
const newActiveDateSections = fieldValueManager.getDateSectionsFromValue(newSections, section);
|
|
193
212
|
const newActiveDate = getDateFromDateSections(utils, newActiveDateSections, localizedDigits);
|
|
194
|
-
let values;
|
|
195
|
-
let shouldPublish;
|
|
196
213
|
|
|
197
214
|
/**
|
|
198
215
|
* If the new date is valid,
|
|
@@ -200,23 +217,43 @@ export const useFieldState = params => {
|
|
|
200
217
|
* This makes sure that we don't lose some information of the initial date (like the time on a date field).
|
|
201
218
|
*/
|
|
202
219
|
if (utils.isValid(newActiveDate)) {
|
|
203
|
-
const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections,
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
220
|
+
const mergedDate = mergeDateIntoReferenceDate(utils, newActiveDate, newActiveDateSections, fieldValueManager.getDateFromSection(state.referenceValue, section), true);
|
|
221
|
+
if (activeDate == null) {
|
|
222
|
+
timeoutToCleanActiveDateSectionsIfValueNull.start(0, () => {
|
|
223
|
+
if (valueRef.current === value) {
|
|
224
|
+
setState(prevState => _extends({}, prevState, {
|
|
225
|
+
sections: fieldValueManager.clearDateSections(state.sections, section),
|
|
226
|
+
tempValueStrAndroid: null
|
|
227
|
+
}));
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
return publishValue(fieldValueManager.updateDateInValue(value, section, mergedDate));
|
|
209
232
|
}
|
|
210
233
|
|
|
211
234
|
/**
|
|
212
|
-
*
|
|
235
|
+
* If all the sections are filled but the date is invalid,
|
|
236
|
+
* Then we publish an invalid date.
|
|
213
237
|
*/
|
|
214
|
-
if (
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
238
|
+
if (newActiveDateSections.every(sectionBis => sectionBis.value !== '')) {
|
|
239
|
+
setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
|
|
240
|
+
return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* If the previous date is not null,
|
|
245
|
+
* Then we publish the date as `null`.
|
|
246
|
+
*/
|
|
247
|
+
if (activeDate != null) {
|
|
248
|
+
setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
|
|
249
|
+
return publishValue(fieldValueManager.updateDateInValue(value, section, null));
|
|
218
250
|
}
|
|
219
|
-
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* If the previous date is already null,
|
|
254
|
+
* Then we don't publish the date and we update the sections.
|
|
255
|
+
*/
|
|
256
|
+
return setState(prevState => _extends({}, prevState, {
|
|
220
257
|
sections: newSections,
|
|
221
258
|
tempValueStrAndroid: null
|
|
222
259
|
}));
|
|
@@ -224,32 +261,48 @@ export const useFieldState = params => {
|
|
|
224
261
|
const setTempAndroidValueStr = tempValueStrAndroid => setState(prev => _extends({}, prev, {
|
|
225
262
|
tempValueStrAndroid
|
|
226
263
|
}));
|
|
227
|
-
|
|
228
|
-
|
|
264
|
+
|
|
265
|
+
// If `prop.value` changes, we update the state to reflect the new value
|
|
266
|
+
if (value !== state.lastValue) {
|
|
267
|
+
let sections;
|
|
268
|
+
if (sectionToUpdateOnNextInvalidDateRef.current != null && !utils.isValid(fieldValueManager.getDateFromSection(value, state.sections[sectionToUpdateOnNextInvalidDateRef.current.sectionIndex]))) {
|
|
269
|
+
sections = setSectionValue(sectionToUpdateOnNextInvalidDateRef.current.sectionIndex, sectionToUpdateOnNextInvalidDateRef.current.value);
|
|
270
|
+
} else {
|
|
271
|
+
sections = getSectionsFromValue(value);
|
|
272
|
+
}
|
|
273
|
+
setState(prevState => _extends({}, prevState, {
|
|
274
|
+
lastValue: value,
|
|
275
|
+
sections,
|
|
276
|
+
sectionsDependencies: {
|
|
277
|
+
format,
|
|
278
|
+
isRtl,
|
|
279
|
+
locale: utils.locale
|
|
280
|
+
},
|
|
281
|
+
referenceValue: fieldValueManager.updateReferenceValue(utils, value, prevState.referenceValue),
|
|
282
|
+
tempValueStrAndroid: null
|
|
283
|
+
}));
|
|
284
|
+
}
|
|
285
|
+
if (isRtl !== state.lastSectionsDependencies.isRtl || format !== state.lastSectionsDependencies.format || utils.locale !== state.lastSectionsDependencies.locale) {
|
|
286
|
+
const sections = getSectionsFromValue(value);
|
|
229
287
|
validateSections(sections, valueType);
|
|
230
288
|
setState(prevState => _extends({}, prevState, {
|
|
231
|
-
|
|
289
|
+
lastSectionsDependencies: {
|
|
290
|
+
format,
|
|
291
|
+
isRtl,
|
|
292
|
+
locale: utils.locale
|
|
293
|
+
},
|
|
294
|
+
sections,
|
|
295
|
+
tempValueStrAndroid: null
|
|
232
296
|
}));
|
|
233
|
-
}
|
|
234
|
-
|
|
297
|
+
}
|
|
235
298
|
React.useEffect(() => {
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
shouldUpdate = true;
|
|
239
|
-
} else {
|
|
240
|
-
shouldUpdate = valueManager.getTimezone(utils, state.value) !== valueManager.getTimezone(utils, valueFromTheOutside);
|
|
241
|
-
}
|
|
242
|
-
if (shouldUpdate) {
|
|
243
|
-
setState(prevState => _extends({}, prevState, {
|
|
244
|
-
value: valueFromTheOutside,
|
|
245
|
-
referenceValue: fieldValueManager.updateReferenceValue(utils, valueFromTheOutside, prevState.referenceValue),
|
|
246
|
-
sections: getSectionsFromValue(valueFromTheOutside)
|
|
247
|
-
}));
|
|
299
|
+
if (sectionToUpdateOnNextInvalidDateRef.current != null) {
|
|
300
|
+
sectionToUpdateOnNextInvalidDateRef.current = null;
|
|
248
301
|
}
|
|
249
|
-
}
|
|
250
|
-
|
|
302
|
+
});
|
|
251
303
|
return {
|
|
252
304
|
state,
|
|
305
|
+
value,
|
|
253
306
|
activeSectionIndex,
|
|
254
307
|
parsedSelectedSections,
|
|
255
308
|
setSelectedSections,
|
|
@@ -254,7 +254,7 @@ export const useFieldV7TextField = params => {
|
|
|
254
254
|
if (isValidPastedValue) {
|
|
255
255
|
resetCharacterQuery();
|
|
256
256
|
updateSectionValue({
|
|
257
|
-
activeSection,
|
|
257
|
+
section: activeSection,
|
|
258
258
|
newSectionValue: pastedValue,
|
|
259
259
|
shouldGoToNextSection: true
|
|
260
260
|
});
|
|
@@ -292,6 +292,7 @@ export const useFieldV7TextField = params => {
|
|
|
292
292
|
return;
|
|
293
293
|
}
|
|
294
294
|
resetCharacterQuery();
|
|
295
|
+
revertDOMSectionChange(sectionIndex);
|
|
295
296
|
clearActiveSection();
|
|
296
297
|
return;
|
|
297
298
|
}
|
|
@@ -2,13 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
|
|
3
3
|
import { BasePickerProps } from "../../models/props/basePickerProps.js";
|
|
4
4
|
import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
|
|
5
|
-
import {
|
|
5
|
+
import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
|
|
6
6
|
import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
|
|
7
7
|
import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
|
|
8
|
-
import { UsePickerValueNonStaticProps } from "../usePicker/usePickerValue.types.js";
|
|
9
|
-
import { UsePickerViewsProps } from "../usePicker/usePickerViews.js";
|
|
10
8
|
import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
|
|
11
|
-
import { UsePickerProviderNonStaticProps } from "../usePicker/usePickerProvider.js";
|
|
12
9
|
import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
|
|
13
10
|
export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
|
|
14
11
|
/**
|
|
@@ -20,8 +17,8 @@ export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStruc
|
|
|
20
17
|
field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
|
|
21
18
|
}
|
|
22
19
|
export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
|
|
23
|
-
export interface MobileOnlyPickerProps extends
|
|
24
|
-
export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends
|
|
20
|
+
export interface MobileOnlyPickerProps extends UsePickerNonStaticProps {}
|
|
21
|
+
export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
|
|
25
22
|
/**
|
|
26
23
|
* Overridable component slots.
|
|
27
24
|
* @default {}
|
|
@@ -33,6 +30,6 @@ export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem,
|
|
|
33
30
|
*/
|
|
34
31
|
slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
|
|
35
32
|
}
|
|
36
|
-
export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<
|
|
33
|
+
export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
|
|
37
34
|
props: TExternalProps;
|
|
38
35
|
}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { UseFieldInternalProps } from './useField';
|
|
3
|
-
import {
|
|
3
|
+
import { FieldRef } from "../../models/index.js";
|
|
4
|
+
import { PickerRangeValue, PickerValue } from "../models/index.js";
|
|
4
5
|
export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
|
|
5
6
|
export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
|
|
6
|
-
export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'
|
|
7
|
+
export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
|
|
8
|
+
fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
|
|
9
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
|
3
|
+
import { arrayIncludes } from "../../../utils/utils.js";
|
|
4
|
+
function getOrientation() {
|
|
5
|
+
if (typeof window === 'undefined') {
|
|
6
|
+
return 'portrait';
|
|
7
|
+
}
|
|
8
|
+
if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
|
|
9
|
+
return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Support IOS safari
|
|
13
|
+
if (window.orientation) {
|
|
14
|
+
return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
|
|
15
|
+
}
|
|
16
|
+
return 'portrait';
|
|
17
|
+
}
|
|
18
|
+
export function useOrientation(views, customOrientation) {
|
|
19
|
+
const [orientation, setOrientation] = React.useState(getOrientation);
|
|
20
|
+
useEnhancedEffect(() => {
|
|
21
|
+
const eventHandler = () => {
|
|
22
|
+
setOrientation(getOrientation());
|
|
23
|
+
};
|
|
24
|
+
window.addEventListener('orientationchange', eventHandler);
|
|
25
|
+
return () => {
|
|
26
|
+
window.removeEventListener('orientationchange', eventHandler);
|
|
27
|
+
};
|
|
28
|
+
}, []);
|
|
29
|
+
if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
|
|
30
|
+
// could not display 13:34:44 in landscape mode
|
|
31
|
+
return 'portrait';
|
|
32
|
+
}
|
|
33
|
+
return customOrientation ?? orientation;
|
|
34
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.js";
|
|
3
|
+
import { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.js";
|
|
4
|
+
import { InferError } from "../../../../models/index.js";
|
|
5
|
+
import { SetValueActionOptions } from "../../../components/PickerProvider.js";
|
|
6
|
+
import { Validator } from "../../../../validation/index.js";
|
|
7
|
+
export declare function useValueAndOpenStates<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>(parameters: UsePickerDateStateParameters<TValue, TView, TExternalProps>): {
|
|
8
|
+
timezone: string;
|
|
9
|
+
state: UsePickerState<TValue>;
|
|
10
|
+
setValue: (newValue: TValue, options?: SetValueActionOptions<InferError<TExternalProps>>) => void;
|
|
11
|
+
setValueFromView: (newValue: TValue, selectionState?: PickerSelectionState) => void;
|
|
12
|
+
setOpen: (action: React.SetStateAction<boolean>) => void;
|
|
13
|
+
};
|
|
14
|
+
interface UsePickerDateStateParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> {
|
|
15
|
+
props: TExternalProps;
|
|
16
|
+
valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
|
|
17
|
+
validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
|
|
18
|
+
}
|
|
19
|
+
export {};
|