accounts-frontend/src/components/ui/popup/PopupStack.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { browserHistory } from 'services/history';
import { connect } from 'react-redux';
import { destroy } from 'components/ui/popup/actions';

import styles from './popup.scss';

export class PopupStack extends Component {
    static propTypes = {
        popups: PropTypes.arrayOf(
            PropTypes.shape({
                type: PropTypes.func,
                props: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
            })
        ),
        destroy: PropTypes.func.isRequired
    };

    componentWillMount() {
        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}
                                onClick={this.onOverlayClick(popup)}
                            >
                                <Popup onClose={this.onClose(popup)} />
                            </div>
                        </CSSTransition>
                    );
                })}
            </TransitionGroup>
        );
    }

    onClose(popup) {
        return this.props.destroy.bind(null, popup);
    }

    onOverlayClick(popup) {
        return (event) => {
            if (
                event.target !== event.currentTarget
                || popup.disableOverlayClose
            ) {
                return;
            }

            event.preventDefault();

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

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

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

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

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

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