From 1ee606c693fb3caa9ff8c00aba8f34f45c5cf491 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 15 Sep 2021 20:35:30 +0200
Subject: [PATCH] Convert LanguageDropdown to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 ...nguageDropdown.js => LanguageDropdown.tsx} | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)
 rename src/components/views/elements/{LanguageDropdown.js => LanguageDropdown.tsx} (84%)

diff --git a/src/components/views/elements/LanguageDropdown.js b/src/components/views/elements/LanguageDropdown.tsx
similarity index 84%
rename from src/components/views/elements/LanguageDropdown.js
rename to src/components/views/elements/LanguageDropdown.tsx
index 3f17a78629..c6c52ee4e8 100644
--- a/src/components/views/elements/LanguageDropdown.js
+++ b/src/components/views/elements/LanguageDropdown.tsx
@@ -16,13 +16,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import * as sdk from '../../../index';
 import * as languageHandler from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from "./Spinner";
+import Dropdown from "./Dropdown";
 
 function languageMatchesSearchQuery(query, language) {
     if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
@@ -30,11 +30,22 @@ function languageMatchesSearchQuery(query, language) {
     return false;
 }
 
+interface IProps {
+    className?: string;
+    onOptionChange: (language: string) => void;
+    value?: string;
+    disabled?: boolean;
+}
+
+interface IState {
+    searchQuery: string;
+    langs: string[];
+}
+
 @replaceableComponent("views.elements.LanguageDropdown")
-export default class LanguageDropdown extends React.Component {
-    constructor(props) {
+export default class LanguageDropdown extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
-        this._onSearchChange = this._onSearchChange.bind(this);
 
         this.state = {
             searchQuery: '',
@@ -42,7 +53,7 @@ export default class LanguageDropdown extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         languageHandler.getAllLanguagesFromJson().then((langs) => {
             langs.sort(function(a, b) {
                 if (a.label < b.label) return -1;
@@ -63,20 +74,17 @@ export default class LanguageDropdown extends React.Component {
         }
     }
 
-    _onSearchChange(search) {
+    private onSearchChange = (search: string): void => {
         this.setState({
             searchQuery: search,
         });
-    }
+    };
 
-    render() {
+    public render(): JSX.Element {
         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 = this.state.langs.filter((lang) => {
@@ -107,7 +115,7 @@ export default class LanguageDropdown extends React.Component {
             id="mx_LanguageDropdown"
             className={this.props.className}
             onOptionChange={this.props.onOptionChange}
-            onSearchChange={this._onSearchChange}
+            onSearchChange={this.onSearchChange}
             searchEnabled={true}
             value={value}
             label={_t("Language Dropdown")}
@@ -118,8 +126,3 @@ export default class LanguageDropdown extends React.Component {
     }
 }
 
-LanguageDropdown.propTypes = {
-    className: PropTypes.string,
-    onOptionChange: PropTypes.func.isRequired,
-    value: PropTypes.string,
-};