filestash/client/components/modal.js

import React, { useEffect, useState } from "react";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

import { NgIf } from "./";
import { debounce, nop } from "../helpers/";
import "./modal.scss";

export function Modal({
    isActive = false, children = null, className = null, onQuit = nop,
}) {
    const calculateMarginTop = () => {
        let size = 300;
        const $box = document.querySelector("#modal-box > div");
        if ($box) size = $box.offsetHeight;

        size = Math.round((document.body.offsetHeight - size) / 2);
        if (size < 0) return 0;
        if (size > 250) return 250;
        return size;
    };
    const resizeHandler = debounce(() => {
        setMarginTop(calculateMarginTop());
    }, 100);
    const keydownHandler = (e) => {
        if (e.keyCode === 27) {
            onQuit();
        }
    };
    const onClick = (e) => {
        if (e.target.getAttribute("id") === "modal-box") {
            onQuit();
        }
    };

    const [marginTop, setMarginTop] = useState(calculateMarginTop());
    useEffect(() => {
        window.addEventListener("resize", resizeHandler);
        window.addEventListener("keydown", keydownHandler);
        return () => {
            window.removeEventListener("resize", resizeHandler);
            window.removeEventListener("keydown", keydownHandler);
        };
    });

    return (
        <ReactCSSTransitionGroup transitionName="modal" transitionLeaveTimeout={300}
            transitionEnterTimeout={300} transitionAppear={true} transitionAppearTimeout={300}>
            <NgIf key={"modal-"+isActive} cond={isActive}>
                <div className={"component_modal"+(className? " " + className : "")}
                    onClick={onClick} id="modal-box">
                    <div style={{
                        margin: marginTop+"px auto 0 auto",
                        visibility: marginTop === -1 ? "hidden" : "visible",
                    }}>
                        {children}
                    </div>
                </div>
            </NgIf>
        </ReactCSSTransitionGroup>
    );
}