Root Modal

gistfile1.txt

import React from 'react';
import { connect } from 'react-redux';

const MODAL_COMPONENTS = {
    'MODAL_ONE': require('./modal-one').ModalOne,
    'MODAL_TWO': require('./modal-one').ModalTwo
};

class RootModal extends React.Component {

    constructor (props) {
        super(props);
        this.state = {};
    }

    componentDidMount () {
        this._initState(this.props);
    }

    componentWillReceiveProps (nextProps) {
        this._initState(nextProps);
    }

    render () {
        const { modalType, modalProps } = this.state;

        if (!modalType) {
            return <span />;
        }

        const ModalComponent = MODAL_COMPONENTS[modalType];
        if (!ModalComponent) {
            console.warn('Unmapped modal type: ', modalType);
            return <span />;
        }

        return <ModalComponent { ...modalProps } />;
    }

    _initState (props) {
        this.setState(props.modal);
    }

}

export default connect(
    (state) => ({ modal: state.modal })
)(RootModal);