@canvas-components/react-list-table 0.3.11 → 0.3.13

package/README.md

@@ -2,6 +2,8 @@
 
 `@canvas-components/react-list-table` 是 `@canvas-components/list-table` 的 React 适配层，负责把原生 Canvas 表格接入 React 应用，并提供更接近业务开发习惯的组件化入口。
 
+通过顶层 `loading` 属性控制数据加载状态：`<ReactListTable loading={loading} dataSource={rows} columns={columns} />`。加载期间展示加载提示并保留汇总标题；加载完成后，组件自动计算并统一展示完整汇总结果。服务端汇总可通过 `query.summaryValues` 提供，业务侧无需单独管理汇总计算状态。
+
 ## 示例效果
 
 ![React List Table 基础示例](./assets/examples/basic.gif)

package/dist/index.cjs

@@ -440,7 +440,7 @@ function MenuAction(props) {
   );
 }
 function MenuSubmenu(props) {
-  const { label, items, footer, children, minWidth = 220 } = props;
+  const { label, items, header, footer, children, minWidth = 220 } = props;
   const menuItems = items.filter((item) => item.onClick || item.disabled);
   const reserveSelectionIcon = menuItems.some(
     (item) => typeof item.selected === "boolean"
@@ -448,7 +448,7 @@ function MenuSubmenu(props) {
   const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const closeTimerRef = react.useRef(null);
-  if (!menuItems.length && !footer && !children) {
+  if (!menuItems.length && !header && !footer && !children) {
     return null;
   }
   const clearCloseTimer = () => {
@@ -530,6 +530,7 @@ function MenuSubmenu(props) {
                   scheduleClose();
                 },
                 children: [
+                  header,
                   menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
                     item.separatorBefore ? /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, {}) : null,
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1165,6 +1166,7 @@ function CustomSelectionRow(props) {
 }
 function SummaryMenu(props) {
   const { request } = props;
+  const [title, setTitle] = react.useState(request.summaryTitle ?? "");
   const [precision, setPrecision] = react.useState(
     request.summaryPrecision ?? null
   );
@@ -1175,11 +1177,13 @@ function SummaryMenu(props) {
     request.summaryPreserveTrailingZeros ?? false
   );
   react.useEffect(() => {
+    setTitle(request.summaryTitle ?? "");
     setPrecision(request.summaryPrecision ?? null);
     setRoundingMode(request.summaryRoundingMode ?? "round");
     setPreserveTrailingZeros(request.summaryPreserveTrailingZeros ?? false);
   }, [
     request.summaryColumnKey,
+    request.summaryTitle,
     request.summaryPrecision,
     request.summaryRoundingMode,
     request.summaryPreserveTrailingZeros
@@ -1202,12 +1206,49 @@ function SummaryMenu(props) {
     {
       label: "\u6C47\u603B\u65B9\u5F0F",
       minWidth: 268,
-      items: summaryTypes.map((item) => ({
-        key: item.key,
-        label: item.label,
-        selected: request.summaryType === item.value,
-        onClick: () => request.onChangeSummaryType?.(item.value)
-      })),
+      header: request.onChangeSummaryTitle ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "56px 1fr",
+            gap: 8,
+            alignItems: "center",
+            padding: "2px 10px 10px",
+            marginBottom: 4,
+            borderBottom: "1px solid #e5e7eb"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u6807\u9898\uFF1A" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.ReactInput,
+              {
+                value: title,
+                placeholder: "\u8BF7\u8F93\u5165\u6807\u9898",
+                onChange: (event) => {
+                  const value = event.target.value;
+                  setTitle(value);
+                  request.onChangeSummaryTitle?.(value);
+                }
+              }
+            )
+          ]
+        }
+      ) : void 0,
+      items: [
+        ...summaryTypes.map((item) => ({
+          key: item.key,
+          label: item.label,
+          selected: request.summaryType === item.value,
+          onClick: () => request.onChangeSummaryType?.(item.value)
+        })),
+        {
+          key: "clear-summary",
+          label: "\u53D6\u6D88\u6C47\u603B",
+          separatorBefore: true,
+          onClick: request.onClearSummary
+        }
+      ],
       footer: request.onChangeSummaryPrecision || request.onChangeSummaryRoundingMode || request.onChangeSummaryPreserveTrailingZeros ? /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -3831,6 +3872,7 @@ function ReactListTableInner(props, ref) {
     rowKey,
     columns,
     dataSource,
+    loading,
     onRow,
     theme,
     striped,
@@ -3842,6 +3884,7 @@ function ReactListTableInner(props, ref) {
     summaryRowHeight,
     overscanRowCount,
     query,
+    experimental,
     rowSelector,
     rowSelection,
     expandable,
@@ -3901,6 +3944,7 @@ function ReactListTableInner(props, ref) {
       rowKey,
       columns: resolvedColumns,
       dataSource,
+      loading,
       onRow,
       theme,
       striped,
@@ -3912,6 +3956,7 @@ function ReactListTableInner(props, ref) {
       summaryRowHeight: resolvedSummaryRowHeight,
       overscanRowCount,
       query,
+      experimental,
       rowSelector,
       rowSelection,
       expandable,
@@ -3950,6 +3995,7 @@ function ReactListTableInner(props, ref) {
     rowKey,
     resolvedColumns,
     dataSource,
+    loading,
     onRow,
     theme,
     striped,
@@ -3961,6 +4007,7 @@ function ReactListTableInner(props, ref) {
     resolvedSummaryRowHeight,
     overscanRowCount,
     query,
+    experimental,
     rowSelector,
     rowSelection,
     expandable,
@@ -3993,9 +4040,7 @@ function ReactListTableInner(props, ref) {
     closeDangerConfirmRequest
   } = useReactListTableState(options);
   const hasPagination = paginationConfig != null;
-  const paginationLayout = resolveReactListTablePaginationLayout(
-    resolvedRowHeight
-  );
+  const paginationLayout = resolveReactListTablePaginationLayout(resolvedRowHeight);
   react.useImperativeHandle(
     ref,
     () => ({
@@ -4012,7 +4057,8 @@ function ReactListTableInner(props, ref) {
       },
       resetFilter: () => {
         tableRef.current?.resetFilter();
-      }
+      },
+      retryQuery: () => tableRef.current?.retryQuery() ?? false
     }),
     []
   );
@@ -4125,7 +4171,7 @@ function ReactListTableInner(props, ref) {
               )
             }
           ),
-          loadingRequest ? /* @__PURE__ */ jsxRuntime.jsx(
+          loading || loadingRequest ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               style: {
@@ -4140,7 +4186,7 @@ function ReactListTableInner(props, ref) {
                 pointerEvents: "auto",
                 cursor: "progress"
               },
-              children: loadingRequest.text ?? "\u5904\u7406\u4E2D\u2026"
+              children: loading ? "\u6570\u636E\u52A0\u8F7D\u4E2D\u2026" : loadingRequest?.text ?? "\u5904\u7406\u4E2D\u2026"
             }
           ) : null
         ]
@@ -4238,8 +4284,25 @@ function applyManagedColumnOrder(columns, orderedKeys) {
 function resolveColumnKey(column) {
   return String(column.key ?? column.dataIndex);
 }
-var ReactListTable = react.forwardRef(ReactListTableInner);
+var ReactListTable = react.forwardRef(
+  ReactListTableInner
+);
+ReactListTable.EXPAND_COLUMN = listTable.EXPAND_COLUMN;
+ReactListTable.SELECTION_COLUMN = listTable.SELECTION_COLUMN;
+ReactListTable.ROW_SELECTION_COLUMN = listTable.ROW_SELECTION_COLUMN;
 
+Object.defineProperty(exports, "EXPAND_COLUMN", {
+  enumerable: true,
+  get: function () { return listTable.EXPAND_COLUMN; }
+});
+Object.defineProperty(exports, "ROW_SELECTION_COLUMN", {
+  enumerable: true,
+  get: function () { return listTable.ROW_SELECTION_COLUMN; }
+});
+Object.defineProperty(exports, "SELECTION_COLUMN", {
+  enumerable: true,
+  get: function () { return listTable.SELECTION_COLUMN; }
+});
 exports.ReactListTable = ReactListTable;
 exports.ReactListTableDebugProvider = ReactListTableDebugProvider;
 //# sourceMappingURL=index.cjs.map