Merge pull request #842 from Bilb/clearnet
separate update group name and group members dialog (add and remove m…pull/854/head
Audric Ackermann
5 years ago
committed by
GitHub
commit
a67a409150
@ -0,0 +1,148 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SessionModal } from '../session/SessionModal';
|
||||
import { SessionButton } from '../session/SessionButton';
|
||||
|
||||
interface Props {
|
||||
titleText: string;
|
||||
groupName: string;
|
||||
okText: string;
|
||||
cancelText: string;
|
||||
isAdmin: boolean;
|
||||
i18n: any;
|
||||
onSubmit: any;
|
||||
onClose: any;
|
||||
existingMembers: Array<String>;
|
||||
}
|
||||
|
||||
interface State {
|
||||
groupName: string;
|
||||
errorDisplayed: boolean;
|
||||
errorMessage: string;
|
||||
}
|
||||
|
||||
export class UpdateGroupNameDialog extends React.Component<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.onClickOK = this.onClickOK.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
this.closeDialog = this.closeDialog.bind(this);
|
||||
this.onGroupNameChanged = this.onGroupNameChanged.bind(this);
|
||||
|
||||
this.state = {
|
||||
groupName: this.props.groupName,
|
||||
errorDisplayed: false,
|
||||
errorMessage: 'placeholder',
|
||||
};
|
||||
|
||||
window.addEventListener('keyup', this.onKeyUp);
|
||||
}
|
||||
|
||||
public onClickOK() {
|
||||
if (!this.state.groupName.trim()) {
|
||||
this.onShowError(this.props.i18n('emptyGroupNameError'));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.onSubmit(this.state.groupName, this.props.existingMembers);
|
||||
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
public render() {
|
||||
const okText = this.props.okText;
|
||||
const cancelText = this.props.cancelText;
|
||||
|
||||
let titleText;
|
||||
|
||||
titleText = `${this.props.titleText}`;
|
||||
|
||||
const errorMsg = this.state.errorMessage;
|
||||
const errorMessageClasses = classNames(
|
||||
'error-message',
|
||||
this.state.errorDisplayed ? 'error-shown' : 'error-faded'
|
||||
);
|
||||
|
||||
return (
|
||||
<SessionModal
|
||||
title={titleText}
|
||||
// tslint:disable-next-line: no-void-expression
|
||||
onClose={() => this.closeDialog()}
|
||||
onOk={() => null}
|
||||
>
|
||||
<div className="spacer-md" />
|
||||
<p className={errorMessageClasses}>{errorMsg}</p>
|
||||
<div className="spacer-md" />
|
||||
|
||||
<input
|
||||
type="text"
|
||||
className="profile-name-input"
|
||||
value={this.state.groupName}
|
||||
placeholder={this.props.i18n('groupNamePlaceholder')}
|
||||
onChange={this.onGroupNameChanged}
|
||||
tabIndex={0}
|
||||
required={true}
|
||||
aria-required={true}
|
||||
autoFocus={true}
|
||||
disabled={!this.props.isAdmin}
|
||||
/>
|
||||
|
||||
<div className="session-modal__button-group">
|
||||
<SessionButton text={okText} onClick={this.onClickOK} />
|
||||
|
||||
<SessionButton text={cancelText} onClick={this.closeDialog} />
|
||||
</div>
|
||||
</SessionModal>
|
||||
);
|
||||
}
|
||||
|
||||
private onShowError(msg: string) {
|
||||
if (this.state.errorDisplayed) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
errorDisplayed: true,
|
||||
errorMessage: msg,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
errorDisplayed: false,
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
private onKeyUp(event: any) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
this.onClickOK();
|
||||
break;
|
||||
case 'Esc':
|
||||
case 'Escape':
|
||||
this.closeDialog();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
private closeDialog() {
|
||||
window.removeEventListener('keyup', this.onKeyUp);
|
||||
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
private onGroupNameChanged(event: any) {
|
||||
event.persist();
|
||||
|
||||
this.setState(state => {
|
||||
return {
|
||||
...state,
|
||||
groupName: event.target.value,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue