@voplus/morpho-document 1.4.97 → 1.4.99

package/es/pages/Signature/Envelope/EnvelopeRecipientView/pc/index.js

@@ -1,58 +1,58 @@
-import "./index.less";
-import { Empty, Spin } from "@voplus/antd";
-import { useEnvelope } from "../../../data/envelope";
-import { MainContent } from "@voplus/morpho-ui";
-import React, { useEffect, useState } from "react";
-import ActivityLog from "@voplus/morpho-org/es/components/ActivityLog/ActivityLog2";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import LetterContentView from "../../../Letter/LetterContentView";
-import LetterList from "../../../Letter/LetterList";
-import { LoadingOutlined } from "@ant-design/icons";
-import classnames from "classnames";
-import { faUserChart } from "@fortawesome/pro-light-svg-icons";
-import { observe } from "@voplus/morpho-ui";
-import { useEnvelopContext } from "../../../data/EnvelopeContext";
-import { useTabItem } from "@voplus/morpho-data";
-const PcView = (props) => {
-    const { id } = props;
-    const envelope = useEnvelope(id, { includes: "tags,versions" });
-    // const envelopStore = useEnvelopeStore();
-    // const [context] = useState(new EnvelopeContextState(id, envelopStore));
-    const context = useEnvelopContext();
-    const [letter, setLetter] = useState();
-    const tab = useTabItem();
-    context.update(envelope);
-    useEffect(() => {
-        tab.title = envelope === null || envelope === void 0 ? void 0 : envelope.name;
-    }, [envelope === null || envelope === void 0 ? void 0 : envelope.name]);
-    useEffect(() => {
-        /**只顯示當前用戶有签名的Letter或Letter为 Public */
-        const letters = context.getMyLetter(envelope.letters);
-        context.union(letters || []);
-        if (letters && letters.length) {
-            /** LetterContentView 需要letterId 转换 pdf 文件流 */
-            setLetter(letters[0]);
-        }
-    }, [envelope.letters]);
-    const LoadingElement = (props) => (React.createElement("div", { className: classnames("loading", props.className) },
-        React.createElement(Spin, { tip: "Loading...", indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })));
-    return observe(() => (
-    // <EnvelopeContext.Provider value={context}>
-    React.createElement(MainContent, { className: "envelope-recipient-view_pc" },
-        React.createElement(MainContent.Nav, { collapsible: true, className: "envelope-recipient-letter_list" }, envelope.loading || context.loading ? (React.createElement(LoadingElement, null)) : (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "title" }, "Documents"),
-            React.createElement(LetterList, { id: id, recipient: true, onClick: onDocumentSelected })))),
-        envelope.loading || context.loading ? (React.createElement(LoadingElement, null)) : (letter === null || letter === void 0 ? void 0 : letter.document.id) ? (React.createElement(LetterContentView, { envelopeId: id, letter: letter, onOpen: onDocumentSelected })) : (React.createElement(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE })),
-        React.createElement(MainContent.Nav, { collapsible: true, shadow: "light", position: "right", className: "envelope-recipient-activity", foldIcon: React.createElement(FAIcon, { icon: faUserChart }) }, context.loading ? React.createElement(LoadingElement, null) : React.createElement(ActivityLog, { id: id })),
-        React.createElement(React.Fragment, null, context.downloadLoading && React.createElement(LoadingElement, { className: "blocking" })))
-    // </EnvelopeContext.Provider>
-    ));
-    function onDocumentSelected(id) {
-        if (!context.letters)
-            return;
-        const letter = context.letters.find((l) => l.document.id === id);
-        setLetter(letter || {});
-    }
-};
-export default PcView;
+import "./index.less";
+import { Empty, Spin } from "@voplus/antd";
+import { useEnvelope } from "../../../data/envelope";
+import { MainContent } from "@voplus/morpho-ui";
+import React, { useEffect, useState } from "react";
+import ActivityLog from "@voplus/morpho-org/es/components/ActivityLog/ActivityLog2";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import LetterContentView from "../../../Letter/LetterContentView";
+import LetterList from "../../../Letter/LetterList";
+import { LoadingOutlined } from "@ant-design/icons";
+import classnames from "classnames";
+import { faUserChart } from "@fortawesome/pro-light-svg-icons";
+import { observe } from "@voplus/morpho-ui";
+import { useEnvelopContext } from "../../../data/EnvelopeContext";
+import { useTabItem } from "@voplus/morpho-data";
+const PcView = (props) => {
+    const { id } = props;
+    const envelope = useEnvelope(id, { includes: "tags,versions" });
+    // const envelopStore = useEnvelopeStore();
+    // const [context] = useState(new EnvelopeContextState(id, envelopStore));
+    const context = useEnvelopContext();
+    const [letter, setLetter] = useState();
+    const tab = useTabItem();
+    context.update(envelope);
+    useEffect(() => {
+        tab.title = envelope === null || envelope === void 0 ? void 0 : envelope.name;
+    }, [envelope === null || envelope === void 0 ? void 0 : envelope.name]);
+    useEffect(() => {
+        /**只顯示當前用戶有签名的Letter或Letter为 Public */
+        const letters = context.getMyLetter(envelope.letters);
+        context.union(letters || []);
+        if (letters && letters.length) {
+            /** LetterContentView 需要letterId 转换 pdf 文件流 */
+            setLetter(letters[0]);
+        }
+    }, [envelope.letters]);
+    const LoadingElement = (props) => (React.createElement("div", { className: classnames("loading", props.className) },
+        React.createElement(Spin, { tip: "Loading...", indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })));
+    return observe(() => (
+    // <EnvelopeContext.Provider value={context}>
+    React.createElement(MainContent, { className: "envelope-recipient-view_pc" },
+        React.createElement(MainContent.Nav, { collapsible: true, className: "envelope-recipient-letter_list" }, envelope.loading || context.loading ? (React.createElement(LoadingElement, null)) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "title" }, "Documents"),
+            React.createElement(LetterList, { id: id, recipient: true, onClick: onDocumentSelected })))),
+        envelope.loading || context.loading ? (React.createElement(LoadingElement, null)) : (letter === null || letter === void 0 ? void 0 : letter.document.id) ? (React.createElement(LetterContentView, { envelopeId: id, letter: letter, onOpen: onDocumentSelected })) : (React.createElement(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE })),
+        React.createElement(MainContent.Nav, { collapsible: true, shadow: "light", position: "right", className: "envelope-recipient-activity", foldIcon: React.createElement(FAIcon, { icon: faUserChart }) }, context.loading ? React.createElement(LoadingElement, null) : React.createElement(ActivityLog, { id: id })),
+        React.createElement(React.Fragment, null, context.downloadLoading && React.createElement(LoadingElement, { className: "blocking" })))
+    // </EnvelopeContext.Provider>
+    ));
+    function onDocumentSelected(id) {
+        if (!context.letters)
+            return;
+        const letter = context.letters.find((l) => l.document.id === id);
+        setLetter(letter || {});
+    }
+};
+export default PcView;
 //# sourceMappingURL=index.js.map

package/es/pages/Signature/Envelope/EnvelopeRecipientView/state.d.ts

@@ -1,15 +1,15 @@
-export declare class State {
-    _id: string;
-    /** visible of EnvelopeRecipient */
-    continue: boolean;
-    /** visible of DescriptionPage  */
-    show: boolean;
-    /** open of TourGuide */
-    isTourOpen: boolean;
-    constructor(_id: string);
-    get doNotShow(): boolean;
-    get doNotShowMap(): any;
-    get tourVisible(): boolean;
-    setDoNotShow(): void;
-    closeTour: () => void;
-}
+export declare class State {
+    _id: string;
+    /** visible of EnvelopeRecipient */
+    continue: boolean;
+    /** visible of DescriptionPage  */
+    show: boolean;
+    /** open of TourGuide */
+    isTourOpen: boolean;
+    constructor(_id: string);
+    get doNotShow(): boolean;
+    get doNotShowMap(): any;
+    get tourVisible(): boolean;
+    setDoNotShow(): void;
+    closeTour: () => void;
+}

package/es/pages/Signature/Envelope/EnvelopeRecipientView/state.js

@@ -1,82 +1,82 @@
-import { __decorate } from "tslib";
-import { action, computed, makeObservable, observable } from "mobx";
-export class State {
-    constructor(_id) {
-        Object.defineProperty(this, "_id", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: _id
-        });
-        /** visible of EnvelopeRecipient */
-        Object.defineProperty(this, "continue", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        /** visible of DescriptionPage  */
-        Object.defineProperty(this, "show", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        /** open of TourGuide */
-        Object.defineProperty(this, "isTourOpen", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        Object.defineProperty(this, "closeTour", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.isTourOpen = false;
-                /** tourGuide完成或关闭后储存在localStorage */
-                localStorage.setItem("tourGuide", "close");
-            }
-        });
-        makeObservable(this);
-    }
-    get doNotShow() {
-        return !!(this._id && this.doNotShowMap && this.doNotShowMap[this._id]);
-    }
-    get doNotShowMap() {
-        const map = localStorage.getItem("doNotShowMap");
-        return map ? JSON.parse(map) : "";
-    }
-    get tourVisible() {
-        return localStorage.getItem("tourGuide") !== "close";
-    }
-    setDoNotShow() {
-        localStorage.setItem("doNotShowMap", JSON.stringify({ ...this.doNotShowMap, [this._id]: this.show }));
-    }
-}
-__decorate([
-    observable
-], State.prototype, "continue", void 0);
-__decorate([
-    observable
-], State.prototype, "show", void 0);
-__decorate([
-    observable
-], State.prototype, "isTourOpen", void 0);
-__decorate([
-    computed
-], State.prototype, "doNotShow", null);
-__decorate([
-    computed
-], State.prototype, "doNotShowMap", null);
-__decorate([
-    computed
-], State.prototype, "tourVisible", null);
-__decorate([
-    action
-], State.prototype, "setDoNotShow", null);
-__decorate([
-    action
-], State.prototype, "closeTour", void 0);
+import { __decorate } from "tslib";
+import { action, computed, makeObservable, observable } from "mobx";
+export class State {
+    constructor(_id) {
+        Object.defineProperty(this, "_id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: _id
+        });
+        /** visible of EnvelopeRecipient */
+        Object.defineProperty(this, "continue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** visible of DescriptionPage  */
+        Object.defineProperty(this, "show", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** open of TourGuide */
+        Object.defineProperty(this, "isTourOpen", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "closeTour", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.isTourOpen = false;
+                /** tourGuide完成或关闭后储存在localStorage */
+                localStorage.setItem("tourGuide", "close");
+            }
+        });
+        makeObservable(this);
+    }
+    get doNotShow() {
+        return !!(this._id && this.doNotShowMap && this.doNotShowMap[this._id]);
+    }
+    get doNotShowMap() {
+        const map = localStorage.getItem("doNotShowMap");
+        return map ? JSON.parse(map) : "";
+    }
+    get tourVisible() {
+        return localStorage.getItem("tourGuide") !== "close";
+    }
+    setDoNotShow() {
+        localStorage.setItem("doNotShowMap", JSON.stringify({ ...this.doNotShowMap, [this._id]: this.show }));
+    }
+}
+__decorate([
+    observable
+], State.prototype, "continue", void 0);
+__decorate([
+    observable
+], State.prototype, "show", void 0);
+__decorate([
+    observable
+], State.prototype, "isTourOpen", void 0);
+__decorate([
+    computed
+], State.prototype, "doNotShow", null);
+__decorate([
+    computed
+], State.prototype, "doNotShowMap", null);
+__decorate([
+    computed
+], State.prototype, "tourVisible", null);
+__decorate([
+    action
+], State.prototype, "setDoNotShow", null);
+__decorate([
+    action
+], State.prototype, "closeTour", void 0);
 //# sourceMappingURL=state.js.map

package/es/pages/Signature/Envelope/EnvelopeReport/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import "./index.less";
-declare const EnvelopeReport: () => JSX.Element;
-export default EnvelopeReport;
+/// <reference types="react" />
+import "./index.less";
+declare const EnvelopeReport: () => JSX.Element;
+export default EnvelopeReport;

package/es/pages/Signature/Envelope/EnvelopeReport/index.js

@@ -1,58 +1,58 @@
-import "./index.less";
-import { Modal, Popover, Row, Spin } from "@voplus/antd";
-import React, { useEffect, useState } from "react";
-import { faCheck, faCommentAltLines, faTimes } from "@fortawesome/pro-light-svg-icons";
-import ActivityLog from "@voplus/morpho-org/es/components/ActivityLog/ActivityLog2";
-import DocumentHeader from "../../../../components/DocumentHeader";
-import { EnvelopeContextState } from "../../data/EnvelopeContext";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import LetterItem from "../../Letter/LetterItem";
-import { LoadingOutlined } from "@ant-design/icons";
-import QRCode from "qrcode.react";
-import { Scrollbars } from "react-custom-scrollbars";
-import { autorun } from "mobx";
-import moment from "moment";
-import { observe } from "@voplus/morpho-ui";
-import { useEnvelope } from "../../data/envelope";
-import { useRouteMatch } from "react-router";
-const EnvelopeReport = () => {
-    const match = useRouteMatch();
-    const id = match.params.id;
-    const envelope = useEnvelope(id, { reload: true, includes: "tags,versions" });
-    const [context] = useState(new EnvelopeContextState());
-    const [zoom, setZoom] = useState(false);
-    useEffect(() => autorun(() => context.set(envelope.letters)), [id]);
-    return observe(() => {
-        var _a;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "envelope-report-view" },
-                React.createElement(DocumentHeader, { id: id, size: "h2", clickNameEffect: "edit", autoSaveName: true, status: envelope.envelopeStatus, tools: React.createElement(QRCode, { id: "qrCode", value: "https://www.jianshu.com/u/992656e8a8a6", size: 54, style: { cursor: "pointer" }, onClick: () => setZoom(true) }) }),
-                React.createElement("div", { className: "letter-header" }, "Letters"),
-                envelope.loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: "35vh" }, (_a = envelope.letters) === null || _a === void 0 ? void 0 : _a.map((letter, index) => (React.createElement("div", { key: letter.id, className: "report-letter-item" },
-                    React.createElement(LetterItem, { index: index, envelopeId: id, letter: letter, recipient: true }), letter === null || letter === void 0 ? void 0 :
-                    letter.signatureLines.map((line, index) => {
-                        var _a;
-                        return (React.createElement(Row, { key: line.id, justify: "space-between" },
-                            React.createElement("div", { className: "report-letter-line" },
-                                React.createElement("i", null, `${index + 1}.`), line === null || line === void 0 ? void 0 :
-                                line.name,
-                                line.description && (React.createElement(Popover, { placement: "bottom", title: "Description", overlayClassName: "description-data-icon_popover", content: line.description },
-                                    React.createElement("span", { className: "description" },
-                                        React.createElement(FAIcon, { icon: faCommentAltLines }))))),
-                            React.createElement("div", null,
-                                React.createElement("span", { className: "light" }, "Signed by"),
-                                " ", (_a = line === null || line === void 0 ? void 0 : line.signer) === null || _a === void 0 ? void 0 :
-                                _a.name),
-                            React.createElement("div", null, line.signatureDate ? (React.createElement(React.Fragment, null,
-                                React.createElement(FAIcon, { icon: faCheck, color: "#52c41a", className: "status" }),
-                                moment(moment.utc(line.signatureDate).toDate()).format("D MMM HH:mm:ss"))) : (React.createElement(React.Fragment, null,
-                                React.createElement(FAIcon, { icon: faTimes, color: "#ff4d4f", className: "status" }),
-                                "Unsigned")))));
-                    })))))),
-                React.createElement(ActivityLog, { id: id, bar: false })),
-            zoom && (React.createElement(Modal, { visible: zoom, footer: null, width: 250, bodyStyle: { padding: 0, height: "250px" }, onCancel: () => setZoom(false) },
-                React.createElement(QRCode, { id: "qrCode", value: "https://www.jianshu.com/u/992656e8a8a6", size: 250, style: { margin: "auto", cursor: "pointer" } })))));
-    });
-};
-export default EnvelopeReport;
+import "./index.less";
+import { Modal, Popover, Row, Spin } from "@voplus/antd";
+import React, { useEffect, useState } from "react";
+import { faCheck, faCommentAltLines, faTimes } from "@fortawesome/pro-light-svg-icons";
+import ActivityLog from "@voplus/morpho-org/es/components/ActivityLog/ActivityLog2";
+import DocumentHeader from "../../../../components/DocumentHeader";
+import { EnvelopeContextState } from "../../data/EnvelopeContext";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import LetterItem from "../../Letter/LetterItem";
+import { LoadingOutlined } from "@ant-design/icons";
+import QRCode from "qrcode.react";
+import { Scrollbars } from "react-custom-scrollbars";
+import { autorun } from "mobx";
+import moment from "moment";
+import { observe } from "@voplus/morpho-ui";
+import { useEnvelope } from "../../data/envelope";
+import { useRouteMatch } from "react-router";
+const EnvelopeReport = () => {
+    const match = useRouteMatch();
+    const id = match.params.id;
+    const envelope = useEnvelope(id, { reload: true, includes: "tags,versions" });
+    const [context] = useState(new EnvelopeContextState());
+    const [zoom, setZoom] = useState(false);
+    useEffect(() => autorun(() => context.set(envelope.letters)), [id]);
+    return observe(() => {
+        var _a;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "envelope-report-view" },
+                React.createElement(DocumentHeader, { id: id, size: "h2", clickNameEffect: "edit", autoSaveName: true, status: envelope.envelopeStatus, tools: React.createElement(QRCode, { id: "qrCode", value: "https://www.jianshu.com/u/992656e8a8a6", size: 54, style: { cursor: "pointer" }, onClick: () => setZoom(true) }) }),
+                React.createElement("div", { className: "letter-header" }, "Letters"),
+                envelope.loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: "35vh" }, (_a = envelope.letters) === null || _a === void 0 ? void 0 : _a.map((letter, index) => (React.createElement("div", { key: letter.id, className: "report-letter-item" },
+                    React.createElement(LetterItem, { index: index, envelopeId: id, letter: letter, recipient: true }), letter === null || letter === void 0 ? void 0 :
+                    letter.signatureLines.map((line, index) => {
+                        var _a;
+                        return (React.createElement(Row, { key: line.id, justify: "space-between" },
+                            React.createElement("div", { className: "report-letter-line" },
+                                React.createElement("i", null, `${index + 1}.`), line === null || line === void 0 ? void 0 :
+                                line.name,
+                                line.description && (React.createElement(Popover, { placement: "bottom", title: "Description", overlayClassName: "description-data-icon_popover", content: line.description },
+                                    React.createElement("span", { className: "description" },
+                                        React.createElement(FAIcon, { icon: faCommentAltLines }))))),
+                            React.createElement("div", null,
+                                React.createElement("span", { className: "light" }, "Signed by"),
+                                " ", (_a = line === null || line === void 0 ? void 0 : line.signer) === null || _a === void 0 ? void 0 :
+                                _a.name),
+                            React.createElement("div", null, line.signatureDate ? (React.createElement(React.Fragment, null,
+                                React.createElement(FAIcon, { icon: faCheck, color: "#52c41a", className: "status" }),
+                                moment(moment.utc(line.signatureDate).toDate()).format("D MMM HH:mm:ss"))) : (React.createElement(React.Fragment, null,
+                                React.createElement(FAIcon, { icon: faTimes, color: "#ff4d4f", className: "status" }),
+                                "Unsigned")))));
+                    })))))),
+                React.createElement(ActivityLog, { id: id, bar: false })),
+            zoom && (React.createElement(Modal, { visible: zoom, footer: null, width: 250, bodyStyle: { padding: 0, height: "250px" }, onCancel: () => setZoom(false) },
+                React.createElement(QRCode, { id: "qrCode", value: "https://www.jianshu.com/u/992656e8a8a6", size: 250, style: { margin: "auto", cursor: "pointer" } })))));
+    });
+};
+export default EnvelopeReport;
 //# sourceMappingURL=index.js.map

package/es/pages/Signature/Envelope/components/EnvelopeCard/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import "./index.less";
-import { DocumentCardProps } from "@voplus/morpho-document-core";
-declare const EnvelopeCard: (props: DocumentCardProps) => JSX.Element;
-export default EnvelopeCard;
+/// <reference types="react" />
+import "./index.less";
+import { DocumentCardProps } from "@voplus/morpho-document-core";
+declare const EnvelopeCard: (props: DocumentCardProps) => JSX.Element;
+export default EnvelopeCard;

package/es/pages/Signature/Envelope/components/EnvelopeCard/index.js

@@ -1,58 +1,58 @@
-import "./index.less";
-import { Button, Checkbox } from "@voplus/antd";
-import { CommentDataIcon, DateQuickIcon, UserQuickIcon } from "../../../../../controls/data-icons";
-import { Edit, Open } from "../../../../../controls/ToolBar/buttons";
-import { EnvelopeContext, EnvelopeContextState } from "../../../data/EnvelopeContext";
-import React, { useEffect, useState } from "react";
-import { autorun, runInAction } from "mobx";
-import { faSave, faUndo } from "@fortawesome/pro-light-svg-icons";
-import { useEnvelope, useEnvelopeStore } from "../../../data/envelope";
-import Card from "@voplus/morpho-ui/es/controls/Card";
-import DataIconBar from "../../../../../controls/DataIconBar";
-import DocumentHeader from "../../../../../components/DocumentHeader";
-import EnvelopeMenu from "../EnvelopeMenu";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import FlagIcon from "../../../../../controls/data-icons/FlagIcon";
-import SignaturePercentageDataIcon from "../../controls/SignaturePercentageDataIcon";
-import { State } from "./state";
-import ToolBar from "../../../../../controls/ToolBar/ToolBar2";
-import classnames from "classnames";
-import { observe } from "@voplus/morpho-ui";
-import { useMetaStore } from "../../../../../data";
-const EnvelopeCard = (props) => {
-    const { id } = props;
-    const meta = useMetaStore();
-    const envelopStore = useEnvelopeStore();
-    const envelope = useEnvelope(props.id, { reload: true, includes: "tags,versions" });
-    const [context] = useState(new EnvelopeContextState(id, envelopStore));
-    const [state] = useState(new State(envelope, envelopStore));
-    const { multiple } = props;
-    useEffect(() => autorun(() => context.set(envelope.letters)), [id]);
-    return observe(() => (React.createElement(EnvelopeContext.Provider, { value: context },
-        React.createElement(Card, { className: "envelope-card", padding: "15px 12px", shadow: false, hoverShadow: true, onDoubleClick: props.onDoubleClick },
-            React.createElement("div", { className: "envelope-card-item", onMouseOver: () => runInAction(() => (state.isHover = true)), onMouseLeave: () => runInAction(() => (state.isHover = false)) },
-                React.createElement(DocumentHeader, { id: id, quickDataBarAlign: "left", clickNameEffect: "default", editMode: state.editable, status: envelope.envelopeStatus, pre: multiple ? (React.createElement(Checkbox, { value: envelope.id, className: "multiple-box" })) : (React.createElement(FlagIcon, { id: id, flag: envelope.flag, editable: !envelope.readonly, className: "flag-icon" })), quickDataBar: React.createElement(React.Fragment, null,
-                        React.createElement(DataIconBar, null,
-                            React.createElement(DateQuickIcon, { id: id }),
-                            React.createElement(CommentDataIcon, { id: id }),
-                            React.createElement(UserQuickIcon, { id: id })),
-                        React.createElement(SignaturePercentageDataIcon, { id: id })), flagVisible: false, toolsVisible: false, onChange: (name) => runInAction(() => (state.name = name)), ...props.headerProps }),
-                React.createElement("div", { className: "envelope-card-label" },
-                    !state.editable && (React.createElement("div", { className: classnames("hover-operate-icon", {
-                            show: state.isHover,
-                        }) },
-                        React.createElement(ToolBar, { id: props.id, moreProps: {
-                                menus: {
-                                    default: React.createElement(EnvelopeMenu, { id: id }),
-                                },
-                            } },
-                            React.createElement(Open, { url: meta.getRoute(envelope) }),
-                            React.createElement(Edit, { action: () => state.onEdit() })))),
-                    state.editable && (React.createElement("div", { className: "envelope-card-editable-name" },
-                        React.createElement(Button, { shape: "circle", size: "small", onClick: () => runInAction(() => (state.editable = false)) },
-                            React.createElement(FAIcon, { icon: faUndo })),
-                        React.createElement(Button, { type: "primary", size: "small", ghost: true, shape: "circle", disabled: !state.hasChanges, loading: state.loading, onClick: () => state.save() },
-                            React.createElement(FAIcon, { icon: faSave }))))))))));
-};
-export default EnvelopeCard;
+import "./index.less";
+import { Button, Checkbox } from "@voplus/antd";
+import { CommentDataIcon, DateQuickIcon, UserQuickIcon } from "../../../../../controls/data-icons";
+import { Edit, Open } from "../../../../../controls/ToolBar/buttons";
+import { EnvelopeContext, EnvelopeContextState } from "../../../data/EnvelopeContext";
+import React, { useEffect, useState } from "react";
+import { autorun, runInAction } from "mobx";
+import { faSave, faUndo } from "@fortawesome/pro-light-svg-icons";
+import { useEnvelope, useEnvelopeStore } from "../../../data/envelope";
+import Card from "@voplus/morpho-ui/es/controls/Card";
+import DataIconBar from "../../../../../controls/DataIconBar";
+import DocumentHeader from "../../../../../components/DocumentHeader";
+import EnvelopeMenu from "../EnvelopeMenu";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import FlagIcon from "../../../../../controls/data-icons/FlagIcon";
+import SignaturePercentageDataIcon from "../../controls/SignaturePercentageDataIcon";
+import { State } from "./state";
+import ToolBar from "../../../../../controls/ToolBar/ToolBar2";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+import { useMetaStore } from "../../../../../data";
+const EnvelopeCard = (props) => {
+    const { id } = props;
+    const meta = useMetaStore();
+    const envelopStore = useEnvelopeStore();
+    const envelope = useEnvelope(props.id, { reload: true, includes: "tags,versions" });
+    const [context] = useState(new EnvelopeContextState(id, envelopStore));
+    const [state] = useState(new State(envelope, envelopStore));
+    const { multiple } = props;
+    useEffect(() => autorun(() => context.set(envelope.letters)), [id]);
+    return observe(() => (React.createElement(EnvelopeContext.Provider, { value: context },
+        React.createElement(Card, { className: "envelope-card", padding: "15px 12px", shadow: false, hoverShadow: true, onDoubleClick: props.onDoubleClick },
+            React.createElement("div", { className: "envelope-card-item", onMouseOver: () => runInAction(() => (state.isHover = true)), onMouseLeave: () => runInAction(() => (state.isHover = false)) },
+                React.createElement(DocumentHeader, { id: id, quickDataBarAlign: "left", clickNameEffect: "default", editMode: state.editable, status: envelope.envelopeStatus, pre: multiple ? (React.createElement(Checkbox, { value: envelope.id, className: "multiple-box" })) : (React.createElement(FlagIcon, { id: id, flag: envelope.flag, editable: !envelope.readonly, className: "flag-icon" })), quickDataBar: React.createElement(React.Fragment, null,
+                        React.createElement(DataIconBar, null,
+                            React.createElement(DateQuickIcon, { id: id }),
+                            React.createElement(CommentDataIcon, { id: id }),
+                            React.createElement(UserQuickIcon, { id: id })),
+                        React.createElement(SignaturePercentageDataIcon, { id: id })), flagVisible: false, toolsVisible: false, onChange: (name) => runInAction(() => (state.name = name)), ...props.headerProps }),
+                React.createElement("div", { className: "envelope-card-label" },
+                    !state.editable && (React.createElement("div", { className: classnames("hover-operate-icon", {
+                            show: state.isHover,
+                        }) },
+                        React.createElement(ToolBar, { id: props.id, moreProps: {
+                                menus: {
+                                    default: React.createElement(EnvelopeMenu, { id: id }),
+                                },
+                            } },
+                            React.createElement(Open, { url: meta.getRoute(envelope) }),
+                            React.createElement(Edit, { action: () => state.onEdit() })))),
+                    state.editable && (React.createElement("div", { className: "envelope-card-editable-name" },
+                        React.createElement(Button, { shape: "circle", size: "small", onClick: () => runInAction(() => (state.editable = false)) },
+                            React.createElement(FAIcon, { icon: faUndo })),
+                        React.createElement(Button, { type: "primary", size: "small", ghost: true, shape: "circle", disabled: !state.hasChanges, loading: state.loading, onClick: () => state.save() },
+                            React.createElement(FAIcon, { icon: faSave }))))))))));
+};
+export default EnvelopeCard;
 //# sourceMappingURL=index.js.map

package/es/pages/Signature/Envelope/components/EnvelopeCard/state.d.ts

@@ -1,16 +1,16 @@
-import { EnvelopeStore, IEnvelope } from "../../../data/envelope";
-export declare class State {
-    private envelope;
-    private store;
-    id: string;
-    name: string;
-    editable: boolean;
-    loading: boolean;
-    isHover: boolean;
-    reload: boolean;
-    constructor(envelope: IEnvelope, store: EnvelopeStore);
-    get hasChanges(): boolean | undefined;
-    update(envelope: IEnvelope): void;
-    save: () => Promise<void>;
-    onEdit: () => void;
-}
+import { EnvelopeStore, IEnvelope } from "../../../data/envelope";
+export declare class State {
+    private envelope;
+    private store;
+    id: string;
+    name: string;
+    editable: boolean;
+    loading: boolean;
+    isHover: boolean;
+    reload: boolean;
+    constructor(envelope: IEnvelope, store: EnvelopeStore);
+    get hasChanges(): boolean | undefined;
+    update(envelope: IEnvelope): void;
+    save: () => Promise<void>;
+    onEdit: () => void;
+}