From 59d64590a12a0ff8f1ea1d958a1e1e48a81f1b70 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Wed, 30 Nov 2022 14:13:32 -0600 Subject: [PATCH 1/8] Fix LocalesMenuButton Documentation --- docs/LocalesMenuButton.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index 5be787de94e..c15d1ee024f 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -11,7 +11,7 @@ The `` component, also known as the "language switcher", disp ## Usage -Add the `` to a custom ``: +Add the `` manually to a custom ``: ```jsx import { LocalesMenuButton, AppBar } from 'react-admin'; @@ -20,7 +20,11 @@ import { Typography } from '@mui/material'; export const MyAppBar = (props) => ( - + {/* Pass `availableLocales` as `languages` prop to `` here */} + ); ``` @@ -39,8 +43,8 @@ const MyLayout = (props) => ; const i18nProvider = polyglotI18nProvider( locale => (locale === 'fr' ? frenchMessages : englishMessages), - getLocales: () => [{ locale: 'en', name: 'English' }, { locale: 'fr', name: 'Français' }], 'en' // Default locale + // Skip `availableLocales` here so we don't have duplicate `` ); const App = () => ( @@ -54,7 +58,7 @@ const App = () => ( ); ``` -**Tip**: the `` will be added to the `` automatically if you have multiple locales declared in the `getLocales` method of your `i18nProvider`. +**Tip**: the `` will be added to the `` automatically if you have multiple locales declared in the `getLocales` method of your `i18nProvider`, or `availableLocales` parameter if you are using `polyglotI18nProvider`. ## `languages` From 0e9359bfeda43e99e151129f42c00466de5458e8 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 1 Dec 2022 13:14:35 -0600 Subject: [PATCH 2/8] apply review --- docs/LocalesMenuButton.md | 38 ++++++++++++++++++++++++-------------- docs/TranslationWriting.md | 5 ++++- 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index c15d1ee024f..cef11754bc7 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -11,20 +11,39 @@ The `` component, also known as the "language switcher", disp ## Usage -Add the `` manually to a custom ``: +For most users, this component will be automatically added to `` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component. + +For advanced users who wish to add `` elsewhere on the `` or in some custom configuation page, they can do the following: + +Define an `i18nProvider` (or `polyglotI18nProvider`) with `getLocales` (or `availableLocales`) omitted. ```jsx +// in src/i18nProvider.js +import polyglotI18nProvider from 'ra-i18n-polyglot'; +import englishMessages from 'ra-language-english'; +import frenchMessages from 'ra-language-french'; + +export const i18nProvider = polyglotI18nProvider( + locale => (locale === 'fr' ? frenchMessages : englishMessages), + 'en' // Default locale + // Omit optional `availableLocales` parameter here so we don't have duplicate `` in `` +); +``` + +Pass a list of supported locals as `languages` prop to `` and then add to the ``. + +```jsx +// in src/MyAppBar.js import { LocalesMenuButton, AppBar } from 'react-admin'; import { Typography } from '@mui/material'; export const MyAppBar = (props) => ( - - {/* Pass `availableLocales` as `languages` prop to `` here */} + ); ``` @@ -32,21 +51,14 @@ export const MyAppBar = (props) => ( Then, pass the custom App Bar in a custom ``, and the `` to your ``: ```jsx -import polyglotI18nProvider from 'ra-i18n-polyglot'; -import englishMessages from 'ra-language-english'; -import frenchMessages from 'ra-language-french'; +// in src/App.js import { Admin, Resource, Layout } from 'react-admin'; import { MyAppBar } from './MyAppBar'; +import { i18nProvider } from './i18nProvider' const MyLayout = (props) => ; -const i18nProvider = polyglotI18nProvider( - locale => (locale === 'fr' ? frenchMessages : englishMessages), - 'en' // Default locale - // Skip `availableLocales` here so we don't have duplicate `` -); - const App = () => ( ( ); ``` -**Tip**: the `` will be added to the `` automatically if you have multiple locales declared in the `getLocales` method of your `i18nProvider`, or `availableLocales` parameter if you are using `polyglotI18nProvider`. - ## `languages` An array of objects (`{ locale, name }`) representing the key and the label of the languages available to end users. You can omit this prop if your `i18nProvider` has a `getLocales` function. diff --git a/docs/TranslationWriting.md b/docs/TranslationWriting.md index 6c700b789f3..3dba0e420f2 100644 --- a/docs/TranslationWriting.md +++ b/docs/TranslationWriting.md @@ -5,14 +5,17 @@ title: "Writing An I18nProvider" # Writing An I18nProvider -An `i18nProvider` should be an object with three methods: +An `i18nProvider` should be an object with three required methods and one optional method: ```jsx // in src/i18nProvider.js export const i18nProvider = { + // required translate: (key, options) => string, changeLocale: locale => Promise, getLocale: () => string, + // optional + getLocales: () => [{ locale: string; name: string; }], } ``` From 391aa7241b35e11a748c208f78d615a152536d7a Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 1 Dec 2022 14:38:17 -0600 Subject: [PATCH 3/8] change some wording --- docs/LocalesMenuButton.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index cef11754bc7..a62ccdf2642 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -11,11 +11,11 @@ The `` component, also known as the "language switcher", disp ## Usage -For most users, this component will be automatically added to `` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component. +**Tip**: For most users, this component will be automatically added to `` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component. -For advanced users who wish to add `` elsewhere on the `` or in some custom configuation page, they can do the following: +For advanced users who wish to add `` elsewhere on the `` or to a custom configuation page, they can do the following: -Define an `i18nProvider` (or `polyglotI18nProvider`) with `getLocales` (or `availableLocales`) omitted. +Define an `i18nProvider` with `getLocales` omitted. (or `polyglotI18nProvider` with `availableLocales` omitted). ```jsx // in src/i18nProvider.js From 1b7d3e1e88842f0a0b28ac27c74611215f613acd Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 8 Dec 2022 11:53:29 -0600 Subject: [PATCH 4/8] Update docs/LocalesMenuButton.md Co-authored-by: Jean-Baptiste Kaiser --- docs/LocalesMenuButton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index a62ccdf2642..c39e00e9bc3 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -13,7 +13,7 @@ The `` component, also known as the "language switcher", disp **Tip**: For most users, this component will be automatically added to `` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component. -For advanced users who wish to add `` elsewhere on the `` or to a custom configuation page, they can do the following: +For advanced users who wish to add `` elsewhere on the `` or to a custom configuration page, they can do the following: Define an `i18nProvider` with `getLocales` omitted. (or `polyglotI18nProvider` with `availableLocales` omitted). From 61446f09679bdb50da98f2a0979dffb2a0d006dd Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 8 Dec 2022 11:53:46 -0600 Subject: [PATCH 5/8] Update docs/LocalesMenuButton.md Co-authored-by: Jean-Baptiste Kaiser --- docs/LocalesMenuButton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index c39e00e9bc3..b000f6329eb 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -30,7 +30,7 @@ export const i18nProvider = polyglotI18nProvider( ); ``` -Pass a list of supported locals as `languages` prop to `` and then add to the ``. +Pass a list of supported locales as `languages` prop to `` and then add to the ``. ```jsx // in src/MyAppBar.js From 4228a7856a9497c2d66c4a6a4236613c40f0945d Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Tue, 13 Dec 2022 21:41:35 -0600 Subject: [PATCH 6/8] Fix custom appbar example to use from mui package --- docs/LocalesMenuButton.md | 44 +++++++++++++++------------------------ 1 file changed, 17 insertions(+), 27 deletions(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index b000f6329eb..5d6947e9926 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -11,39 +11,21 @@ The `` component, also known as the "language switcher", disp ## Usage -**Tip**: For most users, this component will be automatically added to `` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component. +**Tip**: For most users, this component will be automatically added to react-admin's `` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component. -For advanced users who wish to add `` elsewhere on the `` or to a custom configuration page, they can do the following: - -Define an `i18nProvider` with `getLocales` omitted. (or `polyglotI18nProvider` with `availableLocales` omitted). - -```jsx -// in src/i18nProvider.js -import polyglotI18nProvider from 'ra-i18n-polyglot'; -import englishMessages from 'ra-language-english'; -import frenchMessages from 'ra-language-french'; - -export const i18nProvider = polyglotI18nProvider( - locale => (locale === 'fr' ? frenchMessages : englishMessages), - 'en' // Default locale - // Omit optional `availableLocales` parameter here so we don't have duplicate `` in `` -); -``` - -Pass a list of supported locales as `languages` prop to `` and then add to the ``. +For advanced users who wish to use the customized `` from MUI package or place `` elsewhere on the a custom configuration page, they can do the following: ```jsx // in src/MyAppBar.js -import { LocalesMenuButton, AppBar } from 'react-admin'; -import { Typography } from '@mui/material'; +import { LocalesMenuButton } from 'react-admin'; +import { AppBar, Toolbar, Typography } from '@mui/material'; export const MyAppBar = (props) => ( - - + + + + ); ``` @@ -52,13 +34,21 @@ Then, pass the custom App Bar in a custom ``, and the `` to your ```jsx // in src/App.js +import polyglotI18nProvider from 'ra-i18n-polyglot'; +import englishMessages from 'ra-language-english'; +import frenchMessages from 'ra-language-french'; import { Admin, Resource, Layout } from 'react-admin'; import { MyAppBar } from './MyAppBar'; -import { i18nProvider } from './i18nProvider' const MyLayout = (props) => ; +export const i18nProvider = polyglotI18nProvider( + locale => (locale === 'fr' ? frenchMessages : englishMessages), + 'en', // Default locale + [{ locale: 'en', name: 'English' }, { locale: 'fr', name: 'Français' }] +); + const App = () => ( Date: Tue, 13 Dec 2022 21:44:08 -0600 Subject: [PATCH 7/8] remove unnecessary export --- docs/LocalesMenuButton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index 5d6947e9926..04e6166b6d9 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -43,7 +43,7 @@ import { MyAppBar } from './MyAppBar'; const MyLayout = (props) => ; -export const i18nProvider = polyglotI18nProvider( +const i18nProvider = polyglotI18nProvider( locale => (locale === 'fr' ? frenchMessages : englishMessages), 'en', // Default locale [{ locale: 'en', name: 'English' }, { locale: 'fr', name: 'Français' }] From 87041952fe0aa65e3a056e824e7bc0c1a3f3f223 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Wed, 14 Dec 2022 10:00:06 -0600 Subject: [PATCH 8/8] Update docs/LocalesMenuButton.md Co-authored-by: Jean-Baptiste Kaiser --- docs/LocalesMenuButton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/LocalesMenuButton.md b/docs/LocalesMenuButton.md index 04e6166b6d9..a91e84261ac 100644 --- a/docs/LocalesMenuButton.md +++ b/docs/LocalesMenuButton.md @@ -13,7 +13,7 @@ The `` component, also known as the "language switcher", disp **Tip**: For most users, this component will be automatically added to react-admin's `` if the `i18nProvider` is configured properly to return a list of available locales. React-admin will use the optional `getLocales` method of your `i18nProvider` (or the `availableLocales` parameter if you are using `polyglotI18nProvider`) to generate a list of locale menu items for this component. -For advanced users who wish to use the customized `` from MUI package or place `` elsewhere on the a custom configuration page, they can do the following: +For advanced users who wish to use the customized `` from MUI package or place `` elsewhere e.g. on a custom configuration page, they can do the following: ```jsx // in src/MyAppBar.js