diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index 6baa34ec80ba..4b82d53359c3 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -259,24 +259,61 @@ const theme = createTheme({ ## Stop passing `utils` and the date/time object to some translation keys -The following translation keys expect to receive a function: `openDatePickerDialogue`, `openTimePickerDialogue`, or `clockLabelText`. If you are customizing the translation of those keys, you no longer need to provide `utils` and the date/time object to it, but only the formatted date/time value as a string. This affects the customization of those translation keys that on different contexts: +If you are customizing the translation of those keys, you no longer need to provide `utils` and the date/time object to it, but only the formatted date/time value as a string. -Translations on a single component: +When migrating to v8, you must have a small refactor on the usage of those keys: -```diff -- string; }} /> -+ string; }} /> -``` +- `openDatePickerDialogue`: -Translations on custom components passed as slots: + ```diff + // If you are setting a custom value in a picker component + - string; }} /> + + string; }} /> -```diff - const translations = useTranslations(); --const openDatePickerDialogue = translations.openTimePickerDialogue(value, {} as any, value == null ? null : value.format('MM/DD/YYY')); -+const openDatePickerDialogue = translations.openDatePickerDialogue(value == null ? null : value.format('MM/DD/YYY')); -``` + // If you are setting a custom value in the `LocalizationProvider` + - string; }} > + + string; }} > + + // If you using this translation key in a custom component + const translations = useTranslations(); + -const openDatePickerDialogue = translations.openDatePickerDialogue(value, {} as any, value == null ? null : value.format('MM/DD/YYY')); + +const openDatePickerDialogue = translations.openDatePickerDialogue(value == null ? null : value.format('MM/DD/YYY')); + ``` + + - `openTimePickerDialogue`: + + ```diff + // If you are setting a custom value in a picker component or in the `LocalizationProvider` + - string; }} /> + + string; }} /> -Notice that `clockLabelText` expects an additional parameter with the time view. + // If you are setting a custom value in the `LocalizationProvider` + - string; }} > + + string; }} > + + // If you using this translation key in a custom component + const translations = useTranslations(); + -const openTimePickerDialogue = translations.openTimePickerDialogue(value, {} as any, value == null ? null : value.format('hh:mm:ss')); + +const openTimePickerDialogue = translations.openTimePickerDialogue(value == null ? null : value.format('hh:mm:ss')); + ``` + + - `clockLabelText`: + + ```diff + // If you are setting a custom value in a picker component or in the `LocalizationProvider` + - string; }} /> + + string; }} /> + + // If you are setting a custom value in the `LocalizationProvider` + - string; }} > + + string; }} > + + + // If you using this translation key in a custom component + const translations = useTranslations(); + -const clockLabelText = translations.clockLabelText(view, value, {} as any, value == null ? null : value.format('hh:mm:ss')); + +const clockLabelText = translations.clockLabelText(view, value == null ? null : value.format('hh:mm:ss')); + ``` Also the following types and interfaces no longer receive a generic type parameter: