1 import { Option } from "@sniptt/monads";
2 import classNames from "classnames";
3 import { Component, linkEvent } from "inferno";
4 import { Language } from "lemmy-js-client";
5 import { i18n } from "../../i18next";
6 import { randomStr } from "../../utils";
7 import { Icon } from "./icon";
9 interface LanguageSelectProps {
10 allLanguages: Language[];
11 selectedLanguageIds: Option<number[]>;
13 onChange(val: number[]): any;
16 export class LanguageSelect extends Component<LanguageSelectProps, any> {
17 private id = `language-select-${randomStr()}`;
19 constructor(props: any, context: any) {
20 super(props, context);
24 this.setSelectedValues();
27 // Necessary because there is no HTML way to set selected for multiple in value=
29 this.props.selectedLanguageIds.map(toString).match({
31 var select = (document.getElementById(this.id) as HTMLSelectElement)
33 for (let i = 0; i < select.length; i++) {
35 if (ids.includes(o.value)) {
45 let selectedLangs = this.props.selectedLanguageIds;
48 <div className="form-group row">
50 className={classNames("col-form-label", {
51 "col-sm-3": this.props.multiple,
52 "col-sm-2": !this.props.multiple,
56 {i18n.t(this.props.multiple ? "language_plural" : "language")}
59 className={classNames("input-group", {
60 "col-sm-9": this.props.multiple,
61 "col-sm-10": !this.props.multiple,
65 className="form-control custom-select"
67 onChange={linkEvent(this, this.handleLanguageChange)}
69 multiple={this.props.multiple}
71 {this.props.allLanguages.map(l => (
75 selected={selectedLangs.unwrapOr([]).includes(l.id)}
81 {this.props.multiple && (
82 <div className="input-group-append">
84 className="input-group-text"
85 onClick={linkEvent(this, this.handleDeselectAll)}
96 handleLanguageChange(i: LanguageSelect, event: any) {
97 let options: HTMLOptionElement[] = Array.from(event.target.options);
98 let selected: number[] = options
99 .filter(o => o.selected)
100 .map(o => Number(o.value));
102 i.props.onChange(selected);
105 handleDeselectAll(i: LanguageSelect, event: any) {
106 event.preventDefault();
107 i.props.onChange([]);