diff --git a/i18n/translations/de-DE.json b/i18n/translations/de-DE.json index 3645085..74de61e 100644 --- a/i18n/translations/de-DE.json +++ b/i18n/translations/de-DE.json @@ -138,6 +138,7 @@ }, "lng": { "english": "Englisch", + "japanese": "Japanisch", "portuguese": "Portugiesisch", "spanish": "Spanisch", "german": "Deutsch", diff --git a/i18n/translations/en-US.json b/i18n/translations/en-US.json index 657861a..cc3b09c 100644 --- a/i18n/translations/en-US.json +++ b/i18n/translations/en-US.json @@ -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" -} \ No newline at end of file +} diff --git a/i18n/translations/es-ES.json b/i18n/translations/es-ES.json index 62e42d1..55352ed 100644 --- a/i18n/translations/es-ES.json +++ b/i18n/translations/es-ES.json @@ -138,6 +138,7 @@ }, "lng": { "english": "Inglés", + "japanese": "Japonés", "portuguese": "Portugués", "spanish": "Español", "german": "Alemán", diff --git a/i18n/translations/fr-FR.json b/i18n/translations/fr-FR.json index 26376d0..32581f0 100644 --- a/i18n/translations/fr-FR.json +++ b/i18n/translations/fr-FR.json @@ -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" -} \ No newline at end of file +} diff --git a/i18n/translations/ja-JP.json b/i18n/translations/ja-JP.json index ea1be0c..af881ca 100644 --- a/i18n/translations/ja-JP.json +++ b/i18n/translations/ja-JP.json @@ -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が必要です" - } -} \ No newline at end of file + }, + "lng": { + "english": "英語", + "japanese": "日本語", + "portuguese": "ポルトガル語", + "spanish": "スペイン語", + "german": "ドイツ語", + "chinese": "中国語", + "french": "フランス語" + }, + "help-to-translate": "翻訳を助ける", + "change-language": "言語を変更" +} diff --git a/i18n/translations/pt-BR.json b/i18n/translations/pt-BR.json index 8dabcc0..7572ea6 100644 --- a/i18n/translations/pt-BR.json +++ b/i18n/translations/pt-BR.json @@ -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" -} \ No newline at end of file +} diff --git a/i18n/translations/zh-CN.json b/i18n/translations/zh-CN.json index 800436a..3e243c2 100644 --- a/i18n/translations/zh-CN.json +++ b/i18n/translations/zh-CN.json @@ -137,6 +137,7 @@ }, "lng": { "english": "英語", + "japanese": "日語", "portuguese": "葡萄牙語", "spanish": "西班牙文", "german": "德語", @@ -145,4 +146,4 @@ }, "help-to-translate": "幫助翻譯", "change-language": "改變語言" -} \ No newline at end of file +} diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 0987f1f..bca5ebd 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -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 { diff --git a/src/components/Icon/img/japan.svg b/src/components/Icon/img/japan.svg new file mode 100644 index 0000000..daa3687 --- /dev/null +++ b/src/components/Icon/img/japan.svg @@ -0,0 +1 @@ + diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index 4ff2654..8480e3e 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/src/components/LanguageSwitch/LanguageSwitch.tsx @@ -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['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['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; - 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 ( { 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);