Web: Files: Thumbnails: added reset selection when clicking on an empty area of the page, fixed the area when clicking on which the file opens

products/ASC.Files/Client/src/HOCs/withFileActions.js

@@ -98,7 +98,6 @@ export default function withFileActions(WrappedFileItem) {
       const { draggable, setTooltipPosition, setStartDrag, item } = this.props;
       const { sectionWidth } = item;
       const isMobile = sectionWidth < 500;
-
       this.setState({ isMouseDown: true });
 
       if (!draggable) return;
@@ -135,17 +134,19 @@ export default function withFileActions(WrappedFileItem) {
 
     onMouseUpHandler = (e) => {
       const { isMouseDown } = this.state;
-      const { isFolder, viewAs, checked, item } = this.props;
+      const { viewAs, checked, item } = this.props;
+
       if (
         e.target.closest(".checkbox") ||
         e.target.tagName === "INPUT" ||
         e.target.closest(".expandButton") ||
         e.target.closest(".badges") ||
         e.button !== 0
-      )
+      ) {
         return;
+      }
 
-      if (isFolder && viewAs === "tile") {
+      if (viewAs === "tile") {
         if (!isMouseDown || e.target.closest(".edit-button")) return;
         this.onFilesClick();
       } else {
@@ -189,7 +190,6 @@ export default function withFileActions(WrappedFileItem) {
         contentLength,
         fileStatus,
       } = item;
-      console.log("onFilesClick");
       if (isTrashFolder) return;
 
       if (!fileExst && !contentLength) {

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -29,8 +29,7 @@ const FolderStyles = css`
 `;
 
 const StyledTile = styled.div`
-  cursor: ${(props) =>
-    props.isFolder && !props.isRecycleBin ? "pointer" : "default"};
+  cursor: ${(props) => (!props.isRecycleBin ? "pointer" : "default")};
   min-height: 57px;
   width: 100%;
   border: 1px solid #d0d5da;
@@ -268,9 +267,10 @@ class Tile extends React.PureComponent {
               </StyledCheckbox>
             )}
             {renderElement && !(isFolder || (!fileExst && id === -1)) && (
-              <StyledElement>{element}</StyledElement>
+              <StyledElement className="styledElement">{element}</StyledElement>
             )}
             <StyledContent
+              className="styledCOntent"
               isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
             >
               {children}

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js

@@ -115,7 +115,6 @@ class TileContainer extends React.PureComponent {
 
     const Folders = [];
     const Files = [];
-    const CreatedItem = [];
 
     React.Children.map(children, (item, index) => {
       const { isFolder, fileExst, id } = item.props.item;

products/ASC.Files/Client/src/pages/Home/Section/Body/index.js

@@ -26,6 +26,8 @@ const SectionBodyContent = (props) => {
     isRecycleBinFolder,
     moveDragItems,
     viewAs,
+    selection,
+    setSelection,
   } = props;
 
   useEffect(() => {
@@ -37,6 +39,7 @@ const SectionBodyContent = (props) => {
       customScrollElm && customScrollElm.scrollTo(0, 0);
     }
 
+    selection.length > 0 && window.addEventListener("mousedown", onMouseDown);
     startDrag && window.addEventListener("mouseup", onMouseUp);
     startDrag && document.addEventListener("mousemove", onMouseMove);
 
@@ -44,6 +47,7 @@ const SectionBodyContent = (props) => {
     document.addEventListener("dragleave", onDragLeaveDoc);
     document.addEventListener("drop", onDropEvent);
     return () => {
+      window.removeEventListener("mousedown", onMouseDown);
       window.removeEventListener("mouseup", onMouseUp);
       document.removeEventListener("mousemove", onMouseMove);
 
@@ -51,7 +55,12 @@ const SectionBodyContent = (props) => {
       document.removeEventListener("dragleave", onDragLeaveDoc);
       document.removeEventListener("drop", onDropEvent);
     };
-  }, [onMouseUp, onMouseMove, startDrag, folderId]);
+  }, [onMouseUp, onMouseMove, startDrag, folderId, selection.length, viewAs]);
+
+  const onMouseDown = (e) => {
+    if (e.target.closest(".scroll-body") && !e.target.closest(".files-item"))
+      setSelection([]);
+  };
 
   const onMouseMove = (e) => {
     if (!dragging) {
@@ -169,6 +178,8 @@ export default inject(
       setTooltipPosition,
       startDrag,
       setStartDrag,
+      selection,
+      setSelection,
     } = filesStore;
 
     return {
@@ -185,6 +196,8 @@ export default inject(
       isRecycleBinFolder: treeFoldersStore.isRecycleBinFolder,
       moveDragItems: filesActionsStore.moveDragItems,
       viewAs,
+      selection,
+      setSelection,
     };
   }
 )(