Web: Files: refactoring

2021-04-20 01:19:52 +03:00 · 2021-04-20 01:19:52 +03:00 · 4320fe7e00
commit 4320fe7e00
parent d90df23ad1
4 changed files with 59 additions and 79 deletions
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FileItem.js
+++ b/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 ||
-      startDrag
+      e.button !== 0
    )
      return;

-    if (isFolder && viewAs === "tile") onFilesClick();
-    else {
+    if (isFolder && viewAs === "tile") {
+      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,
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js
+++ b/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 = ({
-  viewAs,
-  sectionWidth,
-  fileExst,
-  onMobileRowClick,
-  ...props
-}) => {
-  return viewAs === "tile" ? (
-    <SimpleTileContent
-      sideColor={sideColor}
-      isFile={fileExst}
-      onClick={onMobileRowClick}
-      disableSideInfo
-      {...props}
-    />
-  ) : (
-    <SimpleRowContent
-      sectionWidth={sectionWidth}
-      isMobile={isMobile}
-      sideColor={sideColor}
-      isFile={fileExst}
-      onClick={onMobileRowClick}
-      {...props}
-    />
-  );
-};
+const Content = memo(
+  ({ viewAs, sectionWidth, fileExst, onMobileRowClick, ...props }) => {
+    return viewAs === "tile" ? (
+      <SimpleTileContent
+        sideColor={sideColor}
+        isFile={fileExst}
+        onClick={onMobileRowClick}
+        disableSideInfo
+        {...props}
+      />
+    ) : (
+      <SimpleRowContent
+        sectionWidth={sectionWidth}
+        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" ? (
-              <Text
-                className="badge-ext"
-                as="span"
-                color="#A3A9AE"
-                fontSize="15px"
-                fontWeight={600}
-                title={fileExst}
-                truncate={true}
-              >
-                {fileExst}
-              </Text>
-            ) : null}
+            {fileExst && viewAs === "tile" ? exstElement : null}
          </Link>
          <div className="badges">
-            {fileExst && viewAs !== "tile" ? (
-              <Text
-                className="badge-ext"
-                as="span"
-                color="#A3A9AE"
-                fontSize="15px"
-                fontWeight={600}
-                title={fileExst}
-                truncate={true}
-              >
-                {fileExst}
-              </Text>
-            ) : null}
+            {fileExst && viewAs !== "tile" ? exstElement : null}
            <Badges
              item={item}
              newItems={this.state.newItems}
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTile/sub-components/Tile.js
+++ b/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,
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js
+++ b/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 }) => {
-  const { viewAs } = filesStore;
+export default inject(({ treeFoldersStore }, { item }) => {
  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));