Web: Files: refactoring

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ReactSVG } from "react-svg";
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
@@ -44,7 +44,6 @@ const FileItem = createSelectable((props) => {
     viewAs,
     setTooltipPosition,
     getIcon,
-    startDrag,
     filter,
     parentFolder,
     setIsLoading,
@@ -59,7 +58,7 @@ const FileItem = createSelectable((props) => {
     addExpandedKeys,
     setMediaViewerData,
   } = props;
-
+  const [isMouseDown, setIsMouseDown] = useState(false);
   const {
     id,
     fileExst,
@@ -140,6 +139,7 @@ const FileItem = createSelectable((props) => {
   };
 
   const onMouseDown = (e) => {
+    setIsMouseDown(true);
     if (!draggable) {
       return;
     }
@@ -197,24 +197,27 @@ const FileItem = createSelectable((props) => {
     }
   };
 
-  const onClickHandler = (e) => {
+  const onMouseUpHandler = (e) => {
     if (
       e.target.closest(".checkbox") ||
       e.target.tagName === "INPUT" ||
       e.target.closest(".expandButton") ||
-      e.button !== 0 ||
+      e.button !== 0
-      startDrag
     )
       return;
 
-    if (isFolder && viewAs === "tile") onFilesClick();
+    if (isFolder && viewAs === "tile") {
-    else {
+      if (!isMouseDown) return;
+      onFilesClick();
+    } else {
       if (checked) {
         onContentFileSelect(!checked, item);
       } else {
+        if (!isMouseDown) return;
         fileContextClick && fileContextClick(item);
       }
     }
+    setIsMouseDown(false);
   };
 
   let value = fileExst || contentLength ? `file_${id}` : `folder_${id}`;
@@ -240,7 +243,6 @@ const FileItem = createSelectable((props) => {
 
   let className = isDragging ? " droppable" : "";
   if (draggable) className += " draggable not-selectable";
-  //if (draggable) className += `${startDrag ? " not-selectable " : ""}`;
 
   const sharedButton =
     !canShare || (isPrivacy && !fileExst) || isEdit || id <= 0 || isMobile
@@ -248,7 +250,6 @@ const FileItem = createSelectable((props) => {
       : getSharedButton(shared);
 
   const temporaryIcon = getIcon(96, fileExst, providerKey, contentLength);
-
   return (
     <div ref={props.selectableRef}>
       <DragAndDrop
@@ -274,7 +275,7 @@ const FileItem = createSelectable((props) => {
             isPrivacy={isPrivacy}
             thumbnailClick={onFilesClick}
             onDoubleClick={onFilesClick}
-            onMouseUp={onClickHandler}
+            onMouseUp={onMouseUpHandler}
           >
             <FilesContent
               item={item}
@@ -297,7 +298,7 @@ const FileItem = createSelectable((props) => {
             {...contextOptionsProps}
             contextButtonSpacerWidth={displayShareButton}
             onDoubleClick={onFilesClick}
-            onMouseUp={onClickHandler}
+            onMouseUp={onMouseUpHandler}
           >
             <FilesContent
               item={item}
@@ -357,7 +358,6 @@ export default inject(
       setStartDrag,
       setTooltipPosition,
       viewAs,
-      startDrag,
       filter,
       setIsLoading,
       fetchFiles,
@@ -372,7 +372,6 @@ export default inject(
     const selectedItem = selection.find(
       (x) => x.id === item.id && x.fileExst === item.fileExst
     );
-
     const isFolder = selectedItem ? false : item.fileExst ? false : true;
     const draggable =
       !isRecycleBinFolder && selectedItem && selectedItem.id !== id;
@@ -406,8 +405,6 @@ export default inject(
       isFolder,
       draggable,
 
-      isItemsSelected: !!selection.length,
-
       actionId: fileActionStore.id,
       setSharingPanelVisible,
       setChangeOwnerPanelVisible,
@@ -423,7 +420,6 @@ export default inject(
       setTooltipPosition,
       viewAs,
       getIcon,
-      startDrag,
 
       filter,
       parentFolder,

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { withRouter } from "react-router";
 import { Trans, withTranslation } from "react-i18next";
 import { isMobile } from "react-device-detect";
@@ -32,32 +32,28 @@ import Badges from "./sub-components/Badges";
 
 const sideColor = "#A3A9AE";
 
-const Content = ({
+const Content = memo(
-  viewAs,
+  ({ viewAs, sectionWidth, fileExst, onMobileRowClick, ...props }) => {
-  sectionWidth,
+    return viewAs === "tile" ? (
-  fileExst,
+      <SimpleTileContent
-  onMobileRowClick,
+        sideColor={sideColor}
-  ...props
+        isFile={fileExst}
-}) => {
+        onClick={onMobileRowClick}
-  return viewAs === "tile" ? (
+        disableSideInfo
-    <SimpleTileContent
+        {...props}
-      sideColor={sideColor}
+      />
-      isFile={fileExst}
+    ) : (
-      onClick={onMobileRowClick}
+      <SimpleRowContent
-      disableSideInfo
+        sectionWidth={sectionWidth}
-      {...props}
+        isMobile={isMobile}
-    />
+        sideColor={sideColor}
-  ) : (
+        isFile={fileExst}
-    <SimpleRowContent
+        onClick={onMobileRowClick}
-      sectionWidth={sectionWidth}
+        {...props}
-      isMobile={isMobile}
+      />
-      sideColor={sideColor}
+    );
-      isFile={fileExst}
+  }
-      onClick={onMobileRowClick}
+);
-      {...props}
-    />
-  );
-};
 
 class FilesContent extends React.Component {
   constructor(props) {
@@ -397,9 +393,24 @@ class FilesContent extends React.Component {
       .catch((err) => toastr.error(err));
   };
 
+  renderExst = (fileExst) => {
+    return (
+      <Text
+        className="badge-ext"
+        as="span"
+        color="#A3A9AE"
+        fontSize="15px"
+        fontWeight={600}
+        title={fileExst}
+        truncate={true}
+      >
+        {fileExst}
+      </Text>
+    );
+  };
+
   render() {
     const { itemTitle, showConvertDialog, newItems } = this.state;
-
     const {
       t,
       viewAs,
@@ -447,6 +458,8 @@ class FilesContent extends React.Component {
         ? { noHover: true }
         : { onClick: onFilesClick };
 
+    const exstElement = this.renderExst(fileExst);
+
     return isEdit ? (
       <EditingWrapperComponent
         itemTitle={itemTitle}
@@ -483,34 +496,10 @@ class FilesContent extends React.Component {
             isTextOverflow
           >
             {titleWithoutExt}
-            {fileExst && viewAs === "tile" ? (
+            {fileExst && viewAs === "tile" ? exstElement : null}
-              <Text
-                className="badge-ext"
-                as="span"
-                color="#A3A9AE"
-                fontSize="15px"
-                fontWeight={600}
-                title={fileExst}
-                truncate={true}
-              >
-                {fileExst}
-              </Text>
-            ) : null}
           </Link>
           <div className="badges">
-            {fileExst && viewAs !== "tile" ? (
+            {fileExst && viewAs !== "tile" ? exstElement : null}
-              <Text
-                className="badge-ext"
-                as="span"
-                color="#A3A9AE"
-                fontSize="15px"
-                fontWeight={600}
-                title={fileExst}
-                truncate={true}
-              >
-                {fileExst}
-              </Text>
-            ) : null}
             <Badges
               item={item}
               newItems={this.state.newItems}

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

@@ -149,7 +149,7 @@ const StyledOptionButton = styled.div`
   }
 `;
 
-class Tile extends React.Component {
+class Tile extends React.PureComponent {
   // shouldComponentUpdate(nextProps) {
   //   if (this.props.needForUpdate) {
   //     return this.props.needForUpdate(this.props, nextProps);
@@ -183,7 +183,6 @@ class Tile extends React.Component {
   };
 
   render() {
-    //console.log("Row render");
     const {
       checked,
       children,

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

@@ -12,13 +12,11 @@ import {
 const Badges = (props) => {
   const {
     newItems,
-    viewAs,
     item,
     canWebEdit,
     isTrashFolder,
     canConvert,
     accessToEdit,
-
     onFilesClick,
     onClickLock,
     onClickFavorite,
@@ -27,7 +25,6 @@ const Badges = (props) => {
   } = props;
   const { id, locked, fileStatus, versionGroup, title } = item;
   const { fileExst } = item;
-
   const showNew = !!newItems;
   return fileExst ? (
     <div className="badges additional-badges">
@@ -125,13 +122,12 @@ const Badges = (props) => {
   );
 };
 
-export default inject(({ filesStore, treeFoldersStore }, { item }) => {
+export default inject(({ treeFoldersStore }, { item }) => {
-  const { viewAs } = filesStore;
   const { isRecycleBinFolder: isTrashFolder } = treeFoldersStore;
   const { access } = item;
   const accessToEdit =
     access === ShareAccessRights.FullAccess ||
     access === ShareAccessRights.None; // TODO: fix access type for owner (now - None)
 
-  return { viewAs, isTrashFolder, accessToEdit };
+  return { isTrashFolder, accessToEdit };
 })(observer(Badges));