Web: Doceditor: applied withDialogs, refactoring
This commit is contained in:
parent
0d6453a3e6
commit
7c48536e65
@ -17,12 +17,9 @@ import {
|
||||
|
||||
import { EditorWrapper } from "./StyledEditor";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useFilesUtils,
|
||||
useSelectFileDialog,
|
||||
useSelectFolderDialog,
|
||||
useSharingDialog,
|
||||
} from "./hooks";
|
||||
import useFilesUtils from "./helpers/useFilesUtils";
|
||||
|
||||
import withDialogs from "./helpers/withDialogs";
|
||||
|
||||
const LoaderComponent = (
|
||||
<Loader
|
||||
@ -114,6 +111,16 @@ function Editor({
|
||||
actionLink,
|
||||
error,
|
||||
needLoader,
|
||||
sharingDialog,
|
||||
onSDKRequestSharingSettings,
|
||||
loadUsersRightsList,
|
||||
isVisible,
|
||||
selectFileDialog,
|
||||
onSDKRequestInsertImage,
|
||||
onSDKRequestMailMergeRecipients,
|
||||
onSDKRequestCompareFile,
|
||||
selectFolderDialog,
|
||||
onSDKRequestSaveAs,
|
||||
}) {
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const [documentTitle, setNewDocumentTitle] = useState("Loading...");
|
||||
@ -122,25 +129,6 @@ function Editor({
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [
|
||||
sharingDialog,
|
||||
onSDKRequestSharingSettings,
|
||||
loadUsersRightsList,
|
||||
isVisible,
|
||||
] = useSharingDialog(fileInfo, fileId, docEditor);
|
||||
|
||||
const [
|
||||
selectFileDialog,
|
||||
onSDKRequestInsertImage,
|
||||
onSDKRequestMailMergeRecipients,
|
||||
onSDKRequestCompareFile,
|
||||
] = useSelectFileDialog(docEditor, t);
|
||||
|
||||
const [selectFolderDialog, onSDKRequestSaveAs] = useSelectFolderDialog(
|
||||
t,
|
||||
docEditor
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
error?.unAuthorized &&
|
||||
@ -325,7 +313,7 @@ function Editor({
|
||||
documentIsReady = true;
|
||||
|
||||
if (isSharingAccess) {
|
||||
loadUsersRightsList();
|
||||
loadUsersRightsList(docEditor);
|
||||
}
|
||||
};
|
||||
|
||||
@ -526,8 +514,12 @@ function Editor({
|
||||
|
||||
const newConfig = Object.assign(config, events);
|
||||
|
||||
docEditor = window.DocsAPI.DocEditor("editor", newConfig);
|
||||
docEditor = window.docEditor = window.DocsAPI.DocEditor(
|
||||
"editor",
|
||||
newConfig
|
||||
);
|
||||
|
||||
console.log(docEditor, "docEditor");
|
||||
setIsLoaded(true);
|
||||
} catch (error) {
|
||||
console.log(error, "init error");
|
||||
@ -552,4 +544,4 @@ function Editor({
|
||||
);
|
||||
}
|
||||
|
||||
export default Editor;
|
||||
export default withDialogs(Editor);
|
||||
|
19
web/ASC.Web.Editor/src/helpers/useFilesUtils.js
Normal file
19
web/ASC.Web.Editor/src/helpers/useFilesUtils.js
Normal file
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import { loadComponent } from "../components/dynamic";
|
||||
import { FILES_SCOPE } from "../helpers/constants";
|
||||
|
||||
function useFilesUtils() {
|
||||
const [isInitialized, setIsInitialized] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isInitialized) {
|
||||
const exists = document.getElementById(FILES_SCOPE);
|
||||
if (exists) {
|
||||
loadComponent(FILES_SCOPE, "./utils", "filesUtils")();
|
||||
setIsInitialized(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default useFilesUtils;
|
@ -1,4 +0,0 @@
|
||||
export { default as useFilesUtils } from "./useFilesUtils";
|
||||
export { default as useSelectFileDialog } from "./useSelectFileDialog";
|
||||
export { default as useSelectFolderDialog } from "./useSelectFolderDialog";
|
||||
export { default as useSharingDialog } from "./useSharingDialog";
|
@ -1,11 +0,0 @@
|
||||
import React from "react";
|
||||
import { loadComponent } from "../components/dynamic";
|
||||
import { FILES_SCOPE } from "../helpers/constants";
|
||||
|
||||
function useFilesUtils() {
|
||||
React.useEffect(() => {
|
||||
loadComponent(FILES_SCOPE, "./utils", "filesUtils")();
|
||||
}, []);
|
||||
}
|
||||
|
||||
export default useFilesUtils;
|
@ -1,149 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import DynamicComponent from "../components/dynamic";
|
||||
import { getPresignedUri } from "@appserver/common/api/files";
|
||||
import { FILES_REMOTE_ENTRY_URL, FILES_SCOPE } from "../helpers/constants";
|
||||
|
||||
const insertImageAction = "imageFileType";
|
||||
const mailMergeAction = "mailMergeFileType";
|
||||
const compareFilesAction = "documentsFileType";
|
||||
|
||||
function useSelectFileDialog(docEditor, t) {
|
||||
const [filesType, setFilesType] = useState("");
|
||||
const [isFileDialogVisible, setIsFileDialogVisible] = useState(false);
|
||||
const [typeInsertImageAction, setTypeInsertImageAction] = useState();
|
||||
|
||||
const onCloseFileDialog = () => {
|
||||
setIsFileDialogVisible(false);
|
||||
};
|
||||
|
||||
const onSDKRequestCompareFile = () => {
|
||||
setFilesType(compareFilesAction);
|
||||
setIsFileDialogVisible(true);
|
||||
};
|
||||
|
||||
const onSDKRequestMailMergeRecipients = () => {
|
||||
setFilesType(mailMergeAction);
|
||||
setIsFileDialogVisible(true);
|
||||
};
|
||||
|
||||
const onSDKRequestInsertImage = (event) => {
|
||||
setTypeInsertImageAction(event.data);
|
||||
setFilesType(insertImageAction);
|
||||
setIsFileDialogVisible(true);
|
||||
};
|
||||
|
||||
const insertImage = (link) => {
|
||||
const token = link.token;
|
||||
|
||||
docEditor.insertImage({
|
||||
...typeInsertImageAction,
|
||||
fileType: link.filetype,
|
||||
...(token && { token }),
|
||||
url: link.url,
|
||||
});
|
||||
};
|
||||
|
||||
const mailMerge = (link) => {
|
||||
const token = link.token;
|
||||
|
||||
docEditor.setMailMergeRecipients({
|
||||
fileType: link.filetype,
|
||||
...(token && { token }),
|
||||
url: link.url,
|
||||
});
|
||||
};
|
||||
|
||||
const compareFiles = (link) => {
|
||||
const token = link.token;
|
||||
|
||||
docEditor.setRevisedFile({
|
||||
fileType: link.filetype,
|
||||
...(token && { token }),
|
||||
url: link.url,
|
||||
});
|
||||
};
|
||||
|
||||
const insertImageActionProps = {
|
||||
isImageOnly: true,
|
||||
};
|
||||
|
||||
const mailMergeActionProps = {
|
||||
isTablesOnly: true,
|
||||
searchParam: ".xlsx",
|
||||
};
|
||||
const compareFilesActionProps = {
|
||||
isDocumentsOnly: true,
|
||||
};
|
||||
|
||||
const fileTypeDetection = () => {
|
||||
if (filesType === insertImageAction) {
|
||||
return insertImageActionProps;
|
||||
}
|
||||
if (filesType === mailMergeAction) {
|
||||
return mailMergeActionProps;
|
||||
}
|
||||
if (filesType === compareFilesAction) {
|
||||
return compareFilesActionProps;
|
||||
}
|
||||
};
|
||||
|
||||
const onSelectFile = async (file) => {
|
||||
try {
|
||||
const link = await getPresignedUri(file.id);
|
||||
|
||||
if (filesType === insertImageAction) insertImage(link);
|
||||
if (filesType === mailMergeAction) mailMerge(link);
|
||||
if (filesType === compareFilesAction) compareFiles(link);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const getFileTypeTranslation = () => {
|
||||
switch (filesType) {
|
||||
case mailMergeAction:
|
||||
return t("MailMergeFileType");
|
||||
case insertImageAction:
|
||||
return t("ImageFileType");
|
||||
case compareFilesAction:
|
||||
return t("DocumentsFileType");
|
||||
}
|
||||
};
|
||||
|
||||
const selectFilesListTitle = () => {
|
||||
const type = getFileTypeTranslation();
|
||||
return filesType === mailMergeAction
|
||||
? type
|
||||
: t("SelectFilesType", { fileType: type });
|
||||
};
|
||||
|
||||
const headerName = t("SelectFileTitle");
|
||||
|
||||
const selectFileDialog =
|
||||
typeof window !== "undefined" && isFileDialogVisible ? (
|
||||
<DynamicComponent
|
||||
system={{
|
||||
scope: FILES_SCOPE,
|
||||
url: FILES_REMOTE_ENTRY_URL,
|
||||
module: "./SelectFileDialog",
|
||||
}}
|
||||
resetTreeFolders
|
||||
foldersType="exceptPrivacyTrashFolders"
|
||||
isPanelVisible={isFileDialogVisible}
|
||||
onSelectFile={onSelectFile}
|
||||
onClose={onCloseFileDialog}
|
||||
{...fileTypeDetection()}
|
||||
titleFilesList={selectFilesListTitle()}
|
||||
headerName={headerName}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
return [
|
||||
selectFileDialog,
|
||||
onSDKRequestInsertImage,
|
||||
onSDKRequestMailMergeRecipients,
|
||||
onSDKRequestCompareFile,
|
||||
];
|
||||
}
|
||||
|
||||
export default useSelectFileDialog;
|
@ -1,112 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import DynamicComponent from "../components/dynamic";
|
||||
import Text from "@appserver/components/text";
|
||||
import TextInput from "@appserver/components/text-input";
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
import { StyledSelectFolder } from "../StyledEditor";
|
||||
import { FILES_REMOTE_ENTRY_URL, FILES_SCOPE } from "../helpers/constants";
|
||||
|
||||
function useSelectFolderDialog(t, docEditor) {
|
||||
const [isFolderDialogVisible, setIsFolderDialogVisible] = useState(false);
|
||||
const [titleSelectorFolder, setTitleSelectorFolder] = useState("");
|
||||
const [urlSelectorFolder, setUrlSelectorFolder] = useState("");
|
||||
const [extension, setExtension] = useState();
|
||||
const [openNewTab, setNewOpenTab] = useState(false);
|
||||
|
||||
const onSDKRequestSaveAs = (event) => {
|
||||
setTitleSelectorFolder(event.data.title);
|
||||
setUrlSelectorFolder(event.data.url);
|
||||
setExtension(event.data.title.split(".").pop());
|
||||
|
||||
setIsFolderDialogVisible(true);
|
||||
};
|
||||
|
||||
const onCloseFolderDialog = () => {
|
||||
setIsFolderDialogVisible(false);
|
||||
setNewOpenTab(false);
|
||||
};
|
||||
|
||||
const getSavingInfo = async (title, folderId) => {
|
||||
const savingInfo = await window.filesUtils.SaveAs(
|
||||
title,
|
||||
urlSelectorFolder,
|
||||
folderId,
|
||||
openNewTab
|
||||
);
|
||||
|
||||
if (savingInfo) {
|
||||
const convertedInfo = savingInfo.split(": ").pop();
|
||||
docEditor.showMessage(convertedInfo);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickSaveSelectFolder = (e, folderId) => {
|
||||
const currentExst = titleSelectorFolder.split(".").pop();
|
||||
|
||||
const title =
|
||||
currentExst !== extension
|
||||
? titleSelectorFolder.concat(`.${extension}`)
|
||||
: titleSelectorFolder;
|
||||
|
||||
if (openNewTab) {
|
||||
window.filesUtils.SaveAs(title, urlSelectorFolder, folderId, openNewTab);
|
||||
} else {
|
||||
getSavingInfo(title, folderId);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickCheckbox = () => {
|
||||
setNewOpenTab(!openNewTab);
|
||||
};
|
||||
|
||||
const onChangeInput = (e) => {
|
||||
console.log(e.target.value);
|
||||
setTitleSelectorFolder(e.target.value);
|
||||
};
|
||||
|
||||
const selectFolderDialog =
|
||||
typeof window !== "undefined" && isFolderDialogVisible ? (
|
||||
<DynamicComponent
|
||||
resetTreeFolders
|
||||
showButtons
|
||||
isSetFolderImmediately
|
||||
asideHeightContent="calc(100% - 50px)"
|
||||
foldersType="exceptSortedByTags"
|
||||
system={{
|
||||
scope: FILES_SCOPE,
|
||||
url: FILES_REMOTE_ENTRY_URL,
|
||||
module: "./SelectFolderDialog",
|
||||
}}
|
||||
isPanelVisible={isFolderDialogVisible}
|
||||
onClose={onCloseFolderDialog}
|
||||
onSave={onClickSaveSelectFolder}
|
||||
headerName={t("FolderForSave")}
|
||||
header={
|
||||
<StyledSelectFolder>
|
||||
<Text className="editor-select-folder_text">{t("FileName")}</Text>
|
||||
<TextInput
|
||||
className="editor-select-folder_text-input"
|
||||
scale
|
||||
onChange={onChangeInput}
|
||||
value={titleSelectorFolder}
|
||||
/>
|
||||
</StyledSelectFolder>
|
||||
}
|
||||
{...(extension !== "fb2" && {
|
||||
footer: (
|
||||
<StyledSelectFolder>
|
||||
<Checkbox
|
||||
className="editor-select-folder_checkbox"
|
||||
label={t("OpenSavedDocument")}
|
||||
onChange={onClickCheckbox}
|
||||
isChecked={openNewTab}
|
||||
/>
|
||||
</StyledSelectFolder>
|
||||
),
|
||||
})}
|
||||
/>
|
||||
) : null;
|
||||
return [selectFolderDialog, onSDKRequestSaveAs];
|
||||
}
|
||||
|
||||
export default useSelectFolderDialog;
|
@ -1,47 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import DynamicComponent from "../components/dynamic";
|
||||
import { FILES_REMOTE_ENTRY_URL, FILES_SCOPE } from "../helpers/constants";
|
||||
function useSharingDialog(fileInfo, fileId, docEditor) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const onSDKRequestSharingSettings = () => {
|
||||
setIsVisible(true);
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
setIsVisible(false);
|
||||
};
|
||||
|
||||
const loadUsersRightsList = () => {
|
||||
window.SharingDialog.getSharingSettings(fileId).then((sharingSettings) => {
|
||||
docEditor.setSharingSettings({
|
||||
sharingSettings,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const sharingDialog = (
|
||||
<DynamicComponent
|
||||
className="dynamic-sharing-dialog"
|
||||
system={{
|
||||
scope: FILES_SCOPE,
|
||||
url: FILES_REMOTE_ENTRY_URL,
|
||||
module: "./SharingDialog",
|
||||
name: "SharingDialog",
|
||||
}}
|
||||
isVisible={isVisible}
|
||||
sharingObject={fileInfo}
|
||||
onCancel={onCancel}
|
||||
onSuccess={loadUsersRightsList}
|
||||
/>
|
||||
);
|
||||
|
||||
return [
|
||||
sharingDialog,
|
||||
onSDKRequestSharingSettings,
|
||||
loadUsersRightsList,
|
||||
isVisible,
|
||||
];
|
||||
}
|
||||
|
||||
export default useSharingDialog;
|
@ -6,6 +6,7 @@ import { ServerStyleSheet } from "styled-components";
|
||||
import { ChunkExtractor } from "@loadable/server";
|
||||
import path from "path";
|
||||
import { I18nextProvider } from "react-i18next";
|
||||
|
||||
const sheet = new ServerStyleSheet();
|
||||
const statsFile = path.resolve("clientBuild/stats.json");
|
||||
export default async (req) => {
|
||||
|
Loading…
Reference in New Issue
Block a user