mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-10-31 00:01:23 +01:00
Code Issues Projects Releases Wiki Activity

Migrate ConfirmUserActionDialog to TypeScript

Browse Source
This commit is contained in:
Germain Souquet 2021-06-14 21:36:56 +01:00
parent 9443ef4ff9
commit c2aaba1f79
1 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/views/dialogs/ConfirmUserActionDialog.js → src/components/views/dialogs/ConfirmUserActionDialog.tsx
View File

@ -15,14 +15,32 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { MatrixClient } from 'matrix-js-sdk/src/client'; import { MatrixClient } from 'matrix-js-sdk/src/client';
import RoomMember from "matrix-js-sdk/src/models/room-member.js";
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import { GroupMemberType } from '../../../groups'; import { GroupMemberType } from '../../../groups';
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
import { mediaFromMxc } from "../../../customisations/Media"; import { mediaFromMxc } from "../../../customisations/Media";
interface IProps {
// matrix-js-sdk (room) member object. Supply either this or 'groupMember'
member: RoomMember;
// group member object. Supply either this or 'member'
groupMember: GroupMemberType;
// needed if a group member is specified
matrixClient?: MatrixClient,
action: string; // eg. 'Ban'
title: string; // eg. 'Ban this user?'
// Whether to display a text field for a reason
// If true, the second argument to onFinished will
// be the string entered.
askReason?: boolean;
danger?: boolean;
onFinished: (success: boolean, reason?: HTMLInputElement) => void;
}
/* /*
* A dialog for confirming an operation on another user. * A dialog for confirming an operation on another user.
* Takes a user ID and a verb, displays the target user prominently * Takes a user ID and a verb, displays the target user prominently
@ -32,24 +50,8 @@ import {mediaFromMxc} from "../../../customisations/Media";
* Also tweaks the style for 'dangerous' actions (albeit only with colour) * Also tweaks the style for 'dangerous' actions (albeit only with colour)
*/ */
@replaceableComponent("views.dialogs.ConfirmUserActionDialog") @replaceableComponent("views.dialogs.ConfirmUserActionDialog")
export default class ConfirmUserActionDialog extends React.Component { export default class ConfirmUserActionDialog extends React.Component<IProps> {
static propTypes = { private reasonField: React.RefObject<HTMLInputElement> = React.createRef();
// matrix-js-sdk (room) member object. Supply either this or 'groupMember'
member: PropTypes.object,
// group member object. Supply either this or 'member'
groupMember: GroupMemberType,
// needed if a group member is specified
matrixClient: PropTypes.instanceOf(MatrixClient),
action: PropTypes.string.isRequired, // eg. 'Ban'
title: PropTypes.string.isRequired, // eg. 'Ban this user?'
// Whether to display a text field for a reason
// If true, the second argument to onFinished will
// be the string entered.
askReason: PropTypes.bool,
danger: PropTypes.bool,
onFinished: PropTypes.func.isRequired,
};
static defaultProps = { static defaultProps = {
danger: false, danger: false,
@ -59,26 +61,22 @@ export default class ConfirmUserActionDialog extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this._reasonField = null; this.reasonField = null;
} }
onOk = () => { public onOk = (): void => {
let reason; let reason;
if (this._reasonField) { if (this.reasonField) {
reason = this._reasonField.value; reason = this.reasonField.current;
} }
this.props.onFinished(true, reason); this.props.onFinished(true, reason);
}; };
onCancel = () => { public onCancel = (): void => {
this.props.onFinished(false); this.props.onFinished(false);
}; };
_collectReasonField = e => { public render() {
this._reasonField = e;
};
render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar"); const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
@ -92,7 +90,7 @@ export default class ConfirmUserActionDialog extends React.Component {
<div> <div>
<form onSubmit={this.onOk}> <form onSubmit={this.onOk}>
<input className="mx_ConfirmUserActionDialog_reasonField" <input className="mx_ConfirmUserActionDialog_reasonField"
ref={this._collectReasonField} ref={this.reasonField}
placeholder={_t("Reason")} placeholder={_t("Reason")}
autoFocus={true} autoFocus={true}
/> />