chore: Code Optimization

react-component · Sep 29, 2024 · 4beffa5 · 4beffa5
1 parent fa5f1db
commit 4beffa5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 25 deletions.
diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -6,6 +6,7 @@ import devRenderTimes from '../hooks/useRenderTimes';
 import useRowInfo from '../hooks/useRowInfo';
 import type { ColumnType, CustomizeComponent, GetRowKey } from '../interface';
 import ExpandedRow from './ExpandedRow';
+import { computedExpandedClassName } from '@/utils/expandUtil';
 
 export interface BodyRowProps<RecordType> {
   record: RecordType;
@@ -126,15 +127,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
   // 若没有 expandedRowRender 参数, 将使用 baseRowNode 渲染 Children
   // 此时如果 level > 1 则说明是 expandedRow, 一样需要附加 computedExpandedRowClassName
-  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]);
+  const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 
   // ======================== Base tr row ========================
   const baseRowNode = (
@@ -147,13 +140,10 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
         {
-          [computedExpandedRowClassName]: indent >= 1,
+          [expandedClsName]: indent >= 1,
         },
       )}
-      style={{
-        ...style,
-        ...rowProps?.style,
-      }}
+      style={{ ...style, ...rowProps?.style }}
     >
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;
@@ -201,7 +191,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         className={classNames(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
-          computedExpandedRowClassName,
+          expandedClsName,
         )}
         prefixCls={prefixCls}
         component={RowComponent}

diff --git a/src/VirtualTable/BodyLine.tsx b/src/VirtualTable/BodyLine.tsx
@@ -7,6 +7,7 @@ import type { FlattenData } from '../hooks/useFlattenRecords';
 import useRowInfo from '../hooks/useRowInfo';
 import VirtualCell from './VirtualCell';
 import { StaticContext } from './context';
+import { computedExpandedClassName } from '@/utils/expandUtil';
 
 export interface BodyLineProps<RecordType = any> {
   data: FlattenData<RecordType>;
@@ -42,14 +43,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   if (rowSupportExpand && expanded) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
-    let computedExpandedRowClassName = '';
-
-    if (typeof expandedRowClassName === 'string') {
-      computedExpandedRowClassName = expandedRowClassName;
-    }
-    if (typeof expandedRowClassName === 'function') {
-      computedExpandedRowClassName = expandedRowClassName(record, index, indent);
-    }
+    const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 
     let additionalProps: React.TdHTMLAttributes<HTMLElement> = {};
     if (fixColumn) {
@@ -67,7 +61,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
         className={classNames(
           `${prefixCls}-expanded-row`,
           `${prefixCls}-expanded-row-level-${indent + 1}`,
-          computedExpandedRowClassName,
+          expandedClsName,
         )}
       >
         <Cell

diff --git a/src/utils/expandUtil.tsx b/src/utils/expandUtil.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import type { RenderExpandIconProps, Key, GetRowKey } from '../interface';
+import type { RenderExpandIconProps, Key, GetRowKey, ExpandableConfig } from '../interface';
 
 export function renderExpandIcon<RecordType>({
   prefixCls,
@@ -50,3 +50,19 @@ export function findAllChildrenKeys<RecordType>(
 
   return keys;
 }
+
+export function computedExpandedClassName<RecordType>(
+  cls: ExpandableConfig<RecordType>['expandedRowClassName'],
+  record: RecordType,
+  index: number,
+  indent: number,
+) {
+  let resultClsName = '';
+  if (typeof cls === 'string') {
+    resultClsName = cls;
+  }
+  if (typeof cls === 'function') {
+    resultClsName = cls(record, index, indent);
+  }
+  return resultClsName;
+}