@canvas-components/react-list-table 0.3.10 → 0.3.12

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode, ForwardedRef } from 'react';
+import { CSSProperties, ReactNode, ForwardedRef, PropsWithChildren } from 'react';
 import { ListTableOptions, ListTableQueryChange, ListTableExportXlsxOptions, ListTableScrollToOptions, ListTable, ListTableColumn, ListTablePaginationOptions, ListTableQueryOptions, ListTableRowSelectionOptions } from '@canvas-components/list-table';
 
 interface ReactListTableScrollConfig {
@@ -88,4 +88,16 @@ declare const ReactListTable: <RecordType = Record<string, unknown>>(props: Reac
     ref?: ForwardedRef<ReactListTableRef<RecordType>>;
 }) => ReturnType<typeof ReactListTableInner>;
 
-export { ReactListTable, type ReactListTableColumnType, type ReactListTableColumnsType, type ReactListTableLocale, type ReactListTablePagination, type ReactListTableProps, type ReactListTableQuery, type ReactListTableRef, type ReactListTableRowSelection, type ReactListTableScrollConfig, type ReactListTableTableProps, type ReactListTableToolbarOptions };
+/** ReactListTable 调试模式上下文属性。 */
+interface ReactListTableDebugProviderProps extends PropsWithChildren {
+    enabled: boolean;
+}
+/**
+ * 为后代 ReactListTable 统一切换核心调试模式。
+ *
+ * @param props 上下文属性。
+ * @returns 调试模式上下文节点。
+ */
+declare function ReactListTableDebugProvider(props: ReactListTableDebugProviderProps): react.JSX.Element;
+
+export { ReactListTable, type ReactListTableColumnType, type ReactListTableColumnsType, ReactListTableDebugProvider, type ReactListTableDebugProviderProps, type ReactListTableLocale, type ReactListTablePagination, type ReactListTableProps, type ReactListTableQuery, type ReactListTableRef, type ReactListTableRowSelection, type ReactListTableScrollConfig, type ReactListTableTableProps, type ReactListTableToolbarOptions };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode, ForwardedRef } from 'react';
+import { CSSProperties, ReactNode, ForwardedRef, PropsWithChildren } from 'react';
 import { ListTableOptions, ListTableQueryChange, ListTableExportXlsxOptions, ListTableScrollToOptions, ListTable, ListTableColumn, ListTablePaginationOptions, ListTableQueryOptions, ListTableRowSelectionOptions } from '@canvas-components/list-table';
 
 interface ReactListTableScrollConfig {
@@ -88,4 +88,16 @@ declare const ReactListTable: <RecordType = Record<string, unknown>>(props: Reac
     ref?: ForwardedRef<ReactListTableRef<RecordType>>;
 }) => ReturnType<typeof ReactListTableInner>;
 
-export { ReactListTable, type ReactListTableColumnType, type ReactListTableColumnsType, type ReactListTableLocale, type ReactListTablePagination, type ReactListTableProps, type ReactListTableQuery, type ReactListTableRef, type ReactListTableRowSelection, type ReactListTableScrollConfig, type ReactListTableTableProps, type ReactListTableToolbarOptions };
+/** ReactListTable 调试模式上下文属性。 */
+interface ReactListTableDebugProviderProps extends PropsWithChildren {
+    enabled: boolean;
+}
+/**
+ * 为后代 ReactListTable 统一切换核心调试模式。
+ *
+ * @param props 上下文属性。
+ * @returns 调试模式上下文节点。
+ */
+declare function ReactListTableDebugProvider(props: ReactListTableDebugProviderProps): react.JSX.Element;
+
+export { ReactListTable, type ReactListTableColumnType, type ReactListTableColumnsType, ReactListTableDebugProvider, type ReactListTableDebugProviderProps, type ReactListTableLocale, type ReactListTablePagination, type ReactListTableProps, type ReactListTableQuery, type ReactListTableRef, type ReactListTableRowSelection, type ReactListTableScrollConfig, type ReactListTableTableProps, type ReactListTableToolbarOptions };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState, useMemo, useImperativeHandle, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import { createContext, forwardRef, useMemo, useRef, useState, useImperativeHandle, useContext, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { createPortal } from 'react-dom';
 import { ReactImagePreview, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactInputNumber, ReactCheckbox, ReactAutoComplete, ReactColorPicker, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange } from '@canvas-components/react-components';
 import { resetListTableStoredColumnConfig, ListTable } from '@canvas-components/list-table';
@@ -3037,11 +3037,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__ */ jsx(
     "div",
     {
@@ -3051,11 +3074,14 @@ function ReactTablePaginationView(props) {
         bottom: 0,
         display: "flex",
         justifyContent: "flex-end",
-        paddingTop: 12
+        paddingTop: layout.paddingTop,
+        height: layout.height,
+        boxSizing: "border-box"
       },
       children: /* @__PURE__ */ jsx(
         ReactPagination,
         {
+          size: layout.size,
           current: config.current,
           total: config.total,
           pageSize: config.pageSize,
@@ -3767,6 +3793,29 @@ function buildListTableOptions(props) {
     } : query
   };
 }
+var ReactListTableDebugContext = createContext(false);
+var INHERITED_DEBUG_DEFAULTS = {
+  enabled: true,
+  showHeaderBounds: true,
+  showBodyBounds: true,
+  showFixedSplitLines: true,
+  showHitTarget: true,
+  showHeaderActionOverlay: true
+};
+function ReactListTableDebugProvider(props) {
+  return /* @__PURE__ */ jsx(ReactListTableDebugContext.Provider, { value: props.enabled, children: props.children });
+}
+function useReactListTableDebugEnabled() {
+  return useContext(ReactListTableDebugContext);
+}
+function resolveReactListTableDebugOptions(debug, inheritedEnabled) {
+  if (!inheritedEnabled) return debug;
+  return {
+    ...INHERITED_DEBUG_DEFAULTS,
+    ...debug,
+    enabled: true
+  };
+}
 function ReactListTableInner(props, ref) {
   const {
     className,
@@ -3807,6 +3856,11 @@ function ReactListTableInner(props, ref) {
     title,
     toolbar
   } = props;
+  const inheritedDebugEnabled = useReactListTableDebugEnabled();
+  const resolvedDebug = useMemo(
+    () => resolveReactListTableDebugOptions(debug, inheritedDebugEnabled),
+    [debug, inheritedDebugEnabled]
+  );
   const shellRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [densityOverride, setDensityOverride] = useState(null);
@@ -3868,7 +3922,7 @@ function ReactListTableInner(props, ref) {
       draggable,
       tableId,
       rowDrag,
-      debug
+      debug: resolvedDebug
     });
     const fullscreenSize = resolveFullscreenTableSize(
       nextOptions.width,
@@ -3917,7 +3971,7 @@ function ReactListTableInner(props, ref) {
     draggable,
     tableId,
     rowDrag,
-    debug,
+    resolvedDebug,
     isFullscreen,
     columnConfigRevision
   ]);
@@ -3937,6 +3991,9 @@ function ReactListTableInner(props, ref) {
     closeDangerConfirmRequest
   } = useReactListTableState(options);
   const hasPagination = paginationConfig != null;
+  const paginationLayout = resolveReactListTablePaginationLayout(
+    resolvedRowHeight
+  );
   useImperativeHandle(
     ref,
     () => ({
@@ -3971,7 +4028,6 @@ function ReactListTableInner(props, ref) {
           position: "relative",
           display: "flex",
           flexDirection: "column",
-          paddingBottom: hasPagination ? 44 : void 0,
           ...style
         },
         children: [
@@ -4054,8 +4110,17 @@ function ReactListTableInner(props, ref) {
             {
               ref: containerRef,
               className: "react-list-table-host",
-              style: { flex: 1, minWidth: 0, width: "100%", minHeight: 0 },
-              children: /* @__PURE__ */ jsx(ReactTablePaginationView, { config: paginationConfig })
+              style: resolveReactListTableHostStyle(
+                hasPagination,
+                paginationLayout.height
+              ),
+              children: /* @__PURE__ */ jsx(
+                ReactTablePaginationView,
+                {
+                  config: paginationConfig,
+                  density: resolvedRowHeight
+                }
+              )
             }
           ),
           loadingRequest ? /* @__PURE__ */ jsx(
@@ -4173,6 +4238,6 @@ function resolveColumnKey(column) {
 }
 var ReactListTable = forwardRef(ReactListTableInner);
 
-export { ReactListTable };
+export { ReactListTable, ReactListTableDebugProvider };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map