@mui/x-date-pickers-pro 8.0.0-alpha.7 → 8.0.0-alpha.9
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 +551 -3
- package/DateRangeCalendar/DateRangeCalendar.js +4 -4
- package/DateRangePicker/DateRangePickerToolbar.js +3 -3
- package/DateTimeRangePicker/DateTimeRangePickerTabs.js +3 -3
- package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +2 -2
- package/DateTimeRangePicker/DateTimeRangePickerToolbar.js +7 -7
- package/MultiInputDateRangeField/MultiInputDateRangeField.d.ts +9 -4
- package/MultiInputDateRangeField/MultiInputDateRangeField.js +12 -116
- package/MultiInputDateRangeField/index.d.ts +5 -3
- package/MultiInputDateRangeField/index.js +2 -2
- package/MultiInputDateRangeField/multiInputDateRangeFieldClasses.d.ts +6 -0
- package/MultiInputDateRangeField/multiInputDateRangeFieldClasses.js +4 -0
- package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.d.ts +9 -4
- package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +12 -116
- package/MultiInputDateTimeRangeField/index.d.ts +5 -3
- package/MultiInputDateTimeRangeField/index.js +2 -2
- package/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.d.ts +6 -0
- package/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.js +4 -0
- package/MultiInputTimeRangeField/MultiInputTimeRangeField.d.ts +9 -4
- package/MultiInputTimeRangeField/MultiInputTimeRangeField.js +13 -117
- package/MultiInputTimeRangeField/index.d.ts +5 -3
- package/MultiInputTimeRangeField/index.js +2 -2
- package/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.d.ts +6 -0
- package/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.js +4 -0
- package/SingleInputDateRangeField/SingleInputDateRangeField.js +20 -30
- package/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts +6 -17
- package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts +1 -1
- package/SingleInputDateRangeField/useSingleInputDateRangeField.js +2 -1
- package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +20 -30
- package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts +6 -18
- package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts +1 -1
- package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +2 -1
- package/SingleInputTimeRangeField/SingleInputTimeRangeField.js +20 -30
- package/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts +6 -18
- package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts +1 -1
- package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +2 -1
- package/hooks/index.d.ts +1 -0
- package/hooks/index.js +2 -1
- package/hooks/useMultiInputRangeField/index.d.ts +1 -0
- package/hooks/useMultiInputRangeField/index.js +1 -0
- package/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts +53 -0
- package/hooks/useMultiInputRangeField/useMultiInputRangeField.js +149 -0
- package/{internals/hooks/useMultiInputFieldSelectedSections.d.ts → hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts} +3 -4
- package/{modern/internals/hooks/useMultiInputFieldSelectedSections.js → hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js} +10 -8
- package/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.d.ts +17 -0
- package/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +59 -0
- package/index.js +1 -1
- package/internals/hooks/models/index.d.ts +1 -1
- package/internals/hooks/models/useRangePicker.d.ts +4 -6
- package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +32 -42
- package/internals/hooks/{useEnrichedRangePickerFieldProps.d.ts → useEnrichedRangePickerField.d.ts} +15 -6
- package/internals/hooks/{useEnrichedRangePickerFieldProps.js → useEnrichedRangePickerField.js} +39 -52
- package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +23 -32
- package/internals/hooks/useRangePosition.d.ts +1 -1
- package/internals/hooks/useRangePosition.js +1 -1
- package/internals/models/dateTimeRange.d.ts +1 -6
- package/internals/models/fields.d.ts +1 -2
- package/internals/models/index.d.ts +0 -1
- package/internals/models/index.js +0 -1
- package/internals/models/managers.d.ts +3 -0
- package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.d.ts +3 -0
- package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +133 -0
- package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts +72 -0
- package/internals/utils/createMultiInputRangeField/index.d.ts +3 -0
- package/internals/utils/createMultiInputRangeField/index.js +2 -0
- package/internals/utils/releaseInfo.js +1 -1
- package/managers/index.d.ts +3 -3
- package/managers/useDateRangeManager.d.ts +1 -1
- package/managers/useDateRangeManager.js +3 -1
- package/managers/useDateTimeRangeManager.d.ts +1 -1
- package/managers/useDateTimeRangeManager.js +3 -1
- package/managers/useTimeRangeManager.d.ts +1 -1
- package/managers/useTimeRangeManager.js +3 -1
- package/models/fields.d.ts +1 -2
- package/models/index.d.ts +0 -2
- package/models/index.js +0 -2
- package/modern/DateRangeCalendar/DateRangeCalendar.js +4 -4
- package/modern/DateRangePicker/DateRangePickerToolbar.js +3 -3
- package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js +3 -3
- package/modern/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +2 -2
- package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js +7 -7
- package/modern/MultiInputDateRangeField/MultiInputDateRangeField.js +12 -116
- package/modern/MultiInputDateRangeField/index.js +2 -2
- package/modern/MultiInputDateRangeField/multiInputDateRangeFieldClasses.js +4 -0
- package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +12 -116
- package/modern/MultiInputDateTimeRangeField/index.js +2 -2
- package/modern/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.js +4 -0
- package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js +13 -117
- package/modern/MultiInputTimeRangeField/index.js +2 -2
- package/modern/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.js +4 -0
- package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js +20 -30
- package/modern/SingleInputDateRangeField/useSingleInputDateRangeField.js +2 -1
- package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +20 -30
- package/modern/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +2 -1
- package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js +20 -30
- package/modern/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +2 -1
- package/modern/hooks/index.js +2 -1
- package/modern/hooks/useMultiInputRangeField/index.js +1 -0
- package/modern/hooks/useMultiInputRangeField/useMultiInputRangeField.js +149 -0
- package/{internals/hooks/useMultiInputFieldSelectedSections.js → modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js} +10 -8
- package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +59 -0
- package/modern/index.js +1 -1
- package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +32 -42
- package/modern/internals/hooks/{useEnrichedRangePickerFieldProps.js → useEnrichedRangePickerField.js} +39 -52
- package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +23 -32
- package/modern/internals/hooks/useRangePosition.js +1 -1
- package/modern/internals/models/index.js +0 -1
- package/modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +133 -0
- package/modern/internals/utils/createMultiInputRangeField/index.js +2 -0
- package/modern/internals/utils/releaseInfo.js +1 -1
- package/modern/managers/useDateRangeManager.js +3 -1
- package/modern/managers/useDateTimeRangeManager.js +3 -1
- package/modern/managers/useTimeRangeManager.js +3 -1
- package/modern/models/index.js +0 -2
- package/node/DateRangeCalendar/DateRangeCalendar.js +4 -4
- package/node/DateRangePicker/DateRangePickerToolbar.js +3 -3
- package/node/DateTimeRangePicker/DateTimeRangePickerTabs.js +3 -3
- package/node/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js +2 -2
- package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js +7 -7
- package/node/MultiInputDateRangeField/MultiInputDateRangeField.js +11 -119
- package/node/MultiInputDateRangeField/index.js +3 -9
- package/node/MultiInputDateRangeField/multiInputDateRangeFieldClasses.js +12 -0
- package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js +11 -119
- package/node/MultiInputDateTimeRangeField/index.js +3 -9
- package/node/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.js +12 -0
- package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js +12 -120
- package/node/MultiInputTimeRangeField/index.js +3 -9
- package/node/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.js +12 -0
- package/node/SingleInputDateRangeField/SingleInputDateRangeField.js +19 -29
- package/node/SingleInputDateRangeField/useSingleInputDateRangeField.js +2 -1
- package/node/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js +19 -29
- package/node/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js +2 -1
- package/node/SingleInputTimeRangeField/SingleInputTimeRangeField.js +19 -29
- package/node/SingleInputTimeRangeField/useSingleInputTimeRangeField.js +2 -1
- package/node/hooks/index.js +8 -1
- package/node/hooks/useMultiInputRangeField/index.js +12 -0
- package/node/hooks/useMultiInputRangeField/useMultiInputRangeField.js +155 -0
- package/node/{internals/hooks/useMultiInputFieldSelectedSections.js → hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js} +11 -10
- package/node/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js +66 -0
- package/node/index.js +1 -1
- package/node/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js +31 -41
- package/node/internals/hooks/{useEnrichedRangePickerFieldProps.js → useEnrichedRangePickerField.js} +41 -54
- package/node/internals/hooks/useMobileRangePicker/useMobileRangePicker.js +22 -31
- package/node/internals/hooks/useRangePosition.js +1 -1
- package/node/internals/models/index.js +0 -11
- package/node/internals/utils/createMultiInputRangeField/createMultiInputRangeField.js +140 -0
- package/node/internals/utils/createMultiInputRangeField/index.js +19 -0
- package/node/internals/utils/releaseInfo.js +1 -1
- package/node/managers/useDateRangeManager.js +3 -1
- package/node/managers/useDateTimeRangeManager.js +3 -1
- package/node/managers/useTimeRangeManager.js +3 -1
- package/node/models/index.js +0 -22
- package/package.json +4 -4
- package/themeAugmentation/overrides.d.ts +6 -4
- package/themeAugmentation/props.d.ts +2 -2
- package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts +0 -55
- package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts +0 -56
- package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts +0 -56
- package/internals/hooks/useMultiInputRangeField/shared.d.ts +0 -1
- package/internals/hooks/useMultiInputRangeField/shared.js +0 -9
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.d.ts +0 -3
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +0 -118
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.d.ts +0 -3
- package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +0 -118
- package/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.d.ts +0 -11
- package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts +0 -3
- package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +0 -118
- package/internals/models/timeRange.d.ts +0 -6
- package/internals/models/timeRange.js +0 -1
- package/models/dateRange.d.ts +0 -7
- package/models/dateRange.js +0 -1
- package/models/multiInputRangeFieldClasses.d.ts +0 -7
- package/models/multiInputRangeFieldClasses.js +0 -1
- package/modern/MultiInputDateRangeField/MultiInputDateRangeField.types.js +0 -1
- package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.js +0 -1
- package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.types.js +0 -1
- package/modern/internals/hooks/useMultiInputRangeField/shared.js +0 -9
- package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +0 -118
- package/modern/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +0 -118
- package/modern/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.js +0 -1
- package/modern/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +0 -118
- package/modern/internals/models/timeRange.js +0 -1
- package/modern/models/dateRange.js +0 -1
- package/modern/models/multiInputRangeFieldClasses.js +0 -1
- package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.types.js +0 -5
- package/node/internals/hooks/useMultiInputRangeField/shared.js +0 -16
- package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js +0 -126
- package/node/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js +0 -126
- package/node/internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.js +0 -5
- package/node/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js +0 -126
- package/node/internals/models/timeRange.js +0 -5
- package/node/models/dateRange.js +0 -5
- package/node/models/multiInputRangeFieldClasses.js +0 -5
- /package/{MultiInputDateRangeField/MultiInputDateRangeField.types.js → internals/models/managers.js} +0 -0
- /package/{MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.js → internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js} +0 -0
- /package/{MultiInputTimeRangeField/MultiInputTimeRangeField.types.js → modern/internals/models/managers.js} +0 -0
- /package/{internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types.js → modern/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js} +0 -0
- /package/node/{MultiInputDateRangeField/MultiInputDateRangeField.types.js → internals/models/managers.js} +0 -0
- /package/node/{MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.js → internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js} +0 -0
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import useEventCallback from '@mui/utils/useEventCallback';
|
|
3
|
-
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
|
|
4
|
-
import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
|
|
5
|
-
import { useValidation } from '@mui/x-date-pickers/validation';
|
|
6
|
-
import { validateDateRange } from "../../../validation/index.js";
|
|
7
|
-
import { rangeValueManager } from "../../utils/valueManagers.js";
|
|
8
|
-
import { excludeProps } from "./shared.js";
|
|
9
|
-
import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
|
|
10
|
-
import { useDateRangeManager } from "../../../managers/index.js";
|
|
11
|
-
export const useMultiInputDateRangeField = ({
|
|
12
|
-
sharedProps,
|
|
13
|
-
startTextFieldProps,
|
|
14
|
-
unstableStartFieldRef,
|
|
15
|
-
endTextFieldProps,
|
|
16
|
-
unstableEndFieldRef
|
|
17
|
-
}) => {
|
|
18
|
-
const manager = useDateRangeManager(sharedProps);
|
|
19
|
-
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
|
|
20
|
-
manager,
|
|
21
|
-
internalProps: sharedProps
|
|
22
|
-
});
|
|
23
|
-
const {
|
|
24
|
-
value: valueProp,
|
|
25
|
-
defaultValue,
|
|
26
|
-
referenceDate,
|
|
27
|
-
format,
|
|
28
|
-
formatDensity,
|
|
29
|
-
shouldRespectLeadingZeros,
|
|
30
|
-
onChange,
|
|
31
|
-
disabled,
|
|
32
|
-
readOnly,
|
|
33
|
-
selectedSections,
|
|
34
|
-
onSelectedSectionsChange,
|
|
35
|
-
timezone: timezoneProp,
|
|
36
|
-
enableAccessibleFieldDOMStructure,
|
|
37
|
-
autoFocus
|
|
38
|
-
} = sharedPropsWithDefaults;
|
|
39
|
-
const {
|
|
40
|
-
value,
|
|
41
|
-
handleValueChange,
|
|
42
|
-
timezone
|
|
43
|
-
} = useControlledValueWithTimezone({
|
|
44
|
-
name: 'useMultiInputDateRangeField',
|
|
45
|
-
timezone: timezoneProp,
|
|
46
|
-
value: valueProp,
|
|
47
|
-
defaultValue,
|
|
48
|
-
referenceDate,
|
|
49
|
-
onChange,
|
|
50
|
-
valueManager: rangeValueManager
|
|
51
|
-
});
|
|
52
|
-
const {
|
|
53
|
-
validationError,
|
|
54
|
-
getValidationErrorForNewValue
|
|
55
|
-
} = useValidation({
|
|
56
|
-
props: sharedPropsWithDefaults,
|
|
57
|
-
value,
|
|
58
|
-
timezone,
|
|
59
|
-
validator: validateDateRange,
|
|
60
|
-
onError: sharedPropsWithDefaults.onError
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
64
|
-
const buildChangeHandler = index => {
|
|
65
|
-
return (newDate, rawContext) => {
|
|
66
|
-
const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
|
|
67
|
-
const context = _extends({}, rawContext, {
|
|
68
|
-
validationError: getValidationErrorForNewValue(newDateRange)
|
|
69
|
-
});
|
|
70
|
-
handleValueChange(newDateRange, context);
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
const handleStartDateChange = useEventCallback(buildChangeHandler(0));
|
|
74
|
-
const handleEndDateChange = useEventCallback(buildChangeHandler(1));
|
|
75
|
-
const selectedSectionsResponse = useMultiInputFieldSelectedSections({
|
|
76
|
-
selectedSections,
|
|
77
|
-
onSelectedSectionsChange,
|
|
78
|
-
unstableStartFieldRef,
|
|
79
|
-
unstableEndFieldRef
|
|
80
|
-
});
|
|
81
|
-
const startFieldProps = _extends({
|
|
82
|
-
error: !!validationError[0]
|
|
83
|
-
}, startTextFieldProps, selectedSectionsResponse.start, {
|
|
84
|
-
disabled,
|
|
85
|
-
readOnly,
|
|
86
|
-
format,
|
|
87
|
-
formatDensity,
|
|
88
|
-
shouldRespectLeadingZeros,
|
|
89
|
-
timezone,
|
|
90
|
-
value: valueProp === undefined ? undefined : valueProp[0],
|
|
91
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
|
|
92
|
-
onChange: handleStartDateChange,
|
|
93
|
-
enableAccessibleFieldDOMStructure,
|
|
94
|
-
autoFocus // Do not add on end field.
|
|
95
|
-
});
|
|
96
|
-
const endFieldProps = _extends({
|
|
97
|
-
error: !!validationError[1]
|
|
98
|
-
}, endTextFieldProps, selectedSectionsResponse.end, {
|
|
99
|
-
format,
|
|
100
|
-
formatDensity,
|
|
101
|
-
shouldRespectLeadingZeros,
|
|
102
|
-
disabled,
|
|
103
|
-
readOnly,
|
|
104
|
-
timezone,
|
|
105
|
-
value: valueProp === undefined ? undefined : valueProp[1],
|
|
106
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
|
|
107
|
-
onChange: handleEndDateChange,
|
|
108
|
-
enableAccessibleFieldDOMStructure
|
|
109
|
-
});
|
|
110
|
-
const startDateResponse = useDateField(startFieldProps);
|
|
111
|
-
const endDateResponse = useDateField(endFieldProps);
|
|
112
|
-
|
|
113
|
-
/* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
|
|
114
|
-
return {
|
|
115
|
-
startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
|
|
116
|
-
endDate: excludeProps(endDateResponse, ['clearable', 'onClear'])
|
|
117
|
-
};
|
|
118
|
-
};
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import useEventCallback from '@mui/utils/useEventCallback';
|
|
3
|
-
import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
|
|
4
|
-
import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
|
|
5
|
-
import { useValidation } from '@mui/x-date-pickers/validation';
|
|
6
|
-
import { validateDateTimeRange } from "../../../validation/index.js";
|
|
7
|
-
import { rangeValueManager } from "../../utils/valueManagers.js";
|
|
8
|
-
import { excludeProps } from "./shared.js";
|
|
9
|
-
import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
|
|
10
|
-
import { useDateTimeRangeManager } from "../../../managers/index.js";
|
|
11
|
-
export const useMultiInputDateTimeRangeField = ({
|
|
12
|
-
sharedProps,
|
|
13
|
-
startTextFieldProps,
|
|
14
|
-
unstableStartFieldRef,
|
|
15
|
-
endTextFieldProps,
|
|
16
|
-
unstableEndFieldRef
|
|
17
|
-
}) => {
|
|
18
|
-
const manager = useDateTimeRangeManager(sharedProps);
|
|
19
|
-
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
|
|
20
|
-
manager,
|
|
21
|
-
internalProps: sharedProps
|
|
22
|
-
});
|
|
23
|
-
const {
|
|
24
|
-
value: valueProp,
|
|
25
|
-
defaultValue,
|
|
26
|
-
referenceDate,
|
|
27
|
-
format,
|
|
28
|
-
formatDensity,
|
|
29
|
-
shouldRespectLeadingZeros,
|
|
30
|
-
onChange,
|
|
31
|
-
disabled,
|
|
32
|
-
readOnly,
|
|
33
|
-
selectedSections,
|
|
34
|
-
onSelectedSectionsChange,
|
|
35
|
-
timezone: timezoneProp,
|
|
36
|
-
enableAccessibleFieldDOMStructure,
|
|
37
|
-
autoFocus
|
|
38
|
-
} = sharedPropsWithDefaults;
|
|
39
|
-
const {
|
|
40
|
-
value,
|
|
41
|
-
handleValueChange,
|
|
42
|
-
timezone
|
|
43
|
-
} = useControlledValueWithTimezone({
|
|
44
|
-
name: 'useMultiInputDateTimeRangeField',
|
|
45
|
-
timezone: timezoneProp,
|
|
46
|
-
value: valueProp,
|
|
47
|
-
defaultValue,
|
|
48
|
-
referenceDate,
|
|
49
|
-
onChange,
|
|
50
|
-
valueManager: rangeValueManager
|
|
51
|
-
});
|
|
52
|
-
const {
|
|
53
|
-
validationError,
|
|
54
|
-
getValidationErrorForNewValue
|
|
55
|
-
} = useValidation({
|
|
56
|
-
props: sharedPropsWithDefaults,
|
|
57
|
-
value,
|
|
58
|
-
timezone,
|
|
59
|
-
validator: validateDateTimeRange,
|
|
60
|
-
onError: sharedPropsWithDefaults.onError
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
64
|
-
const buildChangeHandler = index => {
|
|
65
|
-
return (newDate, rawContext) => {
|
|
66
|
-
const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
|
|
67
|
-
const context = _extends({}, rawContext, {
|
|
68
|
-
validationError: getValidationErrorForNewValue(newDateRange)
|
|
69
|
-
});
|
|
70
|
-
handleValueChange(newDateRange, context);
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
const handleStartDateChange = useEventCallback(buildChangeHandler(0));
|
|
74
|
-
const handleEndDateChange = useEventCallback(buildChangeHandler(1));
|
|
75
|
-
const selectedSectionsResponse = useMultiInputFieldSelectedSections({
|
|
76
|
-
selectedSections,
|
|
77
|
-
onSelectedSectionsChange,
|
|
78
|
-
unstableStartFieldRef,
|
|
79
|
-
unstableEndFieldRef
|
|
80
|
-
});
|
|
81
|
-
const startFieldProps = _extends({
|
|
82
|
-
error: !!validationError[0]
|
|
83
|
-
}, startTextFieldProps, selectedSectionsResponse.start, {
|
|
84
|
-
disabled,
|
|
85
|
-
readOnly,
|
|
86
|
-
format,
|
|
87
|
-
formatDensity,
|
|
88
|
-
shouldRespectLeadingZeros,
|
|
89
|
-
timezone,
|
|
90
|
-
value: valueProp === undefined ? undefined : valueProp[0],
|
|
91
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
|
|
92
|
-
onChange: handleStartDateChange,
|
|
93
|
-
enableAccessibleFieldDOMStructure,
|
|
94
|
-
autoFocus // Do not add on end field.
|
|
95
|
-
});
|
|
96
|
-
const endFieldProps = _extends({
|
|
97
|
-
error: !!validationError[1]
|
|
98
|
-
}, endTextFieldProps, selectedSectionsResponse.end, {
|
|
99
|
-
format,
|
|
100
|
-
formatDensity,
|
|
101
|
-
shouldRespectLeadingZeros,
|
|
102
|
-
disabled,
|
|
103
|
-
readOnly,
|
|
104
|
-
timezone,
|
|
105
|
-
value: valueProp === undefined ? undefined : valueProp[1],
|
|
106
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
|
|
107
|
-
onChange: handleEndDateChange,
|
|
108
|
-
enableAccessibleFieldDOMStructure
|
|
109
|
-
});
|
|
110
|
-
const startDateResponse = useDateTimeField(startFieldProps);
|
|
111
|
-
const endDateResponse = useDateTimeField(endFieldProps);
|
|
112
|
-
|
|
113
|
-
/* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
|
|
114
|
-
return {
|
|
115
|
-
startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
|
|
116
|
-
endDate: excludeProps(endDateResponse, ['clearable', 'onClear'])
|
|
117
|
-
};
|
|
118
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import useEventCallback from '@mui/utils/useEventCallback';
|
|
3
|
-
import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField';
|
|
4
|
-
import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
|
|
5
|
-
import { useValidation } from '@mui/x-date-pickers/validation';
|
|
6
|
-
import { validateTimeRange } from "../../../validation/index.js";
|
|
7
|
-
import { rangeValueManager } from "../../utils/valueManagers.js";
|
|
8
|
-
import { excludeProps } from "./shared.js";
|
|
9
|
-
import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
|
|
10
|
-
import { useTimeRangeManager } from "../../../managers/index.js";
|
|
11
|
-
export const useMultiInputTimeRangeField = ({
|
|
12
|
-
sharedProps,
|
|
13
|
-
startTextFieldProps,
|
|
14
|
-
unstableStartFieldRef,
|
|
15
|
-
endTextFieldProps,
|
|
16
|
-
unstableEndFieldRef
|
|
17
|
-
}) => {
|
|
18
|
-
const manager = useTimeRangeManager(sharedProps);
|
|
19
|
-
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
|
|
20
|
-
manager,
|
|
21
|
-
internalProps: sharedProps
|
|
22
|
-
});
|
|
23
|
-
const {
|
|
24
|
-
value: valueProp,
|
|
25
|
-
defaultValue,
|
|
26
|
-
referenceDate,
|
|
27
|
-
format,
|
|
28
|
-
formatDensity,
|
|
29
|
-
shouldRespectLeadingZeros,
|
|
30
|
-
onChange,
|
|
31
|
-
disabled,
|
|
32
|
-
readOnly,
|
|
33
|
-
selectedSections,
|
|
34
|
-
onSelectedSectionsChange,
|
|
35
|
-
timezone: timezoneProp,
|
|
36
|
-
enableAccessibleFieldDOMStructure,
|
|
37
|
-
autoFocus
|
|
38
|
-
} = sharedPropsWithDefaults;
|
|
39
|
-
const {
|
|
40
|
-
value,
|
|
41
|
-
handleValueChange,
|
|
42
|
-
timezone
|
|
43
|
-
} = useControlledValueWithTimezone({
|
|
44
|
-
name: 'useMultiInputTimeRangeField',
|
|
45
|
-
timezone: timezoneProp,
|
|
46
|
-
value: valueProp,
|
|
47
|
-
defaultValue,
|
|
48
|
-
onChange,
|
|
49
|
-
valueManager: rangeValueManager,
|
|
50
|
-
referenceDate
|
|
51
|
-
});
|
|
52
|
-
const {
|
|
53
|
-
validationError,
|
|
54
|
-
getValidationErrorForNewValue
|
|
55
|
-
} = useValidation({
|
|
56
|
-
props: sharedPropsWithDefaults,
|
|
57
|
-
value,
|
|
58
|
-
timezone,
|
|
59
|
-
validator: validateTimeRange,
|
|
60
|
-
onError: sharedPropsWithDefaults.onError
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
64
|
-
const buildChangeHandler = index => {
|
|
65
|
-
return (newDate, rawContext) => {
|
|
66
|
-
const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
|
|
67
|
-
const context = _extends({}, rawContext, {
|
|
68
|
-
validationError: getValidationErrorForNewValue(newDateRange)
|
|
69
|
-
});
|
|
70
|
-
handleValueChange(newDateRange, context);
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
const handleStartDateChange = useEventCallback(buildChangeHandler(0));
|
|
74
|
-
const handleEndDateChange = useEventCallback(buildChangeHandler(1));
|
|
75
|
-
const selectedSectionsResponse = useMultiInputFieldSelectedSections({
|
|
76
|
-
selectedSections,
|
|
77
|
-
onSelectedSectionsChange,
|
|
78
|
-
unstableStartFieldRef,
|
|
79
|
-
unstableEndFieldRef
|
|
80
|
-
});
|
|
81
|
-
const startFieldProps = _extends({
|
|
82
|
-
error: !!validationError[0]
|
|
83
|
-
}, startTextFieldProps, selectedSectionsResponse.start, {
|
|
84
|
-
disabled,
|
|
85
|
-
readOnly,
|
|
86
|
-
format,
|
|
87
|
-
formatDensity,
|
|
88
|
-
shouldRespectLeadingZeros,
|
|
89
|
-
timezone,
|
|
90
|
-
value: valueProp === undefined ? undefined : valueProp[0],
|
|
91
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
|
|
92
|
-
onChange: handleStartDateChange,
|
|
93
|
-
enableAccessibleFieldDOMStructure,
|
|
94
|
-
autoFocus // Do not add on end field.
|
|
95
|
-
});
|
|
96
|
-
const endFieldProps = _extends({
|
|
97
|
-
error: !!validationError[1]
|
|
98
|
-
}, endTextFieldProps, selectedSectionsResponse.end, {
|
|
99
|
-
format,
|
|
100
|
-
formatDensity,
|
|
101
|
-
shouldRespectLeadingZeros,
|
|
102
|
-
disabled,
|
|
103
|
-
readOnly,
|
|
104
|
-
timezone,
|
|
105
|
-
value: valueProp === undefined ? undefined : valueProp[1],
|
|
106
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
|
|
107
|
-
onChange: handleEndDateChange,
|
|
108
|
-
enableAccessibleFieldDOMStructure
|
|
109
|
-
});
|
|
110
|
-
const startDateResponse = useTimeField(startFieldProps);
|
|
111
|
-
const endDateResponse = useTimeField(endFieldProps);
|
|
112
|
-
|
|
113
|
-
/* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
|
|
114
|
-
return {
|
|
115
|
-
startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
|
|
116
|
-
endDate: excludeProps(endDateResponse, ['clearable', 'onClear'])
|
|
117
|
-
};
|
|
118
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.excludeProps = void 0;
|
|
7
|
-
/* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
|
|
8
|
-
const excludeProps = (props, excludedProps) => {
|
|
9
|
-
return Object.keys(props).reduce((acc, key) => {
|
|
10
|
-
if (!excludedProps.includes(key)) {
|
|
11
|
-
acc[key] = props[key];
|
|
12
|
-
}
|
|
13
|
-
return acc;
|
|
14
|
-
}, {});
|
|
15
|
-
};
|
|
16
|
-
exports.excludeProps = excludeProps;
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.useMultiInputDateRangeField = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
|
|
10
|
-
var _DateField = require("@mui/x-date-pickers/DateField");
|
|
11
|
-
var _internals = require("@mui/x-date-pickers/internals");
|
|
12
|
-
var _validation = require("@mui/x-date-pickers/validation");
|
|
13
|
-
var _validation2 = require("../../../validation");
|
|
14
|
-
var _valueManagers = require("../../utils/valueManagers");
|
|
15
|
-
var _shared = require("./shared");
|
|
16
|
-
var _useMultiInputFieldSelectedSections = require("../useMultiInputFieldSelectedSections");
|
|
17
|
-
var _managers = require("../../../managers");
|
|
18
|
-
const useMultiInputDateRangeField = ({
|
|
19
|
-
sharedProps,
|
|
20
|
-
startTextFieldProps,
|
|
21
|
-
unstableStartFieldRef,
|
|
22
|
-
endTextFieldProps,
|
|
23
|
-
unstableEndFieldRef
|
|
24
|
-
}) => {
|
|
25
|
-
const manager = (0, _managers.useDateRangeManager)(sharedProps);
|
|
26
|
-
const sharedPropsWithDefaults = (0, _internals.useFieldInternalPropsWithDefaults)({
|
|
27
|
-
manager,
|
|
28
|
-
internalProps: sharedProps
|
|
29
|
-
});
|
|
30
|
-
const {
|
|
31
|
-
value: valueProp,
|
|
32
|
-
defaultValue,
|
|
33
|
-
referenceDate,
|
|
34
|
-
format,
|
|
35
|
-
formatDensity,
|
|
36
|
-
shouldRespectLeadingZeros,
|
|
37
|
-
onChange,
|
|
38
|
-
disabled,
|
|
39
|
-
readOnly,
|
|
40
|
-
selectedSections,
|
|
41
|
-
onSelectedSectionsChange,
|
|
42
|
-
timezone: timezoneProp,
|
|
43
|
-
enableAccessibleFieldDOMStructure,
|
|
44
|
-
autoFocus
|
|
45
|
-
} = sharedPropsWithDefaults;
|
|
46
|
-
const {
|
|
47
|
-
value,
|
|
48
|
-
handleValueChange,
|
|
49
|
-
timezone
|
|
50
|
-
} = (0, _internals.useControlledValueWithTimezone)({
|
|
51
|
-
name: 'useMultiInputDateRangeField',
|
|
52
|
-
timezone: timezoneProp,
|
|
53
|
-
value: valueProp,
|
|
54
|
-
defaultValue,
|
|
55
|
-
referenceDate,
|
|
56
|
-
onChange,
|
|
57
|
-
valueManager: _valueManagers.rangeValueManager
|
|
58
|
-
});
|
|
59
|
-
const {
|
|
60
|
-
validationError,
|
|
61
|
-
getValidationErrorForNewValue
|
|
62
|
-
} = (0, _validation.useValidation)({
|
|
63
|
-
props: sharedPropsWithDefaults,
|
|
64
|
-
value,
|
|
65
|
-
timezone,
|
|
66
|
-
validator: _validation2.validateDateRange,
|
|
67
|
-
onError: sharedPropsWithDefaults.onError
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
71
|
-
const buildChangeHandler = index => {
|
|
72
|
-
return (newDate, rawContext) => {
|
|
73
|
-
const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
|
|
74
|
-
const context = (0, _extends2.default)({}, rawContext, {
|
|
75
|
-
validationError: getValidationErrorForNewValue(newDateRange)
|
|
76
|
-
});
|
|
77
|
-
handleValueChange(newDateRange, context);
|
|
78
|
-
};
|
|
79
|
-
};
|
|
80
|
-
const handleStartDateChange = (0, _useEventCallback.default)(buildChangeHandler(0));
|
|
81
|
-
const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
|
|
82
|
-
const selectedSectionsResponse = (0, _useMultiInputFieldSelectedSections.useMultiInputFieldSelectedSections)({
|
|
83
|
-
selectedSections,
|
|
84
|
-
onSelectedSectionsChange,
|
|
85
|
-
unstableStartFieldRef,
|
|
86
|
-
unstableEndFieldRef
|
|
87
|
-
});
|
|
88
|
-
const startFieldProps = (0, _extends2.default)({
|
|
89
|
-
error: !!validationError[0]
|
|
90
|
-
}, startTextFieldProps, selectedSectionsResponse.start, {
|
|
91
|
-
disabled,
|
|
92
|
-
readOnly,
|
|
93
|
-
format,
|
|
94
|
-
formatDensity,
|
|
95
|
-
shouldRespectLeadingZeros,
|
|
96
|
-
timezone,
|
|
97
|
-
value: valueProp === undefined ? undefined : valueProp[0],
|
|
98
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
|
|
99
|
-
onChange: handleStartDateChange,
|
|
100
|
-
enableAccessibleFieldDOMStructure,
|
|
101
|
-
autoFocus // Do not add on end field.
|
|
102
|
-
});
|
|
103
|
-
const endFieldProps = (0, _extends2.default)({
|
|
104
|
-
error: !!validationError[1]
|
|
105
|
-
}, endTextFieldProps, selectedSectionsResponse.end, {
|
|
106
|
-
format,
|
|
107
|
-
formatDensity,
|
|
108
|
-
shouldRespectLeadingZeros,
|
|
109
|
-
disabled,
|
|
110
|
-
readOnly,
|
|
111
|
-
timezone,
|
|
112
|
-
value: valueProp === undefined ? undefined : valueProp[1],
|
|
113
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
|
|
114
|
-
onChange: handleEndDateChange,
|
|
115
|
-
enableAccessibleFieldDOMStructure
|
|
116
|
-
});
|
|
117
|
-
const startDateResponse = (0, _DateField.unstable_useDateField)(startFieldProps);
|
|
118
|
-
const endDateResponse = (0, _DateField.unstable_useDateField)(endFieldProps);
|
|
119
|
-
|
|
120
|
-
/* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
|
|
121
|
-
return {
|
|
122
|
-
startDate: (0, _shared.excludeProps)(startDateResponse, ['clearable', 'onClear']),
|
|
123
|
-
endDate: (0, _shared.excludeProps)(endDateResponse, ['clearable', 'onClear'])
|
|
124
|
-
};
|
|
125
|
-
};
|
|
126
|
-
exports.useMultiInputDateRangeField = useMultiInputDateRangeField;
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.useMultiInputDateTimeRangeField = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
|
|
10
|
-
var _DateTimeField = require("@mui/x-date-pickers/DateTimeField");
|
|
11
|
-
var _internals = require("@mui/x-date-pickers/internals");
|
|
12
|
-
var _validation = require("@mui/x-date-pickers/validation");
|
|
13
|
-
var _validation2 = require("../../../validation");
|
|
14
|
-
var _valueManagers = require("../../utils/valueManagers");
|
|
15
|
-
var _shared = require("./shared");
|
|
16
|
-
var _useMultiInputFieldSelectedSections = require("../useMultiInputFieldSelectedSections");
|
|
17
|
-
var _managers = require("../../../managers");
|
|
18
|
-
const useMultiInputDateTimeRangeField = ({
|
|
19
|
-
sharedProps,
|
|
20
|
-
startTextFieldProps,
|
|
21
|
-
unstableStartFieldRef,
|
|
22
|
-
endTextFieldProps,
|
|
23
|
-
unstableEndFieldRef
|
|
24
|
-
}) => {
|
|
25
|
-
const manager = (0, _managers.useDateTimeRangeManager)(sharedProps);
|
|
26
|
-
const sharedPropsWithDefaults = (0, _internals.useFieldInternalPropsWithDefaults)({
|
|
27
|
-
manager,
|
|
28
|
-
internalProps: sharedProps
|
|
29
|
-
});
|
|
30
|
-
const {
|
|
31
|
-
value: valueProp,
|
|
32
|
-
defaultValue,
|
|
33
|
-
referenceDate,
|
|
34
|
-
format,
|
|
35
|
-
formatDensity,
|
|
36
|
-
shouldRespectLeadingZeros,
|
|
37
|
-
onChange,
|
|
38
|
-
disabled,
|
|
39
|
-
readOnly,
|
|
40
|
-
selectedSections,
|
|
41
|
-
onSelectedSectionsChange,
|
|
42
|
-
timezone: timezoneProp,
|
|
43
|
-
enableAccessibleFieldDOMStructure,
|
|
44
|
-
autoFocus
|
|
45
|
-
} = sharedPropsWithDefaults;
|
|
46
|
-
const {
|
|
47
|
-
value,
|
|
48
|
-
handleValueChange,
|
|
49
|
-
timezone
|
|
50
|
-
} = (0, _internals.useControlledValueWithTimezone)({
|
|
51
|
-
name: 'useMultiInputDateTimeRangeField',
|
|
52
|
-
timezone: timezoneProp,
|
|
53
|
-
value: valueProp,
|
|
54
|
-
defaultValue,
|
|
55
|
-
referenceDate,
|
|
56
|
-
onChange,
|
|
57
|
-
valueManager: _valueManagers.rangeValueManager
|
|
58
|
-
});
|
|
59
|
-
const {
|
|
60
|
-
validationError,
|
|
61
|
-
getValidationErrorForNewValue
|
|
62
|
-
} = (0, _validation.useValidation)({
|
|
63
|
-
props: sharedPropsWithDefaults,
|
|
64
|
-
value,
|
|
65
|
-
timezone,
|
|
66
|
-
validator: _validation2.validateDateTimeRange,
|
|
67
|
-
onError: sharedPropsWithDefaults.onError
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic
|
|
71
|
-
const buildChangeHandler = index => {
|
|
72
|
-
return (newDate, rawContext) => {
|
|
73
|
-
const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
|
|
74
|
-
const context = (0, _extends2.default)({}, rawContext, {
|
|
75
|
-
validationError: getValidationErrorForNewValue(newDateRange)
|
|
76
|
-
});
|
|
77
|
-
handleValueChange(newDateRange, context);
|
|
78
|
-
};
|
|
79
|
-
};
|
|
80
|
-
const handleStartDateChange = (0, _useEventCallback.default)(buildChangeHandler(0));
|
|
81
|
-
const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
|
|
82
|
-
const selectedSectionsResponse = (0, _useMultiInputFieldSelectedSections.useMultiInputFieldSelectedSections)({
|
|
83
|
-
selectedSections,
|
|
84
|
-
onSelectedSectionsChange,
|
|
85
|
-
unstableStartFieldRef,
|
|
86
|
-
unstableEndFieldRef
|
|
87
|
-
});
|
|
88
|
-
const startFieldProps = (0, _extends2.default)({
|
|
89
|
-
error: !!validationError[0]
|
|
90
|
-
}, startTextFieldProps, selectedSectionsResponse.start, {
|
|
91
|
-
disabled,
|
|
92
|
-
readOnly,
|
|
93
|
-
format,
|
|
94
|
-
formatDensity,
|
|
95
|
-
shouldRespectLeadingZeros,
|
|
96
|
-
timezone,
|
|
97
|
-
value: valueProp === undefined ? undefined : valueProp[0],
|
|
98
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
|
|
99
|
-
onChange: handleStartDateChange,
|
|
100
|
-
enableAccessibleFieldDOMStructure,
|
|
101
|
-
autoFocus // Do not add on end field.
|
|
102
|
-
});
|
|
103
|
-
const endFieldProps = (0, _extends2.default)({
|
|
104
|
-
error: !!validationError[1]
|
|
105
|
-
}, endTextFieldProps, selectedSectionsResponse.end, {
|
|
106
|
-
format,
|
|
107
|
-
formatDensity,
|
|
108
|
-
shouldRespectLeadingZeros,
|
|
109
|
-
disabled,
|
|
110
|
-
readOnly,
|
|
111
|
-
timezone,
|
|
112
|
-
value: valueProp === undefined ? undefined : valueProp[1],
|
|
113
|
-
defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
|
|
114
|
-
onChange: handleEndDateChange,
|
|
115
|
-
enableAccessibleFieldDOMStructure
|
|
116
|
-
});
|
|
117
|
-
const startDateResponse = (0, _DateTimeField.unstable_useDateTimeField)(startFieldProps);
|
|
118
|
-
const endDateResponse = (0, _DateTimeField.unstable_useDateTimeField)(endFieldProps);
|
|
119
|
-
|
|
120
|
-
/* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
|
|
121
|
-
return {
|
|
122
|
-
startDate: (0, _shared.excludeProps)(startDateResponse, ['clearable', 'onClear']),
|
|
123
|
-
endDate: (0, _shared.excludeProps)(endDateResponse, ['clearable', 'onClear'])
|
|
124
|
-
};
|
|
125
|
-
};
|
|
126
|
-
exports.useMultiInputDateTimeRangeField = useMultiInputDateTimeRangeField;
|