Web: Files: fixed dnd media files

packages/client/src/HOCs/withFileActions.js

@@ -82,6 +82,8 @@ export default function withFileActions(WrappedFileItem) {
         setBufferSelection,
         isActive,
         inProgress,
+        isSelected,
+        setSelection,
       } = this.props;
 
       const { isThirdPartyFolder } = item;
@@ -119,7 +121,11 @@ export default function withFileActions(WrappedFileItem) {
       e.preventDefault();
       setTooltipPosition(e.pageX, e.pageY);
       setStartDrag(true);
-      !isActive && setBufferSelection(null);
+
+      if (isFileName && !isSelected) {
+        setSelection([]);
+        setBufferSelection(item);
+      }
     };
 
     onMouseClick = (e) => {
@@ -221,7 +227,7 @@ export default function withFileActions(WrappedFileItem) {
         isPrivacy,
 
         sectionWidth,
-        checked,
+        isSelected,
         dragging,
         isFolder,
 
@@ -249,7 +255,7 @@ export default function withFileActions(WrappedFileItem) {
         ? "38px"
         : "96px";
 
-      const checkedProps = id <= 0 ? false : checked;
+      const checkedProps = id <= 0 ? false : isSelected;
 
       return (
         <WrappedFileItem
@@ -311,6 +317,7 @@ export default function withFileActions(WrappedFileItem) {
         dragging,
         setDragging,
         selection,
+        setSelection,
         setTooltipPosition,
         setStartDrag,
 
@@ -379,7 +386,7 @@ export default function withFileActions(WrappedFileItem) {
         isFolder,
         allowShareIn: filesStore.canShare,
 
-        checked: !!selectedItem,
+        isSelected: !!selectedItem,
         //parentFolder: selectedFolderStore.parentId,
         setParentId: selectedFolderStore.setParentId,
         isTrashFolder: isRecycleBinFolder,
@@ -396,6 +403,8 @@ export default function withFileActions(WrappedFileItem) {
         setSelected,
         withCtrlSelect,
         withShiftSelect,
+
+        setSelection,
       };
     }
   )(observer(WithFileActions));

packages/client/src/components/DragTooltip/DragTooltip.js

@@ -39,12 +39,11 @@ const DragTooltip = (props) => {
     tooltipOptions,
     iconOfDraggedFile,
     isSingleItem,
-    item,
+    title,
     tooltipPageX,
     tooltipPageY,
   } = props;
   const { filesCount, operationName } = tooltipOptions;
-  const { title } = item;
 
   useEffect(() => {
     setTooltipPosition();
@@ -108,12 +107,14 @@ export default inject(({ filesStore }) => {
     tooltipOptions,
     tooltipPageX,
     tooltipPageY,
+    bufferSelection,
   } = filesStore;
 
-  const isSingleItem = selection.length === 1;
+  const isSingleItem = selection.length === 1 || bufferSelection;
+  const item = bufferSelection ? bufferSelection : selection[0];
 
   return {
-    item: selection[0],
+    title: item?.title,
     isSingleItem,
     tooltipOptions,
     iconOfDraggedFile,

packages/client/src/components/DragTooltip/index.js

@@ -5,6 +5,8 @@ import DragTooltip from "./DragTooltip";
 const Tooltip = ({ dragging }) => (dragging ? <DragTooltip /> : <></>);
 
 export default inject(({ filesStore }) => {
-  const { dragging, selection, startDrag } = filesStore;
+  const { dragging, selection, startDrag, bufferSelection } = filesStore;
-  return { dragging: dragging && selection[0] && startDrag };
+  return {
+    dragging: dragging && (selection[0] || bufferSelection) && startDrag,
+  };
 })(observer(Tooltip));

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js

@@ -120,7 +120,7 @@ const FilesRowContent = ({
         isFile={fileExst || contentLength}
       >
         <Link
-          className={`row-content-link ${isMedia ? "media-file" : ""}`}
+          className="row-content-link"
           containerWidth="55%"
           type="page"
           title={title}

packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js

@@ -57,7 +57,7 @@ const FileNameCell = ({
         {...linkStyles}
         color={theme.filesSection.tableView.fileName.linkColor}
         isTextOverflow
-        className={`item-file-name ${isMedia ? "media-file" : ""}`}
+        className="item-file-name"
       >
         {titleWithoutExt}
       </Link>

packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js

@@ -91,7 +91,7 @@ const FilesTileContent = ({
         isRooms={isRooms}
       >
         <Link
-          className={`item-file-name ${isMedia ? "media-file" : ""}`}
+          className="item-file-name"
           containerWidth="100%"
           type="page"
           title={title}

packages/client/src/store/FilesActionsStore.js

@@ -1287,9 +1287,13 @@ class FilesActionStore {
     const fileIds = [];
     const deleteAfter = false;
 
-    const { selection } = this.filesStore;
+    const { bufferSelection } = this.filesStore;
     const { isRootFolder } = this.selectedFolderStore;
 
+    const selection = bufferSelection
+      ? [bufferSelection]
+      : this.filesStore.selection;
+
     const isCopy = selection.findIndex((f) => f.security.Move) === -1;
 
     const operationData = {

packages/components/selection-area/SelectionArea.js

@@ -267,7 +267,7 @@ class SelectionArea extends React.Component {
       e.target.closest(".row-selected") ||
       !e.target.closest("#sectionScroll") ||
       e.target.closest(".table-container_row-checkbox") ||
-      e.target.closest(".media-file")
+      e.target.closest(".item-file-name")
     )
       return;