You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.5 KiB
50 lines
1.5 KiB
import { Icon, Menu } from 'antd';
|
|
import { formatMessage, getLocale, setLocale } from 'umi-plugin-react/locale';
|
|
import { ClickParam } from 'antd/es/menu';
|
|
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import HeaderDropdown from '../HeaderDropdown';
|
|
import styles from './index.less';
|
|
|
|
interface SelectLangProps {
|
|
className?: string;
|
|
}
|
|
const SelectLang: React.FC<SelectLangProps> = props => {
|
|
const { className } = props;
|
|
const selectedLang = getLocale();
|
|
const changeLang = ({ key }: ClickParam): void => setLocale(key, false);
|
|
const locales = ['zh-CN', 'zh-TW', 'en-US', 'pt-BR'];
|
|
const languageLabels = {
|
|
'zh-CN': '简体中文',
|
|
'zh-TW': '繁体中文',
|
|
'en-US': 'English',
|
|
'pt-BR': 'Português',
|
|
};
|
|
const languageIcons = {
|
|
'zh-CN': '🇨🇳',
|
|
'zh-TW': '🇭🇰',
|
|
'en-US': '🇬🇧',
|
|
'pt-BR': '🇧🇷',
|
|
};
|
|
const langMenu = (
|
|
<Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={changeLang}>
|
|
{locales.map(locale => (
|
|
<Menu.Item key={locale}>
|
|
<span role="img" aria-label={languageLabels[locale]}>
|
|
{languageIcons[locale]}
|
|
</span>{' '}
|
|
{languageLabels[locale]}
|
|
</Menu.Item>
|
|
))}
|
|
</Menu>
|
|
);
|
|
return (
|
|
<HeaderDropdown overlay={langMenu} placement="bottomRight">
|
|
<span className={classNames(styles.dropDown, className)}>
|
|
<Icon type="global" title={formatMessage({ id: 'navBar.lang' })} />
|
|
</span>
|
|
</HeaderDropdown>
|
|
);
|
|
};
|
|
|
|
export default SelectLang;
|
|
|