Web: Files: applied contextOptionsStore in tile

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

@@ -7,7 +7,7 @@ import Loaders from "@appserver/common/components/Loaders";
 import { isMobile } from "react-device-detect";
 
 const FilesRowContainer = (props) => {
-  const { isLoaded, isLoading, getFilesContextOptions } = props;
+  const { isLoaded, isLoading } = props;
   console.log("render container");
   return !isLoaded || (isMobile && isLoading) ? (
     <Loaders.Rows />
@@ -25,7 +25,6 @@ const FilesRowContainer = (props) => {
                 key={item.id}
                 item={item}
                 sectionWidth={context.sectionWidth}
-                getFilesContextOptions={getFilesContextOptions}
               />
             );
           })}

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

@@ -1,12 +1,31 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
+import { ReactSVG } from "react-svg";
 import { Consumer } from "@appserver/components/utils/context";
+import { withTranslation } from "react-i18next";
 import TileContainer from "./TileContainer";
 import FilesTileContent from "./FilesTileContent";
 import Tile from "./Tile";
 import DragAndDrop from "@appserver/components/drag-and-drop";
 
 const FilesTileContainer = ({ t, filesList, fileActionType, ...props }) => {
+  const getItemIcon = (isEdit, item) => {
+    const svgLoader = () => <div style={{ width: "24px" }}></div>;
+    console.log;
+    return (
+      <>
+        <ReactSVG
+          className={`react-svg-icon${isEdit ? " is-edit" : ""}`}
+          src={item.icon}
+          loading={svgLoader}
+        />
+        {item.isPrivacy && item.fileExst && (
+          <EncryptedFileIcon isEdit={isEdit} />
+        )}
+      </>
+    );
+  };
+
   return (
     <Consumer>
       {(context) => (
@@ -26,18 +45,14 @@ const FilesTileContainer = ({ t, filesList, fileActionType, ...props }) => {
             const contextOptionsProps =
               !isEdit && contextOptions && contextOptions.length > 0
                 ? {
-                    contextOptions: props.getFilesContextOptions(item),
+                    contextOptions: props.getContextOptions(item, t),
                   }
                 : {};
             const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
-            const element = props.getItemIcon(
-              isEdit || item.id <= 0,
-              item.icon,
-              item.fileExst
-            );
+            const element = getItemIcon(isEdit || item.id <= 0, item);
 
             let classNameProp =
-              isFolder && item.access < 2 && !isRecycleBin
+              isFolder && item.access < 2 && !props.isRecycleBin
                 ? { className: " dropable" }
                 : {};
 
@@ -84,9 +99,19 @@ const FilesTileContainer = ({ t, filesList, fileActionType, ...props }) => {
   );
 };
 
-export default inject(({ filesStore }) => {
-  const { filesList, fileActionStore } = filesStore;
-  const { type: fileActionType } = fileActionStore;
+export default inject(
+  ({ filesStore, contextOptionsStore, treeFoldersStore }) => {
+    const { filesList, fileActionStore } = filesStore;
+    const { type: fileActionType } = fileActionStore;
+    const { getContextOptions } = contextOptionsStore;
+    const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
 
-  return { filesList, fileActionType };
-})(observer(FilesTileContainer));
+    return {
+      filesList,
+      fileActionType,
+      getContextOptions,
+      isPrivacy: isPrivacyFolder,
+      isRecycleBin: isRecycleBinFolder,
+    };
+  }
+)(withTranslation("Home")(observer(FilesTileContainer)));

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

@@ -9,12 +9,9 @@ import FilesRowContainer from "./FilesRow/FilesRowContainer";
 import FilesTileContainer from "./FilesTile/FilesTileContainer";
 import EmptyContainer from "./EmptyContainer";
 
-import { AppServerConfig, FileAction } from "@appserver/common/constants";
 //import copy from "copy-to-clipboard";
 import config from "../../../../../../package.json";
-import toastr from "studio/toastr";
-import copy from "copy-to-clipboard";
-import { combineUrl } from "@appserver/common/utils";
+
 import { ReactSVG } from "react-svg";
 
 const backgroundDragColor = "#EFEFB2";
@@ -390,353 +387,6 @@ class SectionBodyContent extends React.Component {
   //   this.props.copyToAction(this.props.dragItem);
   //   this.onCloseThirdPartyMoveDialog();
   // };
-
-  getItemIcon = (isEdit, icon, fileExst) => {
-    const { isPrivacyFolder } = this.props;
-    const svgLoader = () => <div style={{ width: "24px" }}></div>;
-    return (
-      <>
-        <ReactSVG
-          className={`react-svg-icon${isEdit ? " is-edit" : ""}`}
-          src={icon}
-          loading={svgLoader}
-        />
-        {isPrivacyFolder && fileExst && <EncryptedFileIcon isEdit={isEdit} />}
-      </>
-    );
-  };
-
-  getFilesContextOptions = (item, isFolder = null) => {
-    const {
-      t,
-      isTabletView,
-      setIsVerHistoryPanel,
-      fetchFileVersions,
-      history,
-      homepage,
-      setFavoriteAction,
-      finalizeVersionAction,
-      lockFileAction,
-      onSelectItem,
-      setSharingPanelVisible,
-      setChangeOwnerPanelVisible,
-      openDocEditor,
-      setMediaViewerData,
-      setMoveToPanelVisible,
-      setCopyPanelVisible,
-      duplicateAction,
-      setAction,
-      setThirdpartyInfo,
-      isRootFolder,
-      setRemoveItem,
-      setDeleteThirdPartyDialogVisible,
-      deleteFileAction,
-      openLocationAction,
-      deleteFolderAction,
-    } = this.props;
-
-    const {
-      contextOptions,
-      id,
-      folderId,
-      locked,
-      fileExst,
-      canOpenPlayer,
-      providerKey,
-      viewUrl,
-      title,
-      parentId,
-      webUrl,
-    } = item;
-
-    const onOpenLocation = () => {
-      const { selection } = this.props;
-      const { id } = selection[0];
-      const locationId = isFolder ? id : folderId;
-      openLocationAction(locationId, isFolder);
-    };
-
-    const isSharable = item.access !== 1 && item.access !== 0;
-    const isThirdPartyFolder = providerKey && isRootFolder;
-
-    const showVersionHistory = () => {
-      if (!isTabletView) {
-        fetchFileVersions(id + "");
-        setIsVerHistoryPanel(true);
-      } else {
-        history.push(
-          combineUrl(AppServerConfig.proxyURL, homepage, `/${id}/history`)
-        );
-      }
-    };
-
-    const onClickFavorite = (e) => {
-      const { action } = e.currentTarget.dataset;
-      setFavoriteAction(action, id)
-        .then(() =>
-          action === "mark"
-            ? toastr.success(t("MarkedAsFavorite"))
-            : toastr.success(t("RemovedFromFavorites"))
-        )
-        .catch((err) => toastr.error(err));
-    };
-
-    const finalizeVersion = () =>
-      finalizeVersionAction(id).catch((err) => toastr.error(err));
-
-    const lockFile = () =>
-      lockFileAction(id, !locked).catch((err) => toastr.error(err));
-
-    const onClickShare = () => {
-      onSelectItem(item);
-      setSharingPanelVisible(true);
-    };
-
-    const onOwnerChange = () => setChangeOwnerPanelVisible(true);
-
-    const onClickLinkForPortal = () => {
-      const isFile = !!fileExst;
-      copy(
-        isFile
-          ? canOpenPlayer
-            ? `${window.location.href}&preview=${id}`
-            : webUrl
-          : `${window.location.origin + homepage}/filter?folder=${id}`
-      );
-
-      toastr.success(t("LinkCopySuccess"));
-    };
-
-    const onClickLinkEdit = () => openDocEditor(id, providerKey);
-
-    const onMediaFileClick = (fileId) => {
-      const itemId = typeof fileId !== "object" ? fileId : id;
-      setMediaViewerData({ visible: true, id: itemId });
-    };
-
-    const onClickDownload = () => window.open(viewUrl, "_blank");
-    const onMoveAction = () => setMoveToPanelVisible(true);
-    const onCopyAction = () => setCopyPanelVisible(true);
-    const onDuplicate = () =>
-      duplicateAction(item, t("CopyOperation")).catch((err) =>
-        toastr.error(err)
-      );
-
-    const onClickRename = () => {
-      setAction({
-        type: FileAction.Rename,
-        extension: fileExst,
-        id,
-      });
-    };
-
-    const onChangeThirdPartyInfo = () => setThirdpartyInfo();
-
-    const onClickDelete = () => {
-      if (isThirdPartyFolder) {
-        const splitItem = id.split("-");
-        setRemoveItem({ id: splitItem[splitItem.length - 1], title });
-        setDeleteThirdPartyDialogVisible(true);
-        return;
-      }
-
-      const translations = {
-        deleteOperation: t("DeleteOperation"),
-      };
-
-      fileExst
-        ? deleteFileAction(id, folderId, translations)
-            .then(() => toastr.success(t("FileRemoved")))
-            .catch((err) => toastr.error(err))
-        : deleteFolderAction(id, parentId, translations)
-            .then(() => toastr.success(t("FolderRemoved")))
-            .catch((err) => toastr.error(err));
-    };
-
-    return contextOptions.map((option) => {
-      switch (option) {
-        case "open":
-          return {
-            key: option,
-            label: t("Open"),
-            icon: "images/catalog.folder.react.svg",
-            onClick: onOpenLocation,
-            disabled: false,
-          };
-        case "show-version-history":
-          return {
-            key: option,
-            label: t("ShowVersionHistory"),
-            icon: "images/history.react.svg",
-            onClick: showVersionHistory,
-            disabled: false,
-          };
-        case "finalize-version":
-          return {
-            key: option,
-            label: t("FinalizeVersion"),
-            icon: "images/history-finalized.react.svg",
-            onClick: finalizeVersion,
-            disabled: false,
-          };
-        case "separator0":
-        case "separator1":
-        case "separator2":
-        case "separator3":
-          return { key: option, isSeparator: true };
-        case "open-location":
-          return {
-            key: option,
-            label: t("OpenLocation"),
-            icon: "images/download-as.react.svg",
-            onClick: onOpenLocation,
-            disabled: false,
-          };
-        case "mark-as-favorite":
-          return {
-            key: option,
-            label: t("MarkAsFavorite"),
-            icon: "images/favorites.react.svg",
-            onClick: onClickFavorite,
-            disabled: false,
-            "data-action": "mark",
-          };
-        case "block-unblock-version":
-          return {
-            key: option,
-            label: t("UnblockVersion"),
-            icon: "images/lock.react.svg",
-            onClick: lockFile,
-            disabled: false,
-          };
-        case "sharing-settings":
-          return {
-            key: option,
-            label: t("SharingSettings"),
-            icon: "images/catalog.shared.react.svg",
-            onClick: onClickShare,
-            disabled: isSharable,
-          };
-        case "send-by-email":
-          return {
-            key: option,
-            label: t("SendByEmail"),
-            icon: "/static/images/mail.react.svg",
-            disabled: true,
-          };
-        case "owner-change":
-          return {
-            key: option,
-            label: t("ChangeOwner"),
-            icon: "images/catalog.user.react.svg",
-            onClick: onOwnerChange,
-            disabled: false,
-          };
-        case "link-for-portal-users":
-          return {
-            key: option,
-            label: t("LinkForPortalUsers"),
-            icon: "/static/images/invitation.link.react.svg",
-            onClick: onClickLinkForPortal,
-            disabled: false,
-          };
-        case "edit":
-          return {
-            key: option,
-            label: t("Edit"),
-            icon: "images/access.edit.react.svg",
-            onClick: onClickLinkEdit,
-            disabled: false,
-          };
-        case "preview":
-          return {
-            key: option,
-            label: t("Preview"),
-            icon: "EyeIcon",
-            onClick: onClickLinkEdit,
-            disabled: true,
-          };
-        case "view":
-          return {
-            key: option,
-            label: t("View"),
-            icon: "/static/images/eye.react.svg",
-            onClick: onMediaFileClick,
-            disabled: false,
-          };
-        case "download":
-          return {
-            key: option,
-            label: t("Download"),
-            icon: "images/download.react.svg",
-            onClick: onClickDownload,
-            disabled: false,
-          };
-        case "move":
-          return {
-            key: option,
-            label: t("MoveTo"),
-            icon: "images/move.react.svg",
-            onClick: onMoveAction,
-            disabled: false,
-          };
-        case "copy":
-          return {
-            key: option,
-            label: t("Copy"),
-            icon: "/static/images/copy.react.svg",
-            onClick: onCopyAction,
-            disabled: false,
-          };
-        case "duplicate":
-          return {
-            key: option,
-            label: t("Duplicate"),
-            icon: "/static/images/copy.react.svg",
-            onClick: onDuplicate,
-            disabled: false,
-          };
-        case "rename":
-          return {
-            key: option,
-            label: t("Rename"),
-            icon: "images/rename.react.svg",
-            onClick: onClickRename,
-            disabled: false,
-          };
-        case "change-thirdparty-info":
-          return {
-            key: option,
-            label: t("ThirdPartyInfo"),
-            icon: "images/access.edit.react.svg",
-            onClick: onChangeThirdPartyInfo,
-            disabled: false,
-          };
-        case "delete":
-          return {
-            key: option,
-            label: isThirdPartyFolder ? t("DeleteThirdParty") : t("Delete"),
-            icon: "/static/images/catalog.trash.react.svg",
-            onClick: onClickDelete,
-            disabled: false,
-          };
-        case "remove-from-favorites":
-          return {
-            key: option,
-            label: t("RemoveFromFavorites"),
-            icon: "images/favorites.react.svg",
-            onClick: onClickFavorite,
-            disabled: false,
-            "data-action": "remove",
-          };
-        default:
-          break;
-      }
-
-      return undefined;
-    });
-  };
-
   render() {
     const {
       selection,
@@ -749,8 +399,6 @@ class SectionBodyContent extends React.Component {
       tooltipValue,
       isLoading,
       isEmptyFilesList,
-
-      folderId,
     } = this.props;
 
     console.log("Files Home SectionBodyContent render", this.props);
@@ -774,20 +422,7 @@ class SectionBodyContent extends React.Component {
     ) : (
       <>
         <CustomTooltip ref={this.tooltipRef}>{fileMoveTooltip}</CustomTooltip>
-        {viewAs === "tile" ? (
-          <FilesTileContainer
-            t={t}
-            folderId={folderId}
-            getItemIcon={this.getItemIcon}
-            getFilesContextOptions={this.getFilesContextOptions}
-          />
-        ) : (
-          <FilesRowContainer
-            t={t}
-            //getFilesContextOptions={this.getFilesContextOptions}
-            folderId={folderId}
-          />
-        )}
+        {viewAs === "tile" ? <FilesTileContainer /> : <FilesRowContainer />}
       </>
     );
   }
@@ -802,9 +437,6 @@ export default inject(
     treeFoldersStore,
     filesActionsStore,
     selectedFolderStore,
-    versionHistoryStore,
-    dialogsStore,
-    mediaViewerDataStore,
   }) => {
     const {
       dragging,
@@ -820,42 +452,17 @@ export default inject(
       fileActionStore,
       iconOfDraggedFile,
       filesList,
-      openDocEditor,
     } = filesStore;
-    const { setIsVerHistoryPanel, fetchFileVersions } = versionHistoryStore;
-    const { setMediaViewerData } = mediaViewerDataStore;
-
-    const {
-      setSharingPanelVisible,
-      setChangeOwnerPanelVisible,
-      setMoveToPanelVisible,
-      setCopyPanelVisible,
-      setRemoveItem,
-      setDeleteThirdPartyDialogVisible,
-    } = dialogsStore;
 
     const { isShareFolder, isCommonFolder, isPrivacyFolder } = treeFoldersStore;
-    const { id: fileActionId, setAction } = fileActionStore;
+    const { id: fileActionId } = fileActionStore;
     const {
       setSecondaryProgressBarData,
     } = uploadDataStore.secondaryProgressDataStore;
-    const {
-      copyToAction,
-      moveToAction,
-      setFavoriteAction,
-      finalizeVersionAction,
-      lockFileAction,
-      onSelectItem,
-      duplicateAction,
-      setThirdpartyInfo,
-      deleteFileAction,
-      openLocationAction,
-      deleteFolderAction,
-    } = filesActionsStore;
+    const { copyToAction, moveToAction } = filesActionsStore;
 
     return {
       isAdmin: auth.isAdmin,
-
       dragging,
       fileActionId,
       firstLoad,
@@ -868,38 +475,12 @@ export default inject(
       tooltipValue,
       isLoading,
       isEmptyFilesList: filesList.length <= 0,
-
       setDragging,
       setSecondaryProgressBarData,
       copyToAction,
       moveToAction,
       folderId: selectedFolderStore.id,
-
       isPrivacyFolder,
-
-      openLocationAction,
-      isTabletView: auth.settingsStore,
-      setIsVerHistoryPanel,
-      fetchFileVersions,
-      homepage: config.homepage,
-      setFavoriteAction,
-      finalizeVersionAction,
-      lockFileAction,
-      onSelectItem,
-      setSharingPanelVisible,
-      setChangeOwnerPanelVisible,
-      openDocEditor,
-      setMediaViewerData,
-      setMoveToPanelVisible,
-      setCopyPanelVisible,
-      duplicateAction,
-      setAction,
-      setThirdpartyInfo,
-      deleteFileAction,
-      isRootFolder: selectedFolderStore.isRootFolder,
-      setRemoveItem,
-      setDeleteThirdPartyDialogVisible,
-      deleteFolderAction,
     };
   }
 )(withRouter(withTranslation("Home")(observer(SectionBodyContent))));