openreplay/frontend/app/components/ui/SlideModal/SlideModal.js

import React from 'react';
import cn from 'classnames';
import styles from './slideModal.module.css';

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 || 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>
    );
  }
}