showSite?: boolean;
iconVersion?: boolean;
disabled?: boolean;
+ showLanguageWarning?: boolean;
}
export class LanguageSelect extends Component<LanguageSelectProps, any> {
// Necessary because there is no HTML way to set selected for multiple in value=
setSelectedValues() {
- let ids = this.props.selectedLanguageIds?.map(toString);
+ const ids = this.props.selectedLanguageIds?.map(toString);
if (ids) {
- let select = (document.getElementById(this.id) as HTMLSelectElement)
+ const select = (document.getElementById(this.id) as HTMLSelectElement)
.options;
for (let i = 0; i < select.length; i++) {
- let o = select[i];
+ const o = select[i];
if (ids.includes(o.value)) {
o.selected = true;
}
return this.props.iconVersion ? (
this.selectBtn
) : (
- <div>
- {this.props.multiple && (
+ <div className="language-select">
+ {this.props.multiple && this.props.showLanguageWarning && (
<div className="alert alert-warning" role="alert">
{i18n.t("undetermined_language_warning")}
</div>
)}
- <div className="form-group row">
+ <div className="mb-3 row">
<label
className={classNames(
"col-form-label",
>
{this.selectBtn}
{this.props.multiple && (
- <div className="input-group-append">
- <button
- className="input-group-text"
- onClick={linkEvent(this, this.handleDeselectAll)}
- >
- <Icon icon="x" />
- </button>
- </div>
+ <button
+ className="btn btn-outline-secondary"
+ onClick={linkEvent(this, this.handleDeselectAll)}
+ >
+ <Icon icon="x" />
+ </button>
)}
</div>
</div>
return (
<select
- className={classNames(
- "lang-select-action",
- this.props.iconVersion
- ? "btn btn-sm text-muted"
- : "form-control custom-select"
- )}
+ className={classNames("form-select w-auto", {
+ "d-inline-block": !this.props.iconVersion,
+ })}
id={this.id}
onChange={linkEvent(this, this.handleLanguageChange)}
aria-label={i18n.t("language_select_placeholder")}
}
handleLanguageChange(i: LanguageSelect, event: any) {
- let options: HTMLOptionElement[] = Array.from(event.target.options);
- let selected: number[] = options
+ const options: HTMLOptionElement[] = Array.from(event.target.options);
+ const selected: number[] = options
.filter(o => o.selected)
.map(o => Number(o.value));