2019-12-18 01:50:19 +01:00
|
|
|
import React from 'react';
|
2020-01-22 04:09:34 +01:00
|
|
|
import classNames from 'classnames';
|
2019-12-18 01:50:19 +01:00
|
|
|
|
2021-08-30 06:02:15 +02:00
|
|
|
import { SessionIconButton, SessionIconType } from '../session/icon';
|
2021-08-06 03:09:14 +02:00
|
|
|
import { SessionButtonColor, SessionButtonType } from '../session/SessionButton';
|
2019-12-18 01:50:19 +01:00
|
|
|
|
|
|
|
interface Props {
|
|
|
|
title: string;
|
2019-12-20 06:08:57 +01:00
|
|
|
onClose: any;
|
2019-12-30 07:38:28 +01:00
|
|
|
showExitIcon?: boolean;
|
|
|
|
showHeader?: boolean;
|
2020-01-22 04:09:34 +01:00
|
|
|
headerReverse?: boolean;
|
2020-01-22 04:28:29 +01:00
|
|
|
//Maximum of two icons or buttons in header
|
2019-12-20 06:08:57 +01:00
|
|
|
headerIconButtons?: Array<{
|
2020-01-22 04:09:34 +01:00
|
|
|
iconType: SessionIconType;
|
|
|
|
iconRotation: number;
|
|
|
|
onClick?: any;
|
|
|
|
}>;
|
|
|
|
headerButtons?: Array<{
|
|
|
|
buttonType: SessionButtonType;
|
|
|
|
buttonColor: SessionButtonColor;
|
|
|
|
text: string;
|
2019-12-20 06:08:57 +01:00
|
|
|
onClick?: any;
|
|
|
|
}>;
|
2019-12-18 01:50:19 +01:00
|
|
|
}
|
|
|
|
|
2019-12-20 06:08:57 +01:00
|
|
|
interface State {
|
|
|
|
isVisible: boolean;
|
|
|
|
}
|
|
|
|
|
2020-01-03 01:48:55 +01:00
|
|
|
export class SessionModal extends React.PureComponent<Props, State> {
|
2019-12-30 07:38:28 +01:00
|
|
|
public static defaultProps = {
|
|
|
|
showExitIcon: true,
|
|
|
|
showHeader: true,
|
2020-01-22 04:09:34 +01:00
|
|
|
headerReverse: false,
|
2019-12-30 07:38:28 +01:00
|
|
|
};
|
2020-01-03 01:48:55 +01:00
|
|
|
|
2020-02-17 07:25:02 +01:00
|
|
|
private node: HTMLDivElement | null;
|
|
|
|
|
2019-12-18 01:50:19 +01:00
|
|
|
constructor(props: any) {
|
|
|
|
super(props);
|
2019-12-20 06:08:57 +01:00
|
|
|
this.state = {
|
|
|
|
isVisible: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
this.close = this.close.bind(this);
|
|
|
|
this.onKeyUp = this.onKeyUp.bind(this);
|
2020-02-17 07:25:02 +01:00
|
|
|
this.node = null;
|
2019-12-18 01:50:19 +01:00
|
|
|
}
|
|
|
|
|
2020-02-25 02:26:11 +01:00
|
|
|
public componentDidMount() {
|
2021-08-26 08:17:37 +02:00
|
|
|
window.addEventListener('keyup', this.onKeyUp);
|
|
|
|
|
2020-02-17 07:25:02 +01:00
|
|
|
document.addEventListener('mousedown', this.handleClick, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
public componentWillUnmount() {
|
2021-08-26 08:17:37 +02:00
|
|
|
window.removeEventListener('keyup', this.onKeyUp);
|
|
|
|
|
2020-02-17 07:25:02 +01:00
|
|
|
document.removeEventListener('mousedown', this.handleClick, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
public handleClick = (e: any) => {
|
|
|
|
if (this.node && this.node.contains(e.target)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.close();
|
|
|
|
};
|
|
|
|
|
2019-12-18 01:50:19 +01:00
|
|
|
public render() {
|
2021-04-22 10:03:58 +02:00
|
|
|
const { title, headerIconButtons, showExitIcon, showHeader, headerReverse } = this.props;
|
2019-12-20 06:08:57 +01:00
|
|
|
const { isVisible } = this.state;
|
|
|
|
|
|
|
|
return isVisible ? (
|
2020-02-17 07:25:02 +01:00
|
|
|
<div ref={node => (this.node = node)} className={'session-modal'}>
|
2020-01-03 01:48:55 +01:00
|
|
|
{showHeader ? (
|
2019-12-30 07:38:28 +01:00
|
|
|
<>
|
2021-04-22 10:03:58 +02:00
|
|
|
<div className={classNames('session-modal__header', headerReverse && 'reverse')}>
|
2019-12-30 07:38:28 +01:00
|
|
|
<div className="session-modal__header__close">
|
|
|
|
{showExitIcon ? (
|
2021-11-29 07:40:46 +01:00
|
|
|
<SessionIconButton iconType="exit" iconSize="small" onClick={this.close} />
|
2020-01-03 01:48:55 +01:00
|
|
|
) : null}
|
2019-12-30 07:38:28 +01:00
|
|
|
</div>
|
|
|
|
<div className="session-modal__header__title">{title}</div>
|
|
|
|
<div className="session-modal__header__icons">
|
|
|
|
{headerIconButtons
|
|
|
|
? headerIconButtons.map((iconItem: any) => {
|
|
|
|
return (
|
|
|
|
<SessionIconButton
|
2020-01-22 04:09:34 +01:00
|
|
|
key={iconItem.iconType}
|
|
|
|
iconType={iconItem.iconType}
|
2021-08-30 06:02:15 +02:00
|
|
|
iconSize={'large'}
|
2020-01-22 04:09:34 +01:00
|
|
|
iconRotation={iconItem.iconRotation}
|
|
|
|
onClick={iconItem.onClick}
|
2019-12-30 07:38:28 +01:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
})
|
|
|
|
: null}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
2020-01-03 01:48:55 +01:00
|
|
|
) : null}
|
2019-12-22 23:44:18 +01:00
|
|
|
|
|
|
|
<div className="session-modal__body">{this.props.children}</div>
|
|
|
|
</div>
|
|
|
|
) : null;
|
2019-12-20 06:08:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
public close() {
|
|
|
|
this.setState({
|
|
|
|
isVisible: false,
|
|
|
|
});
|
|
|
|
|
2020-02-25 02:26:11 +01:00
|
|
|
document.removeEventListener('mousedown', this.handleClick, false);
|
2020-01-06 05:46:49 +01:00
|
|
|
|
|
|
|
if (this.props.onClose) {
|
|
|
|
this.props.onClose();
|
|
|
|
}
|
2019-12-20 06:08:57 +01:00
|
|
|
}
|
|
|
|
|
2019-12-22 23:44:18 +01:00
|
|
|
public onKeyUp(event: any) {
|
2019-12-20 06:08:57 +01:00
|
|
|
switch (event.key) {
|
|
|
|
case 'Esc':
|
|
|
|
case 'Escape':
|
|
|
|
this.close();
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
}
|
2019-12-18 01:50:19 +01:00
|
|
|
}
|
|
|
|
}
|