2022-03-16 06:26:15 +00:00
|
|
|
import { Selector, SelectorOption, SelectorProps } from "@/components";
|
|
|
|
import { useMemo } from "react";
|
2021-03-25 14:22:43 +00:00
|
|
|
|
|
|
|
interface Props {
|
2021-08-14 12:59:08 +00:00
|
|
|
options: readonly Language.Info[];
|
2021-03-25 14:22:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
type RemovedSelectorProps<M extends boolean> = Omit<
|
2021-08-14 12:59:08 +00:00
|
|
|
SelectorProps<Language.Info, M>,
|
2021-08-24 16:33:59 +00:00
|
|
|
"label"
|
2021-03-25 14:22:43 +00:00
|
|
|
>;
|
|
|
|
|
|
|
|
export type LanguageSelectorProps<M extends boolean> = Override<
|
|
|
|
Props,
|
|
|
|
RemovedSelectorProps<M>
|
|
|
|
>;
|
|
|
|
|
2021-08-14 12:59:08 +00:00
|
|
|
function getLabel(lang: Language.Info) {
|
2021-04-21 15:14:54 +00:00
|
|
|
return lang.name;
|
|
|
|
}
|
|
|
|
|
2021-03-25 14:22:43 +00:00
|
|
|
export function LanguageSelector<M extends boolean = false>(
|
|
|
|
props: LanguageSelectorProps<M>
|
|
|
|
) {
|
|
|
|
const { options, ...selector } = props;
|
|
|
|
|
2021-08-14 12:59:08 +00:00
|
|
|
const items = useMemo<SelectorOption<Language.Info>[]>(
|
2021-03-25 14:22:43 +00:00
|
|
|
() =>
|
|
|
|
options.map((v) => ({
|
|
|
|
label: v.name,
|
|
|
|
value: v,
|
|
|
|
})),
|
|
|
|
[options]
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Selector
|
|
|
|
placeholder="Language..."
|
|
|
|
options={items}
|
2021-04-21 15:14:54 +00:00
|
|
|
label={getLabel}
|
2021-03-25 14:22:43 +00:00
|
|
|
{...selector}
|
|
|
|
></Selector>
|
|
|
|
);
|
|
|
|
}
|