Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pickers] New MobileDateRangePicker, DesktopDateRangePicker, DateRangePicker and StaticDateRangePicker based on MultiInputDateRangeField #6888

Merged
merged 4 commits into from
Nov 21, 2022

Conversation

flaviendelangle
Copy link
Member

@flaviendelangle flaviendelangle commented Nov 17, 2022

API changes

MobileDateRangePicker

Remove mask related props

  • acceptRegex
  • disableMaskedInput
  • ignoreInvalidInputs
  • mask
  • rifmFormatter

Use component slots everywhere

  • InputProps => componentsProps.input.InputProps
  • renderInput => components.Field / components.Input / components.FieldRoot / components.FieldSeparator depending on the use case

Remove props already not used in v5

  • children
  • InputAdornmentProps
  • OpenPickerButtonProps
  • OpenPickerIcon
  • inputRef
  • label
  • onViewChange
  • getOpenDialogAriaText
  • shouldDisableMonth
  • shouldDisableYear

Prop renaming

  • inputFormat => format

DesktopDateRangePicker

Remove mask related props

  • acceptRegex
  • disableMaskedInput
  • ignoreInvalidInputs
  • mask
  • rifmFormatter

Use component slots everywhere

  • InputProps => componentsProps.input.InputProps
  • renderInput => components.Field / components.Input / components.FieldRoot / components.FieldSeparator depending on the use case

Remove props already not used in v5

  • children
  • InputAdornmentProps
  • OpenPickerButtonProps
  • OpenPickerIcon
  • inputRef
  • label
  • onViewChange
  • getOpenDialogAriaText
  • shouldDisableMonth
  • shouldDisableYear

Prop renaming

  • inputFormat => format

DateRangePicker

Remove mask related props

  • acceptRegex
  • disableMaskedInput
  • ignoreInvalidInputs
  • mask
  • rifmFormatter

Use component slots everywhere

  • InputProps => componentsProps.input.InputProps
  • renderInput => components.Field / components.Input / components.FieldRoot / components.FieldSeparator depending on the use case

Remove props already not used in v5

  • children
  • InputAdornmentProps
  • OpenPickerButtonProps
  • OpenPickerIcon
  • inputRef
  • label
  • onViewChange
  • getOpenDialogAriaText
  • shouldDisableMonth
  • shouldDisableYear

Prop renaming

  • inputFormat => format

StaticDateRangePicker

Remove mask related props

  • acceptRegex
  • disableMaskedInput
  • ignoreInvalidInputs
  • mask
  • rifmFormatter

Remove keyboard editing related props (no more keyboard mode on the mobile toolbar)

  • renderInput
  • InputProps
  • inputFormat

Remove props already not used in v5

  • InputAdornmentProps
  • OpenPickerButtonProps
  • OpenPickerIcon
  • inputRef
  • label
  • onViewChange
  • getOpenDialogAriaText
  • shouldDisableMonth
  • shouldDisableYear
  • closeOnSelect
  • disableOpenPicker

…ePicker and StaticDateRangePicker based on MultiInputDateRangeField
@flaviendelangle flaviendelangle marked this pull request as draft November 17, 2022 09:59
@flaviendelangle flaviendelangle added the component: pickers This is the name of the generic UI component, not the React module! label Nov 17, 2022
@mui-bot
Copy link

mui-bot commented Nov 17, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-6888--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 620.4 956.9 808.5 780.12 137.837
Sort 100k rows ms 601.7 1,030.3 839 843.92 138.094
Select 100k rows ms 204.2 411.5 263.8 282.42 68.97
Deselect 100k rows ms 134 310.4 211.7 209.28 61.153

Generated by 🚫 dangerJS against 90247e5

@flaviendelangle flaviendelangle marked this pull request as ready for review November 17, 2022 12:37
* We don't pass all the props down to `DateRangeCalendar`,
* because otherwise some unwanted props would be passed to the HTML element.
*/
export const renderDateRangeView = <TDate extends unknown>({
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you have a better solution here, I'm interested
At least it is centralized 😬

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure their is a better way than listing the props that can be passed. The other options would be to stop them when rendering the HTML element which does not seems better

controlled: inValue,
default: defaultValue ?? valueManager.emptyValue,
name: 'usePickerState2',
state: 'value',
});

const value = React.useMemo(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot to apply this change on the new pickers when doing #6170 and it causes a bug on the range picker when the date is not valid

import { SlotComponentProps } from '@mui/base/utils';
import TextField, { TextFieldProps } from '@mui/material/TextField';
import type { UseFieldInternalProps } from '../hooks/useField';

export interface BaseFieldProps<TValue, TError>
extends Omit<UseFieldInternalProps<TValue, TError>, 'format'> {
className?: string;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to this PR, I forgot to extract it

Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to work well 👍

@flaviendelangle flaviendelangle merged commit 8fcd3fa into mui:next Nov 21, 2022
@flaviendelangle flaviendelangle deleted the next-date-range-picker branch November 21, 2022 08:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pickers This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants