Added search to languages and timezone.

This commit is contained in:
Mike Cao 2024-01-03 10:17:27 -08:00
parent c24fe079f1
commit 1e0c177fe6
7 changed files with 36 additions and 10 deletions

View file

@ -1,13 +1,18 @@
import { useState } from 'react';
import { Dropdown, Item, Button, Flexbox } from 'react-basics';
import { listTimeZones } from 'timezone-support';
import useTimezone from 'components/hooks/useTimezone';
import useMessages from 'components/hooks/useMessages';
import { getTimezone } from 'lib/date';
import styles from './TimezoneSetting.module.css';
export function TimezoneSetting() {
const [search, setSearch] = useState('');
const { formatMessage, labels } = useMessages();
const [timezone, saveTimezone] = useTimezone();
const options = listTimeZones();
const options = search
? listTimeZones().filter(n => n.toLowerCase().includes(search.toLowerCase()))
: listTimeZones();
const handleReset = () => saveTimezone(getTimezone());
@ -17,8 +22,9 @@ export function TimezoneSetting() {
items={options}
value={timezone}
onSelect={saveTimezone}
style={{ flex: 1 }}
menuProps={{ style: { height: 300 } }}
menuProps={{ className: styles.menu }}
allowSearch={true}
onSearch={setSearch}
>
{item => <Item key={item}>{item}</Item>}
</Dropdown>