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:
parent
4803d48ec7
commit
6d9e67b9f2
4 changed files with 84 additions and 7 deletions
24
src/app/organisms/drag-drop/DragDrop.jsx
Normal file
24
src/app/organisms/drag-drop/DragDrop.jsx
Normal 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;
|
12
src/app/organisms/drag-drop/DragDrop.scss
Normal file
12
src/app/organisms/drag-drop/DragDrop.scss
Normal 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);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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%);
|
||||
|
||||
|
|
Loading…
Reference in a new issue