chore: optimize code

Author: RylanBot

packages/components/table/BaseTable.tsx

@@ -54,9 +54,8 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
   const bottomContentRef = useRef<HTMLDivElement>(null);
   const [tableFootHeight, setTableFootHeight] = useState(0);
 
-  const allTableClasses = useClassName();
   const { classPrefix, virtualScrollClasses, tableLayoutClasses, tableBaseClass, tableColFixedClasses } =
-    allTableClasses;
+    useClassName();
   // 表格基础样式类
   const { tableClasses, sizeClassNames, tableContentStyles, tableElementStyles } = useStyle(props);
   const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader({ columns: props.columns });
@@ -489,7 +488,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
     tableContentRef,
     tableWidth,
     isWidthOverflow,
-    allTableClasses,
     rowKey,
     scroll: props.scroll,
     cellEmptyContent: props.cellEmptyContent,
@@ -537,7 +535,6 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((originalProps, ref)
           ),
           // eslint-disable-next-line
           [
-            allTableClasses,
             tableBodyProps.ellipsisOverlayClassName,
             tableBodyProps.rowAndColFixedPosition,
             tableBodyProps.showColumnShadow,

packages/components/table/Cell.tsx

@@ -1,14 +1,16 @@
 import React, { MouseEvent, MutableRefObject, ReactNode } from 'react';
 import classNames from 'classnames';
-import { isFunction, get } from 'lodash-es';
+import { get, isFunction } from 'lodash-es';
+
 import TEllipsis from './Ellipsis';
-import { BaseTableCellParams, RowspanColspan, TableRowData, TdBaseTableProps } from './type';
-import { RowAndColFixedPosition } from './interface';
+import useClassName from './hooks/useClassName';
 import { getColumnFixedStyles } from './hooks/useFixed';
-import { TableClassName } from './hooks/useClassName';
 import { formatClassNames } from './utils';
-import { TooltipProps } from '../tooltip';
-import { PaginationProps } from '../pagination';
+
+import type { PaginationProps } from '../pagination';
+import type { TooltipProps } from '../tooltip';
+import type { RowAndColFixedPosition } from './interface';
+import type { BaseTableCellParams, RowspanColspan, TableRowData, TdBaseTableProps } from './type';
 
 export interface RenderEllipsisCellParams {
   cellNode: ReactNode;
@@ -25,7 +27,6 @@ export interface CellProps {
   dataLength: number;
   cellSpans: RowspanColspan;
   cellEmptyContent: TdBaseTableProps['cellEmptyContent'];
-  tableClassNames: TableClassName;
   tableRef?: MutableRefObject<HTMLDivElement>;
   classPrefix?: string;
   overlayClassName?: string;
@@ -94,11 +95,11 @@ function renderEllipsisCell(cellParams: BaseTableCellParams<TableRowData>, param
 }
 
 const Cell = (props: CellProps) => {
-  const { cellParams, tableClassNames, tableRef, columnLength, classPrefix, overlayClassName, pagination } = props;
+  const { cellParams, tableRef, columnLength, classPrefix, overlayClassName, pagination } = props;
   const { col, colIndex, rowIndex } = cellParams;
   const { cellSpans, dataLength, rowAndColFixedPosition, cellEmptyContent, rowspanAndColspan, onClick } = props;
   const { tableColFixedClasses, tdEllipsisClass, tableBaseClass, tdAlignClasses, tableDraggableClasses } =
-    tableClassNames;
+    useClassName();
 
   const cellNode = renderCell(cellParams, { cellEmptyContent, pagination });
   const tdStyles = getColumnFixedStyles(col, colIndex, rowAndColFixedPosition, tableColFixedClasses);

packages/components/table/TBody.tsx

@@ -2,8 +2,9 @@
 import React, { type CSSProperties, type MutableRefObject, type ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 import { camelCase, get, pick } from 'lodash-es';
+
 import { useLocaleReceiver } from '../locale/LocalReceiver';
-import { TableClassName } from './hooks/useClassName';
+import useClassName from './hooks/useClassName';
 import useRowspanAndColspan from './hooks/useRowspanAndColspan';
 import TR, { ROW_LISTENERS, TABLE_PROPS, type TrProps } from './TR';
 
@@ -25,7 +26,6 @@ export interface TableBodyProps extends BaseTableProps {
   isWidthOverflow?: boolean;
   virtualConfig: VirtualScrollConfig;
   pagination?: PaginationProps;
-  allTableClasses?: TableClassName;
   handleRowMounted?: (params: RowMountedParams) => void;
 }
 
@@ -74,7 +74,7 @@ const trProperties = [
 
 export default function TBody(props: TableBodyProps) {
   // 如果不是变量复用，没必要对每一个参数进行解构（解构过程需要单独的内存空间存储临时变量）
-  const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig, allTableClasses } = props;
+  const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig } = props;
 
   const { isVirtualScroll } = virtualConfig;
   const renderData = isVirtualScroll ? virtualConfig.visibleData : data;
@@ -84,7 +84,7 @@ export default function TBody(props: TableBodyProps) {
   const { skipSpansMap } = useRowspanAndColspan(data, columns, rowKey, props.rowspanAndColspan);
   const isSkipSnapsMapNotFinish = Boolean(props.rowspanAndColspan && !skipSpansMap.size);
 
-  const { tableFullRowClasses, tableBaseClass } = allTableClasses;
+  const { tableFullRowClasses, tableBaseClass } = useClassName();
   const tbodyClasses = useMemo(() => [tableBaseClass.body], [tableBaseClass.body]);
   const hasFullRowConfig = useMemo(() => firstFullRow || lastFullRow, [firstFullRow, lastFullRow]);
 
@@ -217,7 +217,7 @@ export default function TBody(props: TableBodyProps) {
 
   // 垫上隐藏的 tr 元素高度
   const translate = `translateY(${virtualConfig.translateY}px)`;
-  const posStyle: CSSProperties = isVirtualScroll
+  const posStyle = isVirtualScroll
     ? ({
         transform: translate,
         msTransform: translate,

packages/components/table/TR.tsx

@@ -87,7 +87,7 @@ export default function TR(props: TrProps) {
   const classNames = useClassName();
 
   const trStyles = getRowFixedStyles(
-    get(row, rowKey || 'id'),
+    get(row, rowKey),
     rowIndex,
     dataLength,
     fixedRows,
@@ -102,7 +102,7 @@ export default function TR(props: TrProps) {
   );
 
   const classes = useMemo(() => {
-    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, rowKey, type: 'body' }, rowKey || 'id');
+    const customClasses = formatRowClassNames(rowClassName, { row, rowIndex, rowKey, type: 'body' }, rowKey);
     return [trStyles?.classes, customClasses];
   }, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
 
@@ -151,7 +151,6 @@ export default function TR(props: TrProps) {
         columnLength={props.columns.length}
         cellSpans={cellSpans}
         cellEmptyContent={props.cellEmptyContent}
-        tableClassNames={classNames}
         rowspanAndColspan={props.rowspanAndColspan}
         onClick={onClick}
         tableRef={props.tableRef}