accounts-frontend/packages/app/components/ui/popup/PopupStack.tsx

import React from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { browserHistory } from 'app/services/history';
import { connect } from 'react-redux';
import { Location } from 'history';
import { RootState } from 'app/reducers';

import { PopupConfig } from './reducer';
import { destroy } from './actions';
import styles from './popup.scss';

interface Props {
  popups: PopupConfig[];
  destroy: (popup: PopupConfig) => void;
}

export class PopupStack extends React.Component<Props> {
  unlistenTransition: () => void;

  componentDidMount() {
    document.addEventListener('keyup', this.onKeyPress);
    this.unlistenTransition = browserHistory.listen(this.onRouteLeave);
  }

  componentWillUnmount() {
    document.removeEventListener('keyup', this.onKeyPress);
    this.unlistenTransition();
  }

  render() {
    const { popups } = this.props;

    return (
      <TransitionGroup>
        {popups.map((popup, index) => {
          const { Popup } = popup;

          return (
            <CSSTransition
              key={index}
              classNames={{
                enter: styles.trEnter,
                enterActive: styles.trEnterActive,
                exit: styles.trExit,
                exitActive: styles.trExitActive,
              }}
              timeout={500}
            >
              <div
                className={styles.overlay}
                role="dialog"
                onClick={this.onOverlayClick(popup)}
              >
                <Popup onClose={this.onClose(popup)} />
              </div>
            </CSSTransition>
          );
        })}
      </TransitionGroup>
    );
  }

  onClose(popup: PopupConfig) {
    return () => this.props.destroy(popup);
  }

  onOverlayClick(popup: PopupConfig) {
    return (event: React.MouseEvent<HTMLDivElement>) => {
      if (event.target !== event.currentTarget || popup.disableOverlayClose) {
        return;
      }

      event.preventDefault();

      this.props.destroy(popup);
    };
  }

  popStack() {
    const [popup] = this.props.popups.slice(-1);

    if (popup && !popup.disableOverlayClose) {
      this.props.destroy(popup);
    }
  }

  onKeyPress = (event: KeyboardEvent) => {
    if (event.which === 27) {
      // ESC key
      this.popStack();
    }
  };

  onRouteLeave = (nextLocation: Location) => {
    if (nextLocation) {
      this.popStack();
    }
  };
}

export default connect(
  (state: RootState) => ({
    ...state.popup,
  }),
  {
    destroy,
  },
)(PopupStack);