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

package/README.md

@@ -289,6 +289,25 @@ export function DemoTable() {
 | `getFullscreenNode`        | `() => HTMLElement \| null`  | 自定义全屏节点                     |
 | `extra`                    | `ReactNode`                  | 工具栏右侧额外内容                 |
 
+## 统一切换调试模式
+
+`ReactListTableDebugProvider` 可为后代中的全部 `ReactListTable` 同步开启核心调试模式，并默认显示表头、表体、固定列分割线、命中区域和表头操作区。表格自身通过 `debug` 传入的其他选项仍会保留，也可以显式关闭某个可视化项：
+
+```tsx
+import {
+  ReactListTable,
+  ReactListTableDebugProvider,
+} from "@canvas-components/react-list-table";
+
+<ReactListTableDebugProvider enabled={statsEnabled}>
+  <ReactListTable
+    columns={columns}
+    dataSource={dataSource}
+    debug={{ showBodyBounds: true }}
+  />
+</ReactListTableDebugProvider>;
+```
+
 ## 方法说明
 
 ### `ReactListTableRef`

package/dist/index.cjs

@@ -3039,11 +3039,34 @@ function ReactTableFilterPanelView(props) {
     }
   );
 }
+
+// src/components/react-list-table-layout.ts
+function resolveReactListTablePaginationLayout(density) {
+  if (typeof density === "number" && density <= 26) {
+    return { size: "small", height: 32, paddingTop: 8 };
+  }
+  if (typeof density === "number" && density >= 48) {
+    return { size: "large", height: 52, paddingTop: 12 };
+  }
+  return { size: "middle", height: 44, paddingTop: 12 };
+}
+function resolveReactListTableHostStyle(hasPagination, paginationHeight = resolveReactListTablePaginationLayout().height) {
+  return {
+    position: "relative",
+    flex: 1,
+    minWidth: 0,
+    width: "100%",
+    minHeight: 0,
+    boxSizing: "border-box",
+    paddingBottom: hasPagination ? paginationHeight : void 0
+  };
+}
 function ReactTablePaginationView(props) {
-  const { config } = props;
+  const { config, density } = props;
   if (!config) {
     return null;
   }
+  const layout = resolveReactListTablePaginationLayout(density);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3053,11 +3076,14 @@ function ReactTablePaginationView(props) {
         bottom: 0,
         display: "flex",
         justifyContent: "flex-end",
-        paddingTop: 12
+        paddingTop: layout.paddingTop,
+        height: layout.height,
+        boxSizing: "border-box"
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.ReactPagination,
         {
+          size: layout.size,
           current: config.current,
           total: config.total,
           pageSize: config.pageSize,
@@ -3769,6 +3795,29 @@ function buildListTableOptions(props) {
     } : query
   };
 }
+var ReactListTableDebugContext = react.createContext(false);
+var INHERITED_DEBUG_DEFAULTS = {
+  enabled: true,
+  showHeaderBounds: true,
+  showBodyBounds: true,
+  showFixedSplitLines: true,
+  showHitTarget: true,
+  showHeaderActionOverlay: true
+};
+function ReactListTableDebugProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactListTableDebugContext.Provider, { value: props.enabled, children: props.children });
+}
+function useReactListTableDebugEnabled() {
+  return react.useContext(ReactListTableDebugContext);
+}
+function resolveReactListTableDebugOptions(debug, inheritedEnabled) {
+  if (!inheritedEnabled) return debug;
+  return {
+    ...INHERITED_DEBUG_DEFAULTS,
+    ...debug,
+    enabled: true
+  };
+}
 function ReactListTableInner(props, ref) {
   const {
     className,
@@ -3809,6 +3858,11 @@ function ReactListTableInner(props, ref) {
     title,
     toolbar
   } = props;
+  const inheritedDebugEnabled = useReactListTableDebugEnabled();
+  const resolvedDebug = react.useMemo(
+    () => resolveReactListTableDebugOptions(debug, inheritedDebugEnabled),
+    [debug, inheritedDebugEnabled]
+  );
   const shellRef = react.useRef(null);
   const [isFullscreen, setIsFullscreen] = react.useState(false);
   const [densityOverride, setDensityOverride] = react.useState(null);
@@ -3870,7 +3924,7 @@ function ReactListTableInner(props, ref) {
       draggable,
       tableId,
       rowDrag,
-      debug
+      debug: resolvedDebug
     });
     const fullscreenSize = resolveFullscreenTableSize(
       nextOptions.width,
@@ -3919,7 +3973,7 @@ function ReactListTableInner(props, ref) {
     draggable,
     tableId,
     rowDrag,
-    debug,
+    resolvedDebug,
     isFullscreen,
     columnConfigRevision
   ]);
@@ -3939,6 +3993,9 @@ function ReactListTableInner(props, ref) {
     closeDangerConfirmRequest
   } = useReactListTableState(options);
   const hasPagination = paginationConfig != null;
+  const paginationLayout = resolveReactListTablePaginationLayout(
+    resolvedRowHeight
+  );
   react.useImperativeHandle(
     ref,
     () => ({
@@ -3973,7 +4030,6 @@ function ReactListTableInner(props, ref) {
           position: "relative",
           display: "flex",
           flexDirection: "column",
-          paddingBottom: hasPagination ? 44 : void 0,
           ...style
         },
         children: [
@@ -4056,8 +4112,17 @@ function ReactListTableInner(props, ref) {
             {
               ref: containerRef,
               className: "react-list-table-host",
-              style: { flex: 1, minWidth: 0, width: "100%", minHeight: 0 },
-              children: /* @__PURE__ */ jsxRuntime.jsx(ReactTablePaginationView, { config: paginationConfig })
+              style: resolveReactListTableHostStyle(
+                hasPagination,
+                paginationLayout.height
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ReactTablePaginationView,
+                {
+                  config: paginationConfig,
+                  density: resolvedRowHeight
+                }
+              )
             }
           ),
           loadingRequest ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -4176,5 +4241,6 @@ function resolveColumnKey(column) {
 var ReactListTable = react.forwardRef(ReactListTableInner);
 
 exports.ReactListTable = ReactListTable;
+exports.ReactListTableDebugProvider = ReactListTableDebugProvider;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map