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

Web: Doceditor: applied withDialogs, refactoring

Browse Source
This commit is contained in:
Artem Tarasov 2022-03-22 12:28:47 +03:00
parent 0d6453a3e6
commit 7c48536e65
8 changed files with 40 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/ASC.Web.Editor/src/Editor.js
View File

@ -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
View 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;

4
web/ASC.Web.Editor/src/hooks/index.js
View File

@ -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";

11
web/ASC.Web.Editor/src/hooks/useFilesUtils.js
View File

@ -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;

149
web/ASC.Web.Editor/src/hooks/useSelectFileDialog.js
View File

@ -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;

112
web/ASC.Web.Editor/src/hooks/useSelectFolderDialog.js
View File

@ -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;

47
web/ASC.Web.Editor/src/hooks/useSharingDialog.js
View File

@ -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;

1
web/ASC.Web.Editor/src/server/render.js
View File

@ -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) => {