IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Files: applied contextOptionsStore in row

Browse Source
This commit is contained in:
Artem Tarasov 2021-03-30 01:11:04 +03:00
parent 72e1e7a08f
commit a50af59dd1
5 changed files with 52 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import { isMobile } from "react-device-detect";
const FilesRowContainer = (props) => {
const { isLoaded, isLoading, getFilesContextOptions } = props;
console.log("render container");
return !isLoaded || (isMobile && isLoading) ? (
<Loaders.Rows />
) : (

358
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRow/SimpleFilesRow.js
View File

@ -1,4 +1,4 @@
import React, { useCallback } from "react";
import React from "react";
import { ReactSVG } from "react-svg";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
@ -9,11 +9,6 @@ import DragAndDrop from "@appserver/components/drag-and-drop";
import Row from "@appserver/components/row";
import FilesRowContent from "./FilesRowContent";
import { withRouter } from "react-router-dom";
import toastr from "studio/toastr";
import { FileAction, AppServerConfig } from "@appserver/common/constants";
import copy from "copy-to-clipboard";
import config from "../../../../../../../package.json";
import { combineUrl } from "@appserver/common/utils";
const StyledSimpleFilesRow = styled(Row)`
margin-top: -2px;
@ -77,51 +72,26 @@ const SimpleFilesRow = (props) => {
isFolder,
draggable,
isRootFolder,
homepage,
isTabletView,
actionId,
selectedFolderId,
setSharingPanelVisible,
setChangeOwnerPanelVisible,
setDeleteThirdPartyDialogVisible,
setRemoveItem,
setMoveToPanelVisible,
setCopyPanelVisible,
openDocEditor,
setIsVerHistoryPanel,
fetchFileVersions,
setAction,
deleteFileAction,
deleteFolderAction,
lockFileAction,
duplicateAction,
finalizeVersionAction,
setFavoriteAction,
openLocationAction,
selectRowAction,
setThirdpartyInfo,
setMediaViewerData,
setDragging,
startUpload,
onSelectItem,
history,
} = props;
console.log("render row");
const {
id,
title,
fileExst,
shared,
access,
contextOptions,
icon,
providerKey,
folderId,
viewUrl,
webUrl,
canOpenPlayer,
locked,
} = item;
let value = fileExst ? `file_${id}` : `folder_${id}`;
@ -181,286 +151,10 @@ const SimpleFilesRow = (props) => {
);
};
const onOpenLocation = () => {
const locationId = isFolder ? id : folderId;
openLocationAction(locationId, isFolder);
};
const showVersionHistory = () => {
if (!isTabletView) {
fetchFileVersions(id + "");
setIsVerHistoryPanel(true);
} else {
history.push(
combineUrl(AppServerConfig.proxyURL, homepage, `/${id}/history`)
);
}
};
const finalizeVersion = () =>
finalizeVersionAction(id).catch((err) => toastr.error(err));
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 lockFile = () =>
lockFileAction(id, !locked).catch((err) => toastr.error(err));
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 onClickDownload = () => window.open(viewUrl, "_blank");
const onDuplicate = () =>
duplicateAction(item, t("CopyOperation")).catch((err) => toastr.error(err));
const onClickRename = () => {
setAction({
type: FileAction.Rename,
extension: fileExst,
id,
});
};
const onChangeThirdPartyInfo = () => setThirdpartyInfo();
const onMediaFileClick = (fileId) => {
const itemId = typeof fileId !== "object" ? fileId : id;
setMediaViewerData({ visible: true, id: itemId });
};
const onClickDelete = () => {
if (isThirdPartyFolder) {
const splitItem = id.split("-");
setRemoveItem({ id: splitItem[splitItem.length - 1], title });
setDeleteThirdPartyDialogVisible(true);
return;
}
const translations = {
deleteOperation: t("DeleteOperation"),
};
item.fileExst
? deleteFileAction(item.id, item.folderId, translations)
.then(() => toastr.success(t("FileRemoved")))
.catch((err) => toastr.error(err))
: deleteFolderAction(item.id, item.parentId, translations)
.then(() => toastr.success(t("FolderRemoved")))
.catch((err) => toastr.error(err));
};
const rowContextClick = () => {
onSelectItem(item);
};
const getFilesContextOptions = useCallback(() => {
const isSharable = item.access !== 1 && item.access !== 0;
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;
});
}, [contextOptions, item]);
const onDropZoneUpload = (files, uploadToFolder) => {
const folderId = uploadToFolder ? uploadToFolder : selectedFolderId;
@ -484,7 +178,7 @@ const SimpleFilesRow = (props) => {
const contextOptionsProps =
!isEdit && contextOptions && contextOptions.length > 0
? {
contextOptions: props.getFilesContextOptions(item, isFolder),
contextOptions: props.getContextOptions(item, t),
}
: {};
@ -536,14 +230,12 @@ export default inject(
treeFoldersStore,
selectedFolderStore,
dialogsStore,
versionHistoryStore,
filesActionsStore,
mediaViewerDataStore,
uploadDataStore,
contextOptionsStore,
},
{ item }
) => {
const { isTabletView } = auth.settingsStore;
const { dragging, setDragging } = initFilesStore;
const { type, extension, id } = filesStore.fileActionStore;
const { isRecycleBinFolder, isPrivacyFolder } = treeFoldersStore;
@ -551,17 +243,13 @@ export default inject(
const {
setSharingPanelVisible,
setChangeOwnerPanelVisible,
setRemoveItem,
setDeleteThirdPartyDialogVisible,
setMoveToPanelVisible,
setCopyPanelVisible,
} = dialogsStore;
const { selection, canShare, openDocEditor, fileActionStore } = filesStore;
const { selection, canShare, fileActionStore } = filesStore;
const { isRootFolder, id: selectedFolderId } = selectedFolderStore;
const { setIsVerHistoryPanel, fetchFileVersions } = versionHistoryStore;
const { setAction } = fileActionStore;
const selectedItem = selection.find(
(x) => x.id === item.id && x.fileExst === item.fileExst
@ -571,22 +259,12 @@ export default inject(
const draggable =
!isRecycleBinFolder && selectedItem && selectedItem.id !== id;
const {
deleteFileAction,
deleteFolderAction,
lockFileAction,
finalizeVersionAction,
duplicateAction,
setFavoriteAction,
openLocationAction,
selectRowAction,
setThirdpartyInfo,
onSelectItem,
} = filesActionsStore;
const { selectRowAction, onSelectItem } = filesActionsStore;
const { setMediaViewerData } = mediaViewerDataStore;
const { startUpload } = uploadDataStore;
const { getContextOptions } = contextOptionsStore;
return {
dragging,
actionType: type,
@ -598,34 +276,20 @@ export default inject(
checked: selection.some((el) => el.id === item.id),
isFolder,
draggable,
isItemsSelected: !!selection.length,
homepage: config.homepage,
isTabletView,
actionId: fileActionStore.id,
setSharingPanelVisible,
setChangeOwnerPanelVisible,
setRemoveItem,
setDeleteThirdPartyDialogVisible,
setMoveToPanelVisible,
setCopyPanelVisible,
openDocEditor,
setIsVerHistoryPanel,
fetchFileVersions,
setAction,
deleteFileAction,
deleteFolderAction,
lockFileAction,
finalizeVersionAction,
duplicateAction,
setFavoriteAction,
openLocationAction,
selectRowAction,
setThirdpartyInfo,
setMediaViewerData,
selectedFolderId,
setDragging,
startUpload,
onSelectItem,
getContextOptions,
};
}
)(withTranslation("Home")(observer(withRouter(SimpleFilesRow))));

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

@ -10,6 +10,7 @@ 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";
@ -390,6 +391,21 @@ class SectionBodyContent extends React.Component {
// 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,
@ -416,6 +432,7 @@ class SectionBodyContent extends React.Component {
setDeleteThirdPartyDialogVisible,
deleteFileAction,
openLocationAction,
deleteFolderAction,
} = this.props;
const {
@ -432,14 +449,16 @@ class SectionBodyContent extends React.Component {
webUrl,
} = item;
const isSharable = item.access !== 1 && item.access !== 0;
const isThirdPartyFolder = providerKey && isRootFolder;
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 + "");
@ -582,7 +601,6 @@ class SectionBodyContent extends React.Component {
disabled: false,
"data-action": "mark",
};
//
case "block-unblock-version":
return {
key: option,
@ -591,7 +609,6 @@ class SectionBodyContent extends React.Component {
onClick: lockFile,
disabled: false,
};
//
case "sharing-settings":
return {
key: option,
@ -600,7 +617,6 @@ class SectionBodyContent extends React.Component {
onClick: onClickShare,
disabled: isSharable,
};
//
case "send-by-email":
return {
key: option,
@ -608,7 +624,6 @@ class SectionBodyContent extends React.Component {
icon: "/static/images/mail.react.svg",
disabled: true,
};
//
case "owner-change":
return {
key: option,
@ -617,7 +632,6 @@ class SectionBodyContent extends React.Component {
onClick: onOwnerChange,
disabled: false,
};
//
case "link-for-portal-users":
return {
key: option,
@ -626,7 +640,6 @@ class SectionBodyContent extends React.Component {
onClick: onClickLinkForPortal,
disabled: false,
};
//
case "edit":
return {
key: option,
@ -635,7 +648,6 @@ class SectionBodyContent extends React.Component {
onClick: onClickLinkEdit,
disabled: false,
};
//
case "preview":
return {
key: option,
@ -644,7 +656,6 @@ class SectionBodyContent extends React.Component {
onClick: onClickLinkEdit,
disabled: true,
};
//
case "view":
return {
key: option,
@ -653,7 +664,6 @@ class SectionBodyContent extends React.Component {
onClick: onMediaFileClick,
disabled: false,
};
//
case "download":
return {
key: option,
@ -662,7 +672,6 @@ class SectionBodyContent extends React.Component {
onClick: onClickDownload,
disabled: false,
};
//
case "move":
return {
key: option,
@ -671,7 +680,6 @@ class SectionBodyContent extends React.Component {
onClick: onMoveAction,
disabled: false,
};
//
case "copy":
return {
key: option,
@ -680,7 +688,6 @@ class SectionBodyContent extends React.Component {
onClick: onCopyAction,
disabled: false,
};
//
case "duplicate":
return {
key: option,
@ -689,7 +696,6 @@ class SectionBodyContent extends React.Component {
onClick: onDuplicate,
disabled: false,
};
//
case "rename":
return {
key: option,
@ -698,7 +704,6 @@ class SectionBodyContent extends React.Component {
onClick: onClickRename,
disabled: false,
};
//
case "change-thirdparty-info":
return {
key: option,
@ -707,7 +712,6 @@ class SectionBodyContent extends React.Component {
onClick: onChangeThirdPartyInfo,
disabled: false,
};
//
case "delete":
return {
key: option,
@ -716,7 +720,6 @@ class SectionBodyContent extends React.Component {
onClick: onClickDelete,
disabled: false,
};
//
case "remove-from-favorites":
return {
key: option,
@ -734,21 +737,6 @@ class SectionBodyContent extends React.Component {
});
};
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} />}
</>
);
};
render() {
const {
selection,
@ -761,9 +749,11 @@ class SectionBodyContent extends React.Component {
tooltipValue,
isLoading,
isEmptyFilesList,
folderId,
} = this.props;
//console.log("Files Home SectionBodyContent render", this.props);
console.log("Files Home SectionBodyContent render", this.props);
let fileMoveTooltip;
if (dragging) {
@ -787,12 +777,15 @@ class SectionBodyContent extends React.Component {
{viewAs === "tile" ? (
<FilesTileContainer
t={t}
getFilesContextOptions={this.getFilesContextOptions}
folderId={folderId}
getItemIcon={this.getItemIcon}
getFilesContextOptions={this.getFilesContextOptions}
/>
) : (
<FilesRowContainer
getFilesContextOptions={this.getFilesContextOptions}
t={t}
//getFilesContextOptions={this.getFilesContextOptions}
folderId={folderId}
/>
)}
</>
@ -857,11 +850,12 @@ export default inject(
setThirdpartyInfo,
deleteFileAction,
openLocationAction,
deleteFolderAction,
} = filesActionsStore;
return {
isAdmin: auth.isAdmin,
isTabletView: auth.settingsStore,
dragging,
fileActionId,
firstLoad,
@ -874,15 +868,20 @@ export default inject(
tooltipValue,
isLoading,
isEmptyFilesList: filesList.length <= 0,
homepage: config.homepage,
setDragging,
setSecondaryProgressBarData,
copyToAction,
moveToAction,
folderId: selectedFolderStore.id,
isPrivacyFolder,
openLocationAction,
isTabletView: auth.settingsStore,
setIsVerHistoryPanel,
fetchFileVersions,
homepage: config.homepage,
setFavoriteAction,
finalizeVersionAction,
lockFileAction,
@ -896,12 +895,11 @@ export default inject(
duplicateAction,
setAction,
setThirdpartyInfo,
deleteFileAction,
isRootFolder: selectedFolderStore.isRootFolder,
setRemoveItem,
setDeleteThirdPartyDialogVisible,
deleteFileAction,
openLocationAction,
isPrivacyFolder,
deleteFolderAction,
};
}
)(withRouter(withTranslation("Home")(observer(SectionBodyContent))));

10
products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/withGetContextOptions.js
View File

@ -1,10 +0,0 @@
import React from 'react';
export default withGetContextOptions(WrappedComponent) => {
return class extends React.Component {
render() {
return <WrappedComponent {...this.props}/>
}
}
}

1
products/ASC.Files/Client/src/components/pages/Home/Section/Filter/index.js
View File

@ -94,7 +94,6 @@ class SectionFilterContent extends React.Component {
onChangeViewAs = (view) => {
const { viewAs, setViewAs } = this.props;
console.log(view, "-----");
setViewAs(view);
};