[pickers] Use context to pass props from the picker to the field #16042

flaviendelangle · 2024-12-31T08:33:31Z

This PR only cover the props that are common to all the fields, otherwise it would be too big and hard to review.
For now the validation props and some other prop are still passed to the field using props (see "Follow up" for more details).

Create a new private context for the properties that are specific to our editing mechanism (let me know if you think those should also be in the public context.
Use disabled, value and setValue from the existing public context in the field components
Add fieldFormat and timezone to the existing public context and use them in the field components
Remove formatDensity and shouldRespectLeadingZeros from useParsedFormat, and make format optional (use the one passed by the picker by default).
Migrate all the doc demos to use the context instead of internal props for the migrated properties.
Write migration guide

Follow up

Use context for readOnly and autoFocus (requires [pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers #15671)
Use context for validation props (currently handed by each picker individually)
Use context for inputRef, unstableFieldRef, name and label (need to make single input range fields the default before)
Use context for ref (currently handed by each picker individually)
Do the same with the views (probably not during the alpha / beta)

…avior from the picker

mui-bot · 2024-12-31T08:36:54Z

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

Updated pages:

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

Generated by 🚫 dangerJS against a63741c

github-actions · 2024-12-31T09:59:25Z

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

flaviendelangle · 2025-01-01T10:44:39Z

packages/x-date-pickers/src/hooks/useParsedFormat.ts

- * @param {string} params.format Format of the date to use.
- * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).
- * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
+ * @param {string} params.format Format to parse.


shouldRespectLeadingZeros: I removed it because it was doing nothing since it's a placeholder and a placeholder never has leading zeros 🤦 .

formatDensity: I removed it, but for this one it's more subjective and I would like your opinion. I can take it from the context and allow an override like for the format. My reasoning behind the removal is that the density is a concept internal to the our field. If someone uses it in a custom field (let say a masked field), then he/she will have an inconsistency between the placeholder (which will have the spaces) and the value (which wont). So I think it's better to just let the user use a good old format.replace(/\//g, ' / ').

format: I made it optional, by default it's using the one of the picker (or a default date format when using a standalone field but it's probably not a realistic use case)

On the formatDensity I do agree ... its probably best to give the user the freedom to use whatever density he prefers and apply it to both. 👍🏼

packages/x-date-pickers/src/internals/components/PickerProvider.tsx

flaviendelangle · 2025-01-01T12:56:17Z

docs/data/date-pickers/calendar-systems/AdapterHijri.tsx

@@ -41,16 +40,18 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
  } = forwardedProps;

  const pickerContext = usePickerContext();
-
-  const parsedFormat = useParsedFormat(internalProps);
+  const parsedFormat = useParsedFormat();
  const { hasValidationError } = useValidation({


We would now be able to make value and timezone optional and read it from the context by default. Same with the validation props in the future.

But I would like to take the time to think this API correctly before doing anything.

docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js

docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

michelengelen · 2025-01-07T11:06:28Z

packages/x-date-pickers/src/hooks/useParsedFormat.ts

- * @param {string} params.format Format of the date to use.
- * @param {'dense' | 'spacious'} params.formatDensity Density of the format (setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character).
- * @param {boolean} params.shouldRespectLeadingZeros If `true`, the format will respect the leading zeroes, if `false`, the format will always add leading zeroes.
+ * @param {string} params.format Format to parse.


On the formatDensity I do agree ... its probably best to give the user the freedom to use whatever density he prefers and apply it to both. 👍🏼

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts

github-actions · 2025-01-07T11:37:03Z

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

docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

LukasTy · 2025-01-07T13:30:18Z

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

+  - `onSelectedSectionsChange`: `undefined`
+
+  :::success
+  If you are using a hook like `useDateField`, you don't have to do anything, the value from the context are automatically applied.


Suggested change

If you are using a hook like `useDateField`, you don't have to do anything, the value from the context are automatically applied.

If you are using a hook, like `useDateField`, you don't have to do anything, the values from the context are automatically applied.

I might have applied the comment before too fast.
It's not all hooks, only some of them.

For me If your are using a hook, like useDateField, you ... implies that the condition if "If you are using a hook", which is not accurate here.

Oh, sorry for misleading you. 🙈

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts

Co-authored-by: Lukas Tyla <[email protected]> Signed-off-by: Flavien DELANGLE <[email protected]>

[pickers] Use context to pass props specific to our field editing beh…

83743e0

…avior from the picker

flaviendelangle added breaking change component: pickers This is the name of the generic UI component, not the React module! labels Dec 31, 2024

flaviendelangle self-assigned this Dec 31, 2024

flaviendelangle marked this pull request as draft December 31, 2024 08:34

flaviendelangle added 3 commits December 31, 2024 09:43

Work

4303c75

Work

906898c

Work

260a81f

flaviendelangle changed the title ~~[pickers] Use context to pass props specific to our field editing behavior from the picker~~ [pickers] Use context to pass props from the picker to the field Dec 31, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 31, 2024

Work

989a7e0

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 31, 2024

flaviendelangle added 6 commits December 31, 2024 11:26

Merge

e9c445c

Work

0a50784

Merge branch 'master' into field-private-context

8f37c13

Work on docs demos

1ceccb3

Fix

efbb258

Fix

33c5732

flaviendelangle commented Jan 1, 2025

View reviewed changes

flaviendelangle added 2 commits January 1, 2025 14:12

Add migration guide

63e4790

Improve migration guide

6aefd00

flaviendelangle marked this pull request as ready for review January 1, 2025 13:18

flaviendelangle requested a review from michelengelen January 1, 2025 13:18

flaviendelangle added 5 commits January 3, 2025 09:36

Merge branch 'master' into field-private-context

a409727

Clean

6f0b3e3

Work

8af35a8

Work

4eb649e

Work

568eb95

michelengelen reviewed Jan 7, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 7, 2025

flaviendelangle added 2 commits January 7, 2025 12:42

Review: Michel

07c83ab

Merge

859a203

flaviendelangle requested a review from michelengelen January 7, 2025 11:44

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 7, 2025

michelengelen approved these changes Jan 7, 2025

View reviewed changes

flaviendelangle added 3 commits January 7, 2025 14:55

Review: Michel

662eae7

Merge

eadb941

Fix

9e84a0e

LukasTy approved these changes Jan 7, 2025

View reviewed changes

flaviendelangle and others added 2 commits January 8, 2025 08:03

Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

9ad600b

Co-authored-by: Lukas Tyla <[email protected]> Signed-off-by: Flavien DELANGLE <[email protected]>

Update docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

a63741c

Co-authored-by: Lukas Tyla <[email protected]> Signed-off-by: Flavien DELANGLE <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pickers] Use context to pass props from the picker to the field #16042

[pickers] Use context to pass props from the picker to the field #16042

flaviendelangle commented Dec 31, 2024 •

edited

Loading

mui-bot commented Dec 31, 2024 •

edited

Loading

github-actions bot commented Dec 31, 2024

flaviendelangle Jan 1, 2025

michelengelen Jan 7, 2025

flaviendelangle Jan 1, 2025

michelengelen Jan 7, 2025

github-actions bot commented Jan 7, 2025

LukasTy Jan 7, 2025

flaviendelangle Jan 8, 2025

LukasTy Jan 8, 2025

	If you are using a hook like `useDateField`, you don't have to do anything, the value from the context are automatically applied.
	If you are using a hook, like `useDateField`, you don't have to do anything, the values from the context are automatically applied.

[pickers] Use context to pass props from the picker to the field #16042

Are you sure you want to change the base?

[pickers] Use context to pass props from the picker to the field #16042

Conversation

flaviendelangle commented Dec 31, 2024 • edited Loading

Follow up

mui-bot commented Dec 31, 2024 • edited Loading

github-actions bot commented Dec 31, 2024

flaviendelangle Jan 1, 2025

Choose a reason for hiding this comment

michelengelen Jan 7, 2025

Choose a reason for hiding this comment

flaviendelangle Jan 1, 2025

Choose a reason for hiding this comment

michelengelen Jan 7, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 7, 2025

LukasTy Jan 7, 2025

Choose a reason for hiding this comment

flaviendelangle Jan 8, 2025

Choose a reason for hiding this comment

LukasTy Jan 8, 2025

Choose a reason for hiding this comment

flaviendelangle commented Dec 31, 2024 •

edited

Loading

mui-bot commented Dec 31, 2024 •

edited

Loading