feat: expandedRowClassName support receive a string

react-component · Sep 28, 2024 · 5524853 · 5524853
1 parent 8efa10c
commit 5524853
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -126,8 +126,15 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
   // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children
   // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
-  const computedExpandedRowClassName =
-    expandedRowClassName && expandedRowClassName(record, index, indent);
+  const computedExpandedRowClassName = React.useMemo<string>(() => {
+    if (typeof expandedRowClassName === 'string') {
+      return expandedRowClassName;
+    }
+    if (typeof expandedRowClassName === 'function') {
+      return expandedRowClassName(record, index, indent);
+    }
+    return '';
+  }, [expandedRowClassName, record, index, indent]);
 
   // ======================== Base tr row ========================
   const baseRowNode = (
@@ -139,7 +146,9 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
-        indent >= 1 ? computedExpandedRowClassName : '',
+        {
+          [computedExpandedRowClassName]: indent >= 1,
+        },
       )}
       style={{
         ...style,

diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx
@@ -37,7 +37,7 @@ export interface TableContextProps<RecordType = any> {
 
   // Body
   rowClassName: string | RowClassName<RecordType>;
-  expandedRowClassName: RowClassName<RecordType>;
+  expandedRowClassName: string | RowClassName<RecordType>;
   onRow?: GetComponentProps<RecordType>;
   emptyNode?: React.ReactNode;
 

diff --git a/tests/ExpandRow.spec.jsx b/tests/ExpandRow.spec.jsx
@@ -415,6 +415,21 @@ describe('Table.Expand', () => {
     expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy();
   });
 
+  it("renders expend row class correctly when it's string", () => {
+    const expandedRowClassName = 'expand-row-test-str-class-name';
+    const wrapper = mount(
+      createTable({
+        expandable: {
+          expandedRowRender,
+          expandedRowKeys: [0],
+          expandedRowClassName,
+        },
+      }),
+    );
+
+    expect(wrapper.find('tbody tr').at(1).hasClass(expandedRowClassName)).toBeTruthy();
+  });
+
   it('renders expend row class correctly using children without expandedRowRender', () => {
     const expandedRowClassName = vi.fn().mockReturnValue('expand-row-test-class-name');