forked from mui/mui-x
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[core] Fix default props behavior on all pickers (mui#4451)
- Loading branch information
1 parent
95c8407
commit 1746fca
Showing
18 changed files
with
295 additions
and
579 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
import * as React from 'react'; | ||
import { useDefaultDates, useUtils, ValidationProps } from '@mui/x-date-pickers/internals'; | ||
import { useThemeProps } from '@mui/material/styles'; | ||
import { ExportedDateRangePickerViewProps } from './DateRangePickerView'; | ||
import { DateRangeValidationError } from '../internal/hooks/validation/useDateRangeValidation'; | ||
import { DateRange, RangeInput } from '../internal/models'; | ||
import { ExportedDateRangePickerInputProps } from './DateRangePickerInput'; | ||
|
||
export interface BaseDateRangePickerProps<TDate> | ||
extends ExportedDateRangePickerViewProps<TDate>, | ||
ValidationProps<DateRangeValidationError, RangeInput<TDate>>, | ||
ExportedDateRangePickerInputProps { | ||
/** | ||
* The components used for each slot. | ||
* Either a string to use an HTML element or a component. | ||
* @default {} | ||
*/ | ||
components?: ExportedDateRangePickerViewProps<TDate>['components'] & | ||
ExportedDateRangePickerInputProps['components']; | ||
/** | ||
* Text for end input label and toolbar placeholder. | ||
* @default 'End' | ||
*/ | ||
endText?: React.ReactNode; | ||
/** | ||
* Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`). | ||
* @default '__/__/____' | ||
*/ | ||
mask?: ExportedDateRangePickerInputProps['mask']; | ||
/** | ||
* Min selectable date. @DateIOType | ||
* @default defaultMinDate | ||
*/ | ||
minDate?: TDate; | ||
/** | ||
* Max selectable date. @DateIOType | ||
* @default defaultMaxDate | ||
*/ | ||
maxDate?: TDate; | ||
/** | ||
* Callback fired when the value (the selected date range) changes @DateIOType. | ||
* @template TDate | ||
* @param {DateRange<TDate>} date The new parsed date range. | ||
* @param {string} keyboardInputValue The current value of the keyboard input. | ||
*/ | ||
onChange: (date: DateRange<TDate>, keyboardInputValue?: string) => void; | ||
/** | ||
* Text for start input label and toolbar placeholder. | ||
* @default 'Start' | ||
*/ | ||
startText?: React.ReactNode; | ||
/** | ||
* The value of the date range picker. | ||
*/ | ||
value: RangeInput<TDate>; | ||
} | ||
|
||
export type DefaultizedProps<Props> = Props & { inputFormat: string }; | ||
|
||
export function useDateRangePickerDefaultizedProps< | ||
TDate, | ||
Props extends BaseDateRangePickerProps<TDate>, | ||
>( | ||
props: Props, | ||
name: string, | ||
): DefaultizedProps<Props> & | ||
Required< | ||
Pick<BaseDateRangePickerProps<unknown>, 'calendars' | 'mask' | 'startText' | 'endText'> | ||
> { | ||
const utils = useUtils<TDate>(); | ||
const defaultDates = useDefaultDates(); | ||
|
||
// This is technically unsound if the type parameters appear in optional props. | ||
// Optional props can be filled by `useThemeProps` with types that don't match the type parameters. | ||
const themeProps = useThemeProps({ | ||
props, | ||
name, | ||
}); | ||
|
||
return { | ||
calendars: 2, | ||
mask: '__/__/____', | ||
startText: 'Start', | ||
endText: 'End', | ||
inputFormat: utils.formats.keyboardDate, | ||
minDate: defaultDates.minDate, | ||
maxDate: defaultDates.maxDate, | ||
...themeProps, | ||
}; | ||
} |
Oops, something went wrong.