@are-visual/virtual-table 0.3.0 → 0.4.1

package/README.md

@@ -303,8 +303,9 @@ Context
                     ├── colgroup
                     │
                     └── renderBody(<tbody />)
-                        └── renderRow(<tr />)
-                            └── renderCell(<td />)
+                        └── renderBodyContent(Row[])
+                            └── renderRow(<tr />)
+                                └── renderCell(<td />)
 ```
 
 ##### Render 类型签名
@@ -316,6 +317,7 @@ interface RenderOptions<T = any> {
   rowIndex: number
   columns: ColumnType<T>[]
   rowData: T
+  startRowIndex: number
   columnDescriptor: ColumnDescriptor<T>[]
 }
 
@@ -361,17 +363,22 @@ type MiddlewareRenderHeaderCell<T = any> = (
 
 type MiddlewareRenderBodyWrapper<T = any> = (
   children: ReactNode,
-  options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
+  options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
 ) => ReactNode
 
 type MiddlewareRenderBodyRoot<T = any> = (
   children: ReactNode,
-  options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
+  options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
 ) => ReactNode
 
 type MiddlewareRenderBody<T = any> = (
   children: ReactNode,
-  options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>
+  options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
+) => ReactNode
+
+type MiddlewareRenderBodyContent<T = any> = (
+  children: ReactNode,
+  options: Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>
 ) => ReactNode
 
 type MiddlewareRenderRow<T = any> = (

package/index.d.ts

@@ -84,6 +84,7 @@ interface RenderOptions<T = any> {
     column: ColumnType<T>;
     columnWidths: Map<Key, number>;
     rowIndex: number;
+    startRowIndex: number;
     columns: ColumnType<T>[];
     rowData: T;
     columnDescriptor: ColumnDescriptor<T>[];
@@ -98,12 +99,13 @@ type MiddlewareRenderHeaderRoot<T = any> = (children: ReactNode, options: Pretti
 type MiddlewareRenderHeader<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>>) => ReactNode;
 type MiddlewareRenderHeaderRow<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>>) => ReactNode;
 type MiddlewareRenderHeaderCell<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'column' | 'columnWidths'>>) => ReactNode;
-type MiddlewareRenderBodyWrapper<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>>) => ReactNode;
-type MiddlewareRenderBodyRoot<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>>) => ReactNode;
-type MiddlewareRenderBody<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor'>>) => ReactNode;
+type MiddlewareRenderBodyWrapper<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>>) => ReactNode;
+type MiddlewareRenderBodyRoot<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>>) => ReactNode;
+type MiddlewareRenderBody<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>>) => ReactNode;
+type MiddlewareRenderBodyContent<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'startRowIndex'>>) => ReactNode;
 type MiddlewareRenderRow<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'columns' | 'columnDescriptor' | 'rowIndex' | 'rowData'>>) => ReactNode;
 type MiddlewareRenderCell<T = any> = (children: ReactNode, options: Prettify<Pick<RenderOptions<T>, 'column'>>) => ReactNode;
-type MergedMiddlewareRender<T = any> = MiddlewareRender<T> | MiddlewareRenderRoot<T> | MiddlewareRenderContent<T> | MiddlewareRenderHeaderWrapper<T> | MiddlewareRenderHeaderRoot<T> | MiddlewareRenderHeader<T> | MiddlewareRenderHeaderRow<T> | MiddlewareRenderHeaderCell<T> | MiddlewareRenderBodyWrapper<T> | MiddlewareRenderBodyRoot<T> | MiddlewareRenderBody<T> | MiddlewareRenderRow<T> | MiddlewareRenderCell<T>;
+type MergedMiddlewareRender<T = any> = MiddlewareRender<T> | MiddlewareRenderRoot<T> | MiddlewareRenderContent<T> | MiddlewareRenderHeaderWrapper<T> | MiddlewareRenderHeaderRoot<T> | MiddlewareRenderHeader<T> | MiddlewareRenderHeaderRow<T> | MiddlewareRenderHeaderCell<T> | MiddlewareRenderBodyWrapper<T> | MiddlewareRenderBodyRoot<T> | MiddlewareRenderBody<T> | MiddlewareRenderBodyContent<T> | MiddlewareRenderRow<T> | MiddlewareRenderCell<T>;
 interface MiddlewareRenders {
     /**
      * 自定义最外层渲染，children 为 整个 VirtualTable。
@@ -158,6 +160,10 @@ interface MiddlewareRenders {
      * @note 注意：出于性能考虑，**需要自行对函数 memo**
      */
     renderBody?: MiddlewareRenderBody;
+    /**
+     * 默认情况下 children 是 ReactNode[]，即 tbody 下渲染的各个 Row
+     */
+    renderBodyContent?: MiddlewareRenderBodyContent;
     /**
      * children 为 tr
      * @note 注意：出于性能考虑，**需要自行对函数 memo**
@@ -287,6 +293,7 @@ interface TableBodyProps<T> extends Omit<NecessaryProps<T>, 'columns'>, Pick<Row
     renderBodyWrapper?: MiddlewareRenderBodyWrapper;
     renderBodyRoot?: MiddlewareRenderBodyRoot;
     renderBody?: MiddlewareRenderBody;
+    renderBodyContent?: MiddlewareRenderBodyContent;
 }
 
 interface VirtualTableCoreProps<T> extends NecessaryProps<T>, Pick<TableBodyProps<T>, 'rowClassName' | 'onRow'> {
@@ -331,4 +338,4 @@ type PossibleRef<T> = Ref<T> | undefined;
 declare function mergeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 declare function useMergedRef<T>(...refs: PossibleRef<T>[]): (node: T | null) => void;
 
-export { type AlignType, type AnyObject, _default$2 as Colgroup, type ColumnDescriptor, type ColumnExtra, type ColumnType, type ContainerSizeState, type FixedType, type HorizontalScrollContextState, type MergedMiddlewareRender, type Middleware, type MiddlewareContext, type MiddlewareRender, type MiddlewareRenderBody, type MiddlewareRenderBodyRoot, type MiddlewareRenderBodyWrapper, type MiddlewareRenderCell, type MiddlewareRenderContent, type MiddlewareRenderHeader, type MiddlewareRenderHeaderCell, type MiddlewareRenderHeaderRoot, type MiddlewareRenderHeaderRow, type MiddlewareRenderHeaderWrapper, type MiddlewareRenderRoot, type MiddlewareRenderRow, type MiddlewareRenders, type MiddlewareResult, type OnRowType, type PipelineRender, type PipelineRenderOptions, type ScrollElement, type StickyContextState, type TableColumnsContextType, TablePipeline, type TableRowManagerContextType, type UseTablePipelineOptions, _default as VirtualTable, _default$3 as VirtualTableCell, type CellProps as VirtualTableCellProps, type VirtualTableCoreProps as VirtualTableProps, _default$1 as VirtualTableRow, type RowProps as VirtualTableRowProps, createMiddleware, findLastIndex, getKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };
+export { type AlignType, type AnyObject, _default$2 as Colgroup, type ColumnDescriptor, type ColumnExtra, type ColumnType, type ContainerSizeState, type FixedType, type HorizontalScrollContextState, type MergedMiddlewareRender, type Middleware, type MiddlewareContext, type MiddlewareRender, type MiddlewareRenderBody, type MiddlewareRenderBodyContent, type MiddlewareRenderBodyRoot, type MiddlewareRenderBodyWrapper, type MiddlewareRenderCell, type MiddlewareRenderContent, type MiddlewareRenderHeader, type MiddlewareRenderHeaderCell, type MiddlewareRenderHeaderRoot, type MiddlewareRenderHeaderRow, type MiddlewareRenderHeaderWrapper, type MiddlewareRenderRoot, type MiddlewareRenderRow, type MiddlewareRenders, type MiddlewareResult, type OnRowType, type PipelineRender, type PipelineRenderOptions, type ScrollElement, type StickyContextState, type TableColumnsContextType, TablePipeline, type TableRowManagerContextType, type UseTablePipelineOptions, _default as VirtualTable, _default$3 as VirtualTableCell, type CellProps as VirtualTableCellProps, type VirtualTableCoreProps as VirtualTableProps, _default$1 as VirtualTableRow, type RowProps as VirtualTableRowProps, createMiddleware, findLastIndex, getKey, getScrollElement, getScrollParent, getScrollTop, isDocument, isRoot, isValidFixed, isValidFixedLeft, isValidFixedRight, isWindow, mergeRefs, onResize, useColumnSizes, useContainerSize, useHorizontalScrollContext, useMergedRef, useShallowMemo, useStableFn, useTablePipeline, useTableRowManager, useTableSticky };

package/index.esm.js

@@ -585,7 +585,7 @@ function createMiddleware(hook) {
   };
 }
 
-var _excluded$2 = ["render", "renderRoot", "renderContent", "renderHeaderWrapper", "renderHeaderRoot", "renderHeader", "renderHeaderRow", "renderHeaderCell", "renderBodyWrapper", "renderBodyRoot", "renderBody", "renderRow", "renderCell", "rowClassName", "onRow"];
+var _excluded$2 = ["render", "renderRoot", "renderContent", "renderHeaderWrapper", "renderHeaderRoot", "renderHeader", "renderHeaderRow", "renderHeaderCell", "renderBodyWrapper", "renderBodyRoot", "renderBody", "renderBodyContent", "renderRow", "renderCell", "rowClassName", "onRow"];
 function shakeUnsafeHooks(hooks) {
   if (Array.isArray(hooks)) {
     return hooks.filter(function (x) {
@@ -635,6 +635,7 @@ var TablePipeline = /*#__PURE__*/function () {
       renderBodyWrapper: [],
       renderBodyRoot: [],
       renderBody: [],
+      renderBodyContent: [],
       renderRow: [],
       renderCell: []
     };
@@ -659,6 +660,7 @@ var TablePipeline = /*#__PURE__*/function () {
         nextCtx.renderBodyWrapper;
         nextCtx.renderBodyRoot;
         nextCtx.renderBody;
+        nextCtx.renderBodyContent;
         nextCtx.renderRow;
         nextCtx.renderCell;
         var rowClassName = nextCtx.rowClassName,
@@ -1065,6 +1067,7 @@ function TableBody(props) {
     renderBodyWrapper = props.renderBodyWrapper,
     renderBodyRoot = props.renderBodyRoot,
     renderBody = props.renderBody,
+    renderBodyContent = props.renderBodyContent,
     renderRow = props.renderRow,
     renderCell = props.renderCell;
   var _useRowVirtualize = useRowVirtualize({
@@ -1119,23 +1122,29 @@ function TableBody(props) {
     updateRowRectList();
     rowHeights.current.clear();
   });
+  var bodyContent = pipelineRender(dataSource.map(function (e, rowIndex) {
+    var _rowKey = e[rowKey];
+    return jsx(Row$1, {
+      className: clsx(rowClassName == null ? undefined : rowClassName(e, rowIndex)),
+      rowIndex: rowIndex + startIndex,
+      rowData: e,
+      columns: columnDescriptor,
+      onRow: onRow,
+      renderRow: renderRow,
+      renderCell: renderCell
+    }, _rowKey);
+  }), renderBodyContent, {
+    columns: columns,
+    columnDescriptor: descriptor,
+    startRowIndex: startIndex
+  });
   var bodyNode = pipelineRender(jsx("tbody", {
     ref: tbodyRef,
-    children: dataSource.map(function (e, rowIndex) {
-      var _rowKey = e[rowKey];
-      return jsx(Row$1, {
-        className: clsx(rowClassName == null ? undefined : rowClassName(e, rowIndex)),
-        rowIndex: rowIndex + startIndex,
-        rowData: e,
-        columns: columnDescriptor,
-        onRow: onRow,
-        renderRow: renderRow,
-        renderCell: renderCell
-      }, _rowKey);
-    })
+    children: bodyContent
   }), renderBody, {
     columns: columns,
-    columnDescriptor: descriptor
+    columnDescriptor: descriptor,
+    startRowIndex: startIndex
   });
   var _useColumnSizes = useColumnSizes(),
     setWidthList = _useColumnSizes.setWidthList;
@@ -1152,7 +1161,8 @@ function TableBody(props) {
     }), bodyNode]
   }), renderBodyRoot, {
     columns: columns,
-    columnDescriptor: descriptor
+    columnDescriptor: descriptor,
+    startRowIndex: startIndex
   });
   var _useHorizontalScrollC = useHorizontalScrollContext(),
     listen = _useHorizontalScrollC.listen,
@@ -1188,7 +1198,8 @@ function TableBody(props) {
       children: tableNode
     }), renderBodyWrapper, {
       columns: columns,
-      columnDescriptor: descriptor
+      columnDescriptor: descriptor,
+      startRowIndex: startIndex
     })
   });
 }
@@ -1687,6 +1698,7 @@ function VirtualTableCore(props, ref) {
     renderBodyWrapper = _pipeline$use.renderBodyWrapper,
     renderBodyRoot = _pipeline$use.renderBodyRoot,
     renderBody = _pipeline$use.renderBody,
+    renderBodyContent = _pipeline$use.renderBodyContent,
     renderRow = _pipeline$use.renderRow,
     renderCell = _pipeline$use.renderCell,
     onPipelineRow = _pipeline$use.onRow;
@@ -1775,6 +1787,7 @@ function VirtualTableCore(props, ref) {
       renderBodyWrapper: renderBodyWrapper,
       renderBodyRoot: renderBodyRoot,
       renderBody: renderBody,
+      renderBodyContent: renderBodyContent,
       renderRow: renderRow,
       renderCell: renderCell
     })]