@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
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import useEventCallback from '@mui/utils/useEventCallback';
|
|
4
|
-
import { useOpenState } from "../useOpenState.js";
|
|
5
|
-
import { useLocalizationContext, useUtils } from "../useUtils.js";
|
|
6
|
-
import { useValidation } from "../../../validation/index.js";
|
|
7
|
-
import { useValueWithTimezone } from "../useValueWithTimezone.js";
|
|
8
|
-
/**
|
|
9
|
-
* Manage the value lifecycle of all the pickers.
|
|
10
|
-
*/
|
|
11
|
-
export const usePickerValue = ({
|
|
12
|
-
props,
|
|
13
|
-
valueManager,
|
|
14
|
-
valueType,
|
|
15
|
-
validator
|
|
16
|
-
}) => {
|
|
17
|
-
const {
|
|
18
|
-
onAccept,
|
|
19
|
-
onChange,
|
|
20
|
-
value: inValueWithoutRenderTimezone,
|
|
21
|
-
defaultValue: inDefaultValue,
|
|
22
|
-
closeOnSelect = false,
|
|
23
|
-
timezone: timezoneProp,
|
|
24
|
-
referenceDate
|
|
25
|
-
} = props;
|
|
26
|
-
const {
|
|
27
|
-
current: defaultValue
|
|
28
|
-
} = React.useRef(inDefaultValue);
|
|
29
|
-
const {
|
|
30
|
-
current: isControlled
|
|
31
|
-
} = React.useRef(inValueWithoutRenderTimezone !== undefined);
|
|
32
|
-
const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
|
|
33
|
-
|
|
34
|
-
/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
|
|
35
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
36
|
-
React.useEffect(() => {
|
|
37
|
-
if (isControlled !== (inValueWithoutRenderTimezone !== undefined)) {
|
|
38
|
-
console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
|
|
39
|
-
}
|
|
40
|
-
}, [inValueWithoutRenderTimezone]);
|
|
41
|
-
React.useEffect(() => {
|
|
42
|
-
if (!isControlled && defaultValue !== inDefaultValue) {
|
|
43
|
-
console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
|
|
44
|
-
}
|
|
45
|
-
}, [JSON.stringify(defaultValue)]);
|
|
46
|
-
}
|
|
47
|
-
/* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
|
|
48
|
-
|
|
49
|
-
const utils = useUtils();
|
|
50
|
-
const adapter = useLocalizationContext();
|
|
51
|
-
const {
|
|
52
|
-
open,
|
|
53
|
-
setOpen
|
|
54
|
-
} = useOpenState(props);
|
|
55
|
-
const {
|
|
56
|
-
timezone,
|
|
57
|
-
value: inValueWithTimezoneToRender,
|
|
58
|
-
handleValueChange
|
|
59
|
-
} = useValueWithTimezone({
|
|
60
|
-
timezone: timezoneProp,
|
|
61
|
-
value: inValueWithoutRenderTimezone,
|
|
62
|
-
defaultValue,
|
|
63
|
-
referenceDate,
|
|
64
|
-
onChange,
|
|
65
|
-
valueManager
|
|
66
|
-
});
|
|
67
|
-
const [dateState, setDateState] = React.useState(() => {
|
|
68
|
-
let initialValue;
|
|
69
|
-
if (inValueWithTimezoneToRender !== undefined) {
|
|
70
|
-
initialValue = inValueWithTimezoneToRender;
|
|
71
|
-
} else if (defaultValue !== undefined) {
|
|
72
|
-
initialValue = defaultValue;
|
|
73
|
-
} else {
|
|
74
|
-
initialValue = valueManager.emptyValue;
|
|
75
|
-
}
|
|
76
|
-
return {
|
|
77
|
-
draft: initialValue,
|
|
78
|
-
lastPublishedValue: initialValue,
|
|
79
|
-
lastCommittedValue: initialValue,
|
|
80
|
-
lastControlledValue: inValueWithoutRenderTimezone,
|
|
81
|
-
hasBeenModifiedSinceMount: false
|
|
82
|
-
};
|
|
83
|
-
});
|
|
84
|
-
const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
|
|
85
|
-
if (previousTimezoneProp !== timezoneProp) {
|
|
86
|
-
setPreviousTimezoneProp(timezoneProp);
|
|
87
|
-
if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
|
|
88
|
-
setDateState(prev => _extends({}, prev, {
|
|
89
|
-
draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
|
|
90
|
-
}));
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
const {
|
|
94
|
-
getValidationErrorForNewValue
|
|
95
|
-
} = useValidation({
|
|
96
|
-
props,
|
|
97
|
-
validator,
|
|
98
|
-
timezone,
|
|
99
|
-
value: dateState.draft,
|
|
100
|
-
onError: props.onError
|
|
101
|
-
});
|
|
102
|
-
const setValue = useEventCallback((newValue, options) => {
|
|
103
|
-
const {
|
|
104
|
-
changeImportance = 'accept',
|
|
105
|
-
skipPublicationIfPristine = false,
|
|
106
|
-
validationError,
|
|
107
|
-
shortcut,
|
|
108
|
-
shouldClose = changeImportance === 'accept'
|
|
109
|
-
} = options ?? {};
|
|
110
|
-
let shouldPublish;
|
|
111
|
-
let shouldCommit;
|
|
112
|
-
if (!skipPublicationIfPristine && !isControlled && !dateState.hasBeenModifiedSinceMount) {
|
|
113
|
-
// If the value is not controlled and the value has never been modified before,
|
|
114
|
-
// Then clicking on any value (including the one equal to `defaultValue`) should call `onChange` and `onAccept`
|
|
115
|
-
shouldPublish = true;
|
|
116
|
-
shouldCommit = changeImportance === 'accept';
|
|
117
|
-
} else {
|
|
118
|
-
shouldPublish = !valueManager.areValuesEqual(utils, newValue, dateState.lastPublishedValue);
|
|
119
|
-
shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, dateState.lastCommittedValue);
|
|
120
|
-
}
|
|
121
|
-
setDateState(prev => _extends({}, prev, {
|
|
122
|
-
draft: newValue,
|
|
123
|
-
lastPublishedValue: shouldPublish ? newValue : prev.lastPublishedValue,
|
|
124
|
-
lastCommittedValue: shouldCommit ? newValue : prev.lastCommittedValue,
|
|
125
|
-
hasBeenModifiedSinceMount: true
|
|
126
|
-
}));
|
|
127
|
-
let cachedContext = null;
|
|
128
|
-
const getContext = () => {
|
|
129
|
-
if (!cachedContext) {
|
|
130
|
-
cachedContext = {
|
|
131
|
-
validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
|
|
132
|
-
};
|
|
133
|
-
if (shortcut) {
|
|
134
|
-
cachedContext.shortcut = shortcut;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
return cachedContext;
|
|
138
|
-
};
|
|
139
|
-
if (shouldPublish) {
|
|
140
|
-
handleValueChange(newValue, getContext());
|
|
141
|
-
}
|
|
142
|
-
if (shouldCommit && onAccept) {
|
|
143
|
-
onAccept(newValue, getContext());
|
|
144
|
-
}
|
|
145
|
-
if (shouldClose) {
|
|
146
|
-
setOpen(false);
|
|
147
|
-
}
|
|
148
|
-
});
|
|
149
|
-
if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
|
|
150
|
-
const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
|
|
151
|
-
setDateState(prev => _extends({}, prev, {
|
|
152
|
-
lastControlledValue: inValueWithoutRenderTimezone
|
|
153
|
-
}, isUpdateComingFromPicker ? {} : {
|
|
154
|
-
lastCommittedValue: inValueWithTimezoneToRender,
|
|
155
|
-
lastPublishedValue: inValueWithTimezoneToRender,
|
|
156
|
-
draft: inValueWithTimezoneToRender,
|
|
157
|
-
hasBeenModifiedSinceMount: true
|
|
158
|
-
}));
|
|
159
|
-
}
|
|
160
|
-
const isValid = testedValue => {
|
|
161
|
-
const error = validator({
|
|
162
|
-
adapter,
|
|
163
|
-
value: testedValue,
|
|
164
|
-
timezone,
|
|
165
|
-
props
|
|
166
|
-
});
|
|
167
|
-
return !valueManager.hasError(error);
|
|
168
|
-
};
|
|
169
|
-
const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
|
|
170
|
-
const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
|
|
171
|
-
const acceptValueChanges = useEventCallback(() => setValue(dateState.lastPublishedValue));
|
|
172
|
-
const cancelValueChanges = useEventCallback(() => setValue(dateState.lastCommittedValue, {
|
|
173
|
-
skipPublicationIfPristine: true
|
|
174
|
-
}));
|
|
175
|
-
const dismissViews = useEventCallback(() => {
|
|
176
|
-
setValue(dateState.lastPublishedValue, {
|
|
177
|
-
skipPublicationIfPristine: true
|
|
178
|
-
});
|
|
179
|
-
});
|
|
180
|
-
const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
|
|
181
|
-
// TODO: Expose a new method (private?) like `setView` that only updates the draft value.
|
|
182
|
-
if (selectionState === 'shallow') {
|
|
183
|
-
setDateState(prev => _extends({}, prev, {
|
|
184
|
-
draft: newValue,
|
|
185
|
-
hasBeenModifiedSinceMount: true
|
|
186
|
-
}));
|
|
187
|
-
}
|
|
188
|
-
setValue(newValue, {
|
|
189
|
-
changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
|
|
190
|
-
});
|
|
191
|
-
});
|
|
192
|
-
const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
|
|
193
|
-
const viewResponse = {
|
|
194
|
-
value: valueWithoutError,
|
|
195
|
-
onChange: setValueFromView,
|
|
196
|
-
open,
|
|
197
|
-
setOpen
|
|
198
|
-
};
|
|
199
|
-
const actionsContextValue = React.useMemo(() => ({
|
|
200
|
-
setValue,
|
|
201
|
-
setOpen,
|
|
202
|
-
clearValue,
|
|
203
|
-
setValueToToday,
|
|
204
|
-
acceptValueChanges,
|
|
205
|
-
cancelValueChanges
|
|
206
|
-
}), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
|
|
207
|
-
const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
|
|
208
|
-
value: dateState.draft,
|
|
209
|
-
timezone,
|
|
210
|
-
open
|
|
211
|
-
}), [actionsContextValue, timezone, open, dateState.draft]);
|
|
212
|
-
const privateContextValue = React.useMemo(() => ({
|
|
213
|
-
dismissViews
|
|
214
|
-
}), [dismissViews]);
|
|
215
|
-
const providerParams = {
|
|
216
|
-
value: dateState.draft,
|
|
217
|
-
contextValue,
|
|
218
|
-
actionsContextValue,
|
|
219
|
-
privateContextValue,
|
|
220
|
-
isValidContextValue: isValid
|
|
221
|
-
};
|
|
222
|
-
return {
|
|
223
|
-
viewProps: viewResponse,
|
|
224
|
-
provider: providerParams
|
|
225
|
-
};
|
|
226
|
-
};
|
|
@@ -1,327 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { UseFieldInternalProps } from "../useField/index.js";
|
|
3
|
-
import { Validator } from "../../../validation/index.js";
|
|
4
|
-
import { TimezoneProps, MuiPickersAdapter, PickersTimezone, PickerChangeHandlerContext, PickerValidDate, OnErrorProps, InferError, PickerValueType, PickerChangeImportance } from "../../../models/index.js";
|
|
5
|
-
import { GetDefaultReferenceDateProps } from "../../utils/getDefaultReferenceDate.js";
|
|
6
|
-
import type { PickersShortcutsItemContext } from '../../../PickersShortcuts';
|
|
7
|
-
import { InferNonNullablePickerValue, PickerValidValue } from "../../models/index.js";
|
|
8
|
-
export interface PickerValueManager<TValue extends PickerValidValue, TError> {
|
|
9
|
-
/**
|
|
10
|
-
* Determines if two values are equal.
|
|
11
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
12
|
-
* @param {MuiPickersAdapter} utils The adapter.
|
|
13
|
-
* @param {TValue} valueLeft The first value to compare.
|
|
14
|
-
* @param {TValue} valueRight The second value to compare.
|
|
15
|
-
* @returns {boolean} A boolean indicating if the two values are equal.
|
|
16
|
-
*/
|
|
17
|
-
areValuesEqual: (utils: MuiPickersAdapter, valueLeft: TValue, valueRight: TValue) => boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Value to set when clicking the "Clear" button.
|
|
20
|
-
*/
|
|
21
|
-
emptyValue: TValue;
|
|
22
|
-
/**
|
|
23
|
-
* Method returning the value to set when clicking the "Today" button
|
|
24
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
25
|
-
* @param {MuiPickersAdapter} utils The adapter.
|
|
26
|
-
* @param {PickersTimezone} timezone The current timezone.
|
|
27
|
-
* @param {PickerValueType} valueType The type of the value being edited.
|
|
28
|
-
* @returns {TValue} The value to set when clicking the "Today" button.
|
|
29
|
-
*/
|
|
30
|
-
getTodayValue: (utils: MuiPickersAdapter, timezone: PickersTimezone, valueType: PickerValueType) => TValue;
|
|
31
|
-
/**
|
|
32
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
33
|
-
* Method returning the reference value to use when mounting the component.
|
|
34
|
-
* @param {object} params The params of the method.
|
|
35
|
-
* @param {PickerValidDate | undefined} params.referenceDate The referenceDate provided by the user.
|
|
36
|
-
* @param {TValue} params.value The value provided by the user.
|
|
37
|
-
* @param {GetDefaultReferenceDateProps} params.props The validation props needed to compute the reference value.
|
|
38
|
-
* @param {MuiPickersAdapter} params.utils The adapter.
|
|
39
|
-
* @param {number} params.granularity The granularity of the selection possible on this component.
|
|
40
|
-
* @param {PickersTimezone} params.timezone The current timezone.
|
|
41
|
-
* @param {() => PickerValidDate} params.getTodayDate The reference date to use if no reference date is passed to the component.
|
|
42
|
-
* @returns {TValue} The reference value to use for non-provided dates.
|
|
43
|
-
*/
|
|
44
|
-
getInitialReferenceValue: (params: {
|
|
45
|
-
referenceDate: PickerValidDate | undefined;
|
|
46
|
-
value: TValue;
|
|
47
|
-
props: GetDefaultReferenceDateProps;
|
|
48
|
-
utils: MuiPickersAdapter;
|
|
49
|
-
granularity: number;
|
|
50
|
-
timezone: PickersTimezone;
|
|
51
|
-
getTodayDate?: () => PickerValidDate;
|
|
52
|
-
}) => InferNonNullablePickerValue<TValue>;
|
|
53
|
-
/**
|
|
54
|
-
* Method parsing the input value to replace all invalid dates by `null`.
|
|
55
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
56
|
-
* @param {MuiPickersAdapter} utils The adapter.
|
|
57
|
-
* @param {TValue} value The value to parse.
|
|
58
|
-
* @returns {TValue} The value without invalid date.
|
|
59
|
-
*/
|
|
60
|
-
cleanValue: (utils: MuiPickersAdapter, value: TValue) => TValue;
|
|
61
|
-
/**
|
|
62
|
-
* Generates the new value, given the previous value and the new proposed value.
|
|
63
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
64
|
-
* @param {MuiPickersAdapter} utils The adapter.
|
|
65
|
-
* @param {TValue} lastValidDateValue The last valid value.
|
|
66
|
-
* @param {TValue} value The proposed value.
|
|
67
|
-
* @returns {TValue} The new value.
|
|
68
|
-
*/
|
|
69
|
-
valueReducer?: (utils: MuiPickersAdapter, lastValidDateValue: TValue, value: TValue) => TValue;
|
|
70
|
-
/**
|
|
71
|
-
* Compare two errors to know if they are equal.
|
|
72
|
-
* @template TError
|
|
73
|
-
* @param {TError} error The new error
|
|
74
|
-
* @param {TError | null} prevError The previous error
|
|
75
|
-
* @returns {boolean} `true` if the new error is different from the previous one.
|
|
76
|
-
*/
|
|
77
|
-
isSameError: (error: TError, prevError: TError | null) => boolean;
|
|
78
|
-
/**
|
|
79
|
-
* Checks if the current error is empty or not.
|
|
80
|
-
* @template TError
|
|
81
|
-
* @param {TError} error The current error.
|
|
82
|
-
* @returns {boolean} `true` if the current error is not empty.
|
|
83
|
-
*/
|
|
84
|
-
hasError: (error: TError) => boolean;
|
|
85
|
-
/**
|
|
86
|
-
* The value identifying no error, used to initialise the error state.
|
|
87
|
-
*/
|
|
88
|
-
defaultErrorState: TError;
|
|
89
|
-
/**
|
|
90
|
-
* Return the timezone of the date inside a value.
|
|
91
|
-
* Throw an error on range picker if both values don't have the same timezone.
|
|
92
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
93
|
-
@param {MuiPickersAdapter} utils The utils to manipulate the date.
|
|
94
|
-
@param {TValue} value The current value.
|
|
95
|
-
@returns {string | null} The timezone of the current value.
|
|
96
|
-
*/
|
|
97
|
-
getTimezone: (utils: MuiPickersAdapter, value: TValue) => string | null;
|
|
98
|
-
/**
|
|
99
|
-
* Change the timezone of the dates inside a value.
|
|
100
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
101
|
-
@param {MuiPickersAdapter} utils The utils to manipulate the date.
|
|
102
|
-
@param {PickersTimezone} timezone The current timezone.
|
|
103
|
-
@param {TValue} value The value to convert.
|
|
104
|
-
@returns {TValue} The value with the new dates in the new timezone.
|
|
105
|
-
*/
|
|
106
|
-
setTimezone: (utils: MuiPickersAdapter, timezone: PickersTimezone, value: TValue) => TValue;
|
|
107
|
-
}
|
|
108
|
-
export type PickerSelectionState = 'partial' | 'shallow' | 'finish';
|
|
109
|
-
export interface UsePickerValueState<TValue extends PickerValidValue> {
|
|
110
|
-
/**
|
|
111
|
-
* Date displayed on the views and the field.
|
|
112
|
-
* It is updated whenever the user modifies something.
|
|
113
|
-
*/
|
|
114
|
-
draft: TValue;
|
|
115
|
-
/**
|
|
116
|
-
* Last value published (the last value for which `shouldPublishValue` returned `true`).
|
|
117
|
-
* If `onChange` is defined, it's the value that was passed on the last call to this callback.
|
|
118
|
-
*/
|
|
119
|
-
lastPublishedValue: TValue;
|
|
120
|
-
/**
|
|
121
|
-
* Last value committed (the last value for which `shouldCommitValue` returned `true`).
|
|
122
|
-
* If `onAccept` is defined, it's the value that was passed on the last call to this callback.
|
|
123
|
-
*/
|
|
124
|
-
lastCommittedValue: TValue;
|
|
125
|
-
/**
|
|
126
|
-
* Last value passed to `props.value`.
|
|
127
|
-
* Used to update the `draft` value whenever the `value` prop changes.
|
|
128
|
-
*/
|
|
129
|
-
lastControlledValue: TValue | undefined;
|
|
130
|
-
/**
|
|
131
|
-
* If we never modified the value since the mount of the component,
|
|
132
|
-
* Then we might want to apply some custom logic.
|
|
133
|
-
*
|
|
134
|
-
* For example, when the component is not controlled and `defaultValue` is defined.
|
|
135
|
-
* Then clicking on "Accept", "Today" or "Clear" should fire `onAccept` with `defaultValue`, but clicking on "Cancel" or dismissing the picker should not.
|
|
136
|
-
*/
|
|
137
|
-
hasBeenModifiedSinceMount: boolean;
|
|
138
|
-
}
|
|
139
|
-
/**
|
|
140
|
-
* Props used to handle the value that are common to all pickers.
|
|
141
|
-
*/
|
|
142
|
-
export interface UsePickerValueBaseProps<TValue extends PickerValidValue, TError> extends OnErrorProps<TValue, TError> {
|
|
143
|
-
/**
|
|
144
|
-
* The selected value.
|
|
145
|
-
* Used when the component is controlled.
|
|
146
|
-
*/
|
|
147
|
-
value?: TValue;
|
|
148
|
-
/**
|
|
149
|
-
* The default value.
|
|
150
|
-
* Used when the component is not controlled.
|
|
151
|
-
*/
|
|
152
|
-
defaultValue?: TValue;
|
|
153
|
-
/**
|
|
154
|
-
* Callback fired when the value changes.
|
|
155
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
156
|
-
* @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
|
|
157
|
-
* @param {TValue} value The new value.
|
|
158
|
-
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
159
|
-
*/
|
|
160
|
-
onChange?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
|
|
161
|
-
/**
|
|
162
|
-
* Callback fired when the value is accepted.
|
|
163
|
-
* @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
|
|
164
|
-
* @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
|
|
165
|
-
* @param {TValue} value The value that was just accepted.
|
|
166
|
-
* @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
|
|
167
|
-
*/
|
|
168
|
-
onAccept?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;
|
|
169
|
-
}
|
|
170
|
-
/**
|
|
171
|
-
* Props used to handle the value of non-static pickers.
|
|
172
|
-
*/
|
|
173
|
-
export interface UsePickerValueNonStaticProps {
|
|
174
|
-
/**
|
|
175
|
-
* If `true`, the Picker will close after submitting the full date.
|
|
176
|
-
* @default false
|
|
177
|
-
*/
|
|
178
|
-
closeOnSelect?: boolean;
|
|
179
|
-
/**
|
|
180
|
-
* Control the popup or dialog open state.
|
|
181
|
-
* @default false
|
|
182
|
-
*/
|
|
183
|
-
open?: boolean;
|
|
184
|
-
/**
|
|
185
|
-
* Callback fired when the popup requests to be closed.
|
|
186
|
-
* Use in controlled mode (see `open`).
|
|
187
|
-
*/
|
|
188
|
-
onClose?: () => void;
|
|
189
|
-
/**
|
|
190
|
-
* Callback fired when the popup requests to be opened.
|
|
191
|
-
* Use in controlled mode (see `open`).
|
|
192
|
-
*/
|
|
193
|
-
onOpen?: () => void;
|
|
194
|
-
}
|
|
195
|
-
/**
|
|
196
|
-
* Props used to handle the value of the pickers.
|
|
197
|
-
*/
|
|
198
|
-
export interface UsePickerValueProps<TValue extends PickerValidValue, TError> extends UsePickerValueBaseProps<TValue, TError>, UsePickerValueNonStaticProps, TimezoneProps {
|
|
199
|
-
referenceDate?: PickerValidDate;
|
|
200
|
-
}
|
|
201
|
-
export interface UsePickerValueParams<TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>> {
|
|
202
|
-
props: TExternalProps;
|
|
203
|
-
valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
|
|
204
|
-
valueType: PickerValueType;
|
|
205
|
-
validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
|
|
206
|
-
}
|
|
207
|
-
export type UsePickerValueFieldResponse<TValue extends PickerValidValue, TError> = Required<Pick<UseFieldInternalProps<TValue, any, TError>, 'value' | 'onChange'>>;
|
|
208
|
-
/**
|
|
209
|
-
* Props passed to `usePickerViews`.
|
|
210
|
-
*/
|
|
211
|
-
export interface UsePickerValueViewsResponse<TValue extends PickerValidValue> {
|
|
212
|
-
value: TValue;
|
|
213
|
-
onChange: (value: TValue, selectionState?: PickerSelectionState) => void;
|
|
214
|
-
open: boolean;
|
|
215
|
-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
216
|
-
}
|
|
217
|
-
/**
|
|
218
|
-
* Params passed to `usePickerProvider`.
|
|
219
|
-
*/
|
|
220
|
-
export interface UsePickerValueProviderParams<TValue extends PickerValidValue, TError> {
|
|
221
|
-
value: TValue;
|
|
222
|
-
contextValue: UsePickerValueContextValue<TValue, TError>;
|
|
223
|
-
actionsContextValue: UsePickerValueActionsContextValue<TValue, TError>;
|
|
224
|
-
privateContextValue: UsePickerValuePrivateContextValue;
|
|
225
|
-
isValidContextValue: (value: TValue) => boolean;
|
|
226
|
-
}
|
|
227
|
-
export interface UsePickerValueResponse<TValue extends PickerValidValue, TError> {
|
|
228
|
-
viewProps: UsePickerValueViewsResponse<TValue>;
|
|
229
|
-
provider: UsePickerValueProviderParams<TValue, TError>;
|
|
230
|
-
}
|
|
231
|
-
export interface UsePickerValueContextValue<TValue extends PickerValidValue, TError> extends UsePickerValueActionsContextValue<TValue, TError> {
|
|
232
|
-
/**
|
|
233
|
-
* The current value of the picker.
|
|
234
|
-
*/
|
|
235
|
-
value: TValue;
|
|
236
|
-
/**
|
|
237
|
-
* The timezone to use when rendering the dates.
|
|
238
|
-
* If a `timezone` prop is provided, it will be used.
|
|
239
|
-
* If the `value` prop contains a valid date, its timezone will be used.
|
|
240
|
-
* If no `value` prop is provided, but the `defaultValue` contains a valid date, its timezone will be used.
|
|
241
|
-
* If no `value` or `defaultValue` is provided, but the `referenceDate` is provided, its timezone will be used.
|
|
242
|
-
* Otherwise, the timezone will be the default one of your date library.
|
|
243
|
-
*/
|
|
244
|
-
timezone: PickersTimezone;
|
|
245
|
-
/**
|
|
246
|
-
* Whether the picker is open.
|
|
247
|
-
*/
|
|
248
|
-
open: boolean;
|
|
249
|
-
}
|
|
250
|
-
export interface UsePickerValueActionsContextValue<TValue extends PickerValidValue, TError> {
|
|
251
|
-
/**
|
|
252
|
-
* Set the current value of the picker.
|
|
253
|
-
* @param {TValue} value The new value of the picker.
|
|
254
|
-
* @param {SetValueActionOptions<TError>} options The options to customize the behavior of this update.
|
|
255
|
-
*/
|
|
256
|
-
setValue: (value: TValue, options?: SetValueActionOptions<TError>) => void;
|
|
257
|
-
/**
|
|
258
|
-
* Set the current open state of the Picker.
|
|
259
|
-
* ```ts
|
|
260
|
-
* setOpen(true); // Opens the picker.
|
|
261
|
-
* setOpen(false); // Closes the picker.
|
|
262
|
-
* setOpen((prevOpen) => !prevOpen); // Toggles the open state.
|
|
263
|
-
* ```
|
|
264
|
-
* @param {React.SetStateAction<boolean>} action The new open state of the Picker.
|
|
265
|
-
* It can be a function that will receive the current open state.
|
|
266
|
-
*/
|
|
267
|
-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
268
|
-
/**
|
|
269
|
-
* Set the current value of the picker to be empty.
|
|
270
|
-
* The value will be `null` on single pickers and `[null, null]` on range pickers.
|
|
271
|
-
*/
|
|
272
|
-
clearValue: () => void;
|
|
273
|
-
/**
|
|
274
|
-
* Set the current value of the picker to be the current date.
|
|
275
|
-
* The value will be `today` on single pickers and `[today, today]` on range pickers.
|
|
276
|
-
* With `today` being the current date, with its time set to `00:00:00` on Date Pickers and its time set to the current time on Time and Date Pickers.
|
|
277
|
-
*/
|
|
278
|
-
setValueToToday: () => void;
|
|
279
|
-
/**
|
|
280
|
-
* Accept the current value of the picker.
|
|
281
|
-
* Will call `onAccept` if defined.
|
|
282
|
-
* If the picker is re-opened, this value will be the one used to initialize the views.
|
|
283
|
-
*/
|
|
284
|
-
acceptValueChanges: () => void;
|
|
285
|
-
/**
|
|
286
|
-
* Cancel the changes made to the current value of the picker.
|
|
287
|
-
* The value will be reset to the last accepted value.
|
|
288
|
-
*/
|
|
289
|
-
cancelValueChanges: () => void;
|
|
290
|
-
}
|
|
291
|
-
export interface UsePickerValuePrivateContextValue {
|
|
292
|
-
/**
|
|
293
|
-
* Close the picker and accepts the current value if it is not equal to the last accepted value.
|
|
294
|
-
*/
|
|
295
|
-
dismissViews: () => void;
|
|
296
|
-
}
|
|
297
|
-
export interface SetValueActionOptions<TError = string | null> {
|
|
298
|
-
/**
|
|
299
|
-
* The importance of the change when picking a value:
|
|
300
|
-
* - "accept": fires `onChange`, fires `onAccept` and closes the picker.
|
|
301
|
-
* - "set": fires `onChange` but do not fire `onAccept` and does not close the picker.
|
|
302
|
-
* @default "accept"
|
|
303
|
-
*/
|
|
304
|
-
changeImportance?: PickerChangeImportance;
|
|
305
|
-
/**
|
|
306
|
-
* The validation error associated to the current value.
|
|
307
|
-
* If not defined, the validation will be computed by the picker.
|
|
308
|
-
*/
|
|
309
|
-
validationError?: TError;
|
|
310
|
-
/**
|
|
311
|
-
* The shortcut that triggered this change.
|
|
312
|
-
* It should not be defined if the change does not come from a shortcut.
|
|
313
|
-
*/
|
|
314
|
-
shortcut?: PickersShortcutsItemContext;
|
|
315
|
-
/**
|
|
316
|
-
* Whether the value should call `onChange` and `onAccept` when the value is not controlled and has never been modified.
|
|
317
|
-
* If `true`, the `onChange` and `onAccept` callback will only be fired if the value has been modified (and is not equal to the last published value).
|
|
318
|
-
* If `false`, the `onChange` and `onAccept` callback will be fired when the value has never been modified (`onAccept` only if `changeImportance` is set to "accept").
|
|
319
|
-
* @default false
|
|
320
|
-
*/
|
|
321
|
-
skipPublicationIfPristine?: boolean;
|
|
322
|
-
/**
|
|
323
|
-
* Whether the picker should close.
|
|
324
|
-
* @default changeImportance === "accept"
|
|
325
|
-
*/
|
|
326
|
-
shouldClose?: boolean;
|
|
327
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|