@voplus/morpho-document 1.4.96 → 1.4.97

package/es/components/DocumentSortableTree/index.js

@@ -1,159 +1,159 @@
-import { DocumentListContext, DocumentListContextState, } from "../../data/contexts/DocumentListContext";
-import { State } from "./state";
-import { useDocument, useDocumentListEffect, useDocumentStore, useOnDeleteDocument, useOnNewDocument, } from "@voplus/morpho-document-core";
-import { Empty, Spin } from "@voplus/antd";
-import React, { useEffect, useMemo, useState } from "react";
-import { SortableTreeWithoutDndContext as SortableTree, toggleExpandedForAll, } from "@voplus/react-sortable-tree";
-import { SortableTreeContext, SortableTreeContextState } from "./SortableTreeContext";
-import { observe, useAutorunEffect, useRenderOnChange } from "@voplus/morpho-ui";
-import InfiniteScrollView from "@voplus/morpho-ui/es/controls/InfiniteScrollView";
-import { LoadingOutlined } from "@ant-design/icons";
-import Panable from "@voplus/morpho-ui/es/controls/Panable";
-import SortableTreeDocumentTheme from "./themes/SortableTreeDocumentTheme";
-import classnames from "classnames";
-import { runInAction } from "mobx";
-import styles from "./index.less";
-import { useCreateListDataState } from "@voplus/morpho-ui/es/data";
-const DocumentSortableTree = (props) => {
-    const { theme, canDrag, defaultRoot, isAside, isPanable } = props;
-    const store = useDocumentStore();
-    const [state] = useState(new State(store));
-    const context = useMemo(() => new SortableTreeContextState(isAside), [isAside]);
-    /**把store 传给子级 DocumentItem*/
-    const [listoptions] = useState(new DocumentListContextState());
-    listoptions.onDocumentSelected = props.onDocumentSelected;
-    listoptions.active = props.active;
-    /** 根文件 */
-    const root = useDocument(props.id);
-    state.update(root);
-    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
-    const list = useCreateListDataState({
-        filterDefaults: {
-            includes: "tags",
-            filters: state.filters,
-        },
-    }, [state.id]);
-    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
-    useRenderOnChange(() => [list.filters.options, state.id]);
-    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
-    useDocumentListEffect(list, state.effect, list.filters.options);
-    useAutorunEffect(() => {
-        var _a, _b;
-        /** 判断 root node 是否加载完成，并且有state.treeData没有数据，以免每次都重复进来这里(数据显示错误)  */
-        if (((_a = state.root) === null || _a === void 0 ? void 0 : _a.id) && ((_b = state.root) === null || _b === void 0 ? void 0 : _b.loaded) && !state.treeData.length) {
-            /** defaultRoot 不需要显示root node, 直接调用useDocumentListEffect */
-            runInAction(() => {
-                if (defaultRoot) {
-                    state.id = state.root.id;
-                    state.effect = state.updateNodes;
-                }
-                else {
-                    if (state.root.documents > 0) {
-                        state.root.children = state.treeChildren;
-                    }
-                    if (props.allFiles) {
-                        state.id = "";
-                        state.treeData = [{ id: "", name: "All Files" }, { ...state.root }];
-                    }
-                    else {
-                        state.treeData = [{ ...state.root }];
-                    }
-                }
-            });
-        }
-    });
-    useEffect(() => {
-        runInAction(() => {
-            list.reset();
-            state.id = props.id;
-            state.filterType = props.filterType;
-            list.filters.options.Filters = state.filters;
-            if (defaultRoot) {
-                state.id = state.root.id;
-                state.treeData = [];
-                state.loading = true;
-                state.effect = state.updateNodes;
-            }
-            else {
-                state.updateType();
-            }
-        });
-    }, [props.filterType, props.id]);
-    useEffect(() => {
-        state.exclude = props.exclude || [];
-    }, [props.exclude]);
-    useEffect(() => {
-        if (props.toggleExpanded !== undefined)
-            expand(props.toggleExpanded);
-    }, [props.toggleExpanded]);
-    useOnNewDocument((s, doc) => {
-        runInAction(() => {
-            var _a, _b;
-            if (defaultRoot && state.root.id === doc.parentId) {
-                const index = state.treeData.findIndex((i) => i.id === doc.id);
-                if (index === -1)
-                    state.treeData = [...state.treeData, doc];
-                return;
-            }
-            state.editTreeData(state.treeData, doc.parentId);
-            if (!((_a = state.treeNodeChildren) === null || _a === void 0 ? void 0 : _a.children)) {
-                state.treeNodeChildren.children = [doc];
-            }
-            else {
-                const index = state.treeNodeChildren.children.findIndex((i) => i.id === doc.id);
-                if (index === -1)
-                    (_b = state.treeNodeChildren) === null || _b === void 0 ? void 0 : _b.children.push(doc);
-            }
-            state.treeData = [...state.treeData];
-        });
-    });
-    useOnDeleteDocument((s, doc) => {
-        runInAction(() => {
-            if (defaultRoot && state.root.id === doc.parentId) {
-                state.treeData = state.treeData.filter((item) => item.id !== doc.id);
-                return;
-            }
-            state.editTreeData(state.treeData, doc.parentId);
-            state.treeNodeChildren.children = state.treeNodeChildren.children.filter((item) => item.id !== doc.id);
-            state.treeData = [...state.treeData];
-        });
-    });
-    const TreeContent = observe(() => (React.createElement(SortableTree, { isVirtualized: false, treeData: state.treeData, onChange: (val) => state.updateTreeData(val), getNodeKey: ({ node }) => node.id, onVisibilityToggle: (val) => state.onVisibilityToggle(val), onMoveNode: (val) => state.onMoveNode(val), 
-        // canDrop={({ nextPath }) => (nextPath?.length > 1 ? true : false)}
-        canNodeHaveChildren: (node) => state.toHaveChildren(node), onDragStateChanged: (data) => runInAction(() => (state.isDragging = data.isDragging)), canDrag: canDrag, theme: theme })));
-    /** isVirtualized={false} 可以解决滚动时，重新渲染DocumentItem组件
-     * 设置为false可禁用虚拟化。默认为true。注意：拖动时自动滚动以及滚动到searchFocusOffset都将被禁用。*/
-    return observe(() => (React.createElement(DocumentListContext.Provider, { value: listoptions },
-        React.createElement(SortableTreeContext.Provider, { value: context },
-            React.createElement("div", { className: classnames(styles["document-sort-able-tree"], { "panable-tree": isPanable }) }, state.loading ? (React.createElement("div", { className: "loading" },
-                React.createElement(Spin, { tip: "Loading...", indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) }))) : state.treeData.length ? (React.createElement(InfiniteScrollView, { empty: false, loading: false, hasMore: list.hasMore, loadMore: () => {
-                    state.effect = (list) => {
-                        var _a, _b;
-                        state.editTreeData(state.treeData, state.id);
-                        for (const item of list) {
-                            ((_a = state.treeNodeChildren) === null || _a === void 0 ? void 0 : _a.children)
-                                ? (_b = state.treeNodeChildren) === null || _b === void 0 ? void 0 : _b.children.push(item)
-                                : state.treeData.push(item);
-                        }
-                        state.treeData = [...state.treeData];
-                        /** 防止重复加载document list */
-                        state.effect = null;
-                    };
-                    list.triggerNextPage();
-                } }, isPanable ? (React.createElement(Panable, { scroll: true, isDragging: state.isDragging }, TreeContent)) : (TreeContent))) : (React.createElement(Empty, { description: "No Data" })))))));
-    /** 展开或关闭树中的每个节点 */
-    function expand(expanded) {
-        const data = toggleExpandedForAll({
-            treeData: state.treeData,
-            expanded,
-        });
-        runInAction(() => (state.treeData = expanded ? state.expandTreeData(data) : data));
-    }
-};
-DocumentSortableTree.defaultProps = {
-    canDrag: true,
-    defaultRoot: false,
-    theme: SortableTreeDocumentTheme,
-};
-export default DocumentSortableTree;
+import { DocumentListContext, DocumentListContextState, } from "../../data/contexts/DocumentListContext";
+import { State } from "./state";
+import { useDocument, useDocumentListEffect, useDocumentStore, useOnDeleteDocument, useOnNewDocument, } from "@voplus/morpho-document-core";
+import { Empty, Spin } from "@voplus/antd";
+import React, { useEffect, useMemo, useState } from "react";
+import { SortableTreeWithoutDndContext as SortableTree, toggleExpandedForAll, } from "@voplus/react-sortable-tree";
+import { SortableTreeContext, SortableTreeContextState } from "./SortableTreeContext";
+import { observe, useAutorunEffect, useRenderOnChange } from "@voplus/morpho-ui";
+import InfiniteScrollView from "@voplus/morpho-ui/es/controls/InfiniteScrollView";
+import { LoadingOutlined } from "@ant-design/icons";
+import Panable from "@voplus/morpho-ui/es/controls/Panable";
+import SortableTreeDocumentTheme from "./themes/SortableTreeDocumentTheme";
+import classnames from "classnames";
+import { runInAction } from "mobx";
+import styles from "./index.less";
+import { useCreateListDataState } from "@voplus/morpho-ui/es/data";
+const DocumentSortableTree = (props) => {
+    const { theme, canDrag, defaultRoot, isAside, isPanable } = props;
+    const store = useDocumentStore();
+    const [state] = useState(new State(store));
+    const context = useMemo(() => new SortableTreeContextState(isAside), [isAside]);
+    /**把store 传给子级 DocumentItem*/
+    const [listoptions] = useState(new DocumentListContextState());
+    listoptions.onDocumentSelected = props.onDocumentSelected;
+    listoptions.active = props.active;
+    /** 根文件 */
+    const root = useDocument(props.id);
+    state.update(root);
+    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
+    const list = useCreateListDataState({
+        filterDefaults: {
+            includes: "tags",
+            filters: state.filters,
+        },
+    }, [state.id]);
+    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
+    useRenderOnChange(() => [list.filters.options, state.id]);
+    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
+    useDocumentListEffect(list, state.effect, list.filters.options);
+    useAutorunEffect(() => {
+        var _a, _b;
+        /** 判断 root node 是否加载完成，并且有state.treeData没有数据，以免每次都重复进来这里(数据显示错误)  */
+        if (((_a = state.root) === null || _a === void 0 ? void 0 : _a.id) && ((_b = state.root) === null || _b === void 0 ? void 0 : _b.loaded) && !state.treeData.length) {
+            /** defaultRoot 不需要显示root node, 直接调用useDocumentListEffect */
+            runInAction(() => {
+                if (defaultRoot) {
+                    state.id = state.root.id;
+                    state.effect = state.updateNodes;
+                }
+                else {
+                    if (state.root.documents > 0) {
+                        state.root.children = state.treeChildren;
+                    }
+                    if (props.allFiles) {
+                        state.id = "";
+                        state.treeData = [{ id: "", name: "All Files" }, { ...state.root }];
+                    }
+                    else {
+                        state.treeData = [{ ...state.root }];
+                    }
+                }
+            });
+        }
+    });
+    useEffect(() => {
+        runInAction(() => {
+            list.reset();
+            state.id = props.id;
+            state.filterType = props.filterType;
+            list.filters.options.Filters = state.filters;
+            if (defaultRoot) {
+                state.id = state.root.id;
+                state.treeData = [];
+                state.loading = true;
+                state.effect = state.updateNodes;
+            }
+            else {
+                state.updateType();
+            }
+        });
+    }, [props.filterType, props.id]);
+    useEffect(() => {
+        state.exclude = props.exclude || [];
+    }, [props.exclude]);
+    useEffect(() => {
+        if (props.toggleExpanded !== undefined)
+            expand(props.toggleExpanded);
+    }, [props.toggleExpanded]);
+    useOnNewDocument((s, doc) => {
+        runInAction(() => {
+            var _a, _b;
+            if (defaultRoot && state.root.id === doc.parentId) {
+                const index = state.treeData.findIndex((i) => i.id === doc.id);
+                if (index === -1)
+                    state.treeData = [...state.treeData, doc];
+                return;
+            }
+            state.editTreeData(state.treeData, doc.parentId);
+            if (!((_a = state.treeNodeChildren) === null || _a === void 0 ? void 0 : _a.children)) {
+                state.treeNodeChildren.children = [doc];
+            }
+            else {
+                const index = state.treeNodeChildren.children.findIndex((i) => i.id === doc.id);
+                if (index === -1)
+                    (_b = state.treeNodeChildren) === null || _b === void 0 ? void 0 : _b.children.push(doc);
+            }
+            state.treeData = [...state.treeData];
+        });
+    });
+    useOnDeleteDocument((s, doc) => {
+        runInAction(() => {
+            if (defaultRoot && state.root.id === doc.parentId) {
+                state.treeData = state.treeData.filter((item) => item.id !== doc.id);
+                return;
+            }
+            state.editTreeData(state.treeData, doc.parentId);
+            state.treeNodeChildren.children = state.treeNodeChildren.children.filter((item) => item.id !== doc.id);
+            state.treeData = [...state.treeData];
+        });
+    });
+    const TreeContent = observe(() => (React.createElement(SortableTree, { isVirtualized: false, treeData: state.treeData, onChange: (val) => state.updateTreeData(val), getNodeKey: ({ node }) => node.id, onVisibilityToggle: (val) => state.onVisibilityToggle(val), onMoveNode: (val) => state.onMoveNode(val), 
+        // canDrop={({ nextPath }) => (nextPath?.length > 1 ? true : false)}
+        canNodeHaveChildren: (node) => state.toHaveChildren(node), onDragStateChanged: (data) => runInAction(() => (state.isDragging = data.isDragging)), canDrag: canDrag, theme: theme })));
+    /** isVirtualized={false} 可以解决滚动时，重新渲染DocumentItem组件
+     * 设置为false可禁用虚拟化。默认为true。注意：拖动时自动滚动以及滚动到searchFocusOffset都将被禁用。*/
+    return observe(() => (React.createElement(DocumentListContext.Provider, { value: listoptions },
+        React.createElement(SortableTreeContext.Provider, { value: context },
+            React.createElement("div", { className: classnames(styles["document-sort-able-tree"], { "panable-tree": isPanable }) }, state.loading ? (React.createElement("div", { className: "loading" },
+                React.createElement(Spin, { tip: "Loading...", indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) }))) : state.treeData.length ? (React.createElement(InfiniteScrollView, { empty: false, loading: false, hasMore: list.hasMore, loadMore: () => {
+                    state.effect = (list) => {
+                        var _a, _b;
+                        state.editTreeData(state.treeData, state.id);
+                        for (const item of list) {
+                            ((_a = state.treeNodeChildren) === null || _a === void 0 ? void 0 : _a.children)
+                                ? (_b = state.treeNodeChildren) === null || _b === void 0 ? void 0 : _b.children.push(item)
+                                : state.treeData.push(item);
+                        }
+                        state.treeData = [...state.treeData];
+                        /** 防止重复加载document list */
+                        state.effect = null;
+                    };
+                    list.triggerNextPage();
+                } }, isPanable ? (React.createElement(Panable, { scroll: true, isDragging: state.isDragging }, TreeContent)) : (TreeContent))) : (React.createElement(Empty, { description: "No Data" })))))));
+    /** 展开或关闭树中的每个节点 */
+    function expand(expanded) {
+        const data = toggleExpandedForAll({
+            treeData: state.treeData,
+            expanded,
+        });
+        runInAction(() => (state.treeData = expanded ? state.expandTreeData(data) : data));
+    }
+};
+DocumentSortableTree.defaultProps = {
+    canDrag: true,
+    defaultRoot: false,
+    theme: SortableTreeDocumentTheme,
+};
+export default DocumentSortableTree;
 //# sourceMappingURL=index.js.map

package/es/components/DocumentSortableTree/index.less

@@ -0,0 +1,22 @@
+.document-sort-able-tree {
+	height: 100%;
+	&:global(.panable-tree > div > div > div) {
+		height: 100%;
+	}
+	:global {
+		.rst__tree {
+			display: inline-block;
+			min-width: 100%;
+			// overflow-x: hidden;
+		}
+		.loading {
+			margin: 20px 0;
+			margin-bottom: 20px;
+			padding: 30px 50px;
+			text-align: center;
+		}
+		.ant-empty {
+			margin: 32px 0;
+		}
+	}
+}

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

@@ -1,86 +1,86 @@
-import { DocumentStore, IDocument } from "@voplus/morpho-document-core";
-import { FilterOption } from "@voplus/morpho-data";
-export declare type DocumentSortableTreeProps = {
-    /** Id of the root node */
-    id: string;
-    /** active id */
-    active?: string;
-    /** Document Tree theme */
-    theme?: any;
-    /** 是否可以拖放 */
-    canDrag?: boolean;
-    /** 是否隐藏根节点 */
-    defaultRoot: boolean;
-    /** 支援include, exclude 文件类型 */
-    exclude?: string[];
-    include?: string[];
-    /** includes 避免不必要后台呼叫 */
-    includes?: string;
-    filterType?: FilterOption;
-    /** All Files of  DocumentSortableTree item */
-    allFiles?: boolean;
-    /** 展开或关闭树中的每个节点 */
-    toggleExpanded?: boolean;
-    /** 是否已openAside（是否已打开PropertiesView） */
-    isAside?: boolean;
-    /** 是否支持Panable */
-    isPanable?: boolean;
-    /** Document selected */
-    onDocumentSelected?: (params?: any) => void;
-};
-export interface ITreeNodeData extends IDocument {
-    /** node expanded 与否 */
-    expanded?: boolean;
-    children?: ITreeNodeData[];
-    /** 子数据列表是否 loading */
-    childrenListLoading?: boolean;
-}
-export declare class State {
-    private _store;
-    constructor(_store: DocumentStore);
-    id: string;
-    /** 根文件 */
-    root: any;
-    /** 如果effect 是null就不执行 useDocumentListEffect*/
-    effect: (list: IDocument[]) => void | null;
-    treeNodeChildren: any;
-    /**  dummy placeholder data */
-    treeChildren: ITreeNodeData[];
-    /** 沒load之前, 看看現在這個文件有沒有子文件, 有的話要放個 dummy placeholder data 在children里,  */
-    treeData: ITreeNodeData[];
-    /** e.g. exclude={["Task", "Agenda"]} 結果:不會顯示 Task和Agenda文件 */
-    exclude: string[];
-    include: string[];
-    /** filter type for document */
-    filterType: FilterOption | undefined;
-    /** onDragStateChanged 在拖动开始或结束时调用。拖动开始时为true,拖动结束时为false */
-    isDragging?: boolean;
-    /**  */
-    loading?: boolean;
-    update(root: any): void;
-    updateType(): void;
-    /** 根据path查找文件 */
-    findFiles(path: string[]): any;
-    /** 接收@treeData state.treeData
-     * @id 找id 文件 */
-    editTreeData(treeData: any, id: string): void;
-    /** 更新 TreeData */
-    updateTreeData(val: any): void;
-    /** update useDocumentListEffect  */
-    updateNodes: (list: IDocument[]) => void;
-    /**在子节点折叠或者展开后调用*/
-    onVisibilityToggle(val: any): void;
-    /** 在节点移动操作之后调用 */
-    onMoveNode(val: any): Promise<void>;
-    /**
-     * 确定节点是否可以具有子级的功能，对于在canDrop有条件时防止悬停预览很有用。默认设置为返回的函数true。函数应为类型(node): bool
-     */
-    toHaveChildren(node: any): boolean;
-    /** treeData节点是否能展开, 如果当前item没有展开加载过list, 则不展开 */
-    expandTreeData(treeData: any): any;
-    /**
-     * document filters
-     * @return document filters
-     */
-    get filters(): any[];
-}
+import { DocumentStore, IDocument } from "@voplus/morpho-document-core";
+import { FilterOption } from "@voplus/morpho-data";
+export declare type DocumentSortableTreeProps = {
+    /** Id of the root node */
+    id: string;
+    /** active id */
+    active?: string;
+    /** Document Tree theme */
+    theme?: any;
+    /** 是否可以拖放 */
+    canDrag?: boolean;
+    /** 是否隐藏根节点 */
+    defaultRoot: boolean;
+    /** 支援include, exclude 文件类型 */
+    exclude?: string[];
+    include?: string[];
+    /** includes 避免不必要后台呼叫 */
+    includes?: string;
+    filterType?: FilterOption;
+    /** All Files of  DocumentSortableTree item */
+    allFiles?: boolean;
+    /** 展开或关闭树中的每个节点 */
+    toggleExpanded?: boolean;
+    /** 是否已openAside（是否已打开PropertiesView） */
+    isAside?: boolean;
+    /** 是否支持Panable */
+    isPanable?: boolean;
+    /** Document selected */
+    onDocumentSelected?: (params?: any) => void;
+};
+export interface ITreeNodeData extends IDocument {
+    /** node expanded 与否 */
+    expanded?: boolean;
+    children?: ITreeNodeData[];
+    /** 子数据列表是否 loading */
+    childrenListLoading?: boolean;
+}
+export declare class State {
+    private _store;
+    constructor(_store: DocumentStore);
+    id: string;
+    /** 根文件 */
+    root: any;
+    /** 如果effect 是null就不执行 useDocumentListEffect*/
+    effect: (list: IDocument[]) => void | null;
+    treeNodeChildren: any;
+    /**  dummy placeholder data */
+    treeChildren: ITreeNodeData[];
+    /** 沒load之前, 看看現在這個文件有沒有子文件, 有的話要放個 dummy placeholder data 在children里,  */
+    treeData: ITreeNodeData[];
+    /** e.g. exclude={["Task", "Agenda"]} 結果:不會顯示 Task和Agenda文件 */
+    exclude: string[];
+    include: string[];
+    /** filter type for document */
+    filterType: FilterOption | undefined;
+    /** onDragStateChanged 在拖动开始或结束时调用。拖动开始时为true,拖动结束时为false */
+    isDragging?: boolean;
+    /**  */
+    loading?: boolean;
+    update(root: any): void;
+    updateType(): void;
+    /** 根据path查找文件 */
+    findFiles(path: string[]): any;
+    /** 接收@treeData state.treeData
+     * @id 找id 文件 */
+    editTreeData(treeData: any, id: string): void;
+    /** 更新 TreeData */
+    updateTreeData(val: any): void;
+    /** update useDocumentListEffect  */
+    updateNodes: (list: IDocument[]) => void;
+    /**在子节点折叠或者展开后调用*/
+    onVisibilityToggle(val: any): void;
+    /** 在节点移动操作之后调用 */
+    onMoveNode(val: any): Promise<void>;
+    /**
+     * 确定节点是否可以具有子级的功能，对于在canDrop有条件时防止悬停预览很有用。默认设置为返回的函数true。函数应为类型(node): bool
+     */
+    toHaveChildren(node: any): boolean;
+    /** treeData节点是否能展开, 如果当前item没有展开加载过list, 则不展开 */
+    expandTreeData(treeData: any): any;
+    /**
+     * document filters
+     * @return document filters
+     */
+    get filters(): any[];
+}