fix(app-file-manager): hide drag overlay after drop (#3674)

webiny · Nov 6, 2023 · 29c295d · 29c295d
1 parent b514b07
commit 29c295d
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 23 deletions.
diff --git a/packages/app-file-manager/src/components/DropFilesHere/DropFilesHere.tsx b/packages/app-file-manager/src/components/DropFilesHere/DropFilesHere.tsx
@@ -18,19 +18,9 @@ export interface DropFilesHereProps {
     onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
 }
 
-export const DropFilesHere: React.FC<DropFilesHereProps> = ({
-    onDrop,
-    onDragLeave,
-    empty,
-    onClick
-}) => {
+export const DropFilesHere: React.FC<DropFilesHereProps> = ({ empty, onClick }) => {
     return (
-        <DropFilesHereWrapper
-            empty={empty}
-            onDrop={onDrop}
-            onClick={onClick}
-            onDragLeave={onDragLeave}
-        >
+        <DropFilesHereWrapper empty={empty} onClick={onClick}>
             <DropFilesHereInner empty={empty}>
                 <DropFilesHereIconWrapper>
                     <Icon icon={<DropFilesHereIcon />} />

diff --git a/packages/app-file-manager/src/components/DropFilesHere/styled.tsx b/packages/app-file-manager/src/components/DropFilesHere/styled.tsx
@@ -6,10 +6,11 @@ type DropFilesHereWrapperProps = {
 };
 
 export const DropFilesHereWrapper = styled("div")<DropFilesHereWrapperProps>`
+    pointer-events: ${({ empty }) => (empty ? "all" : "none")};
     margin: 0 auto;
     padding-top: 0;
     height: calc(100vh - 95px);
-    z-index: 3;
+    z-index: 100;
     width: 100%;
     position: absolute;
     background: ${({ empty }) => (empty ? "transparent" : "var(--mdc-theme-text-hint-on-light)")};

diff --git a/packages/app-file-manager/src/components/Empty/Empty.tsx b/packages/app-file-manager/src/components/Empty/Empty.tsx
@@ -20,5 +20,6 @@ export const Empty: React.VFC<EmptyViewProps> = ({ browseFiles, isSearchResult }
     if (isSearchResult) {
         return <NoResults />;
     }
+
     return <DropFilesHere empty onClick={() => browseFiles()} />;
 };
diff --git a/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx b/packages/app-file-manager/src/components/FileDetails/FileDetails.tsx
@@ -30,6 +30,7 @@ import { CmsModelField } from "@webiny/app-headless-cms/types";
 type FileDetailsDrawerProps = React.ComponentProps<typeof Drawer> & { width: string };
 
 const FileDetailsDrawer = styled(Drawer)<FileDetailsDrawerProps>`
+    z-index: 70;
     &.mdc-drawer {
         width: ${props => props.width};
     }

diff --git a/...ages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx b/...ages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx
@@ -39,6 +39,7 @@ const t = i18n.ns("app-admin/file-manager/file-manager-view");
 
 const FileListWrapper = styled("div")({
     float: "right",
+    zIndex: 60,
     display: "inline-block",
     width: "calc(100vw - 286px)",
     height: "calc(100vh - 94px)",
@@ -177,6 +178,8 @@ const FileManagerView = () => {
     const filesBeingUploaded = uploader.getJobs().length;
     const progress = uploader.progress;
 
+    const onDrop = () => view.setDragging(false);
+
     const renderList = (browseFiles: FilesRenderChildren["browseFiles"]) => {
         if (!view.isListLoading && view.isSearch && view.files.length === 0) {
             return <Empty isSearchResult={true} browseFiles={browseFiles} />;
@@ -319,17 +322,13 @@ const FileManagerView = () => {
                             </LeftSidebar>
                             <FileListWrapper
                                 {...getDropZoneProps({
-                                    onDragEnter: () =>
-                                        view.hasPreviouslyUploadedFiles && view.setDragging(true)
+                                    onDragOver: () => view.setDragging(true),
+                                    onDragLeave: () => view.setDragging(false),
+                                    onDrop
                                 })}
                                 data-testid={"fm-list-wrapper"}
                             >
-                                {view.dragging && view.hasPreviouslyUploadedFiles && (
-                                    <DropFilesHere
-                                        onDragLeave={() => view.setDragging(false)}
-                                        onDrop={() => view.setDragging(false)}
-                                    />
-                                )}
+                                {view.dragging && <DropFilesHere />}
                                 <BulkActions />
                                 <Filters />
                                 <Scrollbar

diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/state.ts b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerViewProvider/state.ts
@@ -6,7 +6,6 @@ export interface State {
     activeTags: string[];
     dragging: boolean;
     filters: Record<string, any> | undefined;
-    hasPreviouslyUploadedFiles: boolean | null;
     isSearch: boolean;
     limit: number;
     listSort?: ListFilesSort;
@@ -39,7 +38,6 @@ export const initializeState = (): State => {
         dragging: false,
         isSearch: false,
         filters: undefined,
-        hasPreviouslyUploadedFiles: null,
         limit: 50,
         listSort: [],
         listTable: false,