separate update group name and group members dialog
(add and remove members are separated)pull/842/head
Audric Ackermann
5 years ago
parent
4fb178c092
commit
ff10637a5a
@ -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