1
0
mirror of https://github.com/SomboChea/ui synced 2024-12-24 21:24:26 +07:00

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": {
"english": "Englisch",
"japanese": "Japanisch",
"portuguese": "Portugiesisch",
"spanish": "Spanisch",
"german": "Deutsch",

View File

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

View File

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

View File

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

View File

@ -135,5 +135,16 @@
"app-context-not-correct-used": "AppContextが正しく使用されませんでした",
"theme-context-not-correct-used": "ThemeContextが正しく使用されませんでした",
"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": {
"english": "Inglês",
"japanese": "Japonês",
"portuguese": "Português",
"spanish": "Espanhol",
"german": "Alemão",
@ -146,4 +147,4 @@
},
"help-to-translate": "Ajude a traduzir",
"change-language": "Mudar idioma"
}
}

View File

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

View File

@ -13,6 +13,7 @@ import austria from './img/austria.svg';
import spain from './img/spain.svg';
import usa from './img/usa.svg';
import france from './img/france.svg';
import japan from './img/japan.svg';
import earth from './img/earth.svg';
import verdaccio from './img/verdaccio.svg';
import filebinary from './img/filebinary.svg';
@ -32,6 +33,7 @@ export interface IconsMap {
france: string;
germany: string;
india: string;
japan: string;
earth: string;
verdaccio: string;
license: string;
@ -60,6 +62,7 @@ export const Icons: IconsMap = {
germany,
usa,
france,
japan,
};
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 MenuList from '@material-ui/core/MenuList';
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Language } from '../../../i18n/config';
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 getTranslatedCurrentLanguage = (
t: TFunction
): { [key: string]: { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } } => ({
'en-us': {
translation: t('lng.english'),
icon: 'usa',
},
'fr-fr': {
translation: t('lng.french'),
icon: 'france',
},
'pt-br': {
translation: t('lng.portuguese'),
icon: 'brazil',
},
'de-de': {
translation: t('lng.german'),
icon: 'germany',
},
'es-es': {
translation: t('lng.spanish'),
icon: 'spain',
},
'zh-cn': {
translation: t('lng.chinese'),
icon: 'china',
},
});
const getTranslatedCurrentLanguageDetails = (
t: TFunction,
currentLanguage: string
): { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } => {
switch (currentLanguage) {
case 'fr-FR':
return {
translation: t('lng.french'),
icon: 'france',
};
case 'pt-BR':
return {
translation: t('lng.portuguese'),
icon: 'brazil',
};
case 'de-DE':
return {
translation: t('lng.german'),
icon: 'germany',
};
case 'es-ES':
return {
translation: t('lng.spanish'),
icon: 'spain',
};
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 themeContext = useContext(ThemeContext);
@ -65,9 +78,9 @@ const LanguageSwitch = () => {
}
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(() => {
setOpen(prevOpen => !prevOpen);
@ -124,7 +137,7 @@ const LanguageSwitch = () => {
{languages
.filter(language => language !== currentLanguage)
.map(language => {
const { icon, translation } = getTranslatedCurrentLanguage(t)[language.toLowerCase()];
const { icon, translation } = getTranslatedCurrentLanguageDetails(t, language);
return (
<StyledMenuItem
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 i18next from 'i18next';
import { Language } from '../../i18n/config';
import ThemeContext from './ThemeContext';
import { getTheme, ThemeMode } from './theme';
import useLocalStorage from './useLocalStorage';
const ThemeProvider: React.FC = ({ children }) => {
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 [language, setLanguage] = useLocalStorage('language', currentLanguage);