mirror of
https://github.com/kremalicious/umami.git
synced 2024-09-27 11:48:48 +02:00
43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
import React, { useState, useRef } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import Globe from 'assets/globe.svg';
|
|
import useDocumentClick from 'hooks/useDocumentClick';
|
|
import { updateApp } from 'redux/actions/app';
|
|
import Menu from './Menu';
|
|
import styles from './LanguageButton.module.css';
|
|
import Button from './Button';
|
|
|
|
const menuOptions = [
|
|
{ label: 'English', value: 'en' },
|
|
{ label: '中文 (Chinese)', value: 'zh-CN' },
|
|
];
|
|
|
|
export default function LanguageButton() {
|
|
const dispatch = useDispatch();
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
const locale = useSelector(state => state.app.locale);
|
|
const ref = useRef();
|
|
const selectedLocale = menuOptions.find(e => e.value === locale)?.label.split(' ')[0];
|
|
|
|
function handleSelect(value) {
|
|
dispatch(updateApp({ locale: value }));
|
|
window.localStorage.setItem('locale', value);
|
|
setShowMenu(false);
|
|
}
|
|
|
|
useDocumentClick(e => {
|
|
if (!ref.current.contains(e.target)) {
|
|
setShowMenu(false);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div ref={ref} className={styles.container}>
|
|
<Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
|
|
<div>{selectedLocale}</div>
|
|
</Button>
|
|
{showMenu && <Menu options={menuOptions} onSelect={handleSelect} float="top" />}
|
|
</div>
|
|
);
|
|
}
|