Web: Files: click events fix

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

@@ -140,7 +140,6 @@ const FileItem = createSelectable((props) => {
   };
 
   const onMouseDown = (e) => {
-    console.log(e.target, e.currentTarget);
     if (!draggable) {
       return;
     }
@@ -161,7 +160,6 @@ const FileItem = createSelectable((props) => {
       : false;
     const label = e.currentTarget.getAttribute("label");
     if (mouseButton || e.currentTarget.tagName !== "DIV" || label) {
-      console.log("here");
       return;
     }
 
@@ -172,8 +170,6 @@ const FileItem = createSelectable((props) => {
   const onFilesClick = () => {
     if (isRecycleBin) return;
 
-    fileContextClick();
-
     if (!fileExst && !contentLength) {
       setIsLoading(true);
 
@@ -201,6 +197,26 @@ const FileItem = createSelectable((props) => {
     }
   };
 
+  const onClickHandler = (e) => {
+    if (
+      e.target.closest(".checkbox") ||
+      e.target.tagName === "INPUT" ||
+      e.target.closest(".expandButton") ||
+      e.button !== 0 ||
+      startDrag
+    )
+      return;
+
+    if (isFolder && viewAs === "tile") onFilesClick();
+    else {
+      if (checked) {
+        onContentFileSelect(!checked, item);
+      } else {
+        fileContextClick && fileContextClick(item);
+      }
+    }
+  };
+
   let value = fileExst || contentLength ? `file_${id}` : `folder_${id}`;
   value += draggable ? "_draggable" : "";
 
@@ -223,8 +239,8 @@ const FileItem = createSelectable((props) => {
   const isDragging = isFolder && access < 2 && !isRecycleBin;
 
   let className = isDragging ? " droppable" : "";
-  //if (draggable) className += " draggable not-selectable";
+  if (draggable) className += " draggable not-selectable";
-  if (draggable) className += `${startDrag ? " not-selectable " : ""}`;
+  //if (draggable) className += `${startDrag ? " not-selectable " : ""}`;
 
   const sharedButton =
     !canShare || (isPrivacy && !fileExst) || isEdit || id <= 0 || isMobile
@@ -256,7 +272,9 @@ const FileItem = createSelectable((props) => {
             {...contextOptionsProps}
             temporaryIcon={temporaryIcon}
             isPrivacy={isPrivacy}
+            thumbnailClick={onFilesClick}
             onDoubleClick={onFilesClick}
+            onMouseUp={onClickHandler}
           >
             <FilesContent
               item={item}
@@ -279,6 +297,7 @@ const FileItem = createSelectable((props) => {
             {...contextOptionsProps}
             contextButtonSpacerWidth={displayShareButton}
             onDoubleClick={onFilesClick}
+            onMouseUp={onClickHandler}
           >
             <FilesContent
               item={item}

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

@@ -27,7 +27,7 @@ const FolderStyles = css`
 `;
 
 const StyledTile = styled.div`
-  cursor: default;
+  cursor: ${(props) => (props.isFolder ? "pointer" : "default")};
 
   min-height: 55px;
   width: 100%;
@@ -164,30 +164,19 @@ class Tile extends React.Component {
   }
 
   getIconFile = () => {
-    const { item, temporaryIcon, onDoubleClick } = this.props;
+    const { item, temporaryIcon, thumbnailClick } = this.props;
 
     const icon = item.thumbnail ? item.thumbnail : temporaryIcon;
     let className = "thumbnailImage";
     if (!item.thumbnail) className += " temporary-icon";
 
     return (
-      <Link type="page" onClick={onDoubleClick}>
+      <Link type="page" onClick={thumbnailClick}>
         <ReactSVG className={className} src={icon} loading={svgLoader} />
       </Link>
     );
   };
 
-  onClickHandler = (e) => {
-    const { onSelect, item, checked } = this.props;
-    console.log(
-      e.target.closest(".thumbnailImage"),
-      e.target.closest(".checkbox")
-    );
-    if (e.target.closest(".checkbox") || e.target.tagName === "INPUT") return;
-
-    onSelect && onSelect(!checked, item);
-  };
-
   changeCheckbox = (e) => {
     const { onSelect, item } = this.props;
     onSelect && onSelect(e.target.checked, item);
@@ -205,7 +194,6 @@ class Tile extends React.Component {
       isFolder,
       tileContextClick,
       dragging,
-      onDoubleClick,
     } = this.props;
 
     const renderCheckbox = Object.prototype.hasOwnProperty.call(
@@ -236,15 +224,13 @@ class Tile extends React.Component {
     };
 
     const icon = this.getIconFile();
-
     return (
       <StyledTile
         ref={this.tile}
         {...this.props}
         onContextMenu={onContextMenu}
         dragging={dragging && isFolder}
-        onClick={this.onClickHandler}
+        isFolder={isFolder}
-        onDoubleClick={onDoubleClick}
       >
         {isFolder ? (
           <>

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

@@ -53,7 +53,6 @@ const SectionBodyContent = (props) => {
   }, [onMouseUp, onMouseMove, startDrag, folderId]);
 
   const onMouseMove = (e) => {
-    console.log(e.target);
     if (!dragging) {
       document.body.classList.add("drag-cursor");
       setDragging(true);
@@ -66,7 +65,6 @@ const SectionBodyContent = (props) => {
       return;
     }
     const droppable = wrapperElement.closest(".droppable");
-    console.log(droppable);
     if (currentDroppable !== droppable) {
       if (currentDroppable) {
         currentDroppable.classList.remove("droppable-hover");

products/ASC.Files/Client/src/store/ContextOptionsStore.js

@@ -63,9 +63,11 @@ class ContextOptionsStore {
 
   onClickFavorite = (e) => {
     const { id } = this.filesStore.selection[0];
+    console.log(e);
+    console.log(e.currentTarget, e.currentTarget.dataset, e);
     const data = (e.currentTarget && e.currentTarget.dataset) || e;
     const { action } = data;
-
+    console.log(action, data);
     this.filesActionsStore
       .setFavoriteAction(action, id)
       .then(() =>