fix(i18n): fixed current locale (#462)

* fix(i18n): fixed current locale

* Update i18n/translations/ja-JP.json

Co-Authored-By: hdmr14 <58992133+hdmr14@users.noreply.github.com>

Co-authored-by: hdmr14 <58992133+hdmr14@users.noreply.github.com>
This commit is contained in:
Priscila Oliveira 2020-04-27 21:36:40 +02:00 committed by GitHub
parent 730c3471c2
commit f44abd7dd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 73 additions and 41 deletions

View File

@ -138,6 +138,7 @@
}, },
"lng": { "lng": {
"english": "Englisch", "english": "Englisch",
"japanese": "Japanisch",
"portuguese": "Portugiesisch", "portuguese": "Portugiesisch",
"spanish": "Spanisch", "spanish": "Spanisch",
"german": "Deutsch", "german": "Deutsch",

View File

@ -138,6 +138,7 @@
}, },
"lng": { "lng": {
"english": "English", "english": "English",
"japanese": "Japanese",
"portuguese": "Portuguese", "portuguese": "Portuguese",
"spanish": "Spanish", "spanish": "Spanish",
"german": "German", "german": "German",
@ -146,4 +147,4 @@
}, },
"help-to-translate": "Help to translate", "help-to-translate": "Help to translate",
"change-language": "Change language" "change-language": "Change language"
} }

View File

@ -138,6 +138,7 @@
}, },
"lng": { "lng": {
"english": "Inglés", "english": "Inglés",
"japanese": "Japonés",
"portuguese": "Portugués", "portuguese": "Portugués",
"spanish": "Español", "spanish": "Español",
"german": "Alemán", "german": "Alemán",

View File

@ -138,6 +138,7 @@
}, },
"lng": { "lng": {
"english": "Anglaise", "english": "Anglaise",
"japanese": "Japonaise",
"portuguese": "Portugaise", "portuguese": "Portugaise",
"spanish": "Espagnol", "spanish": "Espagnol",
"german": "Allemande", "german": "Allemande",
@ -146,4 +147,4 @@
}, },
"help-to-translate": "Aide à traduire", "help-to-translate": "Aide à traduire",
"change-language": "Changer la langue" "change-language": "Changer la langue"
} }

View File

@ -135,5 +135,16 @@
"app-context-not-correct-used": "AppContextが正しく使用されませんでした", "app-context-not-correct-used": "AppContextが正しく使用されませんでした",
"theme-context-not-correct-used": "ThemeContextが正しく使用されませんでした", "theme-context-not-correct-used": "ThemeContextが正しく使用されませんでした",
"package-meta-is-required-at-detail-context": "DetailContextではpackageMetaが必要です" "package-meta-is-required-at-detail-context": "DetailContextではpackageMetaが必要です"
} },
} "lng": {
"english": "英語",
"japanese": "日本語",
"portuguese": "ポルトガル語",
"spanish": "スペイン語",
"german": "ドイツ語",
"chinese": "中国語",
"french": "フランス語"
},
"help-to-translate": "翻訳を助ける",
"change-language": "言語を変更"
}

View File

@ -138,6 +138,7 @@
}, },
"lng": { "lng": {
"english": "Inglês", "english": "Inglês",
"japanese": "Japonês",
"portuguese": "Português", "portuguese": "Português",
"spanish": "Espanhol", "spanish": "Espanhol",
"german": "Alemão", "german": "Alemão",
@ -146,4 +147,4 @@
}, },
"help-to-translate": "Ajude a traduzir", "help-to-translate": "Ajude a traduzir",
"change-language": "Mudar idioma" "change-language": "Mudar idioma"
} }

View File

@ -137,6 +137,7 @@
}, },
"lng": { "lng": {
"english": "英語", "english": "英語",
"japanese": "日語",
"portuguese": "葡萄牙語", "portuguese": "葡萄牙語",
"spanish": "西班牙文", "spanish": "西班牙文",
"german": "德語", "german": "德語",
@ -145,4 +146,4 @@
}, },
"help-to-translate": "幫助翻譯", "help-to-translate": "幫助翻譯",
"change-language": "改變語言" "change-language": "改變語言"
} }

View File

@ -13,6 +13,7 @@ import austria from './img/austria.svg';
import spain from './img/spain.svg'; import spain from './img/spain.svg';
import usa from './img/usa.svg'; import usa from './img/usa.svg';
import france from './img/france.svg'; import france from './img/france.svg';
import japan from './img/japan.svg';
import earth from './img/earth.svg'; import earth from './img/earth.svg';
import verdaccio from './img/verdaccio.svg'; import verdaccio from './img/verdaccio.svg';
import filebinary from './img/filebinary.svg'; import filebinary from './img/filebinary.svg';
@ -32,6 +33,7 @@ export interface IconsMap {
france: string; france: string;
germany: string; germany: string;
india: string; india: string;
japan: string;
earth: string; earth: string;
verdaccio: string; verdaccio: string;
license: string; license: string;
@ -60,6 +62,7 @@ export const Icons: IconsMap = {
germany, germany,
usa, usa,
france, france,
japan,
}; };
export interface Props { export interface Props {

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="japan"><path d="M473.655 88.275H38.345C17.167 88.275 0 105.442 0 126.62v258.76c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345V126.62c0-21.178-17.167-38.345-38.345-38.345z" fill="#f5f5f5"/><circle cx="256" cy="255.999" r="97.1" fill="#ff4b55"/></svg>

After

Width:  |  Height:  |  Size: 350 B

View File

@ -9,7 +9,6 @@ import Grow from '@material-ui/core/Grow';
import Popper from '@material-ui/core/Popper'; import Popper from '@material-ui/core/Popper';
import MenuList from '@material-ui/core/MenuList'; import MenuList from '@material-ui/core/MenuList';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Language } from '../../../i18n/config'; import { Language } from '../../../i18n/config';
import ThemeContext from '../../design-tokens/ThemeContext'; import ThemeContext from '../../design-tokens/ThemeContext';
@ -25,34 +24,48 @@ import Icon from '../Icon';
const VERDACCIO_UI_GITHUB_REPOSITORY = 'https://github.com/verdaccio/ui'; const VERDACCIO_UI_GITHUB_REPOSITORY = 'https://github.com/verdaccio/ui';
const getTranslatedCurrentLanguage = ( const getTranslatedCurrentLanguageDetails = (
t: TFunction t: TFunction,
): { [key: string]: { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } } => ({ currentLanguage: string
'en-us': { ): { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } => {
translation: t('lng.english'), switch (currentLanguage) {
icon: 'usa', case 'fr-FR':
}, return {
'fr-fr': { translation: t('lng.french'),
translation: t('lng.french'), icon: 'france',
icon: 'france', };
}, case 'pt-BR':
'pt-br': { return {
translation: t('lng.portuguese'), translation: t('lng.portuguese'),
icon: 'brazil', icon: 'brazil',
}, };
'de-de': { case 'de-DE':
translation: t('lng.german'), return {
icon: 'germany', translation: t('lng.german'),
}, icon: 'germany',
'es-es': { };
translation: t('lng.spanish'), case 'es-ES':
icon: 'spain', return {
}, translation: t('lng.spanish'),
'zh-cn': { icon: 'spain',
translation: t('lng.chinese'), };
icon: 'china', case 'zh-CN':
}, return {
}); translation: t('lng.chinese'),
icon: 'china',
};
case 'ja-JP':
return {
translation: t('lng.japanese'),
icon: 'japan',
};
default:
return {
translation: t('lng.english'),
icon: 'usa',
};
}
};
const LanguageSwitch = () => { const LanguageSwitch = () => {
const themeContext = useContext(ThemeContext); const themeContext = useContext(ThemeContext);
@ -65,9 +78,9 @@ const LanguageSwitch = () => {
} }
const languages = (i18next.options.resources ? Object.keys(i18next.options.resources) : []) as Array<Language>; const languages = (i18next.options.resources ? Object.keys(i18next.options.resources) : []) as Array<Language>;
const currentLanguage: Language = i18next.language || i18next.options?.fallbackLng?.[0]; const currentLanguage = themeContext.language;
const { translation: userLanguage } = getTranslatedCurrentLanguage(t)[currentLanguage.toLowerCase()]; const { translation: userLanguage } = getTranslatedCurrentLanguageDetails(t, currentLanguage);
const handleToggle = useCallback(() => { const handleToggle = useCallback(() => {
setOpen(prevOpen => !prevOpen); setOpen(prevOpen => !prevOpen);
@ -124,7 +137,7 @@ const LanguageSwitch = () => {
{languages {languages
.filter(language => language !== currentLanguage) .filter(language => language !== currentLanguage)
.map(language => { .map(language => {
const { icon, translation } = getTranslatedCurrentLanguage(t)[language.toLowerCase()]; const { icon, translation } = getTranslatedCurrentLanguageDetails(t, language);
return ( return (
<StyledMenuItem <StyledMenuItem
key={language} key={language}

View File

@ -3,15 +3,13 @@ import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
import i18next from 'i18next'; import i18next from 'i18next';
import { Language } from '../../i18n/config';
import ThemeContext from './ThemeContext'; import ThemeContext from './ThemeContext';
import { getTheme, ThemeMode } from './theme'; import { getTheme, ThemeMode } from './theme';
import useLocalStorage from './useLocalStorage'; import useLocalStorage from './useLocalStorage';
const ThemeProvider: React.FC = ({ children }) => { const ThemeProvider: React.FC = ({ children }) => {
const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode; const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode;
const currentLanguage: Language = i18next.language || i18next.options?.fallbackLng?.[0]; const currentLanguage = i18next.languages?.[0];
const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault); const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault);
const [language, setLanguage] = useLocalStorage('language', currentLanguage); const [language, setLanguage] = useLocalStorage('language', currentLanguage);