@voplus/morpho-document 4.0.3 → 4.0.5

package/es/components/DocumentList/index.js

@@ -1,214 +1,214 @@
-import { Badge, Empty, Upload, message } from "antd";
-import { BatchContext, BatchContextState, ListDataContext, useCreateListDataState, } from "@voplus/morpho-ui/es/data";
-import { BatchHeader, DeleteButton, MoveButton, } from "@voplus/morpho-ui/es/components/layout/ListView/headers";
-import { useAutoUpdateListData, useDocumentListLoaderEffect, useDocumentStore, } from "@voplus/morpho-document-core";
-import { DocumentStatusFilter, FlagFilter } from "../../controls/filters";
-import { useApplicationContext, useDeepMemo } from "@voplus/morpho-data";
-import React, { useRef, useState } from "react";
-import { observe, useRenderOnChange } from "@voplus/morpho-ui";
-import AddDocDropdown from "../AddDocDropdown";
-import DocumentItem from "../DocumentItem/index";
-import DocumentItemFrame from "../../controls/DocumentItemFrame";
-import DocumentPasteUpload from "../DocumentPasteUpload";
-import DocumentSelectDialog from "../DocumentSelectDialog";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import InfiniteScrollView from "@voplus/morpho-ui/es/controls/InfiniteScrollView";
-import ListHeader from "@voplus/morpho-ui/es/components/layout/ListView/headers/ListHeader";
-import NewDocumentForm from "../NewDocumentForm";
-import NewDocumentFormDialog from "../NewDocumentForm/NewDocumentFormDialog";
-import SearchHeader from "@voplus/morpho-ui/es/components/layout/ListView/headers/SearchHeader";
-import ShortcutFilter from "../../controls/filters/ShortcutFilter";
-import { State } from "./state";
-import Toolbar from "../../controls/ToolBar/ToolBar2";
-import classNames from "classnames";
-import { faCloudUpload } from "@fortawesome/pro-duotone-svg-icons";
-import { faEllipsisVertical } from "@fortawesome/pro-light-svg-icons";
-import { runInAction } from "mobx";
-import styles from "./index.less";
-const DocumentList = (props) => {
-    const containerRef = useRef(null);
-    const store = useDocumentStore();
-    const [state] = useState(new State(store));
-    const { user } = useApplicationContext();
-    /**是否能Upload*/
-    const [disabled, setDisabled] = useState(props.disabled);
-    /**e.g. exclude={["Task", "Agenda"]} 結果:不會顯示 Task和Agenda文件*/
-    state.exclude = props.exclude || [];
-    state.contains = props.contains || [];
-    state.otherFilters = props.otherFilters || [];
-    state.props = props;
-    state.id = props.id || "";
-    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
-    const list = useCreateListDataState({
-        filterDefaults: {
-            includes: props.includes !== undefined ? props.includes : "tags",
-        },
-    }, [state.id]);
-    const batch = useDeepMemo(() => new BatchContextState(list), [props.id]);
-    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
-    useRenderOnChange(() => list.filters.options);
-    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
-    const loaderOptions = {
-        ...list.filters.options,
-        Filters: state.filters,
-        Total: true,
-    };
-    useDocumentListLoaderEffect(list, (result, total) => {
-        runInAction(() => {
-            state.total = total;
-            list.union(result);
-        });
-    }, props.loader ? () => props.loader(loaderOptions) : () => store.loadList(loaderOptions), [loaderOptions]);
-    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
-    useAutoUpdateListData(list, (d, type) => {
-        if ((d.parentId === state.id && !state.exclude.includes(d.type)) ||
-            list.data.filter((item) => item.id === d.id).length) {
-            // type === "new" ? state.total++ : state.total--;
-            return true;
-        }
-        return false;
-    });
-    const header = observe(() => (React.createElement(React.Fragment, null,
-        props.multiple && (React.createElement(BatchHeader, { viewTitle: React.createElement(React.Fragment, null,
-                props.viewTitle ? props.viewTitle : "Sub-Documents",
-                props.total && state.total ? (React.createElement(Badge, { count: state.total, overflowCount: 9999, className: "site-badge-count" })) : null,
-                props.menuVisible && (React.createElement("span", { onClick: (e) => e.stopPropagation() },
-                    React.createElement(Toolbar, { id: state.id, moreProps: { icon: React.createElement(FAIcon, { icon: faEllipsisVertical }) } })))), buttons: [
-                React.createElement(DeleteButton, { execute: onDelete, key: "DeleteButton" }),
-                React.createElement(MoveButton, { execute: onMove, key: "MoveButton" }),
-            ] })),
-        props.type === "select" && React.createElement(SearchHeader, { onChange: (val) => onSearch(val) }))));
-    const items = (item) => {
-        return observe(() => (React.createElement(DocumentItemFrame, { frameProps: {
-                borderProps: { location: "left", color: "#fff ", size: "0px" },
-            } },
-            React.createElement(DocumentItem, { type: props.type ? props.type : "default", item: {
-                    id: item.id,
-                    reload: props.reload,
-                    multiple: batch.multiple,
-                    checked: checked(item.id),
-                    onChangeDisabled: onChangeDisabled,
-                    onSelectDocument: props.onSelectDocument,
-                } }))));
-    };
-    return observe(() => {
-        var _a, _b, _c, _d;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(ListDataContext.Provider, { value: list },
-                React.createElement("div", { ref: containerRef, className: classNames(styles["documents-list"], props.className) },
-                    React.createElement(BatchContext.Provider, { value: batch },
-                        props.header && (React.createElement(ListHeader, { renderId: props.id, header: header, quickSearch: props.search, searchOptions: {
-                                width: "150px",
-                                onChange: onSearch,
-                            }, filterViewProps: {
-                                columns: [React.createElement(DocumentStatusFilter, { key: "Status" }), React.createElement(FlagFilter, { key: "Flag" })],
-                                footerFilter: props.shortcutFilter ? React.createElement(ShortcutFilter, null) : null,
-                                onFilter: (c) => {
-                                    c.filter();
-                                    state.filterList = c === null || c === void 0 ? void 0 : c.options.Filters;
-                                },
-                                onReset: (c) => {
-                                    c.reset();
-                                    state.filterList = [];
-                                },
-                            }, sortOptions: [
-                                { label: "Name", value: "Name" },
-                                { label: "Create Date", value: "CreateDate" },
-                            ], addOptions: {
-                                children: (React.createElement(React.Fragment, null,
-                                    props.addAble ? (React.createElement(AddDocDropdown, { id: props.id, className: "margin-left-10", onItemClick: (val) => state.onItemClick(val), onCancelClick: () => state.cancel(), onUploading: onUploading })) : null,
-                                    props.versionsMenu)),
-                            } })),
-                        React.createElement("div", { className: "doc-list-content" },
-                            React.createElement(Upload.Dragger, { className: classNames("doc-list-page", !disabled && "doc-drag-hover", !list.loading && !list.data.length && !disabled && "cursor"), action: `https://${state.getHost}/api/files/${props.id}`, headers: {
-                                    Authorization: `Bearer ${user.info.accessToken}`,
-                                }, fileList: state.fileList, showUploadList: state.fileList.length > 0, onChange: onUploading, 
-                                // customRequest={(option: any) => state.customRequest(option)}
-                                disabled: disabled, openFileDialogOnClick: false, multiple: true, onDrop: (e) => e.stopPropagation() },
-                                React.createElement(InfiniteScrollView, { empty: list.isEmpty, emptyProps: disabled
-                                        ? { image: Empty.PRESENTED_IMAGE_DEFAULT, description: "No Data" }
-                                        : {
-                                            image: React.createElement(FAIcon, { icon: faCloudUpload, size: "5x", color: "#797979" }),
-                                            description: "Drop files here to upload.",
-                                        }, loading: list.loading, hasMore: list.hasMore, loadMore: () => list.triggerNextPage(), ...props.infiniteScrollViewProps }, batch.multiple ? (React.createElement(BatchHeader.CheckGroup, { className: "list-view-page" }, list.data.map((item) => (React.createElement(React.Fragment, { key: item.id }, items(item)))))) : (list.data.map((item) => (React.createElement(React.Fragment, { key: item.id }, items(item))))))))),
-                    state.addAble && props.openAddType === "default" && (React.createElement(NewDocumentForm, { parentId: props.id, contact: (_b = (_a = props.newButtonProps) === null || _a === void 0 ? void 0 : _a.newFormDefault) === null || _b === void 0 ? void 0 : _b.contact, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)) })),
-                    state.addAble && props.openAddType === "dialog" && (React.createElement(NewDocumentFormDialog, { parentId: props.id, contact: (_d = (_c = props.newButtonProps) === null || _c === void 0 ? void 0 : _c.newFormDefault) === null || _d === void 0 ? void 0 : _d.contact, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)) })))),
-            !disabled && React.createElement(DocumentPasteUpload, { id: props.id, containerRef: containerRef }),
-            state.shortcut && React.createElement(DocumentSelectDialog, { onSelect: onCreateShortcut })));
-    });
-    function onDelete(state) {
-        if (!state.ids.length) {
-            message.info("Nothing to choice");
-        }
-        else {
-            store.delete(state.ids, { DeleteChilds: true });
-        }
-    }
-    /**change disabled Upload function
-     * 只要顯示 quickview就disable documentList的upload
-     * 原因：(上传文件至QuickView會错误的上传多一份到documentList )
-     * 好像是modal顯示時, 之前的element 沒有接到mouseleave, 不知道是antd的bug還是就是這樣的......
-     */
-    function onChangeDisabled(newDisabled) {
-        setDisabled(newDisabled);
-    }
-    /** check move */
-    async function onMove(state) {
-        if (!state.ids.length)
-            return message.info("Nothing to choice");
-        store.cut(state.ids);
-        return message.info("Placed in clipboard");
-    }
-    function onCreateShortcut(doc) {
-        const shortcuts = [];
-        doc.map((item) => {
-            shortcuts.push({ TargetId: item.id, ParentId: state.id, Name: "" });
-        });
-        store.createShortcuts({ data: shortcuts, error: "message" });
-        state.shortcut = false;
-    }
-    /** 文件上传中、完成、失败回调函数 */
-    function onUploading({ file, fileList }) {
-        /**上传完成不显示进度条 */
-        runInAction(() => {
-            state.fileList = fileList.filter((f) => f.status !== "done");
-            if (file.status === "done") {
-                list.union([file.response]);
-            }
-        });
-    }
-    /** SearchHeader 查找文件name */
-    function onSearch(value) {
-        runInAction(() => {
-            if (state.timeout) {
-                clearTimeout(state.timeout);
-            }
-            state.timeout = setTimeout(() => {
-                state.timeout = null;
-                state.filterName = value;
-                list.triggerSearch(value);
-            }, 1500);
-        });
-    }
-    /** type="select" item是否为选中状态 */
-    function checked(id) {
-        var _a;
-        const check = (_a = props.selectedLists) === null || _a === void 0 ? void 0 : _a.find((v) => {
-            return v.id === id;
-        });
-        if (check)
-            return true;
-        return false;
-    }
-};
-DocumentList.defaultProps = {
-    header: true,
-    search: true,
-    total: true,
-    addAble: true,
-    disabled: false,
-    appendLocation: "bottom",
-    openAddType: "default",
-};
-export default DocumentList;
+import { Badge, Empty, Upload, message } from "antd";
+import { BatchContext, BatchContextState, ListDataContext, useCreateListDataState, } from "@voplus/morpho-ui/es/data";
+import { BatchHeader, DeleteButton, MoveButton, } from "@voplus/morpho-ui/es/components/layout/ListView/headers";
+import { useAutoUpdateListData, useDocumentListLoaderEffect, useDocumentStore, } from "@voplus/morpho-document-core";
+import { DocumentStatusFilter, FlagFilter } from "../../controls/filters";
+import { useApplicationContext, useDeepMemo } from "@voplus/morpho-data";
+import React, { useRef, useState } from "react";
+import { observe, useRenderOnChange } from "@voplus/morpho-ui";
+import AddDocDropdown from "../AddDocDropdown";
+import DocumentItem from "../DocumentItem/index";
+import DocumentItemFrame from "../../controls/DocumentItemFrame";
+import DocumentPasteUpload from "../DocumentPasteUpload";
+import DocumentSelectDialog from "../DocumentSelectDialog";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import InfiniteScrollView from "@voplus/morpho-ui/es/controls/InfiniteScrollView";
+import ListHeader from "@voplus/morpho-ui/es/components/layout/ListView/headers/ListHeader";
+import NewDocumentForm from "../NewDocumentForm";
+import NewDocumentFormDialog from "../NewDocumentForm/NewDocumentFormDialog";
+import SearchHeader from "@voplus/morpho-ui/es/components/layout/ListView/headers/SearchHeader";
+import ShortcutFilter from "../../controls/filters/ShortcutFilter";
+import { State } from "./state";
+import Toolbar from "../../controls/ToolBar/ToolBar2";
+import classNames from "classnames";
+import { faCloudUpload } from "@fortawesome/pro-duotone-svg-icons";
+import { faEllipsisVertical } from "@fortawesome/pro-light-svg-icons";
+import { runInAction } from "mobx";
+import styles from "./index.less";
+const DocumentList = (props) => {
+    const containerRef = useRef(null);
+    const store = useDocumentStore();
+    const [state] = useState(new State(store));
+    const { user } = useApplicationContext();
+    /**是否能Upload*/
+    const [disabled, setDisabled] = useState(props.disabled);
+    /**e.g. exclude={["Task", "Agenda"]} 結果:不會顯示 Task和Agenda文件*/
+    state.exclude = props.exclude || [];
+    state.contains = props.contains || [];
+    state.otherFilters = props.otherFilters || [];
+    state.props = props;
+    state.id = props.id || "";
+    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
+    const list = useCreateListDataState({
+        filterDefaults: {
+            includes: props.includes !== undefined ? props.includes : "tags",
+        },
+    }, [state.id]);
+    const batch = useDeepMemo(() => new BatchContextState(list), [props.id]);
+    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
+    useRenderOnChange(() => list.filters.options);
+    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
+    const loaderOptions = {
+        ...list.filters.options,
+        Filters: state.filters,
+        Total: true,
+    };
+    useDocumentListLoaderEffect(list, (result, total) => {
+        runInAction(() => {
+            state.total = total;
+            list.union(result);
+        });
+    }, props.loader ? () => props.loader(loaderOptions) : () => store.loadList(loaderOptions), [loaderOptions]);
+    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
+    useAutoUpdateListData(list, (d, type) => {
+        if ((d.parentId === state.id && !state.exclude.includes(d.type)) ||
+            list.data.filter((item) => item.id === d.id).length) {
+            // type === "new" ? state.total++ : state.total--;
+            return true;
+        }
+        return false;
+    });
+    const header = observe(() => (React.createElement(React.Fragment, null,
+        props.multiple && (React.createElement(BatchHeader, { viewTitle: React.createElement(React.Fragment, null,
+                props.viewTitle ? props.viewTitle : "Sub-Documents",
+                props.total && state.total ? (React.createElement(Badge, { count: state.total, overflowCount: 9999, className: "site-badge-count" })) : null,
+                props.menuVisible && (React.createElement("span", { onClick: (e) => e.stopPropagation() },
+                    React.createElement(Toolbar, { id: state.id, moreProps: { icon: React.createElement(FAIcon, { icon: faEllipsisVertical }) } })))), buttons: [
+                React.createElement(DeleteButton, { execute: onDelete, key: "DeleteButton" }),
+                React.createElement(MoveButton, { execute: onMove, key: "MoveButton" }),
+            ] })),
+        props.type === "select" && React.createElement(SearchHeader, { onChange: (val) => onSearch(val) }))));
+    const items = (item) => {
+        return observe(() => (React.createElement(DocumentItemFrame, { frameProps: {
+                borderProps: { location: "left", color: "#fff ", size: "0px" },
+            } },
+            React.createElement(DocumentItem, { type: props.type ? props.type : "default", item: {
+                    id: item.id,
+                    reload: props.reload,
+                    multiple: batch.multiple,
+                    checked: checked(item.id),
+                    onChangeDisabled: onChangeDisabled,
+                    onSelectDocument: props.onSelectDocument,
+                } }))));
+    };
+    return observe(() => {
+        var _a, _b, _c, _d;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ListDataContext.Provider, { value: list },
+                React.createElement("div", { ref: containerRef, className: classNames(styles["documents-list"], props.className) },
+                    React.createElement(BatchContext.Provider, { value: batch },
+                        props.header && (React.createElement(ListHeader, { renderId: props.id, header: header, quickSearch: props.search, searchOptions: {
+                                width: "150px",
+                                onChange: onSearch,
+                            }, filterViewProps: {
+                                columns: [React.createElement(DocumentStatusFilter, { key: "Status" }), React.createElement(FlagFilter, { key: "Flag" })],
+                                footerFilter: props.shortcutFilter ? React.createElement(ShortcutFilter, null) : null,
+                                onFilter: (c) => {
+                                    c.filter();
+                                    state.filterList = c === null || c === void 0 ? void 0 : c.options.Filters;
+                                },
+                                onReset: (c) => {
+                                    c.reset();
+                                    state.filterList = [];
+                                },
+                            }, sortOptions: [
+                                { label: "Name", value: "Name" },
+                                { label: "Create Date", value: "CreateDate" },
+                            ], addOptions: {
+                                children: (React.createElement(React.Fragment, null,
+                                    props.addAble ? (React.createElement(AddDocDropdown, { id: props.id, className: "margin-left-10", onItemClick: (val) => state.onItemClick(val), onCancelClick: () => state.cancel(), onUploading: onUploading })) : null,
+                                    props.versionsMenu)),
+                            } })),
+                        React.createElement("div", { className: "doc-list-content" },
+                            React.createElement(Upload.Dragger, { className: classNames("doc-list-page", !disabled && "doc-drag-hover", !list.loading && !list.data.length && !disabled && "cursor"), action: `https://${state.getHost}/api/files/${props.id}`, headers: {
+                                    Authorization: `Bearer ${user.info.accessToken}`,
+                                }, fileList: state.fileList, showUploadList: state.fileList.length > 0, onChange: onUploading, 
+                                // customRequest={(option: any) => state.customRequest(option)}
+                                disabled: disabled, openFileDialogOnClick: false, multiple: true, onDrop: (e) => e.stopPropagation() },
+                                React.createElement(InfiniteScrollView, { empty: list.isEmpty, emptyProps: disabled
+                                        ? { image: Empty.PRESENTED_IMAGE_DEFAULT, description: "No Data" }
+                                        : {
+                                            image: React.createElement(FAIcon, { icon: faCloudUpload, size: "5x", color: "#797979" }),
+                                            description: "Drop files here to upload.",
+                                        }, loading: list.loading, hasMore: list.hasMore, loadMore: () => list.triggerNextPage(), ...props.infiniteScrollViewProps }, batch.multiple ? (React.createElement(BatchHeader.CheckGroup, { className: "list-view-page" }, list.data.map((item) => (React.createElement(React.Fragment, { key: item.id }, items(item)))))) : (list.data.map((item) => (React.createElement(React.Fragment, { key: item.id }, items(item))))))))),
+                    state.addAble && props.openAddType === "default" && (React.createElement(NewDocumentForm, { parentId: props.id, contact: (_b = (_a = props.newButtonProps) === null || _a === void 0 ? void 0 : _a.newFormDefault) === null || _b === void 0 ? void 0 : _b.contact, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)) })),
+                    state.addAble && props.openAddType === "dialog" && (React.createElement(NewDocumentFormDialog, { parentId: props.id, contact: (_d = (_c = props.newButtonProps) === null || _c === void 0 ? void 0 : _c.newFormDefault) === null || _d === void 0 ? void 0 : _d.contact, type: state.type, onCancel: () => runInAction(() => (state.addAble = false)) })))),
+            !disabled && React.createElement(DocumentPasteUpload, { id: props.id, containerRef: containerRef }),
+            state.shortcut && React.createElement(DocumentSelectDialog, { onSelect: onCreateShortcut })));
+    });
+    function onDelete(state) {
+        if (!state.ids.length) {
+            message.info("Nothing to choice");
+        }
+        else {
+            store.delete(state.ids, { DeleteChilds: true });
+        }
+    }
+    /**change disabled Upload function
+     * 只要顯示 quickview就disable documentList的upload
+     * 原因：(上传文件至QuickView會错误的上传多一份到documentList )
+     * 好像是modal顯示時, 之前的element 沒有接到mouseleave, 不知道是antd的bug還是就是這樣的......
+     */
+    function onChangeDisabled(newDisabled) {
+        setDisabled(newDisabled);
+    }
+    /** check move */
+    async function onMove(state) {
+        if (!state.ids.length)
+            return message.info("Nothing to choice");
+        store.cut(state.ids);
+        return message.info("Placed in clipboard");
+    }
+    function onCreateShortcut(doc) {
+        const shortcuts = [];
+        doc.map((item) => {
+            shortcuts.push({ TargetId: item.id, ParentId: state.id, Name: "" });
+        });
+        store.createShortcuts({ data: shortcuts, error: "message" });
+        state.shortcut = false;
+    }
+    /** 文件上传中、完成、失败回调函数 */
+    function onUploading({ file, fileList }) {
+        /**上传完成不显示进度条 */
+        runInAction(() => {
+            state.fileList = fileList.filter((f) => f.status !== "done");
+            if (file.status === "done") {
+                list.union([file.response]);
+            }
+        });
+    }
+    /** SearchHeader 查找文件name */
+    function onSearch(value) {
+        runInAction(() => {
+            if (state.timeout) {
+                clearTimeout(state.timeout);
+            }
+            state.timeout = setTimeout(() => {
+                state.timeout = null;
+                state.filterName = value;
+                list.triggerSearch(value);
+            }, 1500);
+        });
+    }
+    /** type="select" item是否为选中状态 */
+    function checked(id) {
+        var _a;
+        const check = (_a = props.selectedLists) === null || _a === void 0 ? void 0 : _a.find((v) => {
+            return v.id === id;
+        });
+        if (check)
+            return true;
+        return false;
+    }
+};
+DocumentList.defaultProps = {
+    header: true,
+    search: true,
+    total: true,
+    addAble: true,
+    disabled: false,
+    appendLocation: "bottom",
+    openAddType: "default",
+};
+export default DocumentList;
 //# sourceMappingURL=index.js.map

package/es/components/DocumentList/index.less

@@ -1,100 +1,100 @@
-@import "~@voplus/morpho-theme/styles/index.less";
-
-.documents-list {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	:global {
-		.file-name {
-			font-weight: normal;
-		}
-		.list-header-tools {
-			> span + span {
-				margin-left: 10px;
-			}
-		}
-		.list-view-header > div:first-child {
-			.site-badge-count {
-				margin-left: 10px;
-			}
-		}
-		.list-view-header {
-			.multiple-icon-text {
-				.tool-bar {
-					font-size: 16px;
-					margin-left: 2px;
-				}
-			}
-		}
-		.doc-list-content {
-			height: 100%;
-			> span {
-				display: flex;
-				flex-direction: column-reverse;
-				height: 100%;
-				.ant-upload.ant-upload-drag .ant-upload {
-					padding: 0;
-				}
-				.ant-upload-list {
-					padding: 0 15px;
-				}
-			}
-		}
-		.doc-list-page {
-			// text-align: center;
-			background: #ffffff;
-			border: none;
-			border-radius: none;
-			.list-view-page {
-				display: block;
-				width: 100%;
-			}
-			&.cursor {
-				.ant-upload.ant-upload-drag {
-					cursor: pointer;
-				}
-			}
-			&.doc-drag-hover.ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-updoad-disabled) {
-				border: solid 2px @primary-color;
-			}
-			.ant-upload.ant-upload-drag {
-				text-align: left;
-				padding: 6px 0;
-				background: none;
-				border: none;
-				border-radius: 0;
-				cursor: auto;
-			}
-			.ant-upload.ant-upload-drag .ant-upload {
-				height: 100%;
-				padding: 0;
-			}
-			.ant-upload.ant-upload-disabled {
-				cursor: default;
-			}
-		}
-
-		.ant-upload.ant-upload-drag .ant-upload-drag-container {
-			display: block;
-			height: 100%;
-		}
-
-		.document-head {
-			display: flex;
-			align-items: center;
-			padding: 10px 20px 10px 38px;
-			border-bottom: 1px solid #f2f2f2;
-			.file-search {
-				flex: 1;
-				height: 36px;
-				padding: 0;
-			}
-			.file-checkbox {
-				margin-right: 10px;
-			}
-		}
-		.document-item .file-type svg {
-			color: @primary-color;
-		}
-	}
-}
+@import "~@voplus/morpho-theme/styles/index.less";
+
+.documents-list {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	:global {
+		.file-name {
+			font-weight: normal;
+		}
+		.list-header-tools {
+			> span + span {
+				margin-left: 10px;
+			}
+		}
+		.list-view-header > div:first-child {
+			.site-badge-count {
+				margin-left: 10px;
+			}
+		}
+		.list-view-header {
+			.multiple-icon-text {
+				.tool-bar {
+					font-size: 16px;
+					margin-left: 2px;
+				}
+			}
+		}
+		.doc-list-content {
+			height: 100%;
+			> span {
+				display: flex;
+				flex-direction: column-reverse;
+				height: 100%;
+				.ant-upload.ant-upload-drag .ant-upload {
+					padding: 0;
+				}
+				.ant-upload-list {
+					padding: 0 15px;
+				}
+			}
+		}
+		.doc-list-page {
+			// text-align: center;
+			background: #ffffff;
+			border: none;
+			border-radius: none;
+			.list-view-page {
+				display: block;
+				width: 100%;
+			}
+			&.cursor {
+				.ant-upload.ant-upload-drag {
+					cursor: pointer;
+				}
+			}
+			&.doc-drag-hover.ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-updoad-disabled) {
+				border: solid 2px @primary-color;
+			}
+			.ant-upload.ant-upload-drag {
+				text-align: left;
+				padding: 6px 0;
+				background: none;
+				border: none;
+				border-radius: 0;
+				cursor: auto;
+			}
+			.ant-upload.ant-upload-drag .ant-upload {
+				height: 100%;
+				padding: 0;
+			}
+			.ant-upload.ant-upload-disabled {
+				cursor: default;
+			}
+		}
+
+		.ant-upload.ant-upload-drag .ant-upload-drag-container {
+			display: block;
+			height: 100%;
+		}
+
+		.document-head {
+			display: flex;
+			align-items: center;
+			padding: 10px 20px 10px 38px;
+			border-bottom: 1px solid #f2f2f2;
+			.file-search {
+				flex: 1;
+				height: 36px;
+				padding: 0;
+			}
+			.file-checkbox {
+				margin-right: 10px;
+			}
+		}
+		.document-item .file-type svg {
+			color: @primary-color;
+		}
+	}
+}