Fix table row selected className

Close #8074 #8075

components/style/themes/default.less

@@ -319,6 +319,7 @@
 @table-header-bg: @background-color-light;
 @table-header-sort-bg: @background-color-base;
 @table-row-hover-bg: @primary-1;
+@table-selected-row-bg: #fafafa;
 @table-padding-vertical: 16px;
 @table-padding-horizontal: 16px;
 

components/table/Table.tsx

@@ -15,6 +15,7 @@ import SelectionBox from './SelectionBox';
 import SelectionCheckboxAll, { SelectionDecorator } from './SelectionCheckboxAll';
 import Column, { ColumnProps } from './Column';
 import ColumnGroup from './ColumnGroup';
+import createTableRow from './createTableRow';
 import { flatArray, treeMap, flatFilter, normalizeColumns } from './util';
 
 function noop() {
@@ -41,16 +42,16 @@ const emptyObject = {};
 export type TableColumnConfig<T> = ColumnProps<T>;
 
 export interface TableComponents {
-  table?: React.ComponentType<any>;
+  table?: any;
   header?: {
-    wrapper?: React.ComponentType<any>;
-    row?: React.ComponentType<any>;
-    cell?: React.ComponentType<any>;
+    wrapper?: any;
+    row?: any;
+    cell?: any;
   };
   body?: {
-    wrapper?: React.ComponentType<any>;
-    row?: React.ComponentType<any>;
-    cell?: React.ComponentType<any>;
+    wrapper?: any;
+    row?: any;
+    cell?: any;
   };
 }
 
@@ -142,6 +143,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
   CheckboxPropsCache: Object;
   store: Store;
   columns: ColumnProps<T>[];
+  components: TableComponents;
 
   constructor(props) {
     super(props);
@@ -154,6 +156,8 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
 
     this.columns = props.columns || normalizeColumns(props.children);
 
+    this.createComponents(props.components);
+
     this.state = {
       ...this.getDefaultSortOrder(this.columns),
       // 减少状态
@@ -256,6 +260,19 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
         this.setState({ filters: newFilters });
       }
     }
+
+    this.createComponents(nextProps.components, this.props.components);
+  }
+
+  onRow = (record, index) => {
+    const { onRow, prefixCls } = this.props;
+    const custom = onRow ? onRow(record, index) : {};
+    return {
+      ...custom,
+      prefixCls,
+      store: this.store,
+      rowKey: this.getRecordKey(record, index),
+    };
   }
 
   setSelectedRowKeys(selectedRowKeys, { selectWay, record, checked, changeRowKeys }: any) {
@@ -921,6 +938,18 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return data;
   }
 
+  createComponents(components: TableComponents = {}, prevComponents?: TableComponents) {
+    const bodyRow = components && components.body && components.body.row;
+    const preBodyRow = prevComponents && prevComponents.body && prevComponents.body.row;
+    this.components = { ...components };
+    if (!prevComponents || bodyRow !== preBodyRow) {
+      this.components.body = {
+        ...components.body,
+        row: createTableRow(bodyRow),
+      };
+    }
+  }
+
   renderTable = (contextLocale) => {
     const locale = { ...contextLocale, ...this.props.locale };
     const { style, className, prefixCls, showHeader, ...restProps } = this.props;
@@ -945,10 +974,13 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     if ('expandIconColumnIndex' in restProps) {
       expandIconColumnIndex = restProps.expandIconColumnIndex as number;
     }
+
     return (
       <RcTable
         key="table"
         {...restProps}
+        onRow={this.onRow}
+        components={this.components}
         prefixCls={prefixCls}
         data={data}
         columns={columns}

components/table/__tests__/Table.rowSelection.test.js

@@ -314,4 +314,10 @@ describe('Table.rowSelection', () => {
     wrapper.update();
     expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19']);
   });
+
+  it('highlight selected row', () => {
+    const wrapper = mount(createTable());
+    wrapper.find('input').at(1).simulate('change', { target: { checked: true } });
+    expect(wrapper.find('tbody tr').at(0).hasClass('ant-table-row-selected')).toBe(true);
+  });
 });

components/table/createTableRow.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import omit from 'omit.js';
+import { Store } from './createStore';
+
+interface TableRowProps {
+  store: Store;
+  className?: string;
+  rowKey: string;
+  prefixCls: string;
+}
+
+interface TableRowState {
+  selected: boolean;
+}
+
+export default function createTableRow(Component = 'tr') {
+  class TableRow extends React.Component<TableRowProps, TableRowState> {
+    private store: Store;
+    private unsubscribe: () => void;
+
+    constructor(props) {
+      super(props);
+
+      this.store = props.store;
+      const { selectedRowKeys } = this.store.getState();
+
+      this.state = {
+        selected: selectedRowKeys.indexOf(props.rowKey) >= 0,
+      };
+    }
+
+    componentDidMount() {
+      this.subscribe();
+    }
+
+    componentWillUnmount() {
+      if (this.unsubscribe) {
+        this.unsubscribe();
+      }
+    }
+
+    subscribe() {
+      const { store, rowKey } = this.props;
+      this.unsubscribe = store.subscribe(() => {
+        const { selectedRowKeys } = this.store.getState();
+        const selected = selectedRowKeys.indexOf(rowKey) >= 0;
+        if (selected !== this.state.selected) {
+          this.setState({ selected });
+        }
+      });
+    }
+
+    render() {
+      const rowProps = omit(this.props, ['prefixCls', 'rowKey']);
+      const className = classnames(
+        this.props.className,
+        {
+          [`${this.props.prefixCls}-row-selected`]: this.state.selected,
+        },
+      );
+
+      return (
+        <Component {...rowProps} className={className}>
+          {this.props.children}
+        </Component>
+      );
+    }
+  }
+
+  return TableRow;
+}

components/table/style/index.less

@@ -146,6 +146,10 @@
     border-radius: 0;
   }
 
+  &-tbody > tr.@{table-prefix-cls}-row-selected td {
+    background: @table-selected-row-bg;
+  }
+
   &-thead > tr > th.@{table-prefix-cls}-column-sort {
     background: @table-header-sort-bg;
   }