2024-02-04 16:44:20 +08:00
|
|
|
'use client';
|
2024-01-04 02:17:27 +08:00
|
|
|
import { useState } from 'react';
|
2023-01-11 09:18:59 +08:00
|
|
|
import { Button, Dropdown, Item, Flexbox } from 'react-basics';
|
2024-01-29 17:32:05 +08:00
|
|
|
import { useLocale, useMessages } from 'components/hooks';
|
2022-03-01 12:54:32 +08:00
|
|
|
import { DEFAULT_LOCALE } from 'lib/constants';
|
2022-11-08 14:35:51 +08:00
|
|
|
import { languages } from 'lib/lang';
|
2024-01-04 02:17:27 +08:00
|
|
|
import styles from './LanguageSetting.module.css';
|
2023-01-11 09:18:59 +08:00
|
|
|
|
2023-04-21 23:00:42 +08:00
|
|
|
export function LanguageSetting() {
|
2024-01-04 02:17:27 +08:00
|
|
|
const [search, setSearch] = useState('');
|
2023-03-23 05:05:55 +08:00
|
|
|
const { formatMessage, labels } = useMessages();
|
2022-03-01 12:54:32 +08:00
|
|
|
const { locale, saveLocale } = useLocale();
|
2024-01-04 02:17:27 +08:00
|
|
|
const options = search
|
|
|
|
? Object.keys(languages).filter(n => {
|
|
|
|
return (
|
|
|
|
n.toLowerCase().includes(search.toLowerCase()) ||
|
|
|
|
languages[n].label.toLowerCase().includes(search.toLowerCase())
|
|
|
|
);
|
|
|
|
})
|
|
|
|
: Object.keys(languages);
|
2022-03-01 12:54:32 +08:00
|
|
|
|
2023-01-12 00:33:43 +08:00
|
|
|
const handleReset = () => saveLocale(DEFAULT_LOCALE);
|
|
|
|
|
2024-01-04 02:17:27 +08:00
|
|
|
const renderValue = (value: string | number) => languages[value].label;
|
2022-03-01 12:54:32 +08:00
|
|
|
|
|
|
|
return (
|
2023-04-13 08:43:08 +08:00
|
|
|
<Flexbox gap={10}>
|
2023-01-19 07:05:39 +08:00
|
|
|
<Dropdown
|
|
|
|
items={options}
|
|
|
|
value={locale}
|
|
|
|
renderValue={renderValue}
|
2024-01-30 16:10:25 +08:00
|
|
|
onChange={val => saveLocale(val as string)}
|
2024-01-04 02:17:27 +08:00
|
|
|
allowSearch={true}
|
|
|
|
onSearch={setSearch}
|
|
|
|
menuProps={{ className: styles.menu }}
|
2023-01-19 07:05:39 +08:00
|
|
|
>
|
2023-01-11 09:18:59 +08:00
|
|
|
{item => <Item key={item}>{languages[item].label}</Item>}
|
|
|
|
</Dropdown>
|
2023-01-25 23:42:46 +08:00
|
|
|
<Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
|
2023-01-11 09:18:59 +08:00
|
|
|
</Flexbox>
|
2022-03-01 12:54:32 +08:00
|
|
|
);
|
|
|
|
}
|
2023-04-21 23:00:42 +08:00
|
|
|
|
|
|
|
export default LanguageSetting;
|