mirror of
https://github.com/SomboChea/ui
synced 2024-11-05 06:04:28 +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:
parent
730c3471c2
commit
f44abd7dd0
@ -138,6 +138,7 @@
|
||||
},
|
||||
"lng": {
|
||||
"english": "Englisch",
|
||||
"japanese": "Japanisch",
|
||||
"portuguese": "Portugiesisch",
|
||||
"spanish": "Spanisch",
|
||||
"german": "Deutsch",
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -138,6 +138,7 @@
|
||||
},
|
||||
"lng": {
|
||||
"english": "Inglés",
|
||||
"japanese": "Japonés",
|
||||
"portuguese": "Portugués",
|
||||
"spanish": "Español",
|
||||
"german": "Alemán",
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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": "言語を変更"
|
||||
}
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -137,6 +137,7 @@
|
||||
},
|
||||
"lng": {
|
||||
"english": "英語",
|
||||
"japanese": "日語",
|
||||
"portuguese": "葡萄牙語",
|
||||
"spanish": "西班牙文",
|
||||
"german": "德語",
|
||||
@ -145,4 +146,4 @@
|
||||
},
|
||||
"help-to-translate": "幫助翻譯",
|
||||
"change-language": "改變語言"
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
1
src/components/Icon/img/japan.svg
Normal file
1
src/components/Icon/img/japan.svg
Normal 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 |
@ -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}
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user