@voplus/morpho-document 4.0.2 → 4.0.4

package/es/modules/graph/components/GraphQuickViewDialog/index.js

@@ -1,48 +1,48 @@
-import { AsideContent, observe } from "@voplus/morpho-ui";
-import { Button, Tooltip } from "antd";
-import { QuickSubContent, QuickSubTab } from "../../../../components/QuickViewDialog/QuickSubTab";
-import React, { useState } from "react";
-import { faExternalLink, faXmark } from "@fortawesome/pro-light-svg-icons";
-import DocumentHeader from "../../../../components/DocumentHeader";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import FlexDialog from "../../../../components/FlexDialog";
-import GraphViewer from "../GraphViewer";
-import { useLayout } from "@voplus/morpho-data";
-const GraphQuickViewDialog = (props) => {
-    const layout = useLayout();
-    const [subTab, setSubTab] = useState(false);
-    const [asideContext] = useState(AsideContent.createContext());
-    return observe(() => (React.createElement(FlexDialog, { modalProps: {
-            className: "quickView-modal-style",
-            open: props.visible,
-            width: subTab ? "1000px" : "650px",
-            destroyOnClose: true,
-            closable: false,
-            footer: false,
-            onCancel: props.onCancel,
-        }, closeAside: props.onCancel },
-        React.createElement(AsideContent, { context: asideContext, style: { width: "100%" } },
-            React.createElement("div", { className: "perview-content" },
-                React.createElement("div", { className: "perview-head" },
-                    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" },
-                            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 }),
-                            !layout.ui.mobile && (React.createElement(Button, { icon: React.createElement(FAIcon, { icon: faXmark }), onClick: props.onCancel }))))),
-                React.createElement(GraphViewer, { id: props.id, autoHeight: true }))))));
-    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(`/document/${props.id}`);
-    }
-};
-export default GraphQuickViewDialog;
+import { AsideContent, observe } from "@voplus/morpho-ui";
+import { Button, Tooltip } from "antd";
+import { QuickSubContent, QuickSubTab } from "../../../../components/QuickViewDialog/QuickSubTab";
+import React, { useState } from "react";
+import { faExternalLink, faXmark } from "@fortawesome/pro-light-svg-icons";
+import DocumentHeader from "../../../../components/DocumentHeader";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import FlexDialog from "../../../../components/FlexDialog";
+import GraphViewer from "../GraphViewer";
+import { useLayout } from "@voplus/morpho-data";
+const GraphQuickViewDialog = (props) => {
+    const layout = useLayout();
+    const [subTab, setSubTab] = useState(false);
+    const [asideContext] = useState(AsideContent.createContext());
+    return observe(() => (React.createElement(FlexDialog, { modalProps: {
+            className: "quickView-modal-style",
+            open: props.visible,
+            width: subTab ? "1000px" : "650px",
+            destroyOnClose: true,
+            closable: false,
+            footer: false,
+            onCancel: props.onCancel,
+        }, closeAside: props.onCancel },
+        React.createElement(AsideContent, { context: asideContext, style: { width: "100%" } },
+            React.createElement("div", { className: "perview-content" },
+                React.createElement("div", { className: "perview-head" },
+                    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" },
+                            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 }),
+                            !layout.ui.mobile && (React.createElement(Button, { icon: React.createElement(FAIcon, { icon: faXmark }), onClick: props.onCancel }))))),
+                React.createElement(GraphViewer, { id: props.id, autoHeight: true }))))));
+    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(`/document/${props.id}`);
+    }
+};
+export default GraphQuickViewDialog;
 //# sourceMappingURL=index.js.map

package/es/modules/graph/components/GraphViewer/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import "./index.less";
-declare const GraphViewer: (props: {
-    id: string;
-    /** auto height make viewer same height as graph content. */
-    autoHeight?: boolean;
-}) => JSX.Element;
-export default GraphViewer;
+/// <reference types="react" />
+import "./index.less";
+declare const GraphViewer: (props: {
+    id: string;
+    /** auto height make viewer same height as graph content. */
+    autoHeight?: boolean;
+}) => JSX.Element;
+export default GraphViewer;

package/es/modules/graph/components/GraphViewer/index.js

@@ -1,24 +1,24 @@
-import "./index.less";
-import React, { useEffect, useState } from "react";
-import IframeResizer from "iframe-resizer-react";
-import Panable from "@voplus/morpho-ui/es/controls/Panable";
-import { observe } from "@voplus/morpho-ui";
-import { useApplicationContext } from "@voplus/morpho-data"; // eslint-disable-line
-const GraphViewer = (props) => {
-    const context = useApplicationContext();
-    const [height, setHeight] = useState(null);
-    useEffect(() => {
-        if (props.autoHeight !== true)
-            setHeight(null);
-    });
-    const path = `/mxgraph/editor/viewer.html?id=${props.id}&access_token=${encodeURIComponent(context.user.info.accessToken)}`;
-    return observe(() => (React.createElement("div", { className: "graph-viewer", style: { height: height ? `${height}px` : undefined } },
-        React.createElement(Panable, { scroll: true },
-            React.createElement(IframeResizer, { onResized: handleIFrameResize, src: `${context.api.currentEndPoint.url(path)}`, style: { pointerEvents: "none" }, frameBorder: "0", scrolling: false, sizeWidth: true })))));
-    function handleIFrameResize(ev) {
-        if (props.autoHeight)
-            setHeight(+ev.height + 10);
-    }
-};
-export default GraphViewer;
+import "./index.less";
+import React, { useEffect, useState } from "react";
+import IframeResizer from "iframe-resizer-react";
+import Panable from "@voplus/morpho-ui/es/controls/Panable";
+import { observe } from "@voplus/morpho-ui";
+import { useApplicationContext } from "@voplus/morpho-data"; // eslint-disable-line
+const GraphViewer = (props) => {
+    const context = useApplicationContext();
+    const [height, setHeight] = useState(null);
+    useEffect(() => {
+        if (props.autoHeight !== true)
+            setHeight(null);
+    });
+    const path = `/mxgraph/editor/viewer.html?id=${props.id}&access_token=${encodeURIComponent(context.user.info.accessToken)}`;
+    return observe(() => (React.createElement("div", { className: "graph-viewer", style: { height: height ? `${height}px` : undefined } },
+        React.createElement(Panable, { scroll: true },
+            React.createElement(IframeResizer, { onResized: handleIFrameResize, src: `${context.api.currentEndPoint.url(path)}`, style: { pointerEvents: "none" }, frameBorder: "0", scrolling: false, sizeWidth: true })))));
+    function handleIFrameResize(ev) {
+        if (props.autoHeight)
+            setHeight(+ev.height + 10);
+    }
+};
+export default GraphViewer;
 //# sourceMappingURL=index.js.map

package/es/modules/graph/components/GraphViewer/index.less

@@ -1,5 +1,5 @@
-:global {
-	.graph-viewer {
-		height: 100%;
-	}
-}
+:global {
+	.graph-viewer {
+		height: 100%;
+	}
+}

package/es/modules/graph/control/GraphMenu/index.d.ts

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

package/es/modules/graph/control/GraphMenu/index.js

@@ -1,13 +1,13 @@
-import React, { useMemo } from "react";
-import { observe } from "@voplus/morpho-ui";
-import { OpenEditor } from "./item";
-import { DocumentMenuContext, DocumentMenuState } from "@voplus/morpho-document-core";
-import DocumentMenu from "../../../../controls/DocumentMenu";
-const GraphMenu = (props) => {
-    const context = useMemo(() => new DocumentMenuState(props.id), [props.id]);
-    return observe(() => (React.createElement(DocumentMenuContext.Provider, { value: context },
-        React.createElement(OpenEditor, null),
-        React.createElement(DocumentMenu, { id: props.id }))));
-};
-export default GraphMenu;
+import React, { useMemo } from "react";
+import { observe } from "@voplus/morpho-ui";
+import { OpenEditor } from "./item";
+import { DocumentMenuContext, DocumentMenuState } from "@voplus/morpho-document-core";
+import DocumentMenu from "../../../../controls/DocumentMenu";
+const GraphMenu = (props) => {
+    const context = useMemo(() => new DocumentMenuState(props.id), [props.id]);
+    return observe(() => (React.createElement(DocumentMenuContext.Provider, { value: context },
+        React.createElement(OpenEditor, null),
+        React.createElement(DocumentMenu, { id: props.id }))));
+};
+export default GraphMenu;
 //# sourceMappingURL=index.js.map

package/es/modules/graph/control/GraphMenu/item/OpenEditor.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-declare const OpenEditor: (props: {
-    /** disabled Button */
-    disabled?: boolean | undefined;
-    /** function of Click */
-    action?: ((context?: any) => void) | undefined;
-}) => JSX.Element;
-export default OpenEditor;
+/// <reference types="react" />
+declare const OpenEditor: (props: {
+    /** disabled Button */
+    disabled?: boolean | undefined;
+    /** function of Click */
+    action?: ((context?: any) => void) | undefined;
+}) => JSX.Element;
+export default OpenEditor;

package/es/modules/graph/control/GraphMenu/item/OpenEditor.js

@@ -1,23 +1,23 @@
-import { useDocument, useDocumentMenuContext } from "@voplus/morpho-document-core";
-import { Button } from "antd";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
-import Routes from "../../../../../routes";
-import { faProjectDiagram } from "@fortawesome/pro-regular-svg-icons";
-import { useLayout } from "@voplus/morpho-data";
-const OpenEditor = (props) => {
-    const { disabled, action } = props;
-    const layout = useLayout();
-    const context = useDocumentMenuContext();
-    const doc = useDocument(context.id);
-    return (React.createElement(Button, { type: "link", disabled: disabled || doc.readonly, onClick: onClick },
-        React.createElement(FAIcon, { icon: faProjectDiagram }),
-        React.createElement("span", null, "Open GraphEditor")));
-    function onClick() {
-        if (action)
-            return action();
-        layout.history.push(Routes.GraphEditorPage.getUrl(context.id));
-    }
-};
-export default OpenEditor;
+import { useDocument, useDocumentMenuContext } from "@voplus/morpho-document-core";
+import { Button } from "antd";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import Routes from "../../../../../routes";
+import { faProjectDiagram } from "@fortawesome/pro-regular-svg-icons";
+import { useLayout } from "@voplus/morpho-data";
+const OpenEditor = (props) => {
+    const { disabled, action } = props;
+    const layout = useLayout();
+    const context = useDocumentMenuContext();
+    const doc = useDocument(context.id);
+    return (React.createElement(Button, { type: "link", disabled: disabled || doc.readonly, onClick: onClick },
+        React.createElement(FAIcon, { icon: faProjectDiagram }),
+        React.createElement("span", null, "Open GraphEditor")));
+    function onClick() {
+        if (action)
+            return action();
+        layout.history.push(Routes.GraphEditorPage.getUrl(context.id));
+    }
+};
+export default OpenEditor;
 //# sourceMappingURL=OpenEditor.js.map

package/es/modules/graph/control/GraphMenu/item/index.d.ts

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

package/es/modules/graph/control/GraphMenu/item/index.js

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

package/es/modules/graph/pages/GraphDefaultView/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-/** The Graph Page component with router parameters support. */
-declare const GraphDefaultView: ({ id }: {
-    id: string;
-}) => JSX.Element;
-export default GraphDefaultView;
+/// <reference types="react" />
+/** The Graph Page component with router parameters support. */
+declare const GraphDefaultView: ({ id }: {
+    id: string;
+}) => JSX.Element;
+export default GraphDefaultView;

package/es/modules/graph/pages/GraphDefaultView/index.js

@@ -1,21 +1,21 @@
-import { TabItemContext, TabItemStore } from "@voplus/morpho-data";
-import GraphProperties from "../../components/GraphProperties";
-import GraphViewer from "../../components/GraphViewer";
-import MainContent from "@voplus/morpho-ui/es/components/layout/MainContent";
-import React from "react";
-import { Spin } from "antd";
-import { observe } from "@voplus/morpho-ui";
-import styles from "./index.less";
-import { useDocument } from "@voplus/morpho-document-core";
-/** The Graph Page component with router parameters support. */
-const GraphDefaultView = ({ id }) => {
-    const store = new TabItemStore({ url: "" });
-    const doc = useDocument(id);
-    return observe(() => (React.createElement(TabItemContext.Provider, { value: store },
-        React.createElement(MainContent, { className: styles["graph-default-view"] },
-            React.createElement(MainContent.Nav, { collapsible: true },
-                React.createElement(GraphProperties, { id: id })),
-            React.createElement("div", { className: "graph-content" }, doc.loading ? React.createElement(Spin, null) : React.createElement(GraphViewer, { id: id, autoHeight: true }))))));
-};
-export default GraphDefaultView;
+import { TabItemContext, TabItemStore } from "@voplus/morpho-data";
+import GraphProperties from "../../components/GraphProperties";
+import GraphViewer from "../../components/GraphViewer";
+import MainContent from "@voplus/morpho-ui/es/components/layout/MainContent";
+import React from "react";
+import { Spin } from "antd";
+import { observe } from "@voplus/morpho-ui";
+import styles from "./index.less";
+import { useDocument } from "@voplus/morpho-document-core";
+/** The Graph Page component with router parameters support. */
+const GraphDefaultView = ({ id }) => {
+    const store = new TabItemStore({ url: "" });
+    const doc = useDocument(id);
+    return observe(() => (React.createElement(TabItemContext.Provider, { value: store },
+        React.createElement(MainContent, { className: styles["graph-default-view"] },
+            React.createElement(MainContent.Nav, { collapsible: true },
+                React.createElement(GraphProperties, { id: id })),
+            React.createElement("div", { className: "graph-content" }, doc.loading ? React.createElement(Spin, null) : React.createElement(GraphViewer, { id: id, autoHeight: true }))))));
+};
+export default GraphDefaultView;
 //# sourceMappingURL=index.js.map

package/es/modules/graph/pages/GraphDefaultView/index.less

@@ -1,18 +1,18 @@
-.graph-default-view {
-	:global {
-		.main-content-nav {
-			width: 370px;
-			padding: 0;
-		}
-
-		.graph-content {
-			display: flex;
-			padding: 0;
-			background: #ffffff;
-
-			>div {
-				flex: 1;
-			}
-		}
-	}
+.graph-default-view {
+	:global {
+		.main-content-nav {
+			width: 370px;
+			padding: 0;
+		}
+
+		.graph-content {
+			display: flex;
+			padding: 0;
+			background: #ffffff;
+
+			>div {
+				flex: 1;
+			}
+		}
+	}
 }

package/es/modules/graph/pages/GraphEditorPage/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const GraphEditorPage: () => JSX.Element;
-export default GraphEditorPage;
+/// <reference types="react" />
+declare const GraphEditorPage: () => JSX.Element;
+export default GraphEditorPage;

package/es/modules/graph/pages/GraphEditorPage/index.js

@@ -1,20 +1,20 @@
-import React, { useEffect } from "react";
-import { TabItemContext, TabItemStore, useTabItem } from "@voplus/morpho-data";
-import GraphEditor from "../../components/GraphEditor";
-import { observe } from "@voplus/morpho-ui";
-import { useDocument } from "@voplus/morpho-document-core";
-import { useParams } from "react-router-dom";
-const GraphEditorPage = () => {
-    const params = useParams();
-    const id = params.id;
-    const doc = useDocument(id);
-    const tab = useTabItem();
-    const store = new TabItemStore({ url: "" });
-    useEffect(() => {
-        tab.title = `${doc.name} Edit`;
-    });
-    return observe(() => (React.createElement(TabItemContext.Provider, { value: store },
-        React.createElement(GraphEditor, { id: id }))));
-};
-export default GraphEditorPage;
+import React, { useEffect } from "react";
+import { TabItemContext, TabItemStore, useTabItem } from "@voplus/morpho-data";
+import GraphEditor from "../../components/GraphEditor";
+import { observe } from "@voplus/morpho-ui";
+import { useDocument } from "@voplus/morpho-document-core";
+import { useParams } from "react-router-dom";
+const GraphEditorPage = () => {
+    const params = useParams();
+    const id = params.id;
+    const doc = useDocument(id);
+    const tab = useTabItem();
+    const store = new TabItemStore({ url: "" });
+    useEffect(() => {
+        tab.title = `${doc.name} Edit`;
+    });
+    return observe(() => (React.createElement(TabItemContext.Provider, { value: store },
+        React.createElement(GraphEditor, { id: id }))));
+};
+export default GraphEditorPage;
 //# sourceMappingURL=index.js.map

package/es/modules/graph/pages/GraphPropertiesView/index.d.ts

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

package/es/modules/graph/pages/GraphPropertiesView/index.js

@@ -1,19 +1,19 @@
-import { CommentDataIcon, DateQuickIcon, UserQuickIcon } from "../../../../controls/data-icons";
-import DataIconBar from "../../../../controls/DataIconBar";
-import DocumentHeader from "../../../../components/DocumentHeader";
-import DocumentTabs from "../../../../components/DocumentTabs";
-import GraphViewer from "../../components/GraphViewer";
-import React from "react";
-import { observe } from "@voplus/morpho-ui";
-/** Graph PropertiesView */
-const GraphPropertiesView = (props) => {
-    const id = props.id;
-    return observe(() => (React.createElement("div", { className: "module-detail-view" },
-        React.createElement(DocumentHeader, { id: id, size: "h3", quickDataBar: React.createElement(DataIconBar, null,
-                React.createElement(DateQuickIcon, { id: id }),
-                React.createElement(CommentDataIcon, { id: id }),
-                React.createElement(UserQuickIcon, { id: id })), quickDataBarAlign: "left", clickNameEffect: "edit", autoSaveName: true, descriptionVisible: false, toolBarProps: { closeAside: true } }),
-        React.createElement(DocumentTabs, { id: id, details: React.createElement(GraphViewer, { id: id, autoHeight: true }) }))));
-};
-export default GraphPropertiesView;
+import { CommentDataIcon, DateQuickIcon, UserQuickIcon } from "../../../../controls/data-icons";
+import DataIconBar from "../../../../controls/DataIconBar";
+import DocumentHeader from "../../../../components/DocumentHeader";
+import DocumentTabs from "../../../../components/DocumentTabs";
+import GraphViewer from "../../components/GraphViewer";
+import React from "react";
+import { observe } from "@voplus/morpho-ui";
+/** Graph PropertiesView */
+const GraphPropertiesView = (props) => {
+    const id = props.id;
+    return observe(() => (React.createElement("div", { className: "module-detail-view" },
+        React.createElement(DocumentHeader, { id: id, size: "h3", quickDataBar: React.createElement(DataIconBar, null,
+                React.createElement(DateQuickIcon, { id: id }),
+                React.createElement(CommentDataIcon, { id: id }),
+                React.createElement(UserQuickIcon, { id: id })), quickDataBarAlign: "left", clickNameEffect: "edit", autoSaveName: true, descriptionVisible: false, toolBarProps: { closeAside: true } }),
+        React.createElement(DocumentTabs, { id: id, details: React.createElement(GraphViewer, { id: id, autoHeight: true }) }))));
+};
+export default GraphPropertiesView;
 //# sourceMappingURL=index.js.map

package/es/modules/page/components/FolderItem/index.d.ts

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

package/es/modules/page/components/FolderItem/index.js

@@ -1,42 +1,42 @@
-import React, { useEffect } from "react";
-import { autorun, runInAction } from "mobx";
-import NewDocumentForm from "../../../../components/NewDocumentForm";
-import DocumentList from "../../../../components/DocumentList";
-import PageItemHeader from "../PageItemHeader";
-import { State } from "./state";
-import { useDocument, useDocumentStore, } from "@voplus/morpho-document-core";
-import AddDocDropdown from "../../../../components/AddDocDropdown";
-import DocumentSelectDialog from "../../../../components/DocumentSelectDialog";
-import { observe } from "@voplus/morpho-ui";
-import { usePageContext } from "../../data";
-const FolderItem = (props) => {
-    const { id, connectDragSource } = props;
-    const context = usePageContext();
-    const state = context.getState(id, () => new State());
-    const document = useDocument(id);
-    const store = useDocumentStore();
-    useEffect(() => autorun(() => context.setCollapse(id, state.collapse)), [id]);
-    useEffect(() => {
-        runInAction(() => {
-            context._data.map((i) => {
-                if (i.id === id)
-                    state.collapse = i.collapse;
-            });
-        });
-    }, [context.collapsed]);
-    return observe(() => (React.createElement("div", { id: id, className: "page-item page-text-item" },
-        React.createElement(PageItemHeader, { id: id, collapse: state.collapse, connectDragSource: connectDragSource, changeCollapse: state.changeCollapse, preToolBar: React.createElement(React.Fragment, null, !document.readonly && (React.createElement(AddDocDropdown, { id: props.id, className: "margin-left-10", onItemClick: (val) => state.onItemClick(val), onCancelClick: () => state.cancel() }))) }),
-        !state.collapse && React.createElement(DocumentList, { id: id, header: true, className: "folder-document-list" }),
-        state.shortcut && React.createElement(DocumentSelectDialog, { onSelect: onCreateShortcut }),
-        state.addAble && (React.createElement(NewDocumentForm, { className: "folder-item-add", parentId: props.id, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)) })))));
-    function onCreateShortcut(doc) {
-        const shortcuts = [];
-        doc.map((item) => {
-            shortcuts.push({ TargetId: item.id, ParentId: id, Name: "" });
-        });
-        store.createShortcuts({ data: shortcuts, error: "message" });
-        state.shortcut = false;
-    }
-};
-export default FolderItem;
+import React, { useEffect } from "react";
+import { autorun, runInAction } from "mobx";
+import NewDocumentForm from "../../../../components/NewDocumentForm";
+import DocumentList from "../../../../components/DocumentList";
+import PageItemHeader from "../PageItemHeader";
+import { State } from "./state";
+import { useDocument, useDocumentStore, } from "@voplus/morpho-document-core";
+import AddDocDropdown from "../../../../components/AddDocDropdown";
+import DocumentSelectDialog from "../../../../components/DocumentSelectDialog";
+import { observe } from "@voplus/morpho-ui";
+import { usePageContext } from "../../data";
+const FolderItem = (props) => {
+    const { id, connectDragSource } = props;
+    const context = usePageContext();
+    const state = context.getState(id, () => new State());
+    const document = useDocument(id);
+    const store = useDocumentStore();
+    useEffect(() => autorun(() => context.setCollapse(id, state.collapse)), [id]);
+    useEffect(() => {
+        runInAction(() => {
+            context._data.map((i) => {
+                if (i.id === id)
+                    state.collapse = i.collapse;
+            });
+        });
+    }, [context.collapsed]);
+    return observe(() => (React.createElement("div", { id: id, className: "page-item page-text-item" },
+        React.createElement(PageItemHeader, { id: id, collapse: state.collapse, connectDragSource: connectDragSource, changeCollapse: state.changeCollapse, preToolBar: React.createElement(React.Fragment, null, !document.readonly && (React.createElement(AddDocDropdown, { id: props.id, className: "margin-left-10", onItemClick: (val) => state.onItemClick(val), onCancelClick: () => state.cancel() }))) }),
+        !state.collapse && React.createElement(DocumentList, { id: id, header: true, className: "folder-document-list" }),
+        state.shortcut && React.createElement(DocumentSelectDialog, { onSelect: onCreateShortcut }),
+        state.addAble && (React.createElement(NewDocumentForm, { className: "folder-item-add", parentId: props.id, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)) })))));
+    function onCreateShortcut(doc) {
+        const shortcuts = [];
+        doc.map((item) => {
+            shortcuts.push({ TargetId: item.id, ParentId: id, Name: "" });
+        });
+        store.createShortcuts({ data: shortcuts, error: "message" });
+        state.shortcut = false;
+    }
+};
+export default FolderItem;
 //# sourceMappingURL=index.js.map

package/es/modules/page/components/FolderItem/state.d.ts

@@ -1,17 +1,17 @@
-import { IPageItemState } from "../../data/IPageItemState";
-import { docType } from "../../../../data";
-export declare class State implements IPageItemState {
-    /** collapse PageTextItem */
-    collapse: boolean;
-    shortcut: boolean;
-    /** NewDocumentForm */
-    addAble: boolean;
-    /** add document type */
-    type?: docType;
-    constructor();
-    changeCollapse: (collapse: boolean) => void;
-    /** documentList add Drop down more menus hidden*/
-    cancel(): void;
-    /** AddDocDropdown(新增type下拉Menu) item click */
-    onItemClick(val: docType): void;
-}
+import { IPageItemState } from "../../data/IPageItemState";
+import { docType } from "../../../../data";
+export declare class State implements IPageItemState {
+    /** collapse PageTextItem */
+    collapse: boolean;
+    shortcut: boolean;
+    /** NewDocumentForm */
+    addAble: boolean;
+    /** add document type */
+    type?: docType;
+    constructor();
+    changeCollapse: (collapse: boolean) => void;
+    /** documentList add Drop down more menus hidden*/
+    cancel(): void;
+    /** AddDocDropdown(新增type下拉Menu) item click */
+    onItemClick(val: docType): void;
+}