mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix up language dropdown

Browse source 
* Read languages from the available ones rather than the config
 * Make the search work (add searchEnabled=true)
 * Move variables to the class since they were populated there
This commit is contained in:
David Baker 2017-05-24 11:25:06 +01:00
parent a95f3252b8
commit c2df23395d
1 changed files with 28 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/components/views/elements/LanguageDropdown.js
View file

@ -20,11 +20,6 @@ import sdk from '../../../index';
import UserSettingsStore from '../../../UserSettingsStore';
import _t from 'counterpart-riot';
import * as languageHandler from '../../../languageHandler';
import SdkConfig from '../../../SdkConfig';
let LANGUAGES = [];
const LANGUAGES_BY_VALUE = new Object(null);
function languageMatchesSearchQuery(query, language) {
if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
@ -39,31 +34,28 @@ export default class LanguageDropdown extends React.Component {
this.state = {
searchQuery: '',
langs: null,
}
}
componentWillMount() {
const languageKeys = SdkConfig.get().languages;
// Build const LANGUAGES in a way that counterpart allows translation inside object:
languageKeys.forEach(function(languageKey) {
var l = {};
l.id = "language";
l.label = _t(languageKey);
l.value = languageKey;
LANGUAGES.push(l);
});
LANGUAGES = LANGUAGES.sort(function(a, b){
if(a.label < b.label) return -1;
if(a.label > b.label) return 1;
return 0;
})
for (const l of LANGUAGES) {
LANGUAGES_BY_VALUE[l.value] = l;
}
languageHandler.getAllLanguageKeysFromJson().then((langKeys) => {
const langs = [];
langKeys.forEach((languageKey) => {
langs.push({
value: languageKey,
label: _t(languageKey)
});
});
langs.sort(function(a, b){
if(a.label < b.label) return -1;
if(a.label > b.label) return 1;
return 0;
});
this.setState({langs});
}).catch(() => {
this.setState({langs: ['en']});
}).done();
if (!this.props.value) {
// If no value is given, we start with the first
@ -86,25 +78,20 @@ export default class LanguageDropdown extends React.Component {
}
render() {
if (this.state.langs === null) {
const Spinner = sdk.getComponent('elements.Spinner');
return <Spinner />;
}
const Dropdown = sdk.getComponent('elements.Dropdown');
let displayedLanguages;
if (this.state.searchQuery) {
displayedLanguages = LANGUAGES.filter(
languageMatchesSearchQuery.bind(this, this.state.searchQuery),
);
if (
this.state.searchQuery.length == 2 &&
LANGUAGES_BY_VALUE[this.state.searchQuery.toUpperCase()]
) {
const matched = LANGUAGES_BY_VALUE[this.state.searchQuery.toUpperCase()];
displayedLanguages = displayedLanguages.filter((l) => {
return l.id != matched.id;
});
displayedLanguages.unshift(matched);
}
displayedLanguages = this.state.langs.filter((lang) => {
return languageMatchesSearchQuery(this.state.searchQuery, lang);
});
} else {
displayedLanguages = LANGUAGES;
displayedLanguages = this.state.langs;
}
const options = displayedLanguages.map((language) => {
@ -126,7 +113,7 @@ export default class LanguageDropdown extends React.Component {
return <Dropdown className={this.props.className}
onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
value={value}
searchEnabled={true} value={value}
>
{options}
</Dropdown>