{"size": 1933, "ext": "js", "max_stars_repo_path": "__react__/src/browser/app/components/Modal/ModalRoot.js", "max_stars_repo_name": "Player1os/angular-js-application", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "__react__/src/browser/app/components/Modal/ModalRoot.js", "max_issues_repo_name": "Player1os/angular-js-application", "max_issues_repo_issues_event_min_datetime": "2020-07-15T21:08:38.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-02T12:22:08.000Z", "max_forks_repo_path": "__react__/src/browser/app/components/Modal/ModalRoot.js", "max_forks_repo_name": "Player1os/ts-angular-application-template", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 9, "max_forks_count": null, "avg_line_length": 25.1038961039, "max_line_length": 120, "alphanum_fraction": 0.7428867046}
/* @flow */

// Load app modules.
import {
	MODAL_GAME_CREATE,
	MODAL_CATEGORY_CREATE,
	MODAL_POSTBACK_CREATE,
	MODAL_POSTBACK_TEMPLATE_CREATE,
	hideModal,
} from '../../../../common/modal/actions.js';
import CreateNewGameModal from './components/CreateNewGameModal/CreateNewGameModal';
import CreateNewCategoryModal from './components/CreateNewCategoryModal/CreateNewCategoryModal';
import CreateNewPostbackModal from './components/CreateNewPostbackModal/CreateNewPostbackModal';
import CreateNewPostbackTemplateModal from './components/CreateNewPostbackTemplateModal/CreateNewPostbackTemplateModal';

// Load npm modules.
import React from 'react';
import ReactDOM from 'react-dom';
import {
	connect
} from 'react-redux';

const MODAL_COMPONENTS = {
	[MODAL_GAME_CREATE]: CreateNewGameModal,
	[MODAL_CATEGORY_CREATE]: CreateNewCategoryModal,
	[MODAL_POSTBACK_CREATE]: CreateNewPostbackModal,
	[MODAL_POSTBACK_TEMPLATE_CREATE]: CreateNewPostbackTemplateModal,
};

const ModalRoot = (props) => {
	const { modalTypes, hideModal, modals } = props;

	if (!modalTypes || modalTypes.length == 0) {
		return <span />;
	}

	const modalProps = modalTypes[modals - 1];
	modalProps.hidePopup = hideModal;
	let SpecificModal = MODAL_COMPONENTS[modalProps.type];

	return (
		<div className="ModalRoot">
			<div className="ModalRoot__Background"></div>
			<div className="ModalRoot__inner" id="ModalRoot__inner">
				<Wrapper hideModal={hideModal}>
					<SpecificModal {...modalProps} />
				</Wrapper>
			</div>
		</div>
	);
};

class Wrapper extends React.Component {
	constructor(props) {
		super(props);
	}

	handleClickOutside(e) {
		var domNode = ReactDOM.findDOMNode(document.getElementById("ModalRoot__inner"));
		if ((domNode && domNode.contains(e.target))) {
			this.props.hideModal()
		}
	}

	render() {
		return (
			this.props.children
		);
	}
}

export default connect(
  state => ( state.modal), {
    hideModal
  }
)(ModalRoot)
