OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #5634 from jaiwanth-v/add-loading-TextInputDialog 

Added loading and disabled the button while searching for server
pull/21833/head
Michael Telatynski 2021-02-11 12:22:27 +00:00 committed by GitHub
parent 7865f15ac2 20dc8dbb32
commit da6f1e559b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/views/dialogs/TextInputDialog.js
View File

@ -18,6 +18,7 @@ import React, {createRef} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import Field from "../elements/Field"; import Field from "../elements/Field";
import { _t, _td } from '../../../languageHandler';
export default class TextInputDialog extends React.Component { export default class TextInputDialog extends React.Component {
static propTypes = { static propTypes = {
@ -29,6 +30,7 @@ export default class TextInputDialog extends React.Component {
value: PropTypes.string, value: PropTypes.string,
placeholder: PropTypes.string, placeholder: PropTypes.string,
button: PropTypes.string, button: PropTypes.string,
busyMessage: PropTypes.string, // pass _td string
focus: PropTypes.bool, focus: PropTypes.bool,
onFinished: PropTypes.func.isRequired, onFinished: PropTypes.func.isRequired,
hasCancel: PropTypes.bool, hasCancel: PropTypes.bool,
@ -40,6 +42,7 @@ export default class TextInputDialog extends React.Component {
title: "", title: "",
value: "", value: "",
description: "", description: "",
busyMessage: _td("Loading..."),
focus: true, focus: true,
hasCancel: true, hasCancel: true,
}; };
@ -51,6 +54,7 @@ export default class TextInputDialog extends React.Component {
this.state = { this.state = {
value: this.props.value, value: this.props.value,
busy: false,
valid: false, valid: false,
}; };
} }
@ -66,11 +70,13 @@ export default class TextInputDialog extends React.Component {
onOk = async ev => { onOk = async ev => {
ev.preventDefault(); ev.preventDefault();
if (this.props.validator) { 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) { if (!this._field.current.state.valid) {
this._field.current.focus(); this._field.current.focus();
this._field.current.validate({ allowEmpty: false, focused: true }); this._field.current.validate({ allowEmpty: false, focused: true });
this.setState({ busy: false });
return; return;
} }
} }
@ -125,7 +131,8 @@ export default class TextInputDialog extends React.Component {
</div> </div>
</form> </form>
<DialogButtons <DialogButtons
primaryButton={this.props.button} primaryButton={this.state.busy ? _t(this.props.busyMessage) : this.props.button}
disabled={this.state.busy}
onPrimaryButtonClick={this.onOk} onPrimaryButtonClick={this.onOk}
onCancel={this.onCancel} onCancel={this.onCancel}
hasCancel={this.props.hasCancel} hasCancel={this.props.hasCancel}