Convert TextInputDialog to TS

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/dialogs/TextInputDialog.tsx

@@ -14,33 +14,39 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
+import React, { ChangeEvent, createRef } from 'react';
 import Field from "../elements/Field";
 import { _t, _td } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { IFieldState, IValidationResult } from "../elements/Validation";
+import BaseDialog from "./BaseDialog";
+import DialogButtons from "../elements/DialogButtons";
+
+ interface IProps {
+    title?: string;
+    description?: string | JSX.Element;
+    value?: string;
+    placeholder?: string;
+    button?: string;
+    busyMessage?: string; // pass _td string
+    focus?: boolean;
+    onFinished: (success: boolean, value?: string) => void;
+    hasCancel?: boolean;
+    validator?: (fieldState: IFieldState) => IValidationResult; // result of withValidation
+    fixedWidth?: boolean;
+}
+
+interface IState {
+    value: string;
+    busy: boolean;
+    valid: boolean;
+}
 
 @replaceableComponent("views.dialogs.TextInputDialog")
-export default class TextInputDialog extends React.Component {
-    static propTypes = {
-        title: PropTypes.string,
-        description: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.string,
-        ]),
-        value: PropTypes.string,
-        placeholder: PropTypes.string,
-        button: PropTypes.string,
-        busyMessage: PropTypes.string, // pass _td string
-        focus: PropTypes.bool,
-        onFinished: PropTypes.func.isRequired,
-        hasCancel: PropTypes.bool,
-        validator: PropTypes.func, // result of withValidation
-        fixedWidth: PropTypes.bool,
-    };
+export default class TextInputDialog extends React.Component<IProps, IState> {
+    private field = createRef<Field>();
 
-    static defaultProps = {
+    public static defaultProps = {
         title: "",
         value: "",
         description: "",
@@ -49,11 +55,9 @@ export default class TextInputDialog extends React.Component {
         hasCancel: true,
     };
 
-    constructor(props) {
+    constructor(props: IProps) {
         super(props);
 
-        this._field = createRef();
-
         this.state = {
             value: this.props.value,
             busy: false,
@@ -61,23 +65,23 @@ export default class TextInputDialog extends React.Component {
         };
     }
 
-    componentDidMount() {
+    public componentDidMount(): void {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
             // this._field.current.value = this.props.value;
-            this._field.current.focus();
+            this.field.current.focus();
         }
     }
 
-    onOk = async ev => {
+    private onOk = async (ev: React.FormEvent): Promise<void> => {
         ev.preventDefault();
         if (this.props.validator) {
             this.setState({ busy: true });
-            await this._field.current.validate({ allowEmpty: false });
+            await this.field.current.validate({ allowEmpty: false });
 
-            if (!this._field.current.state.valid) {
-                this._field.current.focus();
-                this._field.current.validate({ allowEmpty: false, focused: true });
+            if (!this.field.current.state.valid) {
+                this.field.current.focus();
+                this.field.current.validate({ allowEmpty: false, focused: true });
                 this.setState({ busy: false });
                 return;
             }
@@ -85,17 +89,17 @@ export default class TextInputDialog extends React.Component {
         this.props.onFinished(true, this.state.value);
     };
 
-    onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
-    onChange = ev => {
+    private onChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             value: ev.target.value,
         });
     };
 
-    onValidate = async fieldState => {
+    private onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.props.validator(fieldState);
         this.setState({
             valid: result.valid,
@@ -103,9 +107,7 @@ export default class TextInputDialog extends React.Component {
         return result;
     };
 
-    render() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className="mx_TextInputDialog"
@@ -121,13 +123,12 @@ export default class TextInputDialog extends React.Component {
                         <div>
                             <Field
                                 className="mx_TextInputDialog_input"
-                                ref={this._field}
+                                ref={this.field}
                                 type="text"
                                 label={this.props.placeholder}
                                 value={this.state.value}
                                 onChange={this.onChange}
                                 onValidate={this.props.validator ? this.onValidate : undefined}
-                                size="64"
                             />
                         </div>
                     </div>