@voplus/morpho-document 1.4.95 → 1.4.97

package/es/components/FileViewer/WOPIViewer.js

@@ -1,35 +1,35 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useFile, useFileStore } from "@voplus/morpho-document-core";
-import { observe } from "@voplus/morpho-ui";
-import styles from "./index.less";
-import { useLocalObservable } from "mobx-react-lite";
-import { v4 as uuid } from "uuid";
-const WOPIViewer = (props) => {
-    const store = useFileStore();
-    const file = useFile(props.id);
-    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(() => {
-        store.getWopiInfo(props.id).then((info) => {
-            state.setWopiInfo(info);
-            _formEl.current.submit();
-        });
-    }, [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", { id: _id, name: _id, title: file.loaded ? file.name : "WOPIViewer", width: "100%", height: "100%" }))));
-};
-export default WOPIViewer;
+import React, { useEffect, useRef, useState } from "react";
+import { useFile, useFileStore } from "@voplus/morpho-document-core";
+import { observe } from "@voplus/morpho-ui";
+import styles from "./index.less";
+import { useLocalObservable } from "mobx-react-lite";
+import { v4 as uuid } from "uuid";
+const WOPIViewer = (props) => {
+    const store = useFileStore();
+    const file = useFile(props.id);
+    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(() => {
+        store.getWopiInfo(props.id).then((info) => {
+            state.setWopiInfo(info);
+            _formEl.current.submit();
+        });
+    }, [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", { 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

package/es/components/FileViewer/index.less

@@ -0,0 +1,93 @@
+@import "~@voplus/antd/es/style/themes/default";
+
+.wopi-viewer {
+	width: 100%;
+	height: 100%;
+}
+
+.viewer-spin {
+	width: 100%;
+	text-align: center;
+	padding: 30px 0;
+}
+
+:global {
+	.image-viewer {
+		position: relative;
+		display: inline-block;
+		width: 100%;
+		border: 1px solid @border-color-base;
+		padding: @padding-sm;
+		&:hover .image-viewer-plus {
+			display: block;
+		}
+
+		.image-viewer-plus {
+			position: absolute;
+			display: none;
+			width: 40px;
+			height: 40px;
+			line-height: 38px;
+			left: 50%;
+			top: 50%;
+			margin-left: -20px;
+			margin-top: -20px;
+			text-align: center;
+			font-size: 25px;
+			color: #fff;
+			border-radius: 50%;
+			background-color: rgba(0, 0, 0, 0.6);
+			cursor: pointer;
+		}
+	}
+	// .preview-modal {
+	.perview-content {
+		display: flex;
+		flex-direction: column;
+		overflow-y: hidden;
+		// .perview-file {
+		// 	flex: 1;
+		// }
+		.perview-head {
+			padding: 16px 24px;
+			color: rgba(0, 0, 0, 0.65);
+			background: #fff;
+			display: flex;
+			justify-content: space-between;
+			// border-bottom: 1px solid #f0f0f0;
+			.perview-doc-head {
+				padding: 0;
+			}
+		}
+	}
+	// .ant-modal-body {
+	// 	padding: 0;
+	// }
+	.preview-tab {
+		text-align: right;
+		.ant-btn {
+			margin-left: 10px;
+		}
+	}
+	// }
+	.image-viewer-width-fit {
+		.ant-modal {
+			// max-width: 80vw;
+		}
+		.ant-modal-content {
+			background: transparent;
+			height: 100%;
+			box-shadow: none;
+			.ant-modal-body {
+				height: 100%;
+				padding: 0;
+				.zoom-out {
+					font-size: 30px;
+					text-align: right;
+					color: #fff;
+					cursor: pointer;
+				}
+			}
+		}
+	}
+}

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

@@ -1,17 +1,17 @@
-import React from "react";
-declare const Icon: {
-    (props: {
-        children: React.ReactNode;
-        /** 是否需要border */
-        border?: boolean;
-        /** Tooltip title */
-        title?: string;
-        /** active */
-        active?: boolean;
-        onClick?: () => void;
-    }): JSX.Element;
-    defaultProps: {
-        border: boolean;
-    };
-};
-export default Icon;
+import React from "react";
+declare const Icon: {
+    (props: {
+        children: React.ReactNode;
+        /** 是否需要border */
+        border?: boolean;
+        /** Tooltip title */
+        title?: string;
+        /** active */
+        active?: boolean;
+        onClick?: () => void;
+    }): JSX.Element;
+    defaultProps: {
+        border: boolean;
+    };
+};
+export default Icon;

package/es/components/Icon/index.js

@@ -1,17 +1,17 @@
-import { Button, Tooltip } from "@voplus/antd";
-import React from "react";
-import classnames from "classnames";
-import { observe } from "@voplus/morpho-ui";
-import styles from "./index.less";
-const Icon = (props) => {
-    return observe(() => (React.createElement(Tooltip, { title: props.title },
-        React.createElement(Button, { onClick: props.onClick, className: classnames(styles["tooltip-btn-icon"], {
-                "no-border": !props.border,
-                active: props.active,
-            }) }, props.children))));
-};
-Icon.defaultProps = {
-    border: true,
-};
-export default Icon;
+import { Button, Tooltip } from "@voplus/antd";
+import React from "react";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+import styles from "./index.less";
+const Icon = (props) => {
+    return observe(() => (React.createElement(Tooltip, { title: props.title },
+        React.createElement(Button, { onClick: props.onClick, className: classnames(styles["tooltip-btn-icon"], {
+                "no-border": !props.border,
+                active: props.active,
+            }) }, props.children))));
+};
+Icon.defaultProps = {
+    border: true,
+};
+export default Icon;
 //# sourceMappingURL=index.js.map

package/es/components/Icon/index.less

@@ -0,0 +1,24 @@
+.tooltip-btn-icon {
+	width: 32px;
+	height: 32px;
+	padding: 2.4px 0;
+	font-size: 16px;
+	border-radius: 2px;
+	vertical-align: -1px;
+	color: lightgray;
+	&:global(.ant-btn:focus) {
+		color: black;
+	}
+	&:global(.active) {
+		color: black;
+	}
+	&:global(.no-border) {
+		border: none;
+		box-shadow: none;
+	}
+	&:global(.no-border[ant-click-animating-without-extra-node]:after) {
+		border: 0 none;
+		opacity: 0;
+		animation: none 0 ease 0 1 normal;
+	}
+}

package/es/components/Links/Item.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import "./index.less";
-declare const Item: (props: {
-    id: string;
-    /** 是否是被链接 */
-    byLink?: boolean;
-    /** link的类型 "Association" | "Reference" | "Dependent" */
-    linkType?: string;
-    multiple?: boolean;
-    onRemove?: () => void;
-}) => JSX.Element;
-export default Item;
+/// <reference types="react" />
+import "./index.less";
+declare const Item: (props: {
+    id: string;
+    /** 是否是被链接 */
+    byLink?: boolean;
+    /** link的类型 "Association" | "Reference" | "Dependent" */
+    linkType?: string;
+    multiple?: boolean;
+    onRemove?: () => void;
+}) => JSX.Element;
+export default Item;

package/es/components/Links/Item.js

@@ -1,62 +1,62 @@
-import React, { useState } from "react";
-import { DocumentType, useMetaStore } from "../../data";
-import { faCalendarDay, faCommentDots, faFile, faPaperclip, faLinkHorizontal, } from "@fortawesome/pro-light-svg-icons";
-import { Checkbox, Tag, Tooltip } from "@voplus/antd";
-import { Delete } from "../../controls/ToolBar/buttons";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import { Open } from "../../controls/ToolBar/buttons";
-import { State } from "./state";
-import { observe } from "@voplus/morpho-ui";
-import { useDocument } from "@voplus/morpho-document-core";
-import FlagIcon from "../../controls/data-icons/FlagIcon";
-import DocumentQuickViewDialog from "../DocumentQuickViewDialog";
-import ToolBar from "../../controls/ToolBar/ToolBar2";
-import classnames from "classnames";
-import "./index.less";
-const Item = (props) => {
-    const { id, byLink, linkType, multiple, onRemove } = props;
-    const document = useDocument(id, { reload: false });
-    const [state] = useState(new State());
-    const meta = useMetaStore();
-    const iconList = (React.createElement("div", { className: "task-control" },
-        byLink && (React.createElement(Tooltip, { title: "Linked" },
-            React.createElement("span", null,
-                React.createElement(FAIcon, { icon: faLinkHorizontal })))),
-        React.createElement("span", null,
-            React.createElement(FAIcon, { icon: faPaperclip }),
-            document.documents || 0),
-        React.createElement("span", null,
-            React.createElement(FAIcon, { icon: faCommentDots }),
-            document.comments || 0)));
-    return observe(() => (React.createElement("div", { className: "reference-item" },
-        document.type === DocumentType.Task ? (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "reference-item-content" },
-                React.createElement("div", { className: "reference-content" },
-                    React.createElement(React.Fragment, null,
-                        !multiple && (React.createElement(FlagIcon, { id: id, flag: document.flag, editable: false, className: "padding-right-10" })),
-                        multiple && React.createElement(Checkbox, { value: props.id, className: "padding-right-10" })),
-                    React.createElement("div", null,
-                        React.createElement("div", { className: classnames("task-item-name", {
-                            // "task-item-name_done": document.taskStatus === "Done"
-                            }), onClick: () => (state.quickViewVisible = true) }, document.name),
-                        iconList))))) : (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "reference-item-content" },
-                React.createElement("div", { className: "reference-content" },
-                    React.createElement("div", { className: "type-icon" }, multiple ? (React.createElement(Checkbox, { value: props.id })) : (React.createElement(FAIcon, { icon: document.type === DocumentType.MeetingsFolder ? faCalendarDay : faFile }))),
-                    React.createElement("div", null,
-                        React.createElement("div", { onClick: () => (state.quickViewVisible = true) }, document.name),
-                        iconList))))),
-        React.createElement("div", { className: "hover-link-type" },
-            React.createElement(Tag, { color: linkType === "Association"
-                    ? "#635BE2 "
-                    : linkType === "Reference"
-                        ? "#F7885A"
-                        : "#FFCA61 " }, linkType)),
-        React.createElement("div", { className: "hover-operate-icon" },
-            React.createElement(ToolBar, { id: props.id, showMenu: false },
-                React.createElement(Open, { size: "middle", url: meta.getRoute(document) }),
-                !document.system && React.createElement(Delete, { size: "middle", action: onRemove }))),
-        React.createElement(DocumentQuickViewDialog, { id: document.id, visible: state.quickViewVisible, onCancel: () => (state.quickViewVisible = false) }))));
-};
-export default Item;
+import React, { useState } from "react";
+import { DocumentType, useMetaStore } from "../../data";
+import { faCalendarDay, faCommentDots, faFile, faPaperclip, faLinkHorizontal, } from "@fortawesome/pro-light-svg-icons";
+import { Checkbox, Tag, Tooltip } from "@voplus/antd";
+import { Delete } from "../../controls/ToolBar/buttons";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import { Open } from "../../controls/ToolBar/buttons";
+import { State } from "./state";
+import { observe } from "@voplus/morpho-ui";
+import { useDocument } from "@voplus/morpho-document-core";
+import FlagIcon from "../../controls/data-icons/FlagIcon";
+import DocumentQuickViewDialog from "../DocumentQuickViewDialog";
+import ToolBar from "../../controls/ToolBar/ToolBar2";
+import classnames from "classnames";
+import "./index.less";
+const Item = (props) => {
+    const { id, byLink, linkType, multiple, onRemove } = props;
+    const document = useDocument(id, { reload: false });
+    const [state] = useState(new State());
+    const meta = useMetaStore();
+    const iconList = (React.createElement("div", { className: "task-control" },
+        byLink && (React.createElement(Tooltip, { title: "Linked" },
+            React.createElement("span", null,
+                React.createElement(FAIcon, { icon: faLinkHorizontal })))),
+        React.createElement("span", null,
+            React.createElement(FAIcon, { icon: faPaperclip }),
+            document.documents || 0),
+        React.createElement("span", null,
+            React.createElement(FAIcon, { icon: faCommentDots }),
+            document.comments || 0)));
+    return observe(() => (React.createElement("div", { className: "reference-item" },
+        document.type === DocumentType.Task ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "reference-item-content" },
+                React.createElement("div", { className: "reference-content" },
+                    React.createElement(React.Fragment, null,
+                        !multiple && (React.createElement(FlagIcon, { id: id, flag: document.flag, editable: false, className: "padding-right-10" })),
+                        multiple && React.createElement(Checkbox, { value: props.id, className: "padding-right-10" })),
+                    React.createElement("div", null,
+                        React.createElement("div", { className: classnames("task-item-name", {
+                            // "task-item-name_done": document.taskStatus === "Done"
+                            }), onClick: () => (state.quickViewVisible = true) }, document.name),
+                        iconList))))) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "reference-item-content" },
+                React.createElement("div", { className: "reference-content" },
+                    React.createElement("div", { className: "type-icon" }, multiple ? (React.createElement(Checkbox, { value: props.id })) : (React.createElement(FAIcon, { icon: document.type === DocumentType.MeetingsFolder ? faCalendarDay : faFile }))),
+                    React.createElement("div", null,
+                        React.createElement("div", { onClick: () => (state.quickViewVisible = true) }, document.name),
+                        iconList))))),
+        React.createElement("div", { className: "hover-link-type" },
+            React.createElement(Tag, { color: linkType === "Association"
+                    ? "#635BE2 "
+                    : linkType === "Reference"
+                        ? "#F7885A"
+                        : "#FFCA61 " }, linkType)),
+        React.createElement("div", { className: "hover-operate-icon" },
+            React.createElement(ToolBar, { id: props.id, showMenu: false },
+                React.createElement(Open, { size: "middle", url: meta.getRoute(document) }),
+                !document.system && React.createElement(Delete, { size: "middle", action: onRemove }))),
+        React.createElement(DocumentQuickViewDialog, { id: document.id, visible: state.quickViewVisible, onCancel: () => (state.quickViewVisible = false) }))));
+};
+export default Item;
 //# sourceMappingURL=Item.js.map

package/es/components/Links/NewLinkType.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-declare const NewLinkType: (props: {
-    menus: string[];
-    style?: React.CSSProperties | undefined;
-    onSelect?: ((type: string) => void) | undefined;
-}) => JSX.Element;
-export default NewLinkType;
+import React from "react";
+declare const NewLinkType: (props: {
+    menus: string[];
+    style?: React.CSSProperties | undefined;
+    onSelect?: ((type: string) => void) | undefined;
+}) => JSX.Element;
+export default NewLinkType;

package/es/components/Links/NewLinkType.js

@@ -1,18 +1,18 @@
-import React, { useState } from "react";
-import { Dropdown, Menu } from "@voplus/antd";
-import { PlusOutlined } from "@ant-design/icons";
-const NewLinkType = (props) => {
-    const [selectedKeys, setSelectedKeys] = useState([]);
-    const menu = (React.createElement(Menu, { selectedKeys: selectedKeys, onClick: onSelect }, props.menus.map((m) => (React.createElement(Menu.Item, { key: m }, m)))));
-    return (React.createElement(Dropdown, { overlay: menu, trigger: ["click"], placement: "bottomRight" },
-        React.createElement("span", { className: "plus-icon", style: props.style },
-            React.createElement(PlusOutlined, { color: "#fff" }))));
-    function onSelect({ key }) {
-        const hasKey = selectedKeys.some((selectedKey) => selectedKey === key);
-        setSelectedKeys(hasKey ? [] : [key.toString()]);
-        if (props.onSelect)
-            props === null || props === void 0 ? void 0 : props.onSelect(hasKey ? "" : key.toString());
-    }
-};
-export default NewLinkType;
+import React, { useState } from "react";
+import { Dropdown, Menu } from "@voplus/antd";
+import { PlusOutlined } from "@ant-design/icons";
+const NewLinkType = (props) => {
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const menu = (React.createElement(Menu, { selectedKeys: selectedKeys, onClick: onSelect }, props.menus.map((m) => (React.createElement(Menu.Item, { key: m }, m)))));
+    return (React.createElement(Dropdown, { overlay: menu, trigger: ["click"], placement: "bottomRight" },
+        React.createElement("span", { className: "plus-icon", style: props.style },
+            React.createElement(PlusOutlined, { color: "#fff" }))));
+    function onSelect({ key }) {
+        const hasKey = selectedKeys.some((selectedKey) => selectedKey === key);
+        setSelectedKeys(hasKey ? [] : [key.toString()]);
+        if (props.onSelect)
+            props === null || props === void 0 ? void 0 : props.onSelect(hasKey ? "" : key.toString());
+    }
+};
+export default NewLinkType;
 //# sourceMappingURL=NewLinkType.js.map

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

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-declare const Links: {
-    (props: {
-        id: string;
-        isTitle?: boolean;
-    }): JSX.Element;
-    defaultProps: {
-        isTitle: boolean;
-    };
-};
-export default Links;
+/// <reference types="react" />
+declare const Links: {
+    (props: {
+        id: string;
+        isTitle?: boolean;
+    }): JSX.Element;
+    defaultProps: {
+        isTitle: boolean;
+    };
+};
+export default Links;