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
This commit is contained in:
ginnyTheCat 2022-02-09 03:59:21 +01:00 committed by GitHub
parent 4803d48ec7
commit 6d9e67b9f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 84 additions and 7 deletions

View file

@ -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;

View file

@ -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);
}

View file

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

View file

@ -101,6 +101,7 @@
/* shadow and overlay */ /* shadow and overlay */
--bg-overlay: rgba(0, 0, 0, 20%); --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%); --bs-popup: 0 0 16px rgba(0, 0, 0, 10%);