opt

Author: thinkasany

src/Body/BodyRow.tsx

@@ -93,6 +93,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
+
   const {
     className,
     style,
@@ -143,15 +144,15 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
         `${prefixCls}-row`,
         `${prefixCls}-row-level-${indent}`,
         rowProps?.className,
-        classNames?.row,
+        classNames.row,
         {
           [expandedClsName]: indent >= 1,
         },
       )}
       style={{
         ...style,
         ...rowProps?.style,
-        ...styles?.row,
+        ...styles.row,
       }}
     >
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
@@ -167,8 +168,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
 
         return (
           <Cell<RecordType>
-            className={cls(columnClassName, classNames?.cell)}
-            style={styles?.cell}
+            className={cls(columnClassName, classNames.cell)}
+            style={styles.cell}
             ellipsis={column.ellipsis}
             align={column.align}
             scope={column.rowScope}

src/Body/index.tsx

@@ -46,8 +46,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
     'classNames',
     'styles',
   ]);
-  const { body: bodyCls } = classNames || {};
-  const { body: bodyStyles } = styles || {};
+  const { body: bodyCls = {} } = classNames || {};
+  const { body: bodyStyles = {} } = styles || {};
 
   const flattenData: { record: RecordType; indent: number; index: number }[] =
     useFlattenRecords<RecordType>(data, childrenColumnName, expandedKeys, getRowKey);
@@ -107,8 +107,8 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
   return (
     <PerfContext.Provider value={perfRef.current}>
       <WrapperComponent
-        className={cls(`${prefixCls}-tbody`, bodyCls?.wrapper)}
-        style={bodyStyles?.wrapper}
+        className={cls(`${prefixCls}-tbody`, bodyCls.wrapper)}
+        style={bodyStyles.wrapper}
       >
         {/* Measure body column width with additional hidden col */}
         {measureColumnWidth && (

src/Cell/index.tsx

@@ -125,12 +125,12 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
 
   const cellPrefixCls = `${prefixCls}-cell`;
 
-  const { allColumnsFixedLeft, rowHoverable, classNames, styles } = useContext(TableContext, [
-    'allColumnsFixedLeft',
-    'rowHoverable',
-    'classNames',
-    'styles',
-  ]);
+  const {
+    allColumnsFixedLeft,
+    rowHoverable,
+    classNames = {},
+    styles = {},
+  } = useContext(TableContext, ['allColumnsFixedLeft', 'rowHoverable', 'classNames', 'styles']);
 
   // ====================== Value =======================
   const [childNode, legacyCellProps] = useCellRender(
@@ -219,7 +219,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
   // >>>>> ClassName
   const mergedClassName = cls(
     cellPrefixCls,
-    classNames?.item,
+    classNames.cell,
     className,
     {
       // Fixed
@@ -255,7 +255,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
     ...fixedStyle,
     ...alignStyle,
     ...additionalProps.style,
-    ...styles?.item,
+    ...styles.cell,
     ...style,
   };
 

src/Header/Header.tsx

@@ -33,8 +33,8 @@ function parseHeaderRows<RecordType>(
     const colSpans: number[] = columns.filter(Boolean).map(column => {
       const cell: CellType<RecordType> = {
         key: column.key,
-        className: cls(column.className, classNames?.cell) || '',
-        style: styles?.cell,
+        className: cls(column.className, classNames.cell) || '',
+        style: styles.cell,
         children: column.title,
         column,
         colStart: currentColIndex,
@@ -108,8 +108,8 @@ const Header = <RecordType extends any>(props: HeaderProps<RecordType>) => {
     'classNames',
     'styles',
   ]);
-  const { header: headerCls } = classNames || {};
-  const { header: headerStyles } = styles || {};
+  const { header: headerCls = {} } = classNames || {};
+  const { header: headerStyles = {} } = styles || {};
   const rows = React.useMemo<CellType<RecordType>[][]>(
     () => parseHeaderRows(columns, headerCls, headerStyles),
     [columns, headerCls, headerStyles],
@@ -121,12 +121,14 @@ const Header = <RecordType extends any>(props: HeaderProps<RecordType>) => {
 
   return (
     <WrapperComponent
-      className={cls(`${prefixCls}-thead`, headerCls?.wrapper)}
-      style={headerStyles?.wrapper}
+      className={cls(`${prefixCls}-thead`, headerCls.wrapper)}
+      style={headerStyles.wrapper}
     >
       {rows.map((row, rowIndex) => {
         const rowNode = (
           <HeaderRow
+            classNames={headerCls}
+            styles={headerStyles}
             key={rowIndex}
             flattenColumns={flattenColumns}
             cells={row}

src/Header/HeaderRow.tsx

@@ -11,6 +11,7 @@ import type {
 } from '../interface';
 import { getCellFixedInfo } from '../utils/fixUtil';
 import { getColumnsKey } from '../utils/valueUtil';
+import { TableProps } from '..';
 
 export interface RowProps<RecordType> {
   cells: readonly CellType<RecordType>[];
@@ -20,6 +21,8 @@ export interface RowProps<RecordType> {
   cellComponent: CustomizeComponent;
   onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
   index: number;
+  classNames?: TableProps['classNames']['header'];
+  styles?: TableProps['styles']['header'];
 }
 
 const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
@@ -31,14 +34,10 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
     cellComponent: CellComponent,
     onHeaderRow,
     index,
+    classNames,
+    styles,
   } = props;
-  const { prefixCls, styles, classNames } = useContext(TableContext, [
-    'prefixCls',
-    'styles',
-    'classNames',
-  ]);
-  const { header: headerCls } = classNames || {};
-  const { header: headerStyles } = styles || {};
+  const { prefixCls } = useContext(TableContext, ['prefixCls']);
   let rowProps: React.HTMLAttributes<HTMLElement>;
   if (onHeaderRow) {
     rowProps = onHeaderRow(
@@ -50,7 +49,7 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
   const columnsKey = getColumnsKey(cells.map(cell => cell.column));
 
   return (
-    <RowComponent {...rowProps} className={headerCls?.row} style={headerStyles?.row}>
+    <RowComponent {...rowProps} className={classNames.row} style={styles.row}>
       {cells.map((cell: CellType<RecordType>, cellIndex) => {
         const { column } = cell;
         const fixedInfo = getCellFixedInfo(

src/Table.tsx

@@ -85,7 +85,7 @@ const EMPTY_DATA = [];
 // Used for customize scroll
 const EMPTY_SCROLL_TARGET = {};
 
-export type SemanticName = 'section' | 'title' | 'footer' | 'content' | 'item';
+export type SemanticName = 'section' | 'title' | 'footer' | 'content' | 'cell';
 export type ComponentsSemantic = 'wrapper' | 'cell' | 'row';
 export interface TableProps<RecordType = any>
   extends Omit<LegacyExpandableProps<RecordType>, 'showExpandColumn'> {

tests/semantic.spec.tsx

@@ -55,7 +55,7 @@ describe('support classNames and styles', () => {
       title: 'test-title',
       footer: 'test-footer',
       content: 'test-content',
-      item: 'test-item',
+      cell: 'test-cell',
       body: {
         wrapper: 'test-body-wrapper',
         cell: 'test-body-cell',
@@ -72,7 +72,7 @@ describe('support classNames and styles', () => {
       title: { background: 'green' },
       footer: { background: 'pink' },
       content: { background: 'purple' },
-      item: { fontSize: '19px' },
+      cell: { fontSize: '19px' },
       body: {
         wrapper: { background: 'cyan' },
         cell: { background: 'lime' },
@@ -91,7 +91,7 @@ describe('support classNames and styles', () => {
     const title = container.querySelector('.rc-table-title');
     const footer = container.querySelector('.rc-table-footer');
     const content = container.querySelector('.rc-table-content');
-    const item = container.querySelector('.rc-table-cell');
+    const cell = container.querySelector('.rc-table-cell');
     const headerWrapper = container.querySelector('.rc-table-thead');
     const headerCell = container.querySelector('.rc-table-cell');
     const headerRow = container.querySelector('tr');
@@ -106,8 +106,8 @@ describe('support classNames and styles', () => {
     expect(footer).toHaveStyle(testStyles.footer);
     expect(content).toHaveClass(testClassNames.content);
     expect(content).toHaveStyle(testStyles.content);
-    expect(item).toHaveClass(testClassNames.item);
-    expect(item).toHaveStyle({ fontSize: testStyles.item.fontSize });
+    expect(cell).toHaveClass(testClassNames.cell);
+    expect(cell).toHaveStyle({ fontSize: testStyles.cell.fontSize });
 
     expect(headerWrapper).toHaveClass(testClassNames.header.wrapper);
     expect(headerWrapper).toHaveStyle(testStyles.header.wrapper);