2020-01-22 16:25:04 +02:00
|
|
|
import React from "react";
|
2020-03-07 10:20:38 -05:00
|
|
|
import * as i18n from "../i18n";
|
2020-01-22 16:25:04 +02:00
|
|
|
|
2020-03-07 10:20:38 -05:00
|
|
|
export function LanguageList({
|
2020-01-31 21:06:06 +00:00
|
|
|
onChange,
|
2020-03-07 10:20:38 -05:00
|
|
|
languages = i18n.languages,
|
|
|
|
currentLanguage = i18n.getLanguage(),
|
2020-02-21 14:34:18 -05:00
|
|
|
floating,
|
2020-01-22 16:25:04 +02:00
|
|
|
}: {
|
2020-03-07 10:20:38 -05:00
|
|
|
languages?: { lng: string; label: string }[];
|
2020-01-31 21:06:06 +00:00
|
|
|
onChange: (value: string) => void;
|
2020-03-07 10:20:38 -05:00
|
|
|
currentLanguage?: string;
|
2020-02-21 14:34:18 -05:00
|
|
|
floating?: boolean;
|
2020-01-22 16:25:04 +02:00
|
|
|
}) {
|
|
|
|
return (
|
2020-01-24 19:10:44 +01:00
|
|
|
<React.Fragment>
|
|
|
|
<select
|
2020-02-21 14:34:18 -05:00
|
|
|
className={`dropdown-select dropdown-select__language${
|
|
|
|
floating ? " dropdown-select--floating" : ""
|
|
|
|
}`}
|
2020-01-31 21:06:06 +00:00
|
|
|
onChange={({ target }) => onChange(target.value)}
|
2020-01-24 19:10:44 +01:00
|
|
|
value={currentLanguage}
|
2020-03-07 10:20:38 -05:00
|
|
|
aria-label={i18n.t("buttons.selectLanguage")}
|
2020-01-24 19:10:44 +01:00
|
|
|
>
|
2020-03-23 13:05:07 +02:00
|
|
|
{languages.map((language) => (
|
2020-01-24 19:10:44 +01:00
|
|
|
<option key={language.lng} value={language.lng}>
|
2020-01-22 16:25:04 +02:00
|
|
|
{language.label}
|
2020-01-24 19:10:44 +01:00
|
|
|
</option>
|
|
|
|
))}
|
|
|
|
</select>
|
|
|
|
</React.Fragment>
|
2020-01-22 16:25:04 +02:00
|
|
|
);
|
|
|
|
}
|