import classNames from "classnames"; import { Component, linkEvent } from "inferno"; import { Language } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { UserService } from "../../services/UserService"; import { randomStr, selectableLanguages } from "../../utils"; import { Icon } from "./icon"; interface LanguageSelectProps { allLanguages: Language[]; siteLanguages: number[]; selectedLanguageIds?: number[]; multiple?: boolean; onChange(val: number[]): any; showAll?: boolean; showSite?: boolean; iconVersion?: boolean; disabled?: boolean; showLanguageWarning?: boolean; } export class LanguageSelect extends Component { private id = `language-select-${randomStr()}`; constructor(props: any, context: any) { super(props, context); } componentDidMount() { this.setSelectedValues(); } // Necessary because there is no HTML way to set selected for multiple in value= setSelectedValues() { const ids = this.props.selectedLanguageIds?.map(toString); if (ids) { const select = (document.getElementById(this.id) as HTMLSelectElement) .options; for (let i = 0; i < select.length; i++) { const o = select[i]; if (ids.includes(o.value)) { o.selected = true; } } } } render() { return this.props.iconVersion ? ( this.selectBtn ) : (
{this.props.multiple && this.props.showLanguageWarning && (
{i18n.t("undetermined_language_warning")}
)}
{this.selectBtn} {this.props.multiple && (
)}
); } get selectBtn() { const selectedLangs = this.props.selectedLanguageIds; const filteredLangs = selectableLanguages( this.props.allLanguages, this.props.siteLanguages, this.props.showAll, this.props.showSite, UserService.Instance.myUserInfo ); return ( ); } handleLanguageChange(i: LanguageSelect, event: any) { const options: HTMLOptionElement[] = Array.from(event.target.options); const selected: number[] = options .filter(o => o.selected) .map(o => Number(o.value)); i.props.onChange(selected); } handleDeselectAll(i: LanguageSelect, event: any) { event.preventDefault(); i.props.onChange([]); } }