Перетащите на скрытое наложение, чтобы отобразить наложение

Question

Я использую библиотеку js react-dropzone, чтобы пользователи могли перетаскивать файлы.

Пользователь может щелкнуть кнопку, чтобы открыть наложение для перетаскивания файлов, но я также хочу иметь возможностьразрешить пользователю перетаскивать окно, чтобы затем отобразить окно.

В настоящий момент это не работает, поскольку он не распознает прослушиватель событий onDragOver, поскольку в настоящее время наложение установлено на display: none, поэтомунет наследуемой высоты, поэтому я перетаскиваю на экран, но на оверлей, так как в настоящее время он имеет высоту и ширину 0.

Вот мой UploadOverlay компонент, использующий react-dropzone

import React, { useCallback, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./UploadOverlay.scss";
import CloseIcon from "./CloseIcon";
import UploadIcon from "./UploadIcon";
import Dropzone from "react-dropzone";
import axios from "axios";

const UploadOverlay = props => {
  const [dragEnter, setDragEnter] = useState(false);
  const [active, setActive] = useState(props.active);
  const MODAL_OPEN_CLASS = "UploadOverlay--Open";

  const config = {
    onUploadProgress: progressEvent => {
      let progress = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      if (progress === 100) {
        props.onClose();
      }
    }
  };

  const onDrop = useCallback(acceptedFiles => {
    setDragEnter(false);
    if (acceptedFiles.length === 0) {
      props.onClose();
    } else {
      var formData = new FormData();
      formData.append("file", acceptedFiles[0]);
      //handle 500 errors.
      axios
        .post("/api/website-user/avatar", formData, config)
        .then(response => {
          props.onSuccess(response);
        });
    }
  }, []);

  useEffect(() => {
    if (props.active) {
      window.scroll({
        top: 0,
        left: 0,
        behavior: "smooth"
      });
      document.body.classList.add(MODAL_OPEN_CLASS);
    } else {
      document.body.classList.remove(MODAL_OPEN_CLASS);
    }
    setActive(props.active);
  }, [props]);

  const onDragEnter = () => {
    setDragEnter(true);
  };

  const handleDropzoneClick = event => {};

  const handleCloseClick = event => {
    event.stopPropagation();
    props.onClose();
  };

  const content = (
    <Dropzone
      accept="image/jpeg, image/png"
      onDrop={onDrop}
      onDragEnter={onDragEnter}
      onDragOver={() => {
        document.body.classList.add(MODAL_OPEN_CLASS);
        setActive(true);
      }}
      onDragLeave={() => {
        document.body.classList.remove(MODAL_OPEN_CLASS);
        setActive(false);
      }}
    >
      {({ getRootProps, getInputProps }) => (
        <div
          className={
            "UploadOverlay " +
            (active ? "UploadOverlay--Active" : "") +
            (dragEnter ? " UploadOverlay-DragEnter" : "") +
            " UploadOverlay--Desktop"
          }
          {...getRootProps({
            onClick: handleDropzoneClick
          })}
        >
          <input {...getInputProps()} />
          <a className="UploadOverlay--CloseIcon" onClick={handleCloseClick}>
            <CloseIcon />
          </a>
          <div className="UploadOverlay--Content">
            <UploadIcon />
            <h1>Upload a Photo</h1>
            <h2 className="UploadOverlay--ContentMsgDesktop">
              Drag and Drop your image to upload it to your profile.
            </h2>
            <h2 className="UploadOverlay--ContentMsgMobile">
              Tap anywhere to upload an image to your profile.
            </h2>
          </div>
        </div>
      )}
    </Dropzone>
  );

  return ReactDOM.createPortal(content, document.body);
};

export default UploadOverlay;

Вот мой css

.UploadOverlay {
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   display:none;
}

body.UploadOverlay--Open {
   position: relative;
   overflow: hidden;
}

.UploadOverlay.UploadOverlay--Active {
   background:rgba(216, 216, 216, 0.75);
   width:100%;
   height:100%;
   z-index:99;
   display:block;
}

.UploadOverlay.UploadOverlay-DragEnter {
   background:rgba(255, 255, 255, 0.75);
}

.UploadOverlay .UploadOverlay--CloseIcon {
   position: absolute;
   right:25px;
   top:25px;
   cursor: pointer;
}

.UploadOverlay .UploadOverlay--Content {
   display: -ms-flexbox;
   -ms-flex-pack: center;
   -ms-flex-align: center;
   -ms-flex-flow: column wrap;
   display: flex;
   height: 100vh;
   align-items: center;
   justify-content: center;
   flex-flow: column;
}

.UploadOverlay .UploadOverlay--Content h1 {
   text-transform: uppercase;
   font-size: 44px;
   line-height:44px;
   font-weight: bold;
   color: #666666;
   margin:35px 0px 35px 0px;
   padding:0px;
   text-align: center;
}

.UploadOverlay .UploadOverlay--Content h2 {
   margin:0px;
   padding:0px;
   color: #666666;
   max-width:325px;
   text-align: center;
}

Я сейчас немного растерялся.Я пытался установить opacity из .UploadOverlay в 0, но тогда я не могу щелкнуть никакие элементы на экране, кроме наложения.Затем я попытался установить z-index из .UploadOverlay в -1, тогда я не смог перетащить на экран.

Возможно, я иду по этому пути конструктивно?Любая помощь будет принята с благодарностью.

У меня есть CodeSandbox , если вы хотите попробовать его сами.