67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import React, { useState } from "react";
|
|
|
|
import { Button, Dropdown, Flag } from "components";
|
|
import { useLocaleState } from "context";
|
|
import { changeLocale, getFlagCodeForLocale, getLocale, intl } from "locale";
|
|
|
|
export interface LocalPickerProps {
|
|
/**
|
|
* On click handler
|
|
*/
|
|
onChange?: any;
|
|
}
|
|
|
|
export const LocalePicker: React.FC<LocalPickerProps> = ({
|
|
onChange,
|
|
...rest
|
|
}) => {
|
|
const { locale, setLocale } = useLocaleState();
|
|
|
|
// const [locale, setLocale] = useState(getLocale());
|
|
const [localeShown, setLocaleShown] = useState(false);
|
|
|
|
const handleOnChange = (e: any) => {
|
|
changeLocale(e.currentTarget.rel);
|
|
setLocale(e.currentTarget.rel);
|
|
setLocaleShown(false);
|
|
onChange && onChange(locale);
|
|
};
|
|
|
|
const options = [
|
|
["us", "en-US"],
|
|
["de", "de-DE"],
|
|
["ir", "fa-IR"],
|
|
];
|
|
|
|
return (
|
|
<div className="dropdown" {...rest}>
|
|
<Button
|
|
shape="ghost"
|
|
onClick={(e: any) => {
|
|
setLocaleShown(!localeShown);
|
|
e.preventDefault();
|
|
}}
|
|
iconOnly>
|
|
<Flag country={getFlagCodeForLocale(locale)} />
|
|
</Button>
|
|
<Dropdown
|
|
className="dropdown-menu-end dropdown-menu-card"
|
|
show={localeShown}>
|
|
{options.map((item) => {
|
|
return (
|
|
<Dropdown.Item
|
|
key={`locale-${item[0]}`}
|
|
rel={item[1]}
|
|
icon={<Flag country={item[0]} />}
|
|
onClick={handleOnChange}>
|
|
{intl.formatMessage({
|
|
id: `locale-${item[1]}`,
|
|
defaultMessage: item[1],
|
|
})}
|
|
</Dropdown.Item>
|
|
);
|
|
})}
|
|
</Dropdown>
|
|
</div>
|
|
);
|
|
};
|