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 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue