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

Migrate CreateGroupDialog to TypeScript

pull/21833/head
Germain Souquet 2021-06-14 21:43:54 +01:00
parent 5cbbb5110b
commit de95f3bc01
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/views/dialogs/CreateGroupDialog.js → src/components/views/dialogs/CreateGroupDialog.tsx
View File

@ -15,44 +15,51 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher'; import dis from '../../../dispatcher/dispatcher';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {replaceableComponent} from "../../../utils/replaceableComponent"; import {replaceableComponent} from "../../../utils/replaceableComponent";
@replaceableComponent("views.dialogs.CreateGroupDialog") interface IProps {
export default class CreateGroupDialog extends React.Component { onFinished: (success: boolean) => void;
static propTypes = { }
onFinished: PropTypes.func.isRequired,
};
state = { interface IState {
groupName: string;
groupId: string;
groupIdError: string;
creating: boolean;
createError: Error;
}
@replaceableComponent("views.dialogs.CreateGroupDialog")
export default class CreateGroupDialog extends React.Component<IProps, IState> {
public state = {
groupName: '', groupName: '',
groupId: '', groupId: '',
groupError: null, groupIdError: '',
creating: false, creating: false,
createError: null, createError: null,
}; };
_onGroupNameChange = e => { private onGroupNameChange = (e: React.FormEvent<HTMLInputElement>): void => {
this.setState({ this.setState({
groupName: e.target.value, groupName: e.currentTarget.value,
}); });
}; };
_onGroupIdChange = e => { private onGroupIdChange = (e: React.FormEvent<HTMLInputElement>): void => {
this.setState({ this.setState({
groupId: e.target.value, groupId: e.currentTarget.value,
}); });
}; };
_onGroupIdBlur = e => { private onGroupIdBlur = (): void => {
this._checkGroupId(); this.checkGroupId();
}; };
_checkGroupId(e) { private checkGroupId() {
let error = null; let error = null;
if (!this.state.groupId) { if (!this.state.groupId) {
error = _t("Community IDs cannot be empty."); error = _t("Community IDs cannot be empty.");
@ -67,12 +74,12 @@ export default class CreateGroupDialog extends React.Component {
return error; return error;
} }
_onFormSubmit = e => { private onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (this._checkGroupId()) return; if (this.checkGroupId()) return;
const profile = {}; const profile: any = {};
if (this.state.groupName !== '') { if (this.state.groupName !== '') {
profile.name = this.state.groupName; profile.name = this.state.groupName;
} }
@ -121,7 +128,7 @@ export default class CreateGroupDialog extends React.Component {
<BaseDialog className="mx_CreateGroupDialog" onFinished={this.props.onFinished} <BaseDialog className="mx_CreateGroupDialog" onFinished={this.props.onFinished}
title={_t('Create Community')} title={_t('Create Community')}
> >
<form onSubmit={this._onFormSubmit}> <form onSubmit={this.onFormSubmit}>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<div className="mx_CreateGroupDialog_inputRow"> <div className="mx_CreateGroupDialog_inputRow">
<div className="mx_CreateGroupDialog_label"> <div className="mx_CreateGroupDialog_label">
@ -129,9 +136,9 @@ export default class CreateGroupDialog extends React.Component {
</div> </div>
<div> <div>
<input id="groupname" className="mx_CreateGroupDialog_input" <input id="groupname" className="mx_CreateGroupDialog_input"
autoFocus={true} size="64" autoFocus={true} size={64}
placeholder={_t('Example')} placeholder={_t('Example')}
onChange={this._onGroupNameChange} onChange={this.onGroupNameChange}
value={this.state.groupName} value={this.state.groupName}
/> />
</div> </div>
@ -144,10 +151,10 @@ export default class CreateGroupDialog extends React.Component {
<span className="mx_CreateGroupDialog_prefix">+</span> <span className="mx_CreateGroupDialog_prefix">+</span>
<input id="groupid" <input id="groupid"
className="mx_CreateGroupDialog_input mx_CreateGroupDialog_input_hasPrefixAndSuffix" className="mx_CreateGroupDialog_input mx_CreateGroupDialog_input_hasPrefixAndSuffix"
size="32" size={32}
placeholder={_t('example')} placeholder={_t('example')}
onChange={this._onGroupIdChange} onChange={this.onGroupIdChange}
onBlur={this._onGroupIdBlur} onBlur={this.onGroupIdBlur}
value={this.state.groupId} value={this.state.groupId}
/> />
<span className="mx_CreateGroupDialog_suffix"> <span className="mx_CreateGroupDialog_suffix">