index.tsx

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 DefaultSettings, { localeProps } from 'config/defaultSettings';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

interface SelectLangProps {
  className?: string;
  locales: localeProps[];
}

const SelectLang: React.FC<SelectLangProps> = props => {
  const { className, locales } = props;
  const selectedLang = getLocale();
  const changeLang = ({ key }: ClickParam): void => setLocale(key, false);
  const langMenu = (
    <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={changeLang}>
      {locales.map(({ key, icon, label }) => (
        <Menu.Item key={key}>
          <span role="img" aria-label={label}>
            {icon}
          </span>{' '}
          {label}
        </Menu.Item>
      ))}
    </Menu>
  );
  return locales.length >= 1 ? (
    <HeaderDropdown overlay={langMenu} placement="bottomRight">
      <span className={classNames(styles.dropDown, className)}>
        <Icon type="global" title={formatMessage({ id: 'navBar.lang' })} />
      </span>
    </HeaderDropdown>
  ) : null;
};

export default SelectLang;