@voplus/morpho-document 1.4.95 → 1.4.97

package/es/components/DocumentListView/index.js

@@ -1,95 +1,95 @@
-import "./index.less";
-import { DocumentListContext, DocumentListContextState, } from "../../data/contexts/DocumentListContext";
-import { DocumentStatusFilter, FlagFilter } from "../../controls/filters";
-import { FilterOptionsContext, ListDataContext, useCreateListDataState, } from "@voplus/morpho-ui/es/data";
-import { useAutoUpdateListData, useDocumentListEffect, useDocumentStore, } from "@voplus/morpho-document-core";
-import React, { useEffect, useMemo, useState } from "react";
-import { observe, useAsideContentContext } from "@voplus/morpho-ui";
-import { runInAction, toJS } from "mobx";
-import AddFormView from "../AddFormView";
-import DefaultDocumentItem from "../DocumentItem/DefaultDocumentItem";
-import DocumentBreadCrumbsHeader from "../DocumentBreadCrumbsHeader";
-import DocumentItemFrame from "../../controls/DocumentItemFrame";
-import FilterView from "@voplus/morpho-ui/es/controls/FilterView";
-import ListView from "@voplus/morpho-ui/es/components/layout/ListView/ListView2";
-import NewDocumentForm from "../NewDocumentForm";
-import SortViewDropdown from "@voplus/morpho-ui/es/components/layout/ListView/controls/SortViewDropdown";
-import { State } from "./state";
-import { useFrame } from "../ViewFrame/ViewFrameContext";
-import { useRenderOnChange } from "@voplus/morpho-ui";
-const DocumentList = (props) => {
-    const frame = useFrame();
-    const documentStore = useDocumentStore();
-    const asideContext = useAsideContentContext();
-    const state = useMemo(() => new State(documentStore), [props.id]);
-    const [active, setActive] = useState(null);
-    /**当前要加载documentlist id*/
-    state.onBreadCrumb(state.id ? state.id : props.id);
-    /**把store 传给子级 DocumentItem*/
-    const [listoptions] = useState(new DocumentListContextState());
-    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
-    const list = useCreateListDataState({
-        filterDefaults: {
-            includes: "tags",
-            filters: (frame === null || frame === void 0 ? void 0 : frame.Exclude)
-                ? [
-                    { c: "ParentNodeId", o: "=", l: "And", v1: state.id },
-                    {
-                        c: "Type",
-                        o: "!contains",
-                        l: "And",
-                        v1: toJS(JSON.stringify(frame === null || frame === void 0 ? void 0 : frame.Exclude)),
-                    },
-                ]
-                : [{ c: "ParentNodeId", o: "=", l: "And", v1: state.id }],
-        },
-    }, [props.id, frame === null || frame === void 0 ? void 0 : frame.Exclude]);
-    listoptions.onDriveClick = (id) => {
-        // runInAction(() => (state.id = id));
-        state.onBreadCrumb(id);
-        frame.navigate(id);
-    };
-    useEffect(() => {
-        setupExtra();
-    }, [props.id, frame === null || frame === void 0 ? void 0 : frame.view, frame === null || frame === void 0 ? void 0 : frame.disabledIcon]);
-    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
-    useRenderOnChange(() => [list.filters.options, state.id]);
-    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
-    useDocumentListEffect(list, (result) => list.union(result), list.filters.options);
-    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
-    useAutoUpdateListData(list, (d) => d.parentId === state.id);
-    return observe(() => (React.createElement(DocumentListContext.Provider, { value: listoptions },
-        React.createElement(ListDataContext.Provider, { value: list },
-            React.createElement("div", { className: "document-list-view" },
-                React.createElement(ListView, { renderId: state.id, asideable: false, headerProps: {
-                        header: React.createElement(DocumentBreadCrumbsHeader, { id: state.id, onBreadCrumb: state.onBreadCrumb }),
-                        filterViewProps: {
-                            columns: [React.createElement(DocumentStatusFilter, { key: "Status" }), React.createElement(FlagFilter, { key: "Flag" })],
-                        },
-                        sortOptions: [
-                            { label: "Name", value: "Name" },
-                            { label: "Create Date", value: "CreateDate" },
-                        ],
-                        visible: props.headerVisible,
-                    }, formViewTitle: "Add Document", formView: React.createElement(NewDocumentForm, { showView: true, parentId: state.id }), 
-                    // propertiesView={(id: string) => <PropertiesView id={id} />}
-                    renderItem: ({ item }) => (React.createElement(DocumentItemFrame, { key: item.id, onClick: () => setActive(item.id), frameProps: { active: active === item.id } },
-                        React.createElement(DefaultDocumentItem, { id: item.id }))), onItemDriveClick: (id) => console.log(id, "---id") }))))));
-    function setupExtra() {
-        if (!frame)
-            return;
-        runInAction(() => (frame.Extra = observe(() => (React.createElement(FilterOptionsContext.Provider, { value: list.filters },
-            React.createElement(SortViewDropdown, { options: [
-                    { label: "Name", value: "Name" },
-                    { label: "Create Date", value: "CreateDate" },
-                ], onSort: (sort) => list.triggerSort(sort), className: "margin-left-10" }),
-            React.createElement(FilterView, { columns: [React.createElement(DocumentStatusFilter, { key: "Status" }), React.createElement(FlagFilter, { key: "Flag" })], className: "margin-left-10" }),
-            React.createElement(AddFormView, { title: "Add Document", onAdd: (addFormElement) => asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(addFormElement, { span: 12 }), onClose: () => asideContext === null || asideContext === void 0 ? void 0 : asideContext.closeAside() },
-                React.createElement(NewDocumentForm, { showView: true, parentId: props.id })))))));
-    }
-};
-DocumentList.defaultProps = {
-    headerVisible: true,
-};
-export default DocumentList;
+import "./index.less";
+import { DocumentListContext, DocumentListContextState, } from "../../data/contexts/DocumentListContext";
+import { DocumentStatusFilter, FlagFilter } from "../../controls/filters";
+import { FilterOptionsContext, ListDataContext, useCreateListDataState, } from "@voplus/morpho-ui/es/data";
+import { useAutoUpdateListData, useDocumentListEffect, useDocumentStore, } from "@voplus/morpho-document-core";
+import React, { useEffect, useMemo, useState } from "react";
+import { observe, useAsideContentContext } from "@voplus/morpho-ui";
+import { runInAction, toJS } from "mobx";
+import AddFormView from "../AddFormView";
+import DefaultDocumentItem from "../DocumentItem/DefaultDocumentItem";
+import DocumentBreadCrumbsHeader from "../DocumentBreadCrumbsHeader";
+import DocumentItemFrame from "../../controls/DocumentItemFrame";
+import FilterView from "@voplus/morpho-ui/es/controls/FilterView";
+import ListView from "@voplus/morpho-ui/es/components/layout/ListView/ListView2";
+import NewDocumentForm from "../NewDocumentForm";
+import SortViewDropdown from "@voplus/morpho-ui/es/components/layout/ListView/controls/SortViewDropdown";
+import { State } from "./state";
+import { useFrame } from "../ViewFrame/ViewFrameContext";
+import { useRenderOnChange } from "@voplus/morpho-ui";
+const DocumentList = (props) => {
+    const frame = useFrame();
+    const documentStore = useDocumentStore();
+    const asideContext = useAsideContentContext();
+    const state = useMemo(() => new State(documentStore), [props.id]);
+    const [active, setActive] = useState(null);
+    /**当前要加载documentlist id*/
+    state.onBreadCrumb(state.id ? state.id : props.id);
+    /**把store 传给子级 DocumentItem*/
+    const [listoptions] = useState(new DocumentListContextState());
+    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
+    const list = useCreateListDataState({
+        filterDefaults: {
+            includes: "tags",
+            filters: (frame === null || frame === void 0 ? void 0 : frame.Exclude)
+                ? [
+                    { c: "ParentNodeId", o: "=", l: "And", v1: state.id },
+                    {
+                        c: "Type",
+                        o: "!contains",
+                        l: "And",
+                        v1: toJS(JSON.stringify(frame === null || frame === void 0 ? void 0 : frame.Exclude)),
+                    },
+                ]
+                : [{ c: "ParentNodeId", o: "=", l: "And", v1: state.id }],
+        },
+    }, [props.id, frame === null || frame === void 0 ? void 0 : frame.Exclude]);
+    listoptions.onDriveClick = (id) => {
+        // runInAction(() => (state.id = id));
+        state.onBreadCrumb(id);
+        frame.navigate(id);
+    };
+    useEffect(() => {
+        setupExtra();
+    }, [props.id, frame === null || frame === void 0 ? void 0 : frame.view, frame === null || frame === void 0 ? void 0 : frame.disabledIcon]);
+    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
+    useRenderOnChange(() => [list.filters.options, state.id]);
+    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
+    useDocumentListEffect(list, (result) => list.union(result), list.filters.options);
+    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
+    useAutoUpdateListData(list, (d) => d.parentId === state.id);
+    return observe(() => (React.createElement(DocumentListContext.Provider, { value: listoptions },
+        React.createElement(ListDataContext.Provider, { value: list },
+            React.createElement("div", { className: "document-list-view" },
+                React.createElement(ListView, { renderId: state.id, asideable: false, headerProps: {
+                        header: React.createElement(DocumentBreadCrumbsHeader, { id: state.id, onBreadCrumb: state.onBreadCrumb }),
+                        filterViewProps: {
+                            columns: [React.createElement(DocumentStatusFilter, { key: "Status" }), React.createElement(FlagFilter, { key: "Flag" })],
+                        },
+                        sortOptions: [
+                            { label: "Name", value: "Name" },
+                            { label: "Create Date", value: "CreateDate" },
+                        ],
+                        visible: props.headerVisible,
+                    }, formViewTitle: "Add Document", formView: React.createElement(NewDocumentForm, { showView: true, parentId: state.id }), 
+                    // propertiesView={(id: string) => <PropertiesView id={id} />}
+                    renderItem: ({ item }) => (React.createElement(DocumentItemFrame, { key: item.id, onClick: () => setActive(item.id), frameProps: { active: active === item.id } },
+                        React.createElement(DefaultDocumentItem, { id: item.id }))), onItemDriveClick: (id) => console.log(id, "---id") }))))));
+    function setupExtra() {
+        if (!frame)
+            return;
+        runInAction(() => (frame.Extra = observe(() => (React.createElement(FilterOptionsContext.Provider, { value: list.filters },
+            React.createElement(SortViewDropdown, { options: [
+                    { label: "Name", value: "Name" },
+                    { label: "Create Date", value: "CreateDate" },
+                ], onSort: (sort) => list.triggerSort(sort), className: "margin-left-10" }),
+            React.createElement(FilterView, { columns: [React.createElement(DocumentStatusFilter, { key: "Status" }), React.createElement(FlagFilter, { key: "Flag" })], className: "margin-left-10" }),
+            React.createElement(AddFormView, { title: "Add Document", onAdd: (addFormElement) => asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(addFormElement, { span: 12 }), onClose: () => asideContext === null || asideContext === void 0 ? void 0 : asideContext.closeAside() },
+                React.createElement(NewDocumentForm, { showView: true, parentId: props.id })))))));
+    }
+};
+DocumentList.defaultProps = {
+    headerVisible: true,
+};
+export default DocumentList;
 //# sourceMappingURL=index.js.map

package/es/components/DocumentListView/index.less

@@ -0,0 +1,9 @@
+@import "~@voplus/antd/es/style/themes/index.less";
+:global {
+	.document-list-view {
+		height: 100%;
+		.document-item .file-type svg {
+			color: @primary-6;
+		}
+	}
+}

package/es/components/DocumentListView/state.d.ts

@@ -1,7 +1,7 @@
-import { DocumentStore } from "@voplus/morpho-document-core";
-export declare class State {
-    private _store;
-    id: string;
-    constructor(_store: DocumentStore);
-    onBreadCrumb: (id: string) => void;
-}
+import { DocumentStore } from "@voplus/morpho-document-core";
+export declare class State {
+    private _store;
+    id: string;
+    constructor(_store: DocumentStore);
+    onBreadCrumb: (id: string) => void;
+}

package/es/components/DocumentListView/state.js

@@ -1,34 +1,34 @@
-import { __decorate } from "tslib";
-import { action, makeObservable, observable } from "mobx";
-export class State {
-    constructor(_store) {
-        Object.defineProperty(this, "_store", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: _store
-        });
-        Object.defineProperty(this, "id", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "onBreadCrumb", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (id) => {
-                this.id = id;
-            }
-        });
-        makeObservable(this);
-    }
-}
-__decorate([
-    observable
-], State.prototype, "id", void 0);
-__decorate([
-    action
-], State.prototype, "onBreadCrumb", void 0);
+import { __decorate } from "tslib";
+import { action, makeObservable, observable } from "mobx";
+export class State {
+    constructor(_store) {
+        Object.defineProperty(this, "_store", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: _store
+        });
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ""
+        });
+        Object.defineProperty(this, "onBreadCrumb", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (id) => {
+                this.id = id;
+            }
+        });
+        makeObservable(this);
+    }
+}
+__decorate([
+    observable
+], State.prototype, "id", void 0);
+__decorate([
+    action
+], State.prototype, "onBreadCrumb", void 0);
 //# sourceMappingURL=state.js.map

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

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-export declare type DocumentNotificationDialogProps = {
-    /** document id */
-    id: string;
-    className?: string;
-    /** dialog cancel function */
-    onCancel?: () => void;
-    /** dialog save function */
-    onSave?: () => void;
-};
-declare const DocumentNotificationDialog: (props: DocumentNotificationDialogProps) => JSX.Element;
-export default DocumentNotificationDialog;
+/// <reference types="react" />
+export declare type DocumentNotificationDialogProps = {
+    /** document id */
+    id: string;
+    className?: string;
+    /** dialog cancel function */
+    onCancel?: () => void;
+    /** dialog save function */
+    onSave?: () => void;
+};
+declare const DocumentNotificationDialog: (props: DocumentNotificationDialogProps) => JSX.Element;
+export default DocumentNotificationDialog;

package/es/components/DocumentNotificationDialog/index.js

@@ -1,41 +1,41 @@
-import { Checkbox, Modal } from "@voplus/antd";
-import React, { useState } from "react";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import { State } from "./state";
-import classnames from "classnames";
-import { faBell } from "@fortawesome/pro-duotone-svg-icons";
-import { observe } from "@voplus/morpho-ui";
-import styles from "./index.less";
-import { useDocumentStore } from "@voplus/morpho-document-core";
-const DocumentNotificationDialog = (props) => {
-    const store = useDocumentStore();
-    const [state] = useState(new State());
-    const { id } = props;
-    // const notifications = store.loadUserNotifications(id);
-    const notifications = [
-        { type: { id: "1", name: "Changes to this document" }, subscribed: false },
-        { type: { id: "2", name: "Add or remove child documents" }, subscribed: true },
-        { type: { id: "3", name: "New comments" }, subscribed: false },
-    ];
-    return observe(() => (React.createElement(Modal, { title: React.createElement(React.Fragment, null,
-            React.createElement(FAIcon, { icon: faBell }),
-            "Notifications"), width: 420, visible: true, okText: "Save", className: classnames(styles["document_notification_dialog"], props.className), onOk: handleOk, onCancel: handleCancel },
-        React.createElement("div", { className: "explanation" }, "Notify me about..."),
-        notifications.map((i) => (React.createElement(Checkbox, { key: i.type.id, defaultChecked: i.subscribed, onChange: (e) => state.onChange(e, i.type.id) }, i.type.name))))));
-    function handleOk() {
-        var _a;
-        // store.editUserNotifications(id, {
-        // 	data: { notifications: state.notifications },
-        // 	error: "message",
-        // });
-        (_a = props.onSave) === null || _a === void 0 ? void 0 : _a.call(props);
-        console.log(state.notifications, "----handleOk");
-    }
-    function handleCancel() {
-        var _a;
-        state.reset();
-        (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-    }
-};
-export default DocumentNotificationDialog;
+import { Checkbox, Modal } from "@voplus/antd";
+import React, { useState } from "react";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import { State } from "./state";
+import classnames from "classnames";
+import { faBell } from "@fortawesome/pro-duotone-svg-icons";
+import { observe } from "@voplus/morpho-ui";
+import styles from "./index.less";
+import { useDocumentStore } from "@voplus/morpho-document-core";
+const DocumentNotificationDialog = (props) => {
+    const store = useDocumentStore();
+    const [state] = useState(new State());
+    const { id } = props;
+    // const notifications = store.loadUserNotifications(id);
+    const notifications = [
+        { type: { id: "1", name: "Changes to this document" }, subscribed: false },
+        { type: { id: "2", name: "Add or remove child documents" }, subscribed: true },
+        { type: { id: "3", name: "New comments" }, subscribed: false },
+    ];
+    return observe(() => (React.createElement(Modal, { title: React.createElement(React.Fragment, null,
+            React.createElement(FAIcon, { icon: faBell }),
+            "Notifications"), width: 420, visible: true, okText: "Save", className: classnames(styles["document_notification_dialog"], props.className), onOk: handleOk, onCancel: handleCancel },
+        React.createElement("div", { className: "explanation" }, "Notify me about..."),
+        notifications.map((i) => (React.createElement(Checkbox, { key: i.type.id, defaultChecked: i.subscribed, onChange: (e) => state.onChange(e, i.type.id) }, i.type.name))))));
+    function handleOk() {
+        var _a;
+        // store.editUserNotifications(id, {
+        // 	data: { notifications: state.notifications },
+        // 	error: "message",
+        // });
+        (_a = props.onSave) === null || _a === void 0 ? void 0 : _a.call(props);
+        console.log(state.notifications, "----handleOk");
+    }
+    function handleCancel() {
+        var _a;
+        state.reset();
+        (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+};
+export default DocumentNotificationDialog;
 //# sourceMappingURL=index.js.map

package/es/components/DocumentNotificationDialog/index.less

@@ -0,0 +1,23 @@
+.document_notification_dialog {
+	:global {
+		.ant-modal-title {
+			.svg-inline--fa {
+				font-size: 20px;
+				margin-right: 8px;
+			}
+		}
+		.ant-modal-body {
+			padding-top: 10px;
+		}
+		.explanation {
+			font-size: 16px;
+			padding: 10px 0 20px;
+			color: #000000;
+		}
+		.ant-checkbox-wrapper {
+			display: block;
+			margin-left: 0;
+			margin-bottom: 12px;
+		}
+	}
+}

package/es/components/DocumentNotificationDialog/state.d.ts

@@ -1,10 +1,10 @@
-export declare class State {
-    /** 储存subscribed notifications发生改变后的数据 */
-    notifications: {
-        id: string;
-        subscribed: boolean;
-    }[];
-    constructor();
-    onChange(e: any, id: string): void;
-    reset(): void;
-}
+export declare class State {
+    /** 储存subscribed notifications发生改变后的数据 */
+    notifications: {
+        id: string;
+        subscribed: boolean;
+    }[];
+    constructor();
+    onChange(e: any, id: string): void;
+    reset(): void;
+}

package/es/components/DocumentNotificationDialog/state.js

@@ -1,38 +1,38 @@
-import { __decorate } from "tslib";
-import { action, makeObservable, observable } from "mobx";
-export class State {
-    constructor() {
-        /** 储存subscribed notifications发生改变后的数据 */
-        Object.defineProperty(this, "notifications", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        makeObservable(this);
-    }
-    onChange(e, id) {
-        if (this.notifications.findIndex((v) => v.id === id) === -1) {
-            this.notifications.push({ id: id, subscribed: e.target.checked });
-        }
-        else {
-            this.notifications.map((i) => {
-                if (i.id === id)
-                    i.subscribed = e.target.checked;
-            });
-        }
-    }
-    reset() {
-        this.notifications = [];
-    }
-}
-__decorate([
-    observable
-], State.prototype, "notifications", void 0);
-__decorate([
-    action
-], State.prototype, "onChange", null);
-__decorate([
-    action
-], State.prototype, "reset", null);
+import { __decorate } from "tslib";
+import { action, makeObservable, observable } from "mobx";
+export class State {
+    constructor() {
+        /** 储存subscribed notifications发生改变后的数据 */
+        Object.defineProperty(this, "notifications", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        makeObservable(this);
+    }
+    onChange(e, id) {
+        if (this.notifications.findIndex((v) => v.id === id) === -1) {
+            this.notifications.push({ id: id, subscribed: e.target.checked });
+        }
+        else {
+            this.notifications.map((i) => {
+                if (i.id === id)
+                    i.subscribed = e.target.checked;
+            });
+        }
+    }
+    reset() {
+        this.notifications = [];
+    }
+}
+__decorate([
+    observable
+], State.prototype, "notifications", void 0);
+__decorate([
+    action
+], State.prototype, "onChange", null);
+__decorate([
+    action
+], State.prototype, "reset", null);
 //# sourceMappingURL=state.js.map

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-/**document paste upload*/
-declare const DocumentPasteUpload: (props: {
-    id: string;
-    containerRef: any;
-}) => JSX.Element;
-export default DocumentPasteUpload;
+/// <reference types="react" />
+/**document paste upload*/
+declare const DocumentPasteUpload: (props: {
+    id: string;
+    containerRef: any;
+}) => JSX.Element;
+export default DocumentPasteUpload;

package/es/components/DocumentPasteUpload/index.js

@@ -1,50 +1,50 @@
-import { Input, Modal } from "@voplus/antd";
-import React, { useEffect, useState } from "react";
-import { observe } from "@voplus/morpho-ui";
-import { useDocumentStore } from "@voplus/morpho-document-core";
-import { usePastedImageBlob } from "@voplus/morpho-ui";
-/**document paste upload*/
-const DocumentPasteUpload = (props) => {
-    const [visible, setVisible] = useState(false);
-    const [value, setValue] = useState("");
-    const [imgUrl, setImgUrls] = useState(null);
-    const [confirmLoading, setConfirmLoading] = useState(false);
-    const store = useDocumentStore();
-    const blob = usePastedImageBlob(props.containerRef);
-    useEffect(() => {
-        setImgUrls(blob ? URL.createObjectURL(blob) : null);
-        setVisible(true);
-        return () => {
-            if (imgUrl)
-                URL.revokeObjectURL(imgUrl);
-        };
-    }, [blob]);
-    const ImageContent = () => {
-        return imgUrl ? React.createElement("img", { style: { width: "100%" }, src: imgUrl }) : null;
-    };
-    return observe(() => (React.createElement(React.Fragment, null, imgUrl && (React.createElement(Modal, { title: "Whether to upload clipboard pictures?", visible: visible, onOk: handleOk, confirmLoading: confirmLoading, onCancel: handleCancel, okText: "Upload", cancelText: "Cancel" },
-        React.createElement(ImageContent, null),
-        React.createElement("div", null,
-            React.createElement("p", { style: { marginTop: "1em", color: "#000", fontSize: "16px", fontWeight: 500 } }, "Please enter the name of the picture:"),
-            React.createElement(Input, { placeholder: "Please enter filename", value: value, onChange: onChange, suffix: ".jpg" })))))));
-    /** upload file */
-    function handleOk() {
-        setConfirmLoading(true);
-        const fileName = value ? value + ".jpg" : `Clipboard-${Date.now()}.jpg`;
-        const files = new File([blob], fileName, { type: blob.type });
-        store.upload(props.id, [files]);
-        setValue("");
-        setVisible(false);
-        setConfirmLoading(false);
-    }
-    /** change file name */
-    function onChange(e) {
-        setValue(e.target.value);
-    }
-    /** cancel */
-    function handleCancel() {
-        setVisible(false);
-    }
-};
-export default DocumentPasteUpload;
+import { Input, Modal } from "@voplus/antd";
+import React, { useEffect, useState } from "react";
+import { observe } from "@voplus/morpho-ui";
+import { useDocumentStore } from "@voplus/morpho-document-core";
+import { usePastedImageBlob } from "@voplus/morpho-ui";
+/**document paste upload*/
+const DocumentPasteUpload = (props) => {
+    const [visible, setVisible] = useState(false);
+    const [value, setValue] = useState("");
+    const [imgUrl, setImgUrls] = useState(null);
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const store = useDocumentStore();
+    const blob = usePastedImageBlob(props.containerRef);
+    useEffect(() => {
+        setImgUrls(blob ? URL.createObjectURL(blob) : null);
+        setVisible(true);
+        return () => {
+            if (imgUrl)
+                URL.revokeObjectURL(imgUrl);
+        };
+    }, [blob]);
+    const ImageContent = () => {
+        return imgUrl ? React.createElement("img", { style: { width: "100%" }, src: imgUrl }) : null;
+    };
+    return observe(() => (React.createElement(React.Fragment, null, imgUrl && (React.createElement(Modal, { title: "Whether to upload clipboard pictures?", visible: visible, onOk: handleOk, confirmLoading: confirmLoading, onCancel: handleCancel, okText: "Upload", cancelText: "Cancel" },
+        React.createElement(ImageContent, null),
+        React.createElement("div", null,
+            React.createElement("p", { style: { marginTop: "1em", color: "#000", fontSize: "16px", fontWeight: 500 } }, "Please enter the name of the picture:"),
+            React.createElement(Input, { placeholder: "Please enter filename", value: value, onChange: onChange, suffix: ".jpg" })))))));
+    /** upload file */
+    function handleOk() {
+        setConfirmLoading(true);
+        const fileName = value ? value + ".jpg" : `Clipboard-${Date.now()}.jpg`;
+        const files = new File([blob], fileName, { type: blob.type });
+        store.upload(props.id, [files]);
+        setValue("");
+        setVisible(false);
+        setConfirmLoading(false);
+    }
+    /** change file name */
+    function onChange(e) {
+        setValue(e.target.value);
+    }
+    /** cancel */
+    function handleCancel() {
+        setVisible(false);
+    }
+};
+export default DocumentPasteUpload;
 //# sourceMappingURL=index.js.map