Skip to content

Commit 20e037b

Browse files
flaviendelangleLukasTy
flaviendelangle
and
LukasTy
authored
[pickers] Introduce a new concept of manager (mui#15339)
Signed-off-by: Flavien DELANGLE <flaviendelangle@gmail.com> Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
1 parent e5471d4 commit 20e037b

29 files changed

+905
-263
lines changed

‎packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts

+18-21
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
'use client';
2-
import * as React from 'react';
3-
import { useField, useDefaultizedDateField, PickerRangeValue } from '@mui/x-date-pickers/internals';
2+
import {
3+
useField,
4+
useFieldInternalPropsWithDefaults,
5+
PickerRangeValue,
6+
} from '@mui/x-date-pickers/internals';
47
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
58
import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
6-
import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
7-
import { validateDateRange } from '../validation';
9+
import { useDateRangeManager } from '../managers';
810

911
export const useSingleInputDateRangeField = <
1012
TEnableAccessibleFieldDOMStructure extends boolean,
1113
TAllProps extends UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
1214
>(
13-
inProps: TAllProps,
15+
props: TAllProps,
1416
) => {
15-
const props = useDefaultizedDateField<
16-
UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
17-
TAllProps
18-
>(inProps);
19-
17+
const manager = useDateRangeManager(props);
2018
const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
21-
22-
const fieldValueManager = React.useMemo(
23-
() => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }),
24-
[internalProps.dateSeparator],
25-
);
19+
const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
20+
manager,
21+
internalProps,
22+
});
2623

2724
return useField<
2825
PickerRangeValue,
2926
TEnableAccessibleFieldDOMStructure,
3027
typeof forwardedProps,
31-
typeof internalProps
28+
typeof internalPropsWithDefaults
3229
>({
3330
forwardedProps,
34-
internalProps,
35-
valueManager: rangeValueManager,
36-
fieldValueManager,
37-
validator: validateDateRange,
38-
valueType: 'date',
31+
internalProps: internalPropsWithDefaults,
32+
valueManager: manager.internal_valueManager,
33+
fieldValueManager: manager.internal_fieldValueManager,
34+
validator: manager.validator,
35+
valueType: manager.valueType,
3936
});
4037
};

‎packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts

+14-21
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,37 @@
11
'use client';
2-
import * as React from 'react';
32
import {
43
useField,
5-
useDefaultizedDateTimeField,
4+
useFieldInternalPropsWithDefaults,
65
PickerRangeValue,
76
} from '@mui/x-date-pickers/internals';
87
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
98
import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
10-
import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
11-
import { validateDateTimeRange } from '../validation';
9+
import { useDateTimeRangeManager } from '../managers';
1210

1311
export const useSingleInputDateTimeRangeField = <
1412
TEnableAccessibleFieldDOMStructure extends boolean,
1513
TAllProps extends UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
1614
>(
17-
inProps: TAllProps,
15+
props: TAllProps,
1816
) => {
19-
const props = useDefaultizedDateTimeField<
20-
UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
21-
TAllProps
22-
>(inProps);
23-
17+
const manager = useDateTimeRangeManager(props);
2418
const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date-time');
25-
26-
const fieldValueManager = React.useMemo(
27-
() => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }),
28-
[internalProps.dateSeparator],
29-
);
19+
const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
20+
manager,
21+
internalProps,
22+
});
3023

3124
return useField<
3225
PickerRangeValue,
3326
TEnableAccessibleFieldDOMStructure,
3427
typeof forwardedProps,
35-
typeof internalProps
28+
typeof internalPropsWithDefaults
3629
>({
3730
forwardedProps,
38-
internalProps,
39-
valueManager: rangeValueManager,
40-
fieldValueManager,
41-
validator: validateDateTimeRange,
42-
valueType: 'date-time',
31+
internalProps: internalPropsWithDefaults,
32+
valueManager: manager.internal_valueManager,
33+
fieldValueManager: manager.internal_fieldValueManager,
34+
validator: manager.validator,
35+
valueType: manager.valueType,
4336
});
4437
};

‎packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts

+18-21
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
'use client';
2-
import * as React from 'react';
3-
import { useField, useDefaultizedTimeField, PickerRangeValue } from '@mui/x-date-pickers/internals';
2+
import {
3+
useField,
4+
useFieldInternalPropsWithDefaults,
5+
PickerRangeValue,
6+
} from '@mui/x-date-pickers/internals';
47
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
58
import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
6-
import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
7-
import { validateTimeRange } from '../validation';
9+
import { useTimeRangeManager } from '../managers';
810

911
export const useSingleInputTimeRangeField = <
1012
TEnableAccessibleFieldDOMStructure extends boolean,
1113
TAllProps extends UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
1214
>(
13-
inProps: TAllProps,
15+
props: TAllProps,
1416
) => {
15-
const props = useDefaultizedTimeField<
16-
UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
17-
TAllProps
18-
>(inProps);
19-
17+
const manager = useTimeRangeManager(props);
2018
const { forwardedProps, internalProps } = useSplitFieldProps(props, 'time');
21-
22-
const fieldValueManager = React.useMemo(
23-
() => getRangeFieldValueManager({ dateSeparator: internalProps.dateSeparator }),
24-
[internalProps.dateSeparator],
25-
);
19+
const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
20+
manager,
21+
internalProps,
22+
});
2623

2724
return useField<
2825
PickerRangeValue,
2926
TEnableAccessibleFieldDOMStructure,
3027
typeof forwardedProps,
31-
typeof internalProps
28+
typeof internalPropsWithDefaults
3229
>({
3330
forwardedProps,
34-
internalProps,
35-
valueManager: rangeValueManager,
36-
fieldValueManager,
37-
validator: validateTimeRange,
38-
valueType: 'time',
31+
internalProps: internalPropsWithDefaults,
32+
valueManager: manager.internal_valueManager,
33+
fieldValueManager: manager.internal_fieldValueManager,
34+
validator: manager.validator,
35+
valueType: manager.valueType,
3936
});
4037
};

‎packages/x-date-pickers-pro/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@ export * from './dateRangeViewRenderers';
3030
export * from './models';
3131
export * from './hooks';
3232
export * from './validation';
33+
export * from './managers';

‎packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts

+12-13
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,24 @@ import {
77
PickerValue,
88
UseFieldResponse,
99
useControlledValueWithTimezone,
10-
useDefaultizedDateField,
10+
useFieldInternalPropsWithDefaults,
1111
} from '@mui/x-date-pickers/internals';
1212
import { useValidation } from '@mui/x-date-pickers/validation';
1313
import { DateValidationError } from '@mui/x-date-pickers/models';
14-
import {
15-
UseMultiInputDateRangeFieldParams,
16-
UseMultiInputDateRangeFieldProps,
17-
} from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types';
14+
import { UseMultiInputDateRangeFieldParams } from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types';
1815
import { validateDateRange } from '../../../validation';
1916
import { rangeValueManager } from '../../utils/valueManagers';
2017
import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
2118
import { DateRangeValidationError } from '../../../models';
2219
import { excludeProps } from './shared';
2320
import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections';
21+
import { useDateRangeManager } from '../../../managers';
2422

2523
export const useMultiInputDateRangeField = <
2624
TEnableAccessibleFieldDOMStructure extends boolean,
2725
TTextFieldSlotProps extends {},
2826
>({
29-
sharedProps: inSharedProps,
27+
sharedProps,
3028
startTextFieldProps,
3129
unstableStartFieldRef,
3230
endTextFieldProps,
@@ -35,10 +33,11 @@ export const useMultiInputDateRangeField = <
3533
TEnableAccessibleFieldDOMStructure,
3634
TTextFieldSlotProps
3735
>): UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps> => {
38-
const sharedProps = useDefaultizedDateField<
39-
UseMultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
40-
typeof inSharedProps
41-
>(inSharedProps);
36+
const manager = useDateRangeManager(sharedProps);
37+
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
38+
manager,
39+
internalProps: sharedProps,
40+
});
4241

4342
const {
4443
value: valueProp,
@@ -55,7 +54,7 @@ export const useMultiInputDateRangeField = <
5554
timezone: timezoneProp,
5655
enableAccessibleFieldDOMStructure,
5756
autoFocus,
58-
} = sharedProps;
57+
} = sharedPropsWithDefaults;
5958

6059
const { value, handleValueChange, timezone } = useControlledValueWithTimezone({
6160
name: 'useMultiInputDateRangeField',
@@ -68,11 +67,11 @@ export const useMultiInputDateRangeField = <
6867
});
6968

7069
const { validationError, getValidationErrorForNewValue } = useValidation({
71-
props: sharedProps,
70+
props: sharedPropsWithDefaults,
7271
value,
7372
timezone,
7473
validator: validateDateRange,
75-
onError: sharedProps.onError,
74+
onError: sharedPropsWithDefaults.onError,
7675
});
7776

7877
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic

‎packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts

+15-16
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,24 @@ import {
77
PickerValue,
88
UseFieldResponse,
99
useControlledValueWithTimezone,
10-
useDefaultizedDateTimeField,
10+
useFieldInternalPropsWithDefaults,
1111
} from '@mui/x-date-pickers/internals';
12-
import { DateTimeValidationError } from '@mui/x-date-pickers/models';
1312
import { useValidation } from '@mui/x-date-pickers/validation';
14-
import type {
15-
UseMultiInputDateTimeRangeFieldParams,
16-
UseMultiInputDateTimeRangeFieldProps,
17-
} from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
18-
import { DateTimeRangeValidationError } from '../../../models';
13+
import { DateTimeValidationError } from '@mui/x-date-pickers/models';
14+
import { UseMultiInputDateTimeRangeFieldParams } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
1915
import { validateDateTimeRange } from '../../../validation';
2016
import { rangeValueManager } from '../../utils/valueManagers';
2117
import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
18+
import { DateTimeRangeValidationError } from '../../../models';
2219
import { excludeProps } from './shared';
2320
import { useMultiInputFieldSelectedSections } from '../useMultiInputFieldSelectedSections';
21+
import { useDateTimeRangeManager } from '../../../managers';
2422

2523
export const useMultiInputDateTimeRangeField = <
2624
TEnableAccessibleFieldDOMStructure extends boolean,
2725
TTextFieldSlotProps extends {},
2826
>({
29-
sharedProps: inSharedProps,
27+
sharedProps,
3028
startTextFieldProps,
3129
unstableStartFieldRef,
3230
endTextFieldProps,
@@ -35,10 +33,11 @@ export const useMultiInputDateTimeRangeField = <
3533
TEnableAccessibleFieldDOMStructure,
3634
TTextFieldSlotProps
3735
>): UseMultiInputRangeFieldResponse<TEnableAccessibleFieldDOMStructure, TTextFieldSlotProps> => {
38-
const sharedProps = useDefaultizedDateTimeField<
39-
UseMultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>,
40-
typeof inSharedProps
41-
>(inSharedProps);
36+
const manager = useDateTimeRangeManager(sharedProps);
37+
const sharedPropsWithDefaults = useFieldInternalPropsWithDefaults({
38+
manager,
39+
internalProps: sharedProps,
40+
});
4241

4342
const {
4443
value: valueProp,
@@ -55,10 +54,10 @@ export const useMultiInputDateTimeRangeField = <
5554
timezone: timezoneProp,
5655
enableAccessibleFieldDOMStructure,
5756
autoFocus,
58-
} = sharedProps;
57+
} = sharedPropsWithDefaults;
5958

6059
const { value, handleValueChange, timezone } = useControlledValueWithTimezone({
61-
name: 'useMultiInputDateRangeField',
60+
name: 'useMultiInputDateTimeRangeField',
6261
timezone: timezoneProp,
6362
value: valueProp,
6463
defaultValue,
@@ -68,11 +67,11 @@ export const useMultiInputDateTimeRangeField = <
6867
});
6968

7069
const { validationError, getValidationErrorForNewValue } = useValidation({
71-
props: sharedProps,
70+
props: sharedPropsWithDefaults,
7271
value,
7372
timezone,
7473
validator: validateDateTimeRange,
75-
onError: sharedProps.onError,
74+
onError: sharedPropsWithDefaults.onError,
7675
});
7776

7877
// TODO: Maybe export utility from `useField` instead of copy/pasting the logic

0 commit comments

Comments
 (0)