Fix crashing on droping text (#302)

* Add basic drop overlay

* Prevent crash when dragging text

* Only show popup when files are being dragged

* Make drop box bigger

* Make drag drop overlay without a modal

* Don't show drag drop menu on top of modals

* Use different way to check for modal

src/app/organisms/drag-drop/DragDrop.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './DragDrop.scss';
+
+import RawModal from '../../atoms/modal/RawModal';
+import Text from '../../atoms/text/Text';
+
+function DragDrop({ isOpen }) {
+  return (
+    <RawModal
+      className="drag-drop__model"
+      overlayClassName="drag-drop__overlay"
+      isOpen={isOpen}
+    >
+      <Text variant="h2" weight="medium">Drop file to upload</Text>
+    </RawModal>
+  );
+}
+
+DragDrop.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+};
+
+export default DragDrop;

src/app/organisms/drag-drop/DragDrop.scss

@@ -0,0 +1,12 @@
+.drag-drop__model {
+  box-shadow: none;
+  text-align: center;
+
+  .text {
+    color: white;
+  }
+}
+
+.drag-drop__overlay {
+  background-color: var(--bg-overlay-low);
+}

src/app/templates/client/Client.jsx

@@ -14,10 +14,12 @@ import logout from '../../../client/action/logout';
 import initMatrix from '../../../client/initMatrix';
 import navigation from '../../../client/state/navigation';
 import cons from '../../../client/state/cons';
+import DragDrop from '../../organisms/drag-drop/DragDrop';
 
 function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
+  const [dragCounter, setDragCounter] = useState(0);
 
   useEffect(() => {
     let counter = 0;
@@ -57,31 +59,68 @@ function Client() {
     );
   }
 
-  const handleDrag = (e) => {
+  function dragContainsFiles(e) {
+    if (!e.dataTransfer.types) return false;
+
+    for (let i = 0; i < e.dataTransfer.types.length; i += 1) {
+      if (e.dataTransfer.types[i] === 'Files') return true;
+    }
+    return false;
+  }
+
+  function modalOpen() {
+    return navigation.isRawModalVisible && dragCounter <= 0;
+  }
+
+  function handleDragOver(e) {
+    if (!dragContainsFiles(e)) return;
+
     e.preventDefault();
 
-    if (!navigation.selectedRoomId) {
+    if (!navigation.selectedRoomId || modalOpen()) {
       e.dataTransfer.dropEffect = 'none';
     }
-  };
+  }
 
-  const handleDrop = (e) => {
+  function handleDragEnter(e) {
     e.preventDefault();
 
+    if (navigation.selectedRoomId && !modalOpen() && dragContainsFiles(e)) {
+      setDragCounter(dragCounter + 1);
+    }
+  }
+
+  function handleDragLeave(e) {
+    e.preventDefault();
+
+    if (navigation.selectedRoomId && !modalOpen() && dragContainsFiles(e)) {
+      setDragCounter(dragCounter - 1);
+    }
+  }
+
+  function handleDrop(e) {
+    e.preventDefault();
+
+    setDragCounter(0);
+
+    if (modalOpen()) return;
+
     const roomId = navigation.selectedRoomId;
     if (!roomId) return;
 
     const { files } = e.dataTransfer;
-    if (!files) return;
+    if (!files?.length) return;
     const file = files[0];
     initMatrix.roomsInput.setAttachment(roomId, file);
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
-  };
+  }
 
   return (
     <div
       className="client-container"
-      onDragOver={handleDrag}
+      onDragOver={handleDragOver}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
       <div className="navigation__wrapper">
@@ -94,6 +133,7 @@ function Client() {
       <Dialogs />
       <EmojiBoardOpener />
       <ReusableContextMenu />
+      <DragDrop isOpen={dragCounter !== 0} />
     </div>
   );
 }

src/index.scss

@@ -101,6 +101,7 @@
 
   /* shadow and overlay */
   --bg-overlay: rgba(0, 0, 0, 20%);
+  --bg-overlay-low: rgba(0, 0, 0, 85%);
 
   --bs-popup: 0 0 16px rgba(0, 0, 0, 10%);