chore: rowSpan support

Author: zombieJ

assets/virtual.less

@@ -11,7 +11,6 @@
     display: flex;
     box-sizing: border-box;
     width: 100%;
-    border-bottom: @border;
     border-left: @border;
   }
 
@@ -20,9 +19,17 @@
     width: var(--virtual-width);
     padding: 8px 16px;
     border-right: @border;
+    border-bottom: @border;
 
     &-fix-left {
       left: calc(var(--sticky-left) + 1px) !important;
     }
+
+    &-virtual-fixed {
+      position: absolute;
+      z-index: 1;
+      border-bottom: @border;
+      left: calc(var(--sticky-left) + 1px) !important;
+    }
   }
 }

package.json

@@ -58,7 +58,7 @@
     "classnames": "^2.2.5",
     "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.27.1",
-    "rc-virtual-list": "^3.10.0"
+    "rc-virtual-list": "^3.10.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",

src/StaticTable/BodyGrid.tsx

@@ -42,10 +42,13 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
   const flattenData = useFlattenRecords(data, childrenColumnName, expandedKeys, getRowKey);
 
   // ========================== Column ==========================
-  const columnsWidth = React.useMemo<[key: React.Key, width: number][]>(
-    () => flattenColumns.map(({ width, key }) => [key, width as number]),
-    [flattenColumns],
-  );
+  const columnsWidth = React.useMemo<[key: React.Key, width: number, total: number][]>(() => {
+    let total = 0;
+    return flattenColumns.map(({ width, key }) => {
+      total += width as number;
+      return [key, width as number, total];
+    });
+  }, [flattenColumns]);
 
   React.useEffect(() => {
     columnsWidth.forEach(([key, width]) => {
@@ -84,7 +87,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
   };
 
   const extraRender: ListProps<any>['extraRender'] = info => {
-    const { start, end, getSize } = info;
+    const { start, end, getSize, offsetY } = info;
 
     // Find first rowSpan column
     const firstRowSpanColumns = flattenColumns.filter(column => getRowSpan(column, start) === 0);
@@ -126,17 +129,31 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
         const rowSpan = getRowSpan(column, i);
 
         if (rowSpan > 1) {
-          const endItem = flattenData[i + rowSpan - 1];
-          console.log('!!!', i, rowSpan, endItem);
+          const endItemIndex = i + rowSpan - 1;
+          const endItem = flattenData[endItemIndex];
+          const endKey = getRowKey(endItem.record, endItemIndex);
+
+          const sizeInfo = getSize(rowKey, endKey);
+          const right = columnsWidth[colIndex][2];
+          const left = columnsWidth[colIndex - 1][2] || 0;
+          console.log('!!!', i, rowSpan, endItem, sizeInfo, right);
+
           nodes.push(
             <RowSpanVirtualCell
+              top={-offsetY + sizeInfo.top}
+              height={sizeInfo.bottom - sizeInfo.top}
+              left={left}
+              width={right - left}
               key={`${i}_${colIndex}`}
               record={item.record}
               rowKey={rowKey}
               column={column}
               colIndex={colIndex}
               index={i}
               indent={0}
+              style={{
+                ['--sticky-left' as any]: `${left}px`,
+              }}
             />,
           );
         }

src/StaticTable/BodyLine.tsx

@@ -47,53 +47,6 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
             record={record}
           />
         );
-        // const { render, dataIndex, className: columnClassName, width: colWidth } = column;
-
-        // const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
-        //   rowInfo,
-        //   column,
-        //   colIndex,
-        //   indent,
-        //   index,
-        // );
-
-        // const { style: cellStyle, colSpan, rowSpan } = additionalCellProps;
-        // const mergedStyle = {
-        //   ...cellStyle,
-        //   '--virtual-width': `${colWidth}px`,
-        // };
-
-        // // When `colSpan` or `rowSpan` is `0`, should skip render.
-        // const mergedRender =
-        //   colSpan === 0 || rowSpan === 0 || colSpan > 1 || rowSpan > 1 ? () => null : render;
-
-        // return (
-        //   <Cell
-        //     className={columnClassName}
-        //     ellipsis={column.ellipsis}
-        //     align={column.align}
-        //     scope={column.rowScope}
-        //     component="div"
-        //     prefixCls={prefixCls}
-        //     key={key}
-        //     record={record}
-        //     index={index}
-        //     renderIndex={record.index}
-        //     dataIndex={dataIndex}
-        //     render={mergedRender}
-        //     shouldCellUpdate={column.shouldCellUpdate}
-        //     {...fixedInfo}
-        //     appendNode={appendCellNode}
-        //     additionalProps={{
-        //       ...additionalCellProps,
-        //       style: mergedStyle,
-
-        //       // Virtual should reset `colSpan` & `rowSpan`
-        //       rowSpan: 1,
-        //       colSpan: 1,
-        //     }}
-        //   />
-        // );
       })}
     </div>
   );

src/StaticTable/VirtualCell.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getCellProps, useRowInfo } from '../Body/BodyRow';
 import Cell from '../Cell';
 import type { ColumnType } from '../interface';
+import classNames from 'classnames';
 
 export interface VirtualCellProps<RecordType extends { index: number }> {
   rowInfo: ReturnType<typeof useRowInfo>;
@@ -14,12 +15,13 @@ export interface VirtualCellProps<RecordType extends { index: number }> {
   // Follow props is used for RowSpanVirtualCell only
   forceRender?: boolean;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 function VirtualCell<RecordType extends { index: number } = any>(
   props: VirtualCellProps<RecordType>,
 ) {
-  const { rowInfo, column, colIndex, indent, index, record, forceRender, style } = props;
+  const { rowInfo, column, colIndex, indent, index, record, forceRender, style, className } = props;
 
   const { render, dataIndex, className: columnClassName, width: colWidth } = column;
 
@@ -46,7 +48,7 @@ function VirtualCell<RecordType extends { index: number } = any>(
 
   return (
     <Cell
-      className={columnClassName}
+      className={classNames(columnClassName, className)}
       ellipsis={column.ellipsis}
       align={column.align}
       scope={column.rowScope}
@@ -73,20 +75,40 @@ function VirtualCell<RecordType extends { index: number } = any>(
   );
 }
 
+// ================= Virtual Row Span Cell =================
 export interface RowSpanVirtualCellProps<RecordType extends { index: number }>
   extends Omit<VirtualCellProps<RecordType>, 'rowInfo'> {
   record: RecordType;
   rowKey: React.Key;
+  top: number;
+  height: number;
+  left: number;
+  width: number;
 }
 
 export function RowSpanVirtualCell<RecordType extends { index: number } = any>(
   props: RowSpanVirtualCellProps<RecordType>,
 ) {
-  const { record, rowKey } = props;
+  const { record, rowKey, top, height, left, width, style } = props;
 
   const rowInfo = useRowInfo<RecordType>(record, rowKey);
+  const { prefixCls } = rowInfo;
 
-  return <VirtualCell rowInfo={rowInfo} {...props} forceRender />;
+  return (
+    <VirtualCell
+      rowInfo={rowInfo}
+      {...props}
+      style={{
+        ...style,
+        top,
+        height,
+        left,
+        width,
+      }}
+      className={`${prefixCls}-cell-virtual-fixed`}
+      forceRender
+    />
+  );
 }
 
 export default VirtualCell;