diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js index d27a66165e..f0d5443cac 100644 --- a/src/components/views/dialogs/InviteDialog.js +++ b/src/components/views/dialogs/InviteDialog.js @@ -35,6 +35,7 @@ import createRoom, {canEncryptToAllUsers} from "../../../createRoom"; import {inviteMultipleToRoom} from "../../../RoomInvite"; import SettingsStore from '../../../settings/SettingsStore'; import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore"; +import {Key} from "../../../Keyboard"; export const KIND_DM = "dm"; export const KIND_INVITE = "invite"; @@ -125,7 +126,7 @@ class ThreepidMember extends Member { class DMUserTile extends React.PureComponent { static propTypes = { member: PropTypes.object.isRequired, // Should be a Member (see interface above) - onRemove: PropTypes.func.isRequired, // takes 1 argument, the member being removed + onRemove: PropTypes.func, // takes 1 argument, the member being removed }; _onRemove = (e) => { @@ -156,18 +157,25 @@ class DMUserTile extends React.PureComponent { width={avatarSize} height={avatarSize} />; - return ( - - - {avatar} - {this.props.member.name} - + let closeButton; + if (this.props.onRemove) { + closeButton = ( {_t('Remove')} + ); + } + + return ( + + + {avatar} + {this.props.member.name} + + { closeButton } ); } @@ -640,11 +648,14 @@ export default class InviteDialog extends React.PureComponent { }); }; - _cancel = () => { - // We do not want the user to close the dialog while an action is in progress - if (this.state.busy) return; - - this.props.onFinished(); + _onKeyDown = (e) => { + // when the field is empty and the user hits backspace remove the right-most target + if (!e.target.value && !this.state.busy && this.state.targets.length > 0 && e.key === Key.BACKSPACE && + !e.ctrlKey && !e.shiftKey && !e.metaKey + ) { + e.preventDefault(); + this._removeMember(this.state.targets[this.state.targets.length - 1]); + } }; _updateFilter = (e) => { @@ -889,7 +900,7 @@ export default class InviteDialog extends React.PureComponent { _onManageSettingsClick = (e) => { e.preventDefault(); dis.dispatch({ action: 'view_user_settings' }); - this._cancel(); + this.props.onFinished(); }; _renderSection(kind: "recents"|"suggestions") { @@ -984,17 +995,18 @@ export default class InviteDialog extends React.PureComponent { _renderEditor() { const targets = this.state.targets.map(t => ( - + )); const input = (