Web: Doceditor: applied withDialogs, refactoring
This commit is contained in:
parent
0d6453a3e6
commit
7c48536e65
@ -17,12 +17,9 @@ import {
|
|||||||
|
|
||||||
import { EditorWrapper } from "./StyledEditor";
|
import { EditorWrapper } from "./StyledEditor";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import {
|
import useFilesUtils from "./helpers/useFilesUtils";
|
||||||
useFilesUtils,
|
|
||||||
useSelectFileDialog,
|
import withDialogs from "./helpers/withDialogs";
|
||||||
useSelectFolderDialog,
|
|
||||||
useSharingDialog,
|
|
||||||
} from "./hooks";
|
|
||||||
|
|
||||||
const LoaderComponent = (
|
const LoaderComponent = (
|
||||||
<Loader
|
<Loader
|
||||||
@ -114,6 +111,16 @@ function Editor({
|
|||||||
actionLink,
|
actionLink,
|
||||||
error,
|
error,
|
||||||
needLoader,
|
needLoader,
|
||||||
|
sharingDialog,
|
||||||
|
onSDKRequestSharingSettings,
|
||||||
|
loadUsersRightsList,
|
||||||
|
isVisible,
|
||||||
|
selectFileDialog,
|
||||||
|
onSDKRequestInsertImage,
|
||||||
|
onSDKRequestMailMergeRecipients,
|
||||||
|
onSDKRequestCompareFile,
|
||||||
|
selectFolderDialog,
|
||||||
|
onSDKRequestSaveAs,
|
||||||
}) {
|
}) {
|
||||||
const [isLoaded, setIsLoaded] = useState(false);
|
const [isLoaded, setIsLoaded] = useState(false);
|
||||||
const [documentTitle, setNewDocumentTitle] = useState("Loading...");
|
const [documentTitle, setNewDocumentTitle] = useState("Loading...");
|
||||||
@ -122,25 +129,6 @@ function Editor({
|
|||||||
|
|
||||||
const { t } = useTranslation();
|
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(() => {
|
useEffect(() => {
|
||||||
if (error) {
|
if (error) {
|
||||||
error?.unAuthorized &&
|
error?.unAuthorized &&
|
||||||
@ -325,7 +313,7 @@ function Editor({
|
|||||||
documentIsReady = true;
|
documentIsReady = true;
|
||||||
|
|
||||||
if (isSharingAccess) {
|
if (isSharingAccess) {
|
||||||
loadUsersRightsList();
|
loadUsersRightsList(docEditor);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -526,8 +514,12 @@ function Editor({
|
|||||||
|
|
||||||
const newConfig = Object.assign(config, events);
|
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);
|
setIsLoaded(true);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error, "init 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 { ChunkExtractor } from "@loadable/server";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import { I18nextProvider } from "react-i18next";
|
import { I18nextProvider } from "react-i18next";
|
||||||
|
|
||||||
const sheet = new ServerStyleSheet();
|
const sheet = new ServerStyleSheet();
|
||||||
const statsFile = path.resolve("clientBuild/stats.json");
|
const statsFile = path.resolve("clientBuild/stats.json");
|
||||||
export default async (req) => {
|
export default async (req) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user