jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-04-27 07:48:01 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Webatrice: improve language dropdown (#4589)

Browse source 
* useLocaleSort hook, translate language dropdown

* add pt-BR translation

* fix pt-BR flag

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2022-03-06 20:12:27 -06:00 • committed by GitHub
parent 21f7dd5eba
commit 533045445a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 314 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

29
webclient/src/components/CountryDropdown/CountryDropdown.tsx
View file

@ -1,29 +1,24 @@
// eslint-disable-next-line
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { Select, MenuItem } from '@material-ui/core';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { useTranslation } from 'react-i18next';
import { useLocaleSort } from 'hooks';
import { Images } from 'images/Images';
import { CountryCode } from 'types';
import { countryCodes } from 'types';
import './CountryDropdown.css';
const CountryDropdown = ({ input: { onChange } }) => {
const [state, setState] = useState('');
const [sortedCountries, setSortedCountries] = useState([]);
const { t, i18n } = useTranslation();
const [value, setValue] = useState('');
const { t } = useTranslation();
useEffect(() => onChange(state), [state]);
useEffect(() => onChange(value), [value]);
useEffect(() => {
const collator = new Intl.Collator(i18n.language);
setSortedCountries(Object.keys(CountryCode).sort((a, b) =>
collator.compare(t(`Common.countries.${a}`), t(`Common.countries.${b}`))
));
}, [i18n.language]);
const translateCountry = country => t(`Common.countries.${country}`);
const sortedCountries = useLocaleSort(countryCodes, translateCountry);
return (
<FormControl variant='outlined' className='CountryDropdown'>
@ -33,9 +28,9 @@ const CountryDropdown = ({ input: { onChange } }) => {
labelId='CountryDropdown-label'
label='Country'
margin='dense'
value={state}
value={value}
fullWidth={true}
onChange={e => setState(e.target.value as string)}
onChange={e => setValue(e.target.value as string)}
>
<MenuItem value={''} key={-1}>
<div className="CountryDropdown-item">
@ -48,7 +43,7 @@ const CountryDropdown = ({ input: { onChange } }) => {
<MenuItem value={country} key={index}>
<div className="CountryDropdown-item">
<img className="CountryDropdown-item__image" src={Images.Countries[country.toLowerCase()]} />
<span className="CountryDropdown-item__label">{t(`Common.countries.${country}`)}</span>
<span className="CountryDropdown-item__label">{translateCountry(country)}</span>
</div>
</MenuItem>
))

14
webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
View file

@ -6,12 +6,12 @@ import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { Images } from 'images/Images';
import { Language, LanguageCountry } from 'types';
import { Language, LanguageCountry, LanguageNative } from 'types';
import './LanguageDropdown.css';
const LanguageDropdown = () => {
const { i18n } = useTranslation();
const { t, i18n } = useTranslation();
const [language, setLanguage] = useState(i18n.resolvedLanguage);
useEffect(() => {
@ -30,14 +30,20 @@ const LanguageDropdown = () => {
onChange={e => setLanguage(e.target.value as Language)}
>
{
Object.keys(LanguageCountry).map((lang) => {
Object.keys(Language).map((lang) => {
const country = LanguageCountry[lang];
return (
<MenuItem value={lang} key={lang}>
<div className="LanguageDropdown-item">
<img className="LanguageDropdown-item__image" src={Images.Countries[country]} />
<span className="LanguageDropdown-item__label">{lang}</span>
<span className="LanguageDropdown-item__label">
{LanguageNative[lang]} {
LanguageNative[lang] !== t(`Common.languages.${lang}`) && (
<>({ t(`Common.languages.${lang}`) })</>
)
}
</span>
</div>
</MenuItem>
);