refactor: move rowClass in

react-component · Aug 20, 2023 · c9a7126 · c9a7126
1 parent ba03688
commit c9a7126
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx
@@ -205,7 +205,8 @@ const Demo = () => {
           expandedRowRender: () => 2333,
           columnWidth: 60,
         }}
-        onRow={() => ({ className: 'rowed' })}
+        // onRow={() => ({ className: 'rowed' })}
+        rowClassName="nice-try"
       />
     </div>
   );

diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -103,11 +103,10 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
     cellComponent,
     scopeCellComponent,
   } = props;
-  const rowInfo = useRowInfo(record, rowKey, index);
+  const rowInfo = useRowInfo(record, rowKey, index, indent);
   const {
     prefixCls,
     flattenColumns,
-    rowClassName,
     expandedRowClassName,
     expandedRowRender,
     rowProps,
@@ -130,13 +129,6 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   }, [expanded]);
 
   // ======================== Base tr row ========================
-  let computeRowClassName: string;
-  if (typeof rowClassName === 'string') {
-    computeRowClassName = rowClassName;
-  } else if (typeof rowClassName === 'function') {
-    computeRowClassName = rowClassName(record, index, indent);
-  }
-
   const baseRowNode = (
     <RowComponent
       {...rowProps}
@@ -145,7 +137,6 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         className,
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
-        computeRowClassName,
         rowProps?.className,
       )}
       style={{

diff --git a/src/StaticTable/BodyLine.tsx b/src/StaticTable/BodyLine.tsx
@@ -31,10 +31,10 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   ]);
   const { scrollX } = useContext(StaticContext, ['scrollX']);
 
-  const rowInfo = useRowInfo(record, rowKey, index);
+  const rowInfo = useRowInfo(record, rowKey, index, indent);
 
   // ========================== Expand ==========================
-  const { rowSupportExpand, expanded } = rowInfo;
+  const { rowSupportExpand, expanded, rowProps } = rowInfo;
 
   let expandRowNode: React.ReactElement;
   if (rowSupportExpand && expanded) {
@@ -55,12 +55,13 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
 
   const rowNode = (
     <div
+      {...rowProps}
       {...restProps}
       ref={rowSupportExpand ? null : ref}
-      className={classNames(className, `${prefixCls}-row`, {
+      className={classNames(className, `${prefixCls}-row`, rowProps?.className, {
         [`${prefixCls}-row-extra`]: extra,
       })}
-      style={rowStyle}
+      style={{ ...rowStyle, ...rowProps?.style }}
     >
       {flattenColumns.map((column, colIndex) => {
         return (

diff --git a/src/hooks/useRowInfo.tsx b/src/hooks/useRowInfo.tsx
@@ -3,11 +3,13 @@ import type { TableContextProps } from '../context/TableContext';
 import TableContext from '../context/TableContext';
 import { getColumnsKey } from '../utils/valueUtil';
 import { useEvent } from 'rc-util';
+import classNames from 'classnames';
 
 export default function useRowInfo<RecordType>(
   record: RecordType,
   rowKey: React.Key,
   recordIndex: number,
+  indent: number,
 ): Pick<
   TableContextProps,
   | 'prefixCls'
@@ -63,6 +65,7 @@ export default function useRowInfo<RecordType>(
     rowExpandable,
     onRow,
     expandRowByClick,
+    rowClassName,
   } = context;
 
   // ======================= Expandable =======================
@@ -90,6 +93,14 @@ export default function useRowInfo<RecordType>(
     onRowClick?.(event, ...args);
   };
 
+  // ====================== RowClassName ======================
+  let computeRowClassName: string;
+  if (typeof rowClassName === 'string') {
+    computeRowClassName = rowClassName;
+  } else if (typeof rowClassName === 'function') {
+    computeRowClassName = rowClassName(record, recordIndex, indent);
+  }
+
   // ========================= Column =========================
   const columnsKey = getColumnsKey(flattenColumns);
 
@@ -105,6 +116,7 @@ export default function useRowInfo<RecordType>(
     expandable: mergedExpandable,
     rowProps: {
       ...rowProps,
+      className: classNames(computeRowClassName, rowProps?.className),
       onClick,
     },
   };