74 lines
2 KiB
JavaScript
74 lines
2 KiB
JavaScript
import React from 'react';
|
|
import styles from './slideModal.module.css';
|
|
import cn from 'classnames';
|
|
export default class SlideModal extends React.PureComponent {
|
|
// componentDidMount() {
|
|
// document.addEventListener('keydown', this.keyPressHandler);
|
|
// }
|
|
|
|
// componentWillUnmount() {
|
|
// document.removeEventListener('keydown', this.keyPressHandler);
|
|
// }
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (prevProps.isDisplayed !== this.props.isDisplayed) {
|
|
if (this.props.isDisplayed) {
|
|
document.addEventListener('keydown', this.keyPressHandler);
|
|
// document.body.classList.add('no-scroll');
|
|
} else {
|
|
document.removeEventListener('keydown', this.keyPressHandler);
|
|
// document.body.classList.remove('no-scroll');
|
|
}
|
|
}
|
|
}
|
|
|
|
keyPressHandler = (e) => {
|
|
if (e.key === 'Escape' && this.props.onClose) {
|
|
this.props.onClose(false); // false for togglers (?)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
title,
|
|
subtitle,
|
|
onClose,
|
|
content,
|
|
isDisplayed,
|
|
size = 'big',
|
|
detailContent,
|
|
right = false,
|
|
bgColor="white",
|
|
overlay = true
|
|
} = this.props;
|
|
return (
|
|
<div
|
|
className={ cn(styles.main, right ? styles.right : styles.left) }
|
|
data-displayed={ isDisplayed }
|
|
>
|
|
<div
|
|
className={ cn( { [styles.overlay] : overlay }) }
|
|
data-displayed={ isDisplayed }
|
|
onClick={ onClose ? onClose : null }
|
|
role="button"
|
|
/>
|
|
|
|
<div className={ cn(styles.contentWrapper, 'bg-' + bgColor) } data-size={ size } >
|
|
<div className={ cn(styles.mainPanel) }>
|
|
{ title &&
|
|
<div className={ cn(styles.header, 'text-2xl') }>
|
|
{ title }
|
|
{ subtitle && <div className="text-sm mt-2">{ subtitle }</div>}
|
|
</div>
|
|
}
|
|
{ content }
|
|
</div>
|
|
<div className={ styles.detailContent } data-displayed={ !!detailContent } >
|
|
{ detailContent }
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|