@voplus/morpho-document 4.0.3 → 4.0.5

package/es/components/FileViewer/ImageViewer.js

@@ -1,62 +1,62 @@
-import { Modal, Spin } from "antd";
-import React, { useEffect, useRef, useState } from "react";
-import { faMagnifyingGlassMinus, faMagnifyingGlassPlus } from "@fortawesome/pro-light-svg-icons";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import Panable from "@voplus/morpho-ui/es/controls/Panable";
-import { Scrollbars } from "react-custom-scrollbars";
-import { observe } from "@voplus/morpho-ui";
-import { runInAction } from "mobx";
-import styles from "./index.less";
-import { useFileStore } from "@voplus/morpho-document-core";
-import { useLocalObservable } from "mobx-react-lite";
-import { useParams } from "react-router-dom";
-const ImageViewer = (props) => {
-    const store = useFileStore();
-    const params = useParams();
-    const paramsId = params.id;
-    const [visible, setVisible] = useState(false);
-    const state = useLocalObservable(() => ({
-        loading: false,
-        error: "",
-        url: "",
-    }));
-    useEffect(() => {
-        getUrl();
-    }, [props.id]);
-    const getUrl = () => {
-        runInAction(() => (state.loading = true));
-        store
-            .download(props.id)
-            .then((blob) => {
-            if (blob) {
-                runInAction(() => (state.url = URL.createObjectURL(blob)));
-            }
-        })
-            .catch((err) => (state.error = err))
-            .finally(() => runInAction(() => (state.loading = false)));
-    };
-    const ref = useRef(null);
-    return observe(() => (React.createElement(React.Fragment, null,
-        React.createElement(Scrollbars, { autoHide: true, style: { minHeight: "50vh" } }, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
-            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement("div", { className: "image-viewer" },
-            React.createElement("img", { ref: ref, src: state.url, style: { maxWidth: "100%", height: "auto" } }),
-            paramsId !== props.id && (React.createElement("span", { className: "image-viewer-plus", onClick: () => setVisible(true) },
-                React.createElement(FAIcon, { icon: faMagnifyingGlassPlus }))))) : ("No Url")),
-        React.createElement(Modal, { width: ref && ref.current
-                ? ref.current.naturalWidth > window.innerWidth * 0.8
-                    ? "80vw"
-                    : ref.current.naturalWidth
-                : "50vw", open: visible, title: "", footer: null, closable: false, onCancel: () => setVisible(false), wrapClassName: "image-viewer-width-fit", style: {
-                height: ref && ref.current
-                    ? ref.current.naturalHeight > window.innerHeight * 0.8
-                        ? "80vh"
-                        : ref.current.naturalHeight
-                    : "50vh",
-            } },
-            React.createElement("div", { className: "zoom-out" },
-                React.createElement(FAIcon, { icon: faMagnifyingGlassMinus, onClick: () => setVisible(false) })),
-            React.createElement(Panable, null,
-                React.createElement("img", { src: state.url, style: { maxWidth: "100%", maxHeight: "100%", pointerEvents: "none" }, onClick: () => setVisible(false) }))))));
-};
-export default ImageViewer;
+import { Modal, Spin } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { faMagnifyingGlassMinus, faMagnifyingGlassPlus } from "@fortawesome/pro-light-svg-icons";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import Panable from "@voplus/morpho-ui/es/controls/Panable";
+import { Scrollbars } from "react-custom-scrollbars";
+import { observe } from "@voplus/morpho-ui";
+import { runInAction } from "mobx";
+import styles from "./index.less";
+import { useFileStore } from "@voplus/morpho-document-core";
+import { useLocalObservable } from "mobx-react-lite";
+import { useParams } from "react-router-dom";
+const ImageViewer = (props) => {
+    const store = useFileStore();
+    const params = useParams();
+    const paramsId = params.id;
+    const [visible, setVisible] = useState(false);
+    const state = useLocalObservable(() => ({
+        loading: false,
+        error: "",
+        url: "",
+    }));
+    useEffect(() => {
+        getUrl();
+    }, [props.id]);
+    const getUrl = () => {
+        runInAction(() => (state.loading = true));
+        store
+            .download(props.id)
+            .then((blob) => {
+            if (blob) {
+                runInAction(() => (state.url = URL.createObjectURL(blob)));
+            }
+        })
+            .catch((err) => (state.error = err))
+            .finally(() => runInAction(() => (state.loading = false)));
+    };
+    const ref = useRef(null);
+    return observe(() => (React.createElement(React.Fragment, null,
+        React.createElement(Scrollbars, { autoHide: true, style: { minHeight: "50vh" } }, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
+            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement("div", { className: "image-viewer" },
+            React.createElement("img", { ref: ref, src: state.url, style: { maxWidth: "100%", height: "auto" } }),
+            paramsId !== props.id && (React.createElement("span", { className: "image-viewer-plus", onClick: () => setVisible(true) },
+                React.createElement(FAIcon, { icon: faMagnifyingGlassPlus }))))) : ("No Url")),
+        React.createElement(Modal, { width: ref && ref.current
+                ? ref.current.naturalWidth > window.innerWidth * 0.8
+                    ? "80vw"
+                    : ref.current.naturalWidth
+                : "50vw", open: visible, title: "", footer: null, closable: false, onCancel: () => setVisible(false), wrapClassName: "image-viewer-width-fit", style: {
+                height: ref && ref.current
+                    ? ref.current.naturalHeight > window.innerHeight * 0.8
+                        ? "80vh"
+                        : ref.current.naturalHeight
+                    : "50vh",
+            } },
+            React.createElement("div", { className: "zoom-out" },
+                React.createElement(FAIcon, { icon: faMagnifyingGlassMinus, onClick: () => setVisible(false) })),
+            React.createElement(Panable, null,
+                React.createElement("img", { src: state.url, style: { maxWidth: "100%", maxHeight: "100%", pointerEvents: "none" }, onClick: () => setVisible(false) }))))));
+};
+export default ImageViewer;
 //# sourceMappingURL=ImageViewer.js.map

package/es/components/FileViewer/PDF/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { PDFViewerProps } from "../../../controls/PDFViewer/props";
-declare const PDFFileViewer: (props: {
-    id: string;
-    /** props for internal pdf viewer  */
-    viewerProps?: Partial<PDFViewerProps>;
-    /** 指定 download api function */
-    download?: () => Promise<Blob>;
-}) => JSX.Element;
-export default PDFFileViewer;
+/// <reference types="react" />
+import { PDFViewerProps } from "../../../controls/PDFViewer/props";
+declare const PDFFileViewer: (props: {
+    id: string;
+    /** props for internal pdf viewer  */
+    viewerProps?: Partial<PDFViewerProps>;
+    /** 指定 download api function */
+    download?: () => Promise<Blob>;
+}) => JSX.Element;
+export default PDFFileViewer;

package/es/components/FileViewer/PDF/index.js

@@ -1,38 +1,38 @@
-import React from "react";
-import { Spin } from "antd";
-import Viewer from "../../../controls/PDFViewer";
-import { observe } from "@voplus/morpho-ui";
-import { runInAction } from "mobx";
-import styles from "../index.less";
-import { useEffect } from "react";
-import { useFileStore } from "@voplus/morpho-document-core";
-import { useLocalObservable } from "mobx-react-lite";
-const PDFFileViewer = (props) => {
-    const store = useFileStore();
-    const state = useLocalObservable(() => ({
-        url: "",
-        error: "",
-        loading: true,
-    }));
-    useEffect(() => {
-        getUrl();
-    }, [props.id]);
-    return observe(() => {
-        var _a;
-        return (React.createElement(React.Fragment, null, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
-            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement(Viewer, { url: state.url, toolbar: (_a = props.viewerProps) === null || _a === void 0 ? void 0 : _a.toolbar })) : ("No Url")));
-    });
-    function getUrl() {
-        runInAction(() => (state.loading = true));
-        (props.download ? props.download() : store.download(props.id))
-            .then((blob) => {
-            if (blob) {
-                state.url = URL.createObjectURL(blob);
-            }
-        })
-            .catch((err) => (state.error = err))
-            .finally(() => runInAction(() => (state.loading = false)));
-    }
-};
-export default PDFFileViewer;
+import React from "react";
+import { Spin } from "antd";
+import Viewer from "../../../controls/PDFViewer";
+import { observe } from "@voplus/morpho-ui";
+import { runInAction } from "mobx";
+import styles from "../index.less";
+import { useEffect } from "react";
+import { useFileStore } from "@voplus/morpho-document-core";
+import { useLocalObservable } from "mobx-react-lite";
+const PDFFileViewer = (props) => {
+    const store = useFileStore();
+    const state = useLocalObservable(() => ({
+        url: "",
+        error: "",
+        loading: true,
+    }));
+    useEffect(() => {
+        getUrl();
+    }, [props.id]);
+    return observe(() => {
+        var _a;
+        return (React.createElement(React.Fragment, null, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
+            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement(Viewer, { url: state.url, toolbar: (_a = props.viewerProps) === null || _a === void 0 ? void 0 : _a.toolbar })) : ("No Url")));
+    });
+    function getUrl() {
+        runInAction(() => (state.loading = true));
+        (props.download ? props.download() : store.download(props.id))
+            .then((blob) => {
+            if (blob) {
+                state.url = URL.createObjectURL(blob);
+            }
+        })
+            .catch((err) => (state.error = err))
+            .finally(() => runInAction(() => (state.loading = false)));
+    }
+};
+export default PDFFileViewer;
 //# sourceMappingURL=index.js.map

package/es/components/FileViewer/Preview.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import "./index.less";
-declare const FilePreview: (props: {
-    id: string;
-    visible?: boolean;
-    onClose?: any;
-    /** url of open new page */
-    url?: string;
-}) => JSX.Element;
-export default FilePreview;
+/// <reference types="react" />
+import "./index.less";
+declare const FilePreview: (props: {
+    id: string;
+    visible?: boolean;
+    onClose?: any;
+    /** url of open new page */
+    url?: string;
+}) => JSX.Element;
+export default FilePreview;

package/es/components/FileViewer/Preview.js

@@ -1,70 +1,70 @@
-import "./index.less";
-import { AsideContent, observe } from "@voplus/morpho-ui";
-import { Button, Tooltip } from "antd";
-import { QuickSubContent, QuickSubTab } from "../QuickViewDialog/QuickSubTab";
-import React, { useState } from "react";
-import { faArrowDownToBracket, faExternalLink, faXmark } from "@fortawesome/pro-light-svg-icons";
-import { useFile, useFileStore } from "@voplus/morpho-document-core";
-import DocumentHeader from "../DocumentHeader";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import FileViewer from "./FileViewer";
-import FlexDialog from "../FlexDialog";
-import { saveAs } from "file-saver";
-import { useLayout } from "@voplus/morpho-data";
-const FilePreview = (props) => {
-    const layout = useLayout();
-    const store = useFileStore();
-    const file = useFile(props.id);
-    const [subTab, setSubTab] = useState(false);
-    const [asideContext] = useState(AsideContent.createContext());
-    const download = () => {
-        store.download(props.id).then((blob) => {
-            if (blob) {
-                const url = URL.createObjectURL(blob);
-                if (url) {
-                    saveAs(url, file.name);
-                }
-            }
-        });
-    };
-    return observe(() => (React.createElement(FlexDialog, { modalProps: {
-            className: "quickView-modal-style",
-            open: props.visible,
-            destroyOnClose: true,
-            closable: false,
-            footer: false,
-            width: subTab ? "1000px" : "650px",
-            onCancel: props.onClose,
-        }, closeAside: props.onClose },
-        React.createElement(AsideContent, { context: asideContext, style: { width: "100%" } },
-            React.createElement("div", { className: "perview-content" },
-                React.createElement("div", { className: "perview-head" }, file ? (React.createElement(React.Fragment, null,
-                    React.createElement(DocumentHeader, { id: props.id, className: "perview-doc-head", clickNameEffect: "edit", autoSaveName: true, tagsVisible: false, toolsVisible: false, flagVisible: false, statusVisible: false, quickDataBarVisible: false, descriptionVisible: false }),
-                    React.createElement("div", { className: "preview-tab" },
-                        props.url && (React.createElement(Tooltip, { title: "Open New Tab" },
-                            React.createElement(Button, { onClick: openTab, className: "ant-btn-icon-only" },
-                                React.createElement(FAIcon, { icon: faExternalLink })))),
-                        React.createElement(QuickSubTab, { shape: false, showSubTab: showSubTab }),
-                        React.createElement(Tooltip, { title: "Download" },
-                            React.createElement(Button, { icon: React.createElement(FAIcon, { icon: faArrowDownToBracket }), onClick: download })),
-                        !layout.ui.mobile && (React.createElement(Button, { icon: React.createElement(FAIcon, { icon: faXmark }), onClick: props.onClose }))))) : ("File not found")),
-                file.loaded ? (React.createElement(FileViewer, { id: props.id, style: {
-                        height: "70vh",
-                        display: "flex",
-                        flexDirection: "column",
-                        textAlign: "center",
-                        flex: 1,
-                    } })) : ("File not found"))))));
-    function showSubTab(key) {
-        setSubTab(true);
-        asideContext.openAside(React.createElement(QuickSubContent, { id: props.id, type: key, shape: true, onCancel: () => {
-                asideContext.closeAside();
-                setSubTab(false);
-            } }), { span: 12 });
-    }
-    function openTab() {
-        layout.history.push(props.url);
-    }
-};
-export default FilePreview;
+import "./index.less";
+import { AsideContent, observe } from "@voplus/morpho-ui";
+import { Button, Tooltip } from "antd";
+import { QuickSubContent, QuickSubTab } from "../QuickViewDialog/QuickSubTab";
+import React, { useState } from "react";
+import { faArrowDownToBracket, faExternalLink, faXmark } from "@fortawesome/pro-light-svg-icons";
+import { useFile, useFileStore } from "@voplus/morpho-document-core";
+import DocumentHeader from "../DocumentHeader";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import FileViewer from "./FileViewer";
+import FlexDialog from "../FlexDialog";
+import { saveAs } from "file-saver";
+import { useLayout } from "@voplus/morpho-data";
+const FilePreview = (props) => {
+    const layout = useLayout();
+    const store = useFileStore();
+    const file = useFile(props.id);
+    const [subTab, setSubTab] = useState(false);
+    const [asideContext] = useState(AsideContent.createContext());
+    const download = () => {
+        store.download(props.id).then((blob) => {
+            if (blob) {
+                const url = URL.createObjectURL(blob);
+                if (url) {
+                    saveAs(url, file.name);
+                }
+            }
+        });
+    };
+    return observe(() => (React.createElement(FlexDialog, { modalProps: {
+            className: "quickView-modal-style",
+            open: props.visible,
+            destroyOnClose: true,
+            closable: false,
+            footer: false,
+            width: subTab ? "1000px" : "650px",
+            onCancel: props.onClose,
+        }, closeAside: props.onClose },
+        React.createElement(AsideContent, { context: asideContext, style: { width: "100%" } },
+            React.createElement("div", { className: "perview-content" },
+                React.createElement("div", { className: "perview-head" }, file ? (React.createElement(React.Fragment, null,
+                    React.createElement(DocumentHeader, { id: props.id, className: "perview-doc-head", clickNameEffect: "edit", autoSaveName: true, tagsVisible: false, toolsVisible: false, flagVisible: false, statusVisible: false, quickDataBarVisible: false, descriptionVisible: false }),
+                    React.createElement("div", { className: "preview-tab" },
+                        props.url && (React.createElement(Tooltip, { title: "Open New Tab" },
+                            React.createElement(Button, { onClick: openTab, className: "ant-btn-icon-only" },
+                                React.createElement(FAIcon, { icon: faExternalLink })))),
+                        React.createElement(QuickSubTab, { shape: false, showSubTab: showSubTab }),
+                        React.createElement(Tooltip, { title: "Download" },
+                            React.createElement(Button, { icon: React.createElement(FAIcon, { icon: faArrowDownToBracket }), onClick: download })),
+                        !layout.ui.mobile && (React.createElement(Button, { icon: React.createElement(FAIcon, { icon: faXmark }), onClick: props.onClose }))))) : ("File not found")),
+                file.loaded ? (React.createElement(FileViewer, { id: props.id, style: {
+                        height: "70vh",
+                        display: "flex",
+                        flexDirection: "column",
+                        textAlign: "center",
+                        flex: 1,
+                    } })) : ("File not found"))))));
+    function showSubTab(key) {
+        setSubTab(true);
+        asideContext.openAside(React.createElement(QuickSubContent, { id: props.id, type: key, shape: true, onCancel: () => {
+                asideContext.closeAside();
+                setSubTab(false);
+            } }), { span: 12 });
+    }
+    function openTab() {
+        layout.history.push(props.url);
+    }
+};
+export default FilePreview;
 //# sourceMappingURL=Preview.js.map

package/es/components/FileViewer/VideoViewer.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-declare const VideoViewer: (props: {
-    id: string;
-    mime: string;
-}) => JSX.Element;
-export default VideoViewer;
+/// <reference types="react" />
+declare const VideoViewer: (props: {
+    id: string;
+    mime: string;
+}) => JSX.Element;
+export default VideoViewer;

package/es/components/FileViewer/VideoViewer.js

@@ -1,26 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { Scrollbars } from "react-custom-scrollbars";
-import { observe } from "@voplus/morpho-ui";
-import { useApplicationContext } from "@voplus/morpho-data";
-const VideoViewer = (props) => {
-    const api = useApplicationContext();
-    const path = `/api/files/${props.id}/content?access_token=${encodeURIComponent(api.user.info.accessToken)}`;
-    const [loaded, setLoaded] = useState(true);
-    useEffect(() => {
-        /** [fix] propertiesView 显示video时内容不正常
-         * 场景:list里有两个以上的video,点击item,propertiesView 显示video,始终都是只显示第一次点击显示的video,video没刷新
-         */
-        onReload();
-    }, [props.id]);
-    return observe(() => (React.createElement(Scrollbars, { autoHide: true }, loaded ? (React.createElement("video", { style: { maxWidth: "100%", height: "100%" }, controls: true },
-        React.createElement("source", { src: `${api.api.currentEndPoint.url(path)}`, type: props.mime }))) : null)));
-    /** reload data */
-    function onReload() {
-        setLoaded(false);
-        setTimeout(() => {
-            setLoaded(true);
-        }, 50);
-    }
-};
-export default VideoViewer;
+import React, { useEffect, useState } from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+import { observe } from "@voplus/morpho-ui";
+import { useApplicationContext } from "@voplus/morpho-data";
+const VideoViewer = (props) => {
+    const api = useApplicationContext();
+    const path = `/api/files/${props.id}/content?access_token=${encodeURIComponent(api.user.info.accessToken)}`;
+    const [loaded, setLoaded] = useState(true);
+    useEffect(() => {
+        /** [fix] propertiesView 显示video时内容不正常
+         * 场景:list里有两个以上的video,点击item,propertiesView 显示video,始终都是只显示第一次点击显示的video,video没刷新
+         */
+        onReload();
+    }, [props.id]);
+    return observe(() => (React.createElement(Scrollbars, { autoHide: true }, loaded ? (React.createElement("video", { style: { maxWidth: "100%", height: "100%" }, controls: true },
+        React.createElement("source", { src: `${api.api.currentEndPoint.url(path)}`, type: props.mime }))) : null)));
+    /** reload data */
+    function onReload() {
+        setLoaded(false);
+        setTimeout(() => {
+            setLoaded(true);
+        }, 50);
+    }
+};
+export default VideoViewer;
 //# sourceMappingURL=VideoViewer.js.map

package/es/components/FileViewer/WOPIViewer.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-export interface IWOPIViewerProps {
-    id: string;
-    wopiAction?: string;
-}
-declare const WOPIViewer: (props: IWOPIViewerProps) => JSX.Element;
-export default WOPIViewer;
+/// <reference types="react" />
+export interface IWOPIViewerProps {
+    id: string;
+    wopiAction?: string;
+}
+declare const WOPIViewer: (props: IWOPIViewerProps) => JSX.Element;
+export default WOPIViewer;

package/es/components/FileViewer/WOPIViewer.js

@@ -1,63 +1,63 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useFile, useFileStore } from "@voplus/morpho-document-core";
-import { observe } from "@voplus/morpho-ui";
-import routes from "../../routes";
-import styles from "./index.less";
-import { useLayout } from "@voplus/morpho-data";
-import { useLocalObservable } from "mobx-react-lite";
-import { v4 as uuid } from "uuid";
-function handlePostMessage(id, e, iframe) {
-    var _a;
-    if (e.source !== ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow))
-        return;
-    // The actual message is contained in the data property of the event.
-    var msg = JSON.parse(e.data);
-    // The message ID is now a property of the message object.
-    if ((msg === null || msg === void 0 ? void 0 : msg.MessageId) == "UI_Edit") {
-        window.open(routes.OfficeEdit.getUrl(id));
-    }
-}
-const WOPIViewer = (props) => {
-    const store = useFileStore();
-    const file = useFile(props.id);
-    const iframe = useRef(null);
-    const layout = useLayout();
-    const state = useLocalObservable(() => ({
-        actionUrl: "",
-        accessToken: "",
-        accessTokenTtl: "",
-        setWopiInfo: (info) => {
-            state.actionUrl = info.url;
-            state.accessToken = info.access_token;
-            state.accessTokenTtl = info.access_token_ttl;
-        },
-    }));
-    const _formEl = useRef(null);
-    const [_id] = useState(uuid());
-    useEffect(() => {
-        var _a;
-        store.getWopiInfo(props.id, (_a = props.wopiAction) !== null && _a !== void 0 ? _a : "view").then((info) => {
-            state.setWopiInfo(info);
-            // fullfill wopi favicon requirement.
-            if ((info === null || info === void 0 ? void 0 : info.icon) && layout.tabNav.visible === false)
-                document.querySelector('link[rel="shortcut icon"]').href = info.icon;
-            _formEl.current.submit();
-        });
-    }, [props.id]);
-    useLayoutEffect(() => {
-        var _a, _b;
-        const handler = (ev) => handlePostMessage(props.id, ev, iframe);
-        window.addEventListener("message", handler, false);
-        (_b = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage("Host_PostmessageReady");
-        return () => {
-            window.removeEventListener("message", handler, false);
-        };
-    }, [props.id]);
-    return observe(() => (React.createElement("div", { className: styles["wopi-viewer"] },
-        React.createElement("form", { target: _id, method: "post", action: state.actionUrl, ref: _formEl },
-            React.createElement("input", { name: "access_token", type: "hidden", value: state.accessToken }),
-            React.createElement("input", { name: "access_token_ttl", type: "hidden", value: state.accessTokenTtl })),
-        React.createElement("iframe", { ref: iframe, id: _id, name: _id, title: file.loaded ? file.name : "WOPIViewer", width: "100%", height: "100%" }))));
-};
-export default WOPIViewer;
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useFile, useFileStore } from "@voplus/morpho-document-core";
+import { observe } from "@voplus/morpho-ui";
+import routes from "../../routes";
+import styles from "./index.less";
+import { useLayout } from "@voplus/morpho-data";
+import { useLocalObservable } from "mobx-react-lite";
+import { v4 as uuid } from "uuid";
+function handlePostMessage(id, e, iframe) {
+    var _a;
+    if (e.source !== ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow))
+        return;
+    // The actual message is contained in the data property of the event.
+    var msg = JSON.parse(e.data);
+    // The message ID is now a property of the message object.
+    if ((msg === null || msg === void 0 ? void 0 : msg.MessageId) == "UI_Edit") {
+        window.open(routes.OfficeEdit.getUrl(id));
+    }
+}
+const WOPIViewer = (props) => {
+    const store = useFileStore();
+    const file = useFile(props.id);
+    const iframe = useRef(null);
+    const layout = useLayout();
+    const state = useLocalObservable(() => ({
+        actionUrl: "",
+        accessToken: "",
+        accessTokenTtl: "",
+        setWopiInfo: (info) => {
+            state.actionUrl = info.url;
+            state.accessToken = info.access_token;
+            state.accessTokenTtl = info.access_token_ttl;
+        },
+    }));
+    const _formEl = useRef(null);
+    const [_id] = useState(uuid());
+    useEffect(() => {
+        var _a;
+        store.getWopiInfo(props.id, (_a = props.wopiAction) !== null && _a !== void 0 ? _a : "view").then((info) => {
+            state.setWopiInfo(info);
+            // fullfill wopi favicon requirement.
+            if ((info === null || info === void 0 ? void 0 : info.icon) && layout.tabNav.visible === false)
+                document.querySelector('link[rel="shortcut icon"]').href = info.icon;
+            _formEl.current.submit();
+        });
+    }, [props.id]);
+    useLayoutEffect(() => {
+        var _a, _b;
+        const handler = (ev) => handlePostMessage(props.id, ev, iframe);
+        window.addEventListener("message", handler, false);
+        (_b = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage("Host_PostmessageReady");
+        return () => {
+            window.removeEventListener("message", handler, false);
+        };
+    }, [props.id]);
+    return observe(() => (React.createElement("div", { className: styles["wopi-viewer"] },
+        React.createElement("form", { target: _id, method: "post", action: state.actionUrl, ref: _formEl },
+            React.createElement("input", { name: "access_token", type: "hidden", value: state.accessToken }),
+            React.createElement("input", { name: "access_token_ttl", type: "hidden", value: state.accessTokenTtl })),
+        React.createElement("iframe", { ref: iframe, id: _id, name: _id, title: file.loaded ? file.name : "WOPIViewer", width: "100%", height: "100%" }))));
+};
+export default WOPIViewer;
 //# sourceMappingURL=WOPIViewer.js.map

package/es/components/FileViewer/index.d.ts

@@ -1 +1 @@
-export { default } from "./FileViewer";
+export { default } from "./FileViewer";

package/es/components/FileViewer/index.js

@@ -1,2 +1,2 @@
-export { default } from "./FileViewer";
+export { default } from "./FileViewer";
 //# sourceMappingURL=index.js.map