{"size": 3479, "ext": "js", "max_stars_repo_path": "src/client/components/modal/index.js", "max_stars_repo_name": "avel2k6/ooodimer", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/client/components/modal/index.js", "max_issues_repo_name": "avel2k6/ooodimer", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/client/components/modal/index.js", "max_forks_repo_name": "avel2k6/ooodimer", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.5163934426, "max_line_length": 98, "alphanum_fraction": 0.4354699626}
import React from 'react';
import PropTypes from 'prop-types';

const modalSize = {
    default: '',
    large: 'modal-lg',
    small: 'modal-sm',
};

export default class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.modalRef = React.createRef();
    }

    handleClickOverlay = (e) => {
        if (!e.target.contains(this.modalRef.current)) {
            return;
        }
        const { toggleModal } = this.props;
        toggleModal();
    };

    changeBodyClass = (display) => {
        if (display) {
            document.body.classList.add('modal-open');
            return;
        }
        document.body.classList.remove('modal-open');
    };

    handlePressEsc = (e) => {
        const { key } = e;
        if (key !== 'Escape') {
            return;
        }
        if (this.props.display) {
            this.props.toggleModal();
        }
    };

    componentWillUnmount() {
        document.body.classList.remove('modal-open');
        document.removeEventListener('keydown', this.handlePressEsc);
    }

    componentDidMount() {
        document.addEventListener('keydown', this.handlePressEsc);
    }

    render() {
        const {
            display, toggleModal, header, body, footer,
        } = this.props;
        this.changeBodyClass(display);

        return (
            <>
                <div
                    className={display
                        ? 'modal-backdrop fade show d-block'
                        : ''
                    }
                />
                <div
                    className={display
                        ? 'modal__overlay modal d-block'
                        : 'modal__overlay modal d-none'
                    }
                    data-overlay='true'
                    onMouseDown={this.handleClickOverlay}
                >

                    <div
                        ref={this.modalRef}
                        className={`modal-dialog modal-react ${modalSize[this.props.size]}`}
                    >
                        <div className="modal-content">
                            { header
                                ? <div className="modal-header">
                                    <h4 className="modal-title">{header}</h4>
                                    <button type="button" className="close" onClick={toggleModal}>
                                        <span className="glyphicon glyphicon-remove"/>
                                    </button>
                                </div>
                                : null }
                            { body
                                ? <div className="modal-body">{body}</div>
                                : null }
                            { footer
                                ? <div className="modal-footer">{footer}</div>
                                : null }
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

Modal.defaultProps = {
    size: 'default',
};

Modal.propTypes = {
    toggleModal: PropTypes.func.isRequired,
    display: PropTypes.bool.isRequired,
    header: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object,
    ]),
    body: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object,
    ]),
    footer: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object,
    ]),
    size: PropTypes.string,
};
