@voplus/morpho-workspace 4.0.0 → 4.0.1

package/es/modules/notification/components/NotificationList/index.js

@@ -1,93 +1,93 @@
-import "./index.less";
-import { useNotification, useNotificationListEffect, useNotificationStore, } from "../../../../data/notification";
-import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data";
-import React, { useState } from "react";
-import { observe, useRenderOnChange } from "@voplus/morpho-ui";
-import AsideContent from "@voplus/morpho-ui/es/components/layout/AsideContent";
-import { CSSTransition } from "react-transition-group";
-import DocumentNotificationCard from "../DocumentNotificationCard";
-import ListView from "@voplus/morpho-ui/es/components/layout/ListView/ListView2";
-import PageHeader from "@voplus/morpho-ui/es/components/PageHeader";
-import PropertiesView from "@voplus/morpho-document-core/es/components/PropertiesView";
-import S from "string";
-import { runInAction } from "mobx";
-const NotificationList = (props) => {
-    const store = useNotificationStore();
-    const [asideContext] = useState(AsideContent.createContext());
-    // const list = useCreateListDataState<INotificaiton>({}, []);
-    const list = useCreateListDataState({ filterDefaults: { filters: filters() } }, [
-        props.status,
-    ]);
-    /** 如果 list.filters.options变更了就重渲染，使下一行的useNotificaitonListEffect 可以接收新参数*/
-    useRenderOnChange(() => list.filters.options);
-    /** 把ListDataState传给useNotificaitonListEffect,使之可以自動更新loading, hasmore. */
-    useNotificationListEffect(list, (result, total) => {
-        var _a;
-        list.union(result);
-        (_a = props.onTotal) === null || _a === void 0 ? void 0 : _a.call(props, total);
-    }, {
-        Total: true,
-        ...list.filters.options,
-    });
-    // try to load the active notification and add to list if it's not already there.
-    useNotification(props.active, {
-        onLoad: (item) => {
-            list.insert(item, 0);
-            if (item.status === "Unread") {
-                editStatus(item.id, "Read");
-            }
-            asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: item.content.documentId }), {
-                span: 12,
-            });
-        },
-    });
-    const header = (React.createElement(PageHeader, { titleView: `${firstToUpper(props.status)} Notifications`, addAble: false, quickSearch: true }));
-    return observe(() => (React.createElement(ListDataContext.Provider, { value: list },
-        React.createElement("div", { className: "my-space-notifications" },
-            React.createElement(AsideContent, { context: asideContext },
-                React.createElement(ListView, { headerProps: { header: header, sortable: false, addAble: false }, className: "notifications-list", renderItem: ({ item }) => {
-                        return (React.createElement(CSSTransition, { key: item.id, in: list.isRemoving(item.id) !== true, timeout: 300, classNames: "notification-card" },
-                            React.createElement(DocumentNotificationCard, { id: item.id, active: props.active === item.id ? true : false, onClick: (ev) => {
-                                    var _a;
-                                    const path = ev.nativeEvent.composedPath();
-                                    const visible = path.some((item) => item.className === "notification-card-content");
-                                    /** fix: notification card里的任何对话框(比如：pdf/file viewer quick view) 任何button 都按不了，一按就close */
-                                    if (visible) {
-                                        // asideContext?.openAside(<PropertiesView id={item.content.documentId} />, {
-                                        // 	span: 12,
-                                        // });
-                                        (_a = props.onClickItem) === null || _a === void 0 ? void 0 : _a.call(props, ev, item);
-                                    }
-                                }, onChangeStatus: (status) => editStatus(item.id, status) })));
-                    } }))))));
-    // 字符串首字母转大写
-    function firstToUpper(v) {
-        return v.trim().toLowerCase().replace(v[0], v[0].toUpperCase());
-    }
-    function filters() {
-        if (!props.status || props.status == "all")
-            return [];
-        return [
-            {
-                c: "Status",
-                o: "=",
-                l: "And",
-                v1: S(props.status).capitalize().toString(),
-            },
-        ];
-    }
-    function editStatus(id, status) {
-        runInAction(async () => {
-            var _a;
-            const item = store.items.get(id);
-            const old = item.status;
-            await store.edit(id, { data: { status: status }, error: "message" });
-            (_a = props.onItemStatusChanged) === null || _a === void 0 ? void 0 : _a.call(props, old, item);
-            if (props.status === "unread" && item.status === "Read")
-                return;
-            list.remove(item.id, { delay: 300 });
-        });
-    }
-};
-export default NotificationList;
+import "./index.less";
+import { useNotification, useNotificationListEffect, useNotificationStore, } from "../../../../data/notification";
+import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data";
+import React, { useState } from "react";
+import { observe, useRenderOnChange } from "@voplus/morpho-ui";
+import AsideContent from "@voplus/morpho-ui/es/components/layout/AsideContent";
+import { CSSTransition } from "react-transition-group";
+import DocumentNotificationCard from "../DocumentNotificationCard";
+import ListView from "@voplus/morpho-ui/es/components/layout/ListView/ListView2";
+import PageHeader from "@voplus/morpho-ui/es/components/PageHeader";
+import PropertiesView from "@voplus/morpho-document-core/es/components/PropertiesView";
+import S from "string";
+import { runInAction } from "mobx";
+const NotificationList = (props) => {
+    const store = useNotificationStore();
+    const [asideContext] = useState(AsideContent.createContext());
+    // const list = useCreateListDataState<INotificaiton>({}, []);
+    const list = useCreateListDataState({ filterDefaults: { filters: filters() } }, [
+        props.status,
+    ]);
+    /** 如果 list.filters.options变更了就重渲染，使下一行的useNotificaitonListEffect 可以接收新参数*/
+    useRenderOnChange(() => list.filters.options);
+    /** 把ListDataState传给useNotificaitonListEffect,使之可以自動更新loading, hasmore. */
+    useNotificationListEffect(list, (result, total) => {
+        var _a;
+        list.union(result);
+        (_a = props.onTotal) === null || _a === void 0 ? void 0 : _a.call(props, total);
+    }, {
+        Total: true,
+        ...list.filters.options,
+    });
+    // try to load the active notification and add to list if it's not already there.
+    useNotification(props.active, {
+        onLoad: (item) => {
+            list.insert(item, 0);
+            if (item.status === "Unread") {
+                editStatus(item.id, "Read");
+            }
+            asideContext === null || asideContext === void 0 ? void 0 : asideContext.openAside(React.createElement(PropertiesView, { id: item.content.documentId }), {
+                span: 12,
+            });
+        },
+    });
+    const header = (React.createElement(PageHeader, { titleView: `${firstToUpper(props.status)} Notifications`, addAble: false, quickSearch: true }));
+    return observe(() => (React.createElement(ListDataContext.Provider, { value: list },
+        React.createElement("div", { className: "my-space-notifications" },
+            React.createElement(AsideContent, { context: asideContext },
+                React.createElement(ListView, { headerProps: { header: header, sortable: false, addAble: false }, className: "notifications-list", renderItem: ({ item }) => {
+                        return (React.createElement(CSSTransition, { key: item.id, in: list.isRemoving(item.id) !== true, timeout: 300, classNames: "notification-card" },
+                            React.createElement(DocumentNotificationCard, { id: item.id, active: props.active === item.id ? true : false, onClick: (ev) => {
+                                    var _a;
+                                    const path = ev.nativeEvent.composedPath();
+                                    const visible = path.some((item) => item.className === "notification-card-content");
+                                    /** fix: notification card里的任何对话框(比如：pdf/file viewer quick view) 任何button 都按不了，一按就close */
+                                    if (visible) {
+                                        // asideContext?.openAside(<PropertiesView id={item.content.documentId} />, {
+                                        // 	span: 12,
+                                        // });
+                                        (_a = props.onClickItem) === null || _a === void 0 ? void 0 : _a.call(props, ev, item);
+                                    }
+                                }, onChangeStatus: (status) => editStatus(item.id, status) })));
+                    } }))))));
+    // 字符串首字母转大写
+    function firstToUpper(v) {
+        return v.trim().toLowerCase().replace(v[0], v[0].toUpperCase());
+    }
+    function filters() {
+        if (!props.status || props.status == "all")
+            return [];
+        return [
+            {
+                c: "Status",
+                o: "=",
+                l: "And",
+                v1: S(props.status).capitalize().toString(),
+            },
+        ];
+    }
+    function editStatus(id, status) {
+        runInAction(async () => {
+            var _a;
+            const item = store.items.get(id);
+            const old = item.status;
+            await store.edit(id, { data: { status: status }, error: "message" });
+            (_a = props.onItemStatusChanged) === null || _a === void 0 ? void 0 : _a.call(props, old, item);
+            if (props.status === "unread" && item.status === "Read")
+                return;
+            list.remove(item.id, { delay: 300 });
+        });
+    }
+};
+export default NotificationList;
 //# sourceMappingURL=index.js.map

package/es/modules/notification/components/NotificationList/index.less

@@ -1,32 +1,32 @@
-@import "~@voplus/morpho-theme/styles/index.less";
-
-:global {
-	.my-notifications {
-		padding: 0 !important;
-
-		.my-space-notifications {
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-
-			.notifications-list {
-				background-color: @background-color;
-			}
-
-			.list-view___gDzHz .list-view-header {
-				padding: 2em 0px 1em 0px;
-				margin: 0 24px;
-				width: calc(100% - 48px);
-			}
-		}
-	}
-
-	.notification-card-exit {
-		opacity: 1;
-	}
-
-	.notification-card-exit-active {
-		opacity: 0;
-		transition: opacity 300ms;
-	}
-}
+@import "~@voplus/morpho-theme/styles/index.less";
+
+:global {
+	.my-notifications {
+		padding: 0 !important;
+
+		.my-space-notifications {
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+
+			.notifications-list {
+				background-color: @background-color;
+			}
+
+			.list-view___gDzHz .list-view-header {
+				padding: 2em 0px 1em 0px;
+				margin: 0 24px;
+				width: calc(100% - 48px);
+			}
+		}
+	}
+
+	.notification-card-exit {
+		opacity: 1;
+	}
+
+	.notification-card-exit-active {
+		opacity: 0;
+		transition: opacity 300ms;
+	}
+}

package/es/modules/pin/components/MyPinned/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-declare const MyPinned: (props: {
-    active?: string | undefined;
-    /** Call back when an item has been clicked on the list. */
-    onClickItem?: ((id: string) => void) | undefined;
-}) => JSX.Element;
-export default MyPinned;
+/// <reference types="react" />
+declare const MyPinned: (props: {
+    active?: string | undefined;
+    /** Call back when an item has been clicked on the list. */
+    onClickItem?: ((id: string) => void) | undefined;
+}) => JSX.Element;
+export default MyPinned;

package/es/modules/pin/components/MyPinned/index.js

@@ -1,42 +1,42 @@
-import React, { useState } from "react";
-import { Scrollbars } from "react-custom-scrollbars";
-import { observe } from "@voplus/morpho-ui";
-import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data/ListDataContext";
-import { faExclamationCircle, faStar } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import AsideContent from "@voplus/morpho-ui/es/components/layout/AsideContent";
-import PropertiesView from "@voplus/morpho-document-core/es/components/PropertiesView";
-import PinnedCardList from "../PinnedCardList";
-import PageHeader from "@voplus/morpho-ui/es/components/PageHeader";
-import styles from "./index.less";
-const MyPinned = (props) => {
-    const [asideContext] = useState(AsideContent.createContext());
-    const list = useCreateListDataState({}, []);
-    return observe(() => (React.createElement(AsideContent, { context: asideContext },
-        React.createElement(ListDataContext.Provider, { value: list },
-            React.createElement("div", { className: styles["my-pinned"] },
-                React.createElement("div", { className: "my-pinned-title" },
-                    React.createElement(PageHeader, { addAble: false, titleView: "My Pinned", sortable: true, quickSearch: true })),
-                React.createElement("div", { className: "pinned-content" },
-                    React.createElement(Scrollbars, { autoHide: true },
-                        React.createElement("div", { className: "pinned-list" },
-                            React.createElement("span", { className: "pinned-list-title text-gray-700" },
-                                React.createElement(FAIcon, { icon: faStar, className: "margin-right-10" }),
-                                "Starred"),
-                            React.createElement(PinnedCardList, { filterStatus: "Star", onItemClick: onItemClick })),
-                        React.createElement("div", { className: "pinned-list" },
-                            React.createElement("span", { className: "pinned-list-title text-gray-700" },
-                                React.createElement(FAIcon, { icon: faExclamationCircle, className: "margin-right-10" }),
-                                "Urgent"),
-                            React.createElement(PinnedCardList, { filterStatus: "Urgent", onItemClick: onItemClick })),
-                        React.createElement("div", { className: "pinned-list" },
-                            React.createElement("span", { className: "pinned-list-title text-gray-700" }, "Others"),
-                            React.createElement(PinnedCardList, { filterStatus: "None", onItemClick: onItemClick })))))))));
-    function onItemClick(id) {
-        var _a;
-        asideContext.openAside(React.createElement(PropertiesView, { id: id }), { span: 12 });
-        (_a = props.onClickItem) === null || _a === void 0 ? void 0 : _a.call(props, id);
-    }
-};
-export default MyPinned;
+import React, { useState } from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+import { observe } from "@voplus/morpho-ui";
+import { ListDataContext, useCreateListDataState } from "@voplus/morpho-ui/es/data/ListDataContext";
+import { faExclamationCircle, faStar } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import AsideContent from "@voplus/morpho-ui/es/components/layout/AsideContent";
+import PropertiesView from "@voplus/morpho-document-core/es/components/PropertiesView";
+import PinnedCardList from "../PinnedCardList";
+import PageHeader from "@voplus/morpho-ui/es/components/PageHeader";
+import styles from "./index.less";
+const MyPinned = (props) => {
+    const [asideContext] = useState(AsideContent.createContext());
+    const list = useCreateListDataState({}, []);
+    return observe(() => (React.createElement(AsideContent, { context: asideContext },
+        React.createElement(ListDataContext.Provider, { value: list },
+            React.createElement("div", { className: styles["my-pinned"] },
+                React.createElement("div", { className: "my-pinned-title" },
+                    React.createElement(PageHeader, { addAble: false, titleView: "My Pinned", sortable: true, quickSearch: true })),
+                React.createElement("div", { className: "pinned-content" },
+                    React.createElement(Scrollbars, { autoHide: true },
+                        React.createElement("div", { className: "pinned-list" },
+                            React.createElement("span", { className: "pinned-list-title text-gray-700" },
+                                React.createElement(FAIcon, { icon: faStar, className: "margin-right-10" }),
+                                "Starred"),
+                            React.createElement(PinnedCardList, { filterStatus: "Star", onItemClick: onItemClick })),
+                        React.createElement("div", { className: "pinned-list" },
+                            React.createElement("span", { className: "pinned-list-title text-gray-700" },
+                                React.createElement(FAIcon, { icon: faExclamationCircle, className: "margin-right-10" }),
+                                "Urgent"),
+                            React.createElement(PinnedCardList, { filterStatus: "Urgent", onItemClick: onItemClick })),
+                        React.createElement("div", { className: "pinned-list" },
+                            React.createElement("span", { className: "pinned-list-title text-gray-700" }, "Others"),
+                            React.createElement(PinnedCardList, { filterStatus: "None", onItemClick: onItemClick })))))))));
+    function onItemClick(id) {
+        var _a;
+        asideContext.openAside(React.createElement(PropertiesView, { id: id }), { span: 12 });
+        (_a = props.onClickItem) === null || _a === void 0 ? void 0 : _a.call(props, id);
+    }
+};
+export default MyPinned;
 //# sourceMappingURL=index.js.map

package/es/modules/pin/components/MyPinned/index.less

@@ -1,34 +1,34 @@
-.my-pinned {
-	height: 100%;
-	background-color: #f5f9fc;
-
-	:global {
-		.my-pinned-title {
-			padding: 30px 20px 0 40px;
-		}
-
-		.pinned-content {
-			height: calc(100% - 76px);
-
-			.pinned-list {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-
-				.pinned-list-title {
-					margin: 40px 0 16px 40px;
-					height: 26px;
-					font-size: 20px;
-					font-family: Microsoft YaHei;
-					font-weight: bold;
-					line-height: 26px;
-					opacity: 1;
-				}
-
-				.custom-icon-list {
-					padding: 0 12px;
-				}
-			}
-		}
-	}
-}
+.my-pinned {
+	height: 100%;
+	background-color: #f5f9fc;
+
+	:global {
+		.my-pinned-title {
+			padding: 30px 20px 0 40px;
+		}
+
+		.pinned-content {
+			height: calc(100% - 76px);
+
+			.pinned-list {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+
+				.pinned-list-title {
+					margin: 40px 0 16px 40px;
+					height: 26px;
+					font-size: 20px;
+					font-family: Microsoft YaHei;
+					font-weight: bold;
+					line-height: 26px;
+					opacity: 1;
+				}
+
+				.custom-icon-list {
+					padding: 0 12px;
+				}
+			}
+		}
+	}
+}

package/es/modules/pin/components/PinnedCardList/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-declare const PinnedCardList: (props: {
-    filterStatus: "Star" | "Urgent" | "None";
-    onItemClick?: ((id: string) => void) | undefined;
-}) => JSX.Element;
-export default PinnedCardList;
+/// <reference types="react" />
+declare const PinnedCardList: (props: {
+    filterStatus: "Star" | "Urgent" | "None";
+    onItemClick?: ((id: string) => void) | undefined;
+}) => JSX.Element;
+export default PinnedCardList;

package/es/modules/pin/components/PinnedCardList/index.js

@@ -1,75 +1,75 @@
-import { useDocumentListEffect, useMetaStore } from "@voplus/morpho-document-core";
-import React, { useState } from "react";
-import { observe, useAutorunEffect, useRenderOnChange } from "@voplus/morpho-ui";
-import { useCreateListDataState, useListDataContext } from "@voplus/morpho-ui/es/data";
-import CustomIcon from "@voplus/morpho-ui/es/controls/CustomIconList/CustomIcon";
-import { Empty } from "antd";
-import { State } from "./state";
-import { runInAction } from "mobx";
-import { useAutoUpdateListData } from "@voplus/morpho-document-core/es/data/DocumentStore/hooks/pin-events";
-const PinnedCardList = (props) => {
-    const [active, setActive] = useState("");
-    const [state] = useState(new State());
-    let filters = [];
-    let sort = {};
-    const meta = useMetaStore();
-    const list = useListDataContext();
-    useAutorunEffect(() => {
-        var _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if ((_d = (_c = list.filters) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.Filters) {
-            filters = (_f = (_e = list.filters) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.Filters;
-            const result = filters.length === ((_g = state.filters) === null || _g === void 0 ? void 0 : _g.length) &&
-                filters.every((a) => state.filters.some((b) => a.c === b.c && a.v1 === b.v1)) &&
-                state.filters.every((_b) => filters.some((_a) => _a.c === _b.c && _a.v1 === _b.v1));
-            if (!result) {
-                docList.reset();
-                runInAction(() => {
-                    // should use useOnRenderChange
-                    docList["_loading"] = true;
-                    state.filters = filters;
-                });
-            }
-        }
-        if ((_j = (_h = list.filters) === null || _h === void 0 ? void 0 : _h.options) === null || _j === void 0 ? void 0 : _j.Sort) {
-            sort = (_l = (_k = list.filters) === null || _k === void 0 ? void 0 : _k.options) === null || _l === void 0 ? void 0 : _l.Sort;
-            runInAction(() => {
-                docList.triggerSort(sort);
-                state.Sort = sort;
-            });
-        }
-    });
-    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
-    const docList = useCreateListDataState({
-        filterDefaults: {
-            filters: [],
-        },
-    }, []);
-    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
-    useRenderOnChange(() => docList.filters.options);
-    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
-    useDocumentListEffect(docList, (result) => docList.union(result), {
-        ...docList.filters.options,
-        Sort: state.Sort,
-        Filters: [
-            ...state.filters,
-            { c: "Pin", l: "And", o: "=", v1: "True" },
-            {
-                c: "Flag",
-                o: "=",
-                l: "And",
-                v1: props.filterStatus,
-            },
-        ],
-    });
-    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
-    useAutoUpdateListData(docList, (d) => d.flag === props.filterStatus);
-    // return observe(() => <CustomIconList list={list.data as any} onClickItem={onItemClick} />);
-    return observe(() => (React.createElement("div", { className: "custom-icon-list" }, docList.data.length !== 0 ? (docList.data.map((item) => (React.createElement(CustomIcon, { key: item.id, id: item.id, name: item.name, icon: meta.getIcon(item), onClickItem: onClickItem, className: active === item.id ? "active" : "" })))) : (React.createElement(Empty, { className: "empty-style" })))));
-    function onClickItem(id) {
-        var _c;
-        setActive(id);
-        (_c = props.onItemClick) === null || _c === void 0 ? void 0 : _c.call(props, id);
-    }
-};
-export default PinnedCardList;
+import { useDocumentListEffect, useMetaStore } from "@voplus/morpho-document-core";
+import React, { useState } from "react";
+import { observe, useAutorunEffect, useRenderOnChange } from "@voplus/morpho-ui";
+import { useCreateListDataState, useListDataContext } from "@voplus/morpho-ui/es/data";
+import CustomIcon from "@voplus/morpho-ui/es/controls/CustomIconList/CustomIcon";
+import { Empty } from "antd";
+import { State } from "./state";
+import { runInAction } from "mobx";
+import { useAutoUpdateListData } from "@voplus/morpho-document-core/es/data/DocumentStore/hooks/pin-events";
+const PinnedCardList = (props) => {
+    const [active, setActive] = useState("");
+    const [state] = useState(new State());
+    let filters = [];
+    let sort = {};
+    const meta = useMetaStore();
+    const list = useListDataContext();
+    useAutorunEffect(() => {
+        var _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if ((_d = (_c = list.filters) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.Filters) {
+            filters = (_f = (_e = list.filters) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.Filters;
+            const result = filters.length === ((_g = state.filters) === null || _g === void 0 ? void 0 : _g.length) &&
+                filters.every((a) => state.filters.some((b) => a.c === b.c && a.v1 === b.v1)) &&
+                state.filters.every((_b) => filters.some((_a) => _a.c === _b.c && _a.v1 === _b.v1));
+            if (!result) {
+                docList.reset();
+                runInAction(() => {
+                    // should use useOnRenderChange
+                    docList["_loading"] = true;
+                    state.filters = filters;
+                });
+            }
+        }
+        if ((_j = (_h = list.filters) === null || _h === void 0 ? void 0 : _h.options) === null || _j === void 0 ? void 0 : _j.Sort) {
+            sort = (_l = (_k = list.filters) === null || _k === void 0 ? void 0 : _k.options) === null || _l === void 0 ? void 0 : _l.Sort;
+            runInAction(() => {
+                docList.triggerSort(sort);
+                state.Sort = sort;
+            });
+        }
+    });
+    /** 建立 ListView 和useDocumentListEffect所需的ListDataState. 会根据state.id重建所以不需reset. */
+    const docList = useCreateListDataState({
+        filterDefaults: {
+            filters: [],
+        },
+    }, []);
+    /** 如果 list.filters.options变更了就重渲染，使下一行的useDocumentListEffect 可以接收新参数*/
+    useRenderOnChange(() => docList.filters.options);
+    /** 把ListDataState传给useDocumentListEffect,使之可以自動更新loading, hasmore. */
+    useDocumentListEffect(docList, (result) => docList.union(result), {
+        ...docList.filters.options,
+        Sort: state.Sort,
+        Filters: [
+            ...state.filters,
+            { c: "Pin", l: "And", o: "=", v1: "True" },
+            {
+                c: "Flag",
+                o: "=",
+                l: "And",
+                v1: props.filterStatus,
+            },
+        ],
+    });
+    /** useOnNewDocument, useOnDeleteDocument的sugar syntax 自動更新list. */
+    useAutoUpdateListData(docList, (d) => d.flag === props.filterStatus);
+    // return observe(() => <CustomIconList list={list.data as any} onClickItem={onItemClick} />);
+    return observe(() => (React.createElement("div", { className: "custom-icon-list" }, docList.data.length !== 0 ? (docList.data.map((item) => (React.createElement(CustomIcon, { key: item.id, id: item.id, name: item.name, icon: meta.getIcon(item), onClickItem: onClickItem, className: active === item.id ? "active" : "" })))) : (React.createElement(Empty, { className: "empty-style" })))));
+    function onClickItem(id) {
+        var _c;
+        setActive(id);
+        (_c = props.onItemClick) === null || _c === void 0 ? void 0 : _c.call(props, id);
+    }
+};
+export default PinnedCardList;
 //# sourceMappingURL=index.js.map

package/es/modules/pin/components/PinnedCardList/state.d.ts

@@ -1,8 +1,8 @@
-import { FilterOption, SortParameters } from "@voplus/morpho-data/es/types";
-export declare class State {
-    /** filters */
-    filters: FilterOption[];
-    /** Sort */
-    Sort: SortParameters;
-    constructor();
-}
+import { FilterOption, SortParameters } from "@voplus/morpho-data/es/types";
+export declare class State {
+    /** filters */
+    filters: FilterOption[];
+    /** Sort */
+    Sort: SortParameters;
+    constructor();
+}