Web: Files: HOC: Added model for context menu. Added multilevel menu for desktop view.
This commit is contained in:
parent
e66cb3d716
commit
5e47e0c184
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { combineUrl } from "@appserver/common/utils";
|
||||
import { FileAction, AppServerConfig } from "@appserver/common/constants";
|
||||
import toastr from "@appserver/components/toast/toastr";
|
||||
@ -303,6 +304,25 @@ export default function withContextOptions(WrappedComponent) {
|
||||
setDeleteDialogVisible(true);
|
||||
};
|
||||
|
||||
filterModel = (model, filter) => {
|
||||
let options = [];
|
||||
let index = 0;
|
||||
const last = model.length;
|
||||
|
||||
for (index; index < last; index++) {
|
||||
if (filter.includes(model[index].key)) {
|
||||
options[index] = model[index];
|
||||
if (model[index].items) {
|
||||
options[index].items = model[index].items.filter((item) =>
|
||||
filter.includes(item.key)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
};
|
||||
|
||||
getFilesContextOptions = () => {
|
||||
const { item, t } = this.props;
|
||||
const { contextOptions } = item;
|
||||
@ -311,240 +331,281 @@ export default function withContextOptions(WrappedComponent) {
|
||||
|
||||
const isShareable = item.canShare;
|
||||
|
||||
return contextOptions.map((option) => {
|
||||
switch (option) {
|
||||
case "open":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Open"),
|
||||
icon: "images/catalog.folder.react.svg",
|
||||
onClick: this.onOpenFolder,
|
||||
disabled: false,
|
||||
};
|
||||
case "show-version-history":
|
||||
return {
|
||||
key: option,
|
||||
label: t("ShowVersionHistory"),
|
||||
icon: "images/history.react.svg",
|
||||
onClick: this.showVersionHistory,
|
||||
disabled: false,
|
||||
};
|
||||
case "finalize-version":
|
||||
return {
|
||||
key: option,
|
||||
const versionActions = !isMobile
|
||||
? [
|
||||
{
|
||||
key: "version",
|
||||
label: t("VersionHistory"),
|
||||
icon: "images/history-finalized.react.svg",
|
||||
items: [
|
||||
{
|
||||
key: "finalize-version",
|
||||
label: t("FinalizeVersion"),
|
||||
//icon: "images/history-finalized.react.svg",
|
||||
onClick: this.finalizeVersion,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "show-version-history",
|
||||
label: t("ShowVersionHistory"),
|
||||
//icon: "images/history.react.svg",
|
||||
onClick: this.showVersionHistory,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
key: "finalize-version",
|
||||
label: t("FinalizeVersion"),
|
||||
icon: "images/history-finalized.react.svg",
|
||||
onClick: this.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: this.onOpenLocation,
|
||||
},
|
||||
{
|
||||
key: "show-version-history",
|
||||
label: t("ShowVersionHistory"),
|
||||
icon: "images/history.react.svg",
|
||||
onClick: this.showVersionHistory,
|
||||
disabled: false,
|
||||
};
|
||||
case "mark-as-favorite":
|
||||
return {
|
||||
key: option,
|
||||
label: t("MarkAsFavorite"),
|
||||
icon: "images/favorites.react.svg",
|
||||
onClick: this.onClickFavorite,
|
||||
disabled: false,
|
||||
"data-action": "mark",
|
||||
action: "mark",
|
||||
};
|
||||
case "block-unblock-version":
|
||||
return {
|
||||
key: option,
|
||||
label: t("UnblockVersion"),
|
||||
icon: "images/lock.react.svg",
|
||||
onClick: this.lockFile,
|
||||
disabled: false,
|
||||
};
|
||||
case "sharing-settings":
|
||||
return {
|
||||
key: option,
|
||||
label: t("SharingSettings"),
|
||||
icon: "/static/images/catalog.share.react.svg",
|
||||
onClick: this.onClickShare,
|
||||
disabled: !isShareable,
|
||||
};
|
||||
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("Translations:OwnerChange"),
|
||||
icon: "/static/images/catalog.user.react.svg",
|
||||
onClick: this.onOwnerChange,
|
||||
disabled: false,
|
||||
};
|
||||
case "link-for-portal-users":
|
||||
return {
|
||||
key: option,
|
||||
label: t("LinkForPortalUsers"),
|
||||
icon: "/static/images/invitation.link.react.svg",
|
||||
onClick: this.onClickLinkForPortal,
|
||||
disabled: false,
|
||||
};
|
||||
case "fill-form":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Common:FillFormButton"),
|
||||
icon: "/static/images/form.fill.rect.svg",
|
||||
onClick: this.onClickLinkFillForm,
|
||||
disabled: false,
|
||||
};
|
||||
case "make-form":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Common:MakeForm"),
|
||||
icon: "/static/images/form.plus.react.svg",
|
||||
onClick: this.onClickMakeForm,
|
||||
disabled: false,
|
||||
};
|
||||
case "edit":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Common:EditButton"),
|
||||
icon: "/static/images/access.edit.react.svg",
|
||||
onClick: this.onClickLinkEdit,
|
||||
disabled: false,
|
||||
};
|
||||
case "preview":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Preview"),
|
||||
icon: "/static/images/eye.react.svg",
|
||||
onClick: this.onPreviewClick,
|
||||
disabled: false,
|
||||
};
|
||||
case "view":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Common:View"),
|
||||
icon: "/static/images/eye.react.svg",
|
||||
onClick: this.onMediaFileClick,
|
||||
disabled: false,
|
||||
};
|
||||
case "download":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Common:Download"),
|
||||
icon: "images/download.react.svg",
|
||||
onClick: this.onClickDownload,
|
||||
disabled: false,
|
||||
};
|
||||
case "download-as":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Translations:DownloadAs"),
|
||||
icon: "images/download-as.react.svg",
|
||||
onClick: this.onClickDownloadAs,
|
||||
disabled: false,
|
||||
};
|
||||
case "move-to":
|
||||
return {
|
||||
key: option,
|
||||
},
|
||||
];
|
||||
|
||||
const moveActions = !isMobile
|
||||
? [
|
||||
{
|
||||
key: "move",
|
||||
label: t("MoveOrCopy"),
|
||||
icon: "/static/images/copy.react.svg",
|
||||
items: [
|
||||
{
|
||||
key: "move-to",
|
||||
label: t("MoveTo"),
|
||||
//icon: "images/move.react.svg",
|
||||
onClick: this.onMoveAction,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "copy-to",
|
||||
label: t("Translations:Copy"),
|
||||
//icon: "/static/images/copy.react.svg",
|
||||
onClick: this.onCopyAction,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "copy",
|
||||
label: t("Duplicate"),
|
||||
//icon: "/static/images/copy.react.svg",
|
||||
onClick: this.onDuplicate,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
key: "move-to",
|
||||
label: t("MoveTo"),
|
||||
icon: "images/move.react.svg",
|
||||
onClick: this.onMoveAction,
|
||||
disabled: false,
|
||||
};
|
||||
case "restore":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Translations:Restore"),
|
||||
icon: "images/move.react.svg",
|
||||
onClick: this.onMoveAction,
|
||||
disabled: false,
|
||||
};
|
||||
case "copy-to":
|
||||
return {
|
||||
key: option,
|
||||
},
|
||||
{
|
||||
key: "copy-to",
|
||||
label: t("Translations:Copy"),
|
||||
icon: "/static/images/copy.react.svg",
|
||||
onClick: this.onCopyAction,
|
||||
disabled: false,
|
||||
};
|
||||
case "copy":
|
||||
return {
|
||||
key: option,
|
||||
},
|
||||
{
|
||||
key: "copy",
|
||||
label: t("Duplicate"),
|
||||
icon: "/static/images/copy.react.svg",
|
||||
onClick: this.onDuplicate,
|
||||
disabled: false,
|
||||
};
|
||||
case "rename":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Rename"),
|
||||
icon: "images/rename.react.svg",
|
||||
onClick: this.onClickRename,
|
||||
disabled: false,
|
||||
};
|
||||
case "change-thirdparty-info":
|
||||
return {
|
||||
key: option,
|
||||
label: t("Translations:ThirdPartyInfo"),
|
||||
icon: "/static/images/access.edit.react.svg",
|
||||
onClick: this.onChangeThirdPartyInfo,
|
||||
disabled: false,
|
||||
};
|
||||
case "delete":
|
||||
return {
|
||||
key: option,
|
||||
label: isRootThirdPartyFolder
|
||||
? t("Translations:DeleteThirdParty")
|
||||
: t("Common:Delete"),
|
||||
icon: "/static/images/catalog.trash.react.svg",
|
||||
onClick: this.onClickDelete,
|
||||
disabled: false,
|
||||
};
|
||||
case "remove-from-favorites":
|
||||
return {
|
||||
key: option,
|
||||
label: t("RemoveFromFavorites"),
|
||||
icon: "images/favorites.react.svg",
|
||||
onClick: this.onClickFavorite,
|
||||
disabled: false,
|
||||
"data-action": "remove",
|
||||
action: "remove",
|
||||
};
|
||||
case "unsubscribe":
|
||||
return {
|
||||
key: option,
|
||||
label: t("RemoveFromList"),
|
||||
icon: "images/remove.svg",
|
||||
onClick: this.onClickUnsubscribe,
|
||||
disabled: false,
|
||||
};
|
||||
case "mark-read":
|
||||
return {
|
||||
key: option,
|
||||
label: t("MarkRead"),
|
||||
icon: "images/tick.rounded.svg",
|
||||
onClick: this.onClickMarkRead,
|
||||
disabled: false,
|
||||
};
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
return undefined;
|
||||
});
|
||||
const optionsModel = [
|
||||
{
|
||||
key: "open",
|
||||
label: t("Open"),
|
||||
icon: "images/catalog.folder.react.svg",
|
||||
onClick: this.onOpenFolder,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "fill-form",
|
||||
label: t("Common:FillFormButton"),
|
||||
icon: "/static/images/form.fill.rect.svg",
|
||||
onClick: this.onClickLinkFillForm,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "edit",
|
||||
label: t("Common:EditButton"),
|
||||
icon: "/static/images/access.edit.react.svg",
|
||||
onClick: this.onClickLinkEdit,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "preview",
|
||||
label: t("Preview"),
|
||||
icon: "/static/images/eye.react.svg",
|
||||
onClick: this.onPreviewClick,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "view",
|
||||
label: t("Common:View"),
|
||||
icon: "/static/images/eye.react.svg",
|
||||
onClick: this.onMediaFileClick,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "make-form",
|
||||
label: t("Common:MakeForm"),
|
||||
icon: "/static/images/form.plus.react.svg",
|
||||
onClick: this.onClickMakeForm,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "separator0",
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
key: "sharing-settings",
|
||||
label: t("SharingSettings"),
|
||||
icon: "/static/images/catalog.share.react.svg",
|
||||
onClick: this.onClickShare,
|
||||
disabled: !isShareable,
|
||||
},
|
||||
{
|
||||
key: "owner-change",
|
||||
label: t("Translations:OwnerChange"),
|
||||
icon: "/static/images/catalog.user.react.svg",
|
||||
onClick: this.onOwnerChange,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "link-for-portal-users",
|
||||
label: t("LinkForPortalUsers"),
|
||||
icon: "/static/images/invitation.link.react.svg",
|
||||
onClick: this.onClickLinkForPortal,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "send-by-email",
|
||||
label: t("SendByEmail"),
|
||||
icon: "/static/images/mail.react.svg",
|
||||
disabled: true,
|
||||
},
|
||||
...versionActions,
|
||||
{
|
||||
key: "block-unblock-version",
|
||||
label: t("UnblockVersion"),
|
||||
icon: "images/lock.react.svg",
|
||||
onClick: this.lockFile,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "separator1",
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
key: "open-location",
|
||||
label: t("OpenLocation"),
|
||||
icon: "images/download-as.react.svg",
|
||||
onClick: this.onOpenLocation,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "mark-read",
|
||||
label: t("MarkRead"),
|
||||
icon: "images/tick.rounded.svg",
|
||||
onClick: this.onClickMarkRead,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "mark-as-favorite",
|
||||
label: t("MarkAsFavorite"),
|
||||
icon: "images/favorites.react.svg",
|
||||
onClick: this.onClickFavorite,
|
||||
disabled: false,
|
||||
"data-action": "mark",
|
||||
action: "mark",
|
||||
},
|
||||
{
|
||||
key: "remove-from-favorites",
|
||||
label: t("RemoveFromFavorites"),
|
||||
icon: "images/favorites.react.svg",
|
||||
onClick: this.onClickFavorite,
|
||||
disabled: false,
|
||||
"data-action": "remove",
|
||||
action: "remove",
|
||||
},
|
||||
{
|
||||
key: "download",
|
||||
label: t("Common:Download"),
|
||||
icon: "images/download.react.svg",
|
||||
onClick: this.onClickDownload,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "download-as",
|
||||
label: t("Translations:DownloadAs"),
|
||||
icon: "images/download-as.react.svg",
|
||||
onClick: this.onClickDownloadAs,
|
||||
disabled: false,
|
||||
},
|
||||
...moveActions,
|
||||
{
|
||||
key: "restore",
|
||||
label: t("Translations:Restore"),
|
||||
icon: "images/move.react.svg",
|
||||
onClick: this.onMoveAction,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "rename",
|
||||
label: t("Rename"),
|
||||
icon: "images/rename.react.svg",
|
||||
onClick: this.onClickRename,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "separator2",
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
key: "unsubscribe",
|
||||
label: t("RemoveFromList"),
|
||||
icon: "images/remove.svg",
|
||||
onClick: this.onClickUnsubscribe,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "change-thirdparty-info",
|
||||
label: t("Translations:ThirdPartyInfo"),
|
||||
icon: "/static/images/access.edit.react.svg",
|
||||
onClick: this.onChangeThirdPartyInfo,
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
key: "delete",
|
||||
label: isRootThirdPartyFolder
|
||||
? t("Translations:DeleteThirdParty")
|
||||
: t("Common:Delete"),
|
||||
icon: "/static/images/catalog.trash.react.svg",
|
||||
onClick: this.onClickDelete,
|
||||
disabled: false,
|
||||
},
|
||||
];
|
||||
|
||||
const options = this.filterModel(optionsModel, contextOptions);
|
||||
|
||||
return options;
|
||||
};
|
||||
render() {
|
||||
const { actionType, actionId, actionExtension, item } = this.props;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user