@voplus/morpho-document 4.0.3 → 4.0.5

package/es/views/DocumentTabbedView/DraggableTabs.js

@@ -1,77 +1,77 @@
-import { useDrag, useDrop, } from "react-dnd";
-import React, { useState } from "react";
-import { Tabs } from "antd";
-import { observe } from "@voplus/morpho-ui";
-// Drag & Drop node
-const WrapTabNode = (props) => {
-    const { children, index } = props;
-    const [{ isDragging }, drag] = useDrag({
-        type: "Tab",
-        item: { index: index },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-    });
-    const [, drop] = useDrop({
-        accept: "Tab",
-        drop: (item, monitor) => {
-            const dragKey = monitor.getItem().index;
-            const hoverKey = props.index;
-            if (dragKey === hoverKey) {
-                return;
-            }
-            props.moveTabNode(dragKey, hoverKey);
-            monitor.getItem().index = hoverKey;
-        },
-    });
-    return drag(drop(children));
-};
-const DraggableTabs = (props) => {
-    const { children } = props;
-    const [order, setOrder] = useState([]);
-    /** 改變child的位置 */
-    const moveTabNode = (dragKey, hoverKey) => {
-        var _a;
-        const newOrder = order.slice();
-        React.Children.forEach(children, (c) => {
-            if (newOrder.indexOf(c.key) === -1) {
-                newOrder.push(c.key);
-            }
-        });
-        const dragIndex = newOrder.indexOf(dragKey);
-        const hoverIndex = newOrder.indexOf(hoverKey);
-        newOrder.splice(dragIndex, 1);
-        newOrder.splice(hoverIndex, 0, dragKey);
-        setOrder(newOrder);
-        /** moveAfter */
-        const afterKey = newOrder[hoverIndex - 1];
-        (_a = props.moveAfter) === null || _a === void 0 ? void 0 : _a.call(props, dragKey, afterKey);
-    };
-    /** 替换 TabBar，用于二次封装标签头 */
-    const renderTabBar = (props, DefaultTabBar) => (React.createElement(DefaultTabBar, { ...props }, (node) => (React.createElement(WrapTabNode, { key: node.key, index: node.key, moveTabNode: moveTabNode }, node))));
-    return observe(() => {
-        const tabs = [];
-        React.Children.forEach(children, (c) => {
-            tabs.push(c);
-        });
-        const orderTabs = tabs.slice().sort((a, b) => {
-            const orderA = order.indexOf(a.key);
-            const orderB = order.indexOf(b.key);
-            if (orderA !== -1 && orderB !== -1) {
-                return orderA - orderB;
-            }
-            if (orderA !== -1) {
-                return -1;
-            }
-            if (orderB !== -1) {
-                return 1;
-            }
-            const ia = tabs.indexOf(a);
-            const ib = tabs.indexOf(b);
-            return ia - ib;
-        });
-        return (React.createElement(Tabs, { className: "document-tabbed-tabs", renderTabBar: renderTabBar }, orderTabs));
-    });
-};
-export default DraggableTabs;
+import { useDrag, useDrop, } from "react-dnd";
+import React, { useState } from "react";
+import { Tabs } from "antd";
+import { observe } from "@voplus/morpho-ui";
+// Drag & Drop node
+const WrapTabNode = (props) => {
+    const { children, index } = props;
+    const [{ isDragging }, drag] = useDrag({
+        type: "Tab",
+        item: { index: index },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const [, drop] = useDrop({
+        accept: "Tab",
+        drop: (item, monitor) => {
+            const dragKey = monitor.getItem().index;
+            const hoverKey = props.index;
+            if (dragKey === hoverKey) {
+                return;
+            }
+            props.moveTabNode(dragKey, hoverKey);
+            monitor.getItem().index = hoverKey;
+        },
+    });
+    return drag(drop(children));
+};
+const DraggableTabs = (props) => {
+    const { children } = props;
+    const [order, setOrder] = useState([]);
+    /** 改變child的位置 */
+    const moveTabNode = (dragKey, hoverKey) => {
+        var _a;
+        const newOrder = order.slice();
+        React.Children.forEach(children, (c) => {
+            if (newOrder.indexOf(c.key) === -1) {
+                newOrder.push(c.key);
+            }
+        });
+        const dragIndex = newOrder.indexOf(dragKey);
+        const hoverIndex = newOrder.indexOf(hoverKey);
+        newOrder.splice(dragIndex, 1);
+        newOrder.splice(hoverIndex, 0, dragKey);
+        setOrder(newOrder);
+        /** moveAfter */
+        const afterKey = newOrder[hoverIndex - 1];
+        (_a = props.moveAfter) === null || _a === void 0 ? void 0 : _a.call(props, dragKey, afterKey);
+    };
+    /** 替换 TabBar，用于二次封装标签头 */
+    const renderTabBar = (props, DefaultTabBar) => (React.createElement(DefaultTabBar, { ...props }, (node) => (React.createElement(WrapTabNode, { key: node.key, index: node.key, moveTabNode: moveTabNode }, node))));
+    return observe(() => {
+        const tabs = [];
+        React.Children.forEach(children, (c) => {
+            tabs.push(c);
+        });
+        const orderTabs = tabs.slice().sort((a, b) => {
+            const orderA = order.indexOf(a.key);
+            const orderB = order.indexOf(b.key);
+            if (orderA !== -1 && orderB !== -1) {
+                return orderA - orderB;
+            }
+            if (orderA !== -1) {
+                return -1;
+            }
+            if (orderB !== -1) {
+                return 1;
+            }
+            const ia = tabs.indexOf(a);
+            const ib = tabs.indexOf(b);
+            return ia - ib;
+        });
+        return (React.createElement(Tabs, { className: "document-tabbed-tabs", renderTabBar: renderTabBar }, orderTabs));
+    });
+};
+export default DraggableTabs;
 //# sourceMappingURL=DraggableTabs.js.map

package/es/views/DocumentTabbedView/index.d.ts

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

package/es/views/DocumentTabbedView/index.js

@@ -1,56 +1,56 @@
-import { Empty, Spin, Tabs } from "antd";
-import { useAutoUpdateListData, useDocumentListEffect, useDocumentStore, } from "@voplus/morpho-document-core";
-import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data";
-import React, { useState } from "react";
-import DocumentListView from "../../components/DocumentListView";
-import DraggableTabs from "./DraggableTabs";
-import { LoadingOutlined } from "@ant-design/icons";
-import classnames from "classnames";
-import { observe } from "@voplus/morpho-ui";
-import styles from "./index.less";
-import { toJS } from "mobx";
-import { useFrame } from "../../components/ViewFrame/ViewFrameContext";
-import { useRenderOnChange } from "@voplus/morpho-ui";
-const DocumentTabbedView = (props) => {
-    const { TabPane } = Tabs;
-    const { id } = props;
-    const [load, setLoad] = useState(true);
-    const frame = useFrame();
-    const documents = useDocumentStore();
-    /** 建立 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: 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: id }],
-        },
-    }, [id]);
-    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
-    useRenderOnChange(() => list.filters.options);
-    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
-    useDocumentListEffect(list, (result) => {
-        list.union(result);
-        setLoad(false);
-    }, list.filters.options);
-    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
-    useAutoUpdateListData(list, (d) => d.parentId === id);
-    return observe(() => (React.createElement("div", { className: classnames("module-detail-view", styles["document-tabbed-view"]) },
-        React.createElement(ListDataContext.Provider, { value: list }, load ? (React.createElement("div", { className: "loading" },
-            React.createElement(Spin, { tip: "Loading...", indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) }))) : list.data.length ? (React.createElement(DraggableTabs, { moveAfter: moveAfter }, list.data.map((item) => (React.createElement(TabPane, { tab: item.name, key: item.id },
-            React.createElement(DocumentListView, { id: item.id, headerVisible: false })))))) : (React.createElement(Empty, { description: "No Data" }))))));
-    /** 移动后的回调 */
-    async function moveAfter(id, afterId) {
-        await documents.moveAfter(id, afterId);
-    }
-};
-export default DocumentTabbedView;
+import { Empty, Spin, Tabs } from "antd";
+import { useAutoUpdateListData, useDocumentListEffect, useDocumentStore, } from "@voplus/morpho-document-core";
+import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data";
+import React, { useState } from "react";
+import DocumentListView from "../../components/DocumentListView";
+import DraggableTabs from "./DraggableTabs";
+import { LoadingOutlined } from "@ant-design/icons";
+import classnames from "classnames";
+import { observe } from "@voplus/morpho-ui";
+import styles from "./index.less";
+import { toJS } from "mobx";
+import { useFrame } from "../../components/ViewFrame/ViewFrameContext";
+import { useRenderOnChange } from "@voplus/morpho-ui";
+const DocumentTabbedView = (props) => {
+    const { TabPane } = Tabs;
+    const { id } = props;
+    const [load, setLoad] = useState(true);
+    const frame = useFrame();
+    const documents = useDocumentStore();
+    /** 建立 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: 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: id }],
+        },
+    }, [id]);
+    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
+    useRenderOnChange(() => list.filters.options);
+    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
+    useDocumentListEffect(list, (result) => {
+        list.union(result);
+        setLoad(false);
+    }, list.filters.options);
+    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
+    useAutoUpdateListData(list, (d) => d.parentId === id);
+    return observe(() => (React.createElement("div", { className: classnames("module-detail-view", styles["document-tabbed-view"]) },
+        React.createElement(ListDataContext.Provider, { value: list }, load ? (React.createElement("div", { className: "loading" },
+            React.createElement(Spin, { tip: "Loading...", indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) }))) : list.data.length ? (React.createElement(DraggableTabs, { moveAfter: moveAfter }, list.data.map((item) => (React.createElement(TabPane, { tab: item.name, key: item.id },
+            React.createElement(DocumentListView, { id: item.id, headerVisible: false })))))) : (React.createElement(Empty, { description: "No Data" }))))));
+    /** 移动后的回调 */
+    async function moveAfter(id, afterId) {
+        await documents.moveAfter(id, afterId);
+    }
+};
+export default DocumentTabbedView;
 //# sourceMappingURL=index.js.map

package/es/views/DocumentTabbedView/index.less

@@ -1,24 +1,24 @@
-.document-tabbed-view {
-	:global {
-		.document-tabbed-tabs {
-			.ant-tabs-nav {
-				padding: 0 20px;
-			}
-			.ant-tabs-tab > div {
-				max-width: 10em;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-		.loading {
-			margin: 20px 0;
-			margin-bottom: 20px;
-			padding: 30px 50px;
-			text-align: center;
-		}
-		.ant-empty {
-			margin: 32px 0;
-		}
-	}
-}
+.document-tabbed-view {
+	:global {
+		.document-tabbed-tabs {
+			.ant-tabs-nav {
+				padding: 0 20px;
+			}
+			.ant-tabs-tab > div {
+				max-width: 10em;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+		.loading {
+			margin: 20px 0;
+			margin-bottom: 20px;
+			padding: 30px 50px;
+			text-align: center;
+		}
+		.ant-empty {
+			margin: 32px 0;
+		}
+	}
+}

package/es/views/ExplorerView/index.d.ts

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

package/es/views/ExplorerView/index.js

@@ -1,8 +1,8 @@
-import DocumentListView from "../../components/DocumentListView";
-import React from "react";
-import { observe } from "@voplus/morpho-ui";
-const ExplorerView = (props) => {
-    return observe(() => React.createElement(DocumentListView, { id: props.id, headerVisible: false }));
-};
-export default ExplorerView;
+import DocumentListView from "../../components/DocumentListView";
+import React from "react";
+import { observe } from "@voplus/morpho-ui";
+const ExplorerView = (props) => {
+    return observe(() => React.createElement(DocumentListView, { id: props.id, headerVisible: false }));
+};
+export default ExplorerView;
 //# sourceMappingURL=index.js.map

package/es/views/TreeView/index.d.ts

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

package/es/views/TreeView/index.js

@@ -1,40 +1,40 @@
-import { FilterOptionsContext, ListDataContext, useCreateListDataState, } from "@voplus/morpho-ui/es/data";
-import React, { useEffect, useState } from "react";
-import { observe, useAsideContentContext } from "@voplus/morpho-ui";
-import DocumentSortableTree from "../../components/DocumentSortableTree";
-import { DocumentTypeFilter } from "../../controls/filters";
-import FilterView from "@voplus/morpho-ui/es/controls/FilterView";
-import PropertiesView from "@voplus/morpho-document-core/es/components/PropertiesView";
-import { State } from "./state";
-import { runInAction } from "mobx";
-import { useFrame } from "../../components/ViewFrame/ViewFrameContext";
-const TreeView = (props) => {
-    const frame = useFrame();
-    const asideContext = useAsideContentContext();
-    const [state] = useState(new State());
-    /** 建立 ListView 和useTaskListEffect所需的ListDataState. 会根据parentId重建所以不需reset. */
-    const list = useCreateListDataState({}, [props.id]);
-    useEffect(() => {
-        runInAction(() => (frame.Extra = (React.createElement(ListDataContext.Provider, { value: list },
-            React.createElement(FilterOptionsContext.Provider, { value: list.filters },
-                React.createElement(FilterView, { columns: React.createElement(DocumentTypeFilter, { key: "DocumentTypeFilter" }), className: "margin-left-10", 
-                    /** story 顯示值用, 組件如無必要，不需提供onFilter, ListView2會自動呼叫filter. */
-                    onFilter: (c) => {
-                        c.filter();
-                        runInAction(() => {
-                            var _a;
-                            return (state.filterType = (_a = c === null || c === void 0 ? void 0 : c.options.Filters) === null || _a === void 0 ? void 0 : _a.filter((item) => item.c === "Type")[0]);
-                        });
-                    }, onReset: (c) => {
-                        c.reset();
-                        runInAction(() => (state.filterType = undefined));
-                    } }))))));
-    }, []);
-    return observe(() => (React.createElement(DocumentSortableTree, { id: props.id, defaultRoot: true, exclude: frame === null || frame === void 0 ? void 0 : frame.Exclude, filterType: state.filterType, isAside: state.isAside, onDocumentSelected: onDocumentSelected })));
-    function onDocumentSelected(id) {
-        asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: id }), { span: 12 });
-        runInAction(() => (state.isAside = true));
-    }
-};
-export default TreeView;
+import { FilterOptionsContext, ListDataContext, useCreateListDataState, } from "@voplus/morpho-ui/es/data";
+import React, { useEffect, useState } from "react";
+import { observe, useAsideContentContext } from "@voplus/morpho-ui";
+import DocumentSortableTree from "../../components/DocumentSortableTree";
+import { DocumentTypeFilter } from "../../controls/filters";
+import FilterView from "@voplus/morpho-ui/es/controls/FilterView";
+import PropertiesView from "@voplus/morpho-document-core/es/components/PropertiesView";
+import { State } from "./state";
+import { runInAction } from "mobx";
+import { useFrame } from "../../components/ViewFrame/ViewFrameContext";
+const TreeView = (props) => {
+    const frame = useFrame();
+    const asideContext = useAsideContentContext();
+    const [state] = useState(new State());
+    /** 建立 ListView 和useTaskListEffect所需的ListDataState. 会根据parentId重建所以不需reset. */
+    const list = useCreateListDataState({}, [props.id]);
+    useEffect(() => {
+        runInAction(() => (frame.Extra = (React.createElement(ListDataContext.Provider, { value: list },
+            React.createElement(FilterOptionsContext.Provider, { value: list.filters },
+                React.createElement(FilterView, { columns: React.createElement(DocumentTypeFilter, { key: "DocumentTypeFilter" }), className: "margin-left-10", 
+                    /** story 顯示值用, 組件如無必要，不需提供onFilter, ListView2會自動呼叫filter. */
+                    onFilter: (c) => {
+                        c.filter();
+                        runInAction(() => {
+                            var _a;
+                            return (state.filterType = (_a = c === null || c === void 0 ? void 0 : c.options.Filters) === null || _a === void 0 ? void 0 : _a.filter((item) => item.c === "Type")[0]);
+                        });
+                    }, onReset: (c) => {
+                        c.reset();
+                        runInAction(() => (state.filterType = undefined));
+                    } }))))));
+    }, []);
+    return observe(() => (React.createElement(DocumentSortableTree, { id: props.id, defaultRoot: true, exclude: frame === null || frame === void 0 ? void 0 : frame.Exclude, filterType: state.filterType, isAside: state.isAside, onDocumentSelected: onDocumentSelected })));
+    function onDocumentSelected(id) {
+        asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: id }), { span: 12 });
+        runInAction(() => (state.isAside = true));
+    }
+};
+export default TreeView;
 //# sourceMappingURL=index.js.map

package/es/views/TreeView/state.d.ts

@@ -1,6 +1,6 @@
-import { FilterOption } from "@voplus/morpho-data";
-export declare class State {
-    filterType: FilterOption | undefined;
-    isAside: boolean;
-    constructor();
-}
+import { FilterOption } from "@voplus/morpho-data";
+export declare class State {
+    filterType: FilterOption | undefined;
+    isAside: boolean;
+    constructor();
+}

package/es/views/TreeView/state.js

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