Skip to content

[pickers] Use usePickerContext() to get the view-related props in the layout, toolbar and tabs slots #15606

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.

Sign up for GitHub

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

Jump to bottom
Merged
flaviendelangle merged 17 commits into from
Dec 19, 2024
Merged

[pickers] Use usePickerContext() to get the view-related props in the layout, toolbar and tabs slots #15606

flaviendelangle merged 17 commits into from
Dec 19, 2024

Conversation

@flaviendelangle
Copy link
Member

@flaviendelangle flaviendelangle commented Nov 26, 2024 •
edited
Loading

Part of #15495

What?

  • Use usePickerContext() for the view props in all the XXXTabs components
  • Use usePickerContext() for the view props in all the XXXToolbar components
  • Use usePickerContext() for the view props in usePickerLayout()

Why?

  • Prepares for composition
  • Removes TView from a lot of interfaces (about half of all the interfaces with TView were only needing it because of the tabs and toolbar slots...)
  • Prevents unwanted override of internal props using slotProps

What's next?

  • Do the same with the props handled by usePickerValue()
  • And then the whole layout part of the UI will be 100% context-based 🥳 (next we will have all the props forwarded to the field and to the views 😆 )

@flaviendelangle flaviendelangle added breaking change Introduces changes that are not backward compatible. scope: pickers Changes related to the date/time pickers. labels Nov 26, 2024
@flaviendelangle flaviendelangle self-assigned this Nov 26, 2024
@mui-bot
Copy link

mui-bot commented Nov 26, 2024 •
edited
Loading

Deploy preview: https://deploy-preview-15606--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against dcbce54

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 28, 2024
@github-actions
Copy link

github-actions bot commented Nov 28, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 10, 2024
@flaviendelangle flaviendelangle changed the title [pickers] Remove view props from the <PickersLayout /> props and use the context instead [pickers] Use usePickerContext() to get the view-related props in the layout, toolbar and tabs slots Dec 10, 2024
@flaviendelangle flaviendelangle marked this pull request as ready for review December 10, 2024 18:32
@flaviendelangle flaviendelangle marked this pull request as draft December 10, 2024 18:32
@flaviendelangle flaviendelangle marked this pull request as ready for review December 11, 2024 08:22
@flaviendelangle flaviendelangle mentioned this pull request Dec 13, 2024
Closed
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 19, 2024
@github-actions
Copy link

github-actions bot commented Dec 19, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 19, 2024
michelengelen
michelengelen approved these changes Dec 19, 2024
View reviewed changes
Copy link
Member

@michelengelen michelengelen left a comment

Choose a reason for hiding this comment

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

nothing blocking ... feel free to ignore, when it's not relevant ... LGTM

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
function CustomLayout(props) {
- console.log(props.isRtl);

- const { isRtl } = props;
Copy link
Member

@michelengelen michelengelen Dec 19, 2024

Choose a reason for hiding this comment

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

this is pure mind-bending ... a diff from a diff! 🤯

packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
export const DateTimePickerToolbarOverrideContext = React.createContext<{
forceDesktopVariant: boolean;
onViewChange: (view: DateOrTimeViewWithMeridiem) => void;
view: DateOrTimeViewWithMeridiem | null;
Copy link
Member

@michelengelen michelengelen Dec 19, 2024

Choose a reason for hiding this comment

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

is there a way we can remove the | null here?

Copy link
Member Author

@flaviendelangle flaviendelangle Dec 19, 2024

Choose a reason for hiding this comment

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

Nop, the DateTimeRangePickerToolbar passes null when you are editing the other date

flaviendelangle and others added 6 commits December 19, 2024 16:35
@flaviendelangle @michelengelen
Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
661c5c2 
Co-authored-by: Michel Engelen <[email protected]>
Signed-off-by: Flavien DELANGLE <[email protected]>
@flaviendelangle @michelengelen
Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
5258bc2 
Co-authored-by: Michel Engelen <[email protected]>
Signed-off-by: Flavien DELANGLE <[email protected]>
@flaviendelangle @michelengelen
Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
d934aac 
Co-authored-by: Michel Engelen <[email protected]>
Signed-off-by: Flavien DELANGLE <[email protected]>
@flaviendelangle @michelengelen
Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
e7f3a60 
Co-authored-by: Michel Engelen <[email protected]>
Signed-off-by: Flavien DELANGLE <[email protected]>
@flaviendelangle @michelengelen
Update packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolb…
89f269d 
…ar.tsx

Co-authored-by: Michel Engelen <[email protected]>
Signed-off-by: Flavien DELANGLE <[email protected]>
@flaviendelangle @michelengelen
Update packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolb…
bf309e7 
…ar.tsx

Co-authored-by: Michel Engelen <[email protected]>
Signed-off-by: Flavien DELANGLE <[email protected]>
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 19, 2024
@github-actions
Copy link

github-actions bot commented Dec 19, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 19, 2024
@flaviendelangle flaviendelangle merged commit 695f807 into mui:master Dec 19, 2024
18 checks passed
@flaviendelangle flaviendelangle deleted the layout-view-props branch December 19, 2024 17:36
lauri865 pushed a commit to lauri865/mui-x that referenced this pull request Dec 20, 2024
@flaviendelangle @michelengelen @lauri865
[pickers] Use usePickerContext() to get the view-related props in t…
188b47c 
…he layout, toolbar and tabs slots (mui#15606)

Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Michel Engelen <[email protected]>
@flaviendelangle flaviendelangle mentioned this pull request Jan 21, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@michelengelen michelengelen michelengelen approved these changes

Assignees

@flaviendelangle flaviendelangle

Labels

breaking change Introduces changes that are not backward compatible. scope: pickers Changes related to the date/time pickers.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@flaviendelangle @mui-bot @michelengelen