refactor: row in

Author: zombieJ

src/Body/BodyRow.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import Cell from '../Cell';
 import { responseImmutable } from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
-import type { ColumnType, CustomizeComponent, GetComponentProps, GetRowKey } from '../interface';
+import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface';
 import ExpandedRow from './ExpandedRow';
 import useRowInfo from '../hooks/useRowInfo';
 
@@ -16,7 +16,6 @@ export interface BodyRowProps<RecordType> {
   rowComponent: CustomizeComponent;
   cellComponent: CustomizeComponent;
   scopeCellComponent: CustomizeComponent;
-  onRow: GetComponentProps<RecordType>;
   indent?: number;
   rowKey: React.Key;
   getRowKey: GetRowKey<RecordType>;
@@ -99,26 +98,23 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     index,
     renderIndex,
     rowKey,
-    onRow,
     indent = 0,
     rowComponent: RowComponent,
     cellComponent,
     scopeCellComponent,
   } = props;
-  const rowInfo = useRowInfo(record, rowKey);
+  const rowInfo = useRowInfo(record, rowKey, index);
   const {
     prefixCls,
     flattenColumns,
-    expandRowByClick,
-    onTriggerExpand,
     rowClassName,
     expandedRowClassName,
     expandedRowRender,
+    rowProps,
 
     // Misc
     expanded,
     rowSupportExpand,
-    expandable,
   } = rowInfo;
 
   const [expandRended, setExpandRended] = React.useState(false);
@@ -133,17 +129,6 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     }
   }, [expanded]);
 
-  // =========================== onRow ===========================
-  const additionalProps = onRow?.(record, index);
-
-  const onClick: React.MouseEventHandler<HTMLElement> = (event, ...args) => {
-    if (expandRowByClick && expandable) {
-      onTriggerExpand(record, event);
-    }
-
-    additionalProps?.onClick?.(event, ...args);
-  };
-
   // ======================== Base tr row ========================
   let computeRowClassName: string;
   if (typeof rowClassName === 'string') {
@@ -154,20 +139,19 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
   const baseRowNode = (
     <RowComponent
-      {...additionalProps}
+      {...rowProps}
       data-row-key={rowKey}
       className={classNames(
         className,
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         computeRowClassName,
-        additionalProps && additionalProps.className,
+        rowProps?.className,
       )}
       style={{
         ...style,
-        ...(additionalProps ? additionalProps.style : null),
+        ...rowProps?.style,
       }}
-      onClick={onClick}
     >
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;

src/Body/index.tsx

@@ -5,7 +5,6 @@ import PerfContext from '../context/PerfContext';
 import TableContext, { responseImmutable } from '../context/TableContext';
 import useFlattenRecords from '../hooks/useFlattenRecords';
 import devRenderTimes from '../hooks/useRenderTimes';
-import type { GetComponentProps } from '../interface';
 import { getColumnsKey } from '../utils/valueUtil';
 import BodyRow from './BodyRow';
 import ExpandedRow from './ExpandedRow';
@@ -14,7 +13,6 @@ import MeasureRow from './MeasureRow';
 export interface BodyProps<RecordType> {
   data: readonly RecordType[];
   measureColumnWidth: boolean;
-  onRow: GetComponentProps<RecordType>;
   emptyNode: React.ReactNode;
 }
 
@@ -23,7 +21,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     devRenderTimes(props);
   }
 
-  const { data, measureColumnWidth, onRow, emptyNode } = props;
+  const { data, measureColumnWidth, emptyNode } = props;
 
   const {
     prefixCls,
@@ -74,7 +72,6 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
           rowComponent={trComponent}
           cellComponent={tdComponent}
           scopeCellComponent={thComponent}
-          onRow={onRow}
           getRowKey={getRowKey}
           indent={indent}
         />

src/StaticTable/BodyLine.tsx

@@ -31,7 +31,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   ]);
   const { scrollX } = useContext(StaticContext, ['scrollX']);
 
-  const rowInfo = useRowInfo(record, rowKey);
+  const rowInfo = useRowInfo(record, rowKey, index);
 
   // ========================== Expand ==========================
   const { rowSupportExpand, expanded } = rowInfo;

src/Table.tsx

@@ -537,7 +537,6 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     <Body
       data={mergedData}
       measureColumnWidth={fixHeader || horizonScroll || isSticky}
-      onRow={onRow}
       emptyNode={emptyNode}
     />
   );
@@ -748,7 +747,6 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       horizonScroll,
 
       // Body
-
       tableLayout: mergedTableLayout,
       rowClassName,
       expandedRowClassName: expandableConfig.expandedRowClassName,
@@ -771,6 +769,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       hoverEndRow: endRow,
       onHover,
       rowExpandable: expandableConfig.rowExpandable,
+      onRow,
 
       getRowKey,
       expandedKeys: mergedExpandedKeys,
@@ -813,6 +812,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       endRow,
       onHover,
       expandableConfig.rowExpandable,
+      onRow,
 
       getRowKey,
       mergedExpandedKeys,

src/context/TableContext.tsx

@@ -6,6 +6,7 @@ import type {
   ExpandableType,
   ExpandedRowRender,
   GetComponent,
+  GetComponentProps,
   GetRowKey,
   RenderExpandIcon,
   RowClassName,
@@ -34,6 +35,7 @@ export interface TableContextProps<RecordType = any> {
   // Body
   rowClassName: string | RowClassName<RecordType>;
   expandedRowClassName: RowClassName<RecordType>;
+  onRow?: GetComponentProps<RecordType>;
 
   tableLayout: TableLayout;
 

src/hooks/useRowInfo.tsx

@@ -7,6 +7,7 @@ import { useEvent } from 'rc-util';
 export default function useRowInfo<RecordType>(
   record: RecordType,
   rowKey: React.Key,
+  recordIndex: number,
 ): Pick<
   TableContextProps,
   | 'prefixCls'
@@ -23,6 +24,7 @@ export default function useRowInfo<RecordType>(
   | 'expandIconColumnIndex'
   | 'expandedKeys'
   | 'childrenColumnName'
+  | 'onRow'
 > & {
   columnsKey: React.Key[];
   nestExpandable: boolean;
@@ -31,6 +33,7 @@ export default function useRowInfo<RecordType>(
   record: RecordType;
   rowSupportExpand: boolean;
   expandable: boolean;
+  rowProps: React.HTMLAttributes<any> & React.TdHTMLAttributes<any>;
 } {
   const context: TableContextProps = useContext(TableContext, [
     'prefixCls',
@@ -48,6 +51,7 @@ export default function useRowInfo<RecordType>(
     'expandedKeys',
     'childrenColumnName',
     'rowExpandable',
+    'onRow',
   ]);
 
   const {
@@ -57,6 +61,8 @@ export default function useRowInfo<RecordType>(
     childrenColumnName,
     onTriggerExpand,
     rowExpandable,
+    onRow,
+    expandRowByClick,
   } = context;
 
   // ======================= Expandable =======================
@@ -72,6 +78,18 @@ export default function useRowInfo<RecordType>(
 
   const onInternalTriggerExpand = useEvent(onTriggerExpand);
 
+  // ========================= onRow ==========================
+  const rowProps = onRow?.(record, recordIndex);
+  const onRowClick = rowProps?.onClick;
+
+  const onClick: React.MouseEventHandler<HTMLElement> = (event, ...args) => {
+    if (expandRowByClick && mergedExpandable) {
+      onTriggerExpand(record, event);
+    }
+
+    onRowClick?.(event, ...args);
+  };
+
   // ========================= Column =========================
   const columnsKey = getColumnsKey(flattenColumns);
 
@@ -85,5 +103,9 @@ export default function useRowInfo<RecordType>(
     onTriggerExpand: onInternalTriggerExpand,
     rowSupportExpand,
     expandable: mergedExpandable,
+    rowProps: {
+      ...rowProps,
+      onClick,
+    },
   };
 }