Add Field validation to TextInputDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/dialogs/TextInputDialog.js

@@ -18,6 +18,7 @@ import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
+import Field from "../elements/Field";
 
 export default createReactClass({
     displayName: 'TextInputDialog',
@@ -33,6 +34,7 @@ export default createReactClass({
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
         hasCancel: PropTypes.bool,
+        validator: PropTypes.func, // result of withValidation
     },
 
     getDefaultProps: function() {
@@ -45,25 +47,57 @@ export default createReactClass({
         };
     },
 
+    getInitialState: function() {
+        return {
+            value: this.props.value,
+            valid: false,
+        };
+    },
+
     UNSAFE_componentWillMount: function() {
-        this._textinput = createRef();
+        this._field = createRef();
     },
 
     componentDidMount: function() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
-            this._textinput.current.value = this.props.value;
+            // this._field.current.value = this.props.value;
+            this._field.current.focus();
         }
     },
 
-    onOk: function() {
-        this.props.onFinished(true, this._textinput.current.value);
+    onOk: async function(ev) {
+        ev.preventDefault();
+        if (this.props.validator) {
+            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 });
+                return;
+            }
+        }
+        this.props.onFinished(true, this.state.value);
     },
 
     onCancel: function() {
         this.props.onFinished(false);
     },
 
+    onChange: function(ev) {
+        this.setState({
+            value: ev.target.value,
+        });
+    },
+
+    onValidate: async function(fieldState) {
+        const result = await this.props.validator(fieldState);
+        this.setState({
+            valid: result.valid,
+        });
+        return result;
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -77,14 +111,17 @@ export default createReactClass({
                             <label htmlFor="textinput"> { this.props.description } </label>
                         </div>
                         <div>
-                            <input
-                                id="textinput"
-                                ref={this._textinput}
+                            <Field
+                                id="mx_TextInputDialog_field"
                                 className="mx_TextInputDialog_input"
-                                defaultValue={this.props.value}
-                                autoFocus={this.props.focus}
-                                placeholder={this.props.placeholder}
-                                size="64" />
+                                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>
                 </form>