feat: rowKeys

Author: crazyair

src/Body/BodyRow.tsx

@@ -19,7 +19,7 @@ export interface BodyRowProps<RecordType> {
   scopeCellComponent: CustomizeComponent;
   indent?: number;
   rowKey: React.Key;
-  getRowKey: (index: number) => React.Key;
+  rowKeys: React.Key[];
 }
 
 // ==================================================================================
@@ -31,7 +31,7 @@ export function getCellProps<RecordType>(
   colIndex: number,
   indent: number,
   index: number,
-  getRowKey?: (index: number) => React.Key,
+  rowKeys: React.Key[],
 ) {
   const {
     record,
@@ -74,12 +74,12 @@ export function getCellProps<RecordType>(
   const addChildrenRowSpan = (rowSpan: number, index2: number) => {
     const _index = index2 + 1;
     let _rowSpan = rowSpan;
-    const rowKey = getRowKey?.(_index);
+    const rowKey = rowKeys[_index];
     if (rowKey !== undefined) {
       // 下面如果是 0 的，增加 +1 逻辑
       const thisCellProps = column.onCell(record, _index);
       if (thisCellProps.rowSpan === 0) {
-        const thisExpanded = expandedKeys.has(getRowKey?.(_index));
+        const thisExpanded = expandedKeys.has(rowKey);
         if (thisExpanded) {
           _rowSpan = _rowSpan + 1;
         }
@@ -133,7 +133,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     rowComponent: RowComponent,
     cellComponent,
     scopeCellComponent,
-    getRowKey,
+    rowKeys,
   } = props;
   const rowInfo = useRowInfo(record, rowKey, index, indent);
 
@@ -186,7 +186,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
           colIndex,
           indent,
           index,
-          getRowKey,
+          rowKeys,
         );
 
         return (

src/Body/index.tsx

@@ -62,17 +62,15 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
 
   let rows: React.ReactNode;
   if (data.length) {
+    const rowKeys = flattenData.map(item => item.rowKey);
     rows = flattenData.map((item, idx) => {
       const { record, indent, index: renderIndex, rowKey } = item;
 
       return (
         <BodyRow
           key={rowKey}
           rowKey={rowKey}
-          getRowKey={index => {
-            const thisRecord = flattenData[index];
-            return thisRecord?.rowKey;
-          }}
+          rowKeys={rowKeys}
           record={record}
           index={idx}
           renderIndex={renderIndex}

src/VirtualTable/BodyGrid.tsx

@@ -95,7 +95,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
 
     return obj;
   });
-
+  const rowKeys = flattenData.map(item => item.rowKey);
   // ======================= Col/Row Span =======================
   const getRowSpan = (column: ColumnType<any>, index: number): number => {
     const record = flattenData[index]?.record;
@@ -185,6 +185,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
           key={index}
           data={item}
           rowKey={rowKey}
+          rowKeys={rowKeys}
           index={index}
           style={{
             top: -offsetY + sizeInfo.top,
@@ -243,7 +244,15 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       >
         {(item, index, itemProps) => {
           const rowKey = getRowKey(item.record, index);
-          return <BodyLine data={item} rowKey={rowKey} index={index} style={itemProps.style} />;
+          return (
+            <BodyLine
+              data={item}
+              rowKey={rowKey}
+              rowKeys={rowKeys}
+              index={index}
+              style={itemProps.style}
+            />
+          );
         }}
       </VirtualList>
     </GridContext.Provider>

src/VirtualTable/BodyLine.tsx

@@ -15,14 +15,15 @@ export interface BodyLineProps<RecordType = any> {
   className?: string;
   style?: React.CSSProperties;
   rowKey: React.Key;
+  rowKeys: React.Key[];
 
   /** Render cell only when it has `rowSpan > 1` */
   extra?: boolean;
   getHeight?: (rowSpan: number) => number;
 }
 
 const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) => {
-  const { data, index, className, rowKey, style, extra, getHeight, ...restProps } = props;
+  const { data, index, className, rowKey, style, extra, getHeight, rowKeys, ...restProps } = props;
   const { record, indent, index: renderIndex } = data;
 
   const { scrollX, flattenColumns, prefixCls, fixColumn, componentWidth } = useContext(
@@ -114,6 +115,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
             record={record}
             inverse={extra}
             getHeight={getHeight}
+            rowKeys={rowKeys}
           />
         );
       })}

src/VirtualTable/VirtualCell.tsx

@@ -25,6 +25,7 @@ export interface VirtualCellProps<RecordType> {
   /** Render cell only when it has `rowSpan > 1` */
   inverse?: boolean;
   getHeight?: (rowSpan: number) => number;
+  rowKeys: React.Key[];
 }
 
 /**
@@ -50,6 +51,7 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
     className,
     inverse,
     getHeight,
+    rowKeys,
   } = props;
 
   const { render, dataIndex, className: columnClassName, width: colWidth } = column;
@@ -62,6 +64,7 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
     colIndex,
     indent,
     index,
+    rowKeys,
   );
 
   const { style: cellStyle, colSpan = 1, rowSpan = 1 } = additionalCellProps;