feat(table): update style, add gio-table-row-selected class on selete…

…d row

src/components/table/Table.tsx

@@ -1,14 +1,14 @@
 import React, { useMemo, forwardRef, createContext } from 'react';
 import RcTable from 'rc-table';
 import classNames from 'classnames';
-import { cloneDeep, isUndefined, get, has, set } from 'lodash';
+import { cloneDeep, isUndefined, get, has, set, isFunction } from 'lodash';
 import { compose } from 'lodash/fp';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 import useMergeRef from '../../utils/hooks/useMergeRef';
 import useSorter from './hook/useSorter';
 import useFilter from './hook/useFilter';
 import usePagination from './hook/usePagination';
-import useSelection from './hook/useSelection';
+import useSelection, { getRowKey } from './hook/useSelection';
 import useEllipsisTooltip from './hook/useEllipsisTooltip';
 import Title from './Title';
 import { TableProps, ColumnsType } from './interface';
@@ -45,6 +45,7 @@ function Table <RecordType>(
     hackRowEvent = false,
     className,
     style,
+    rowClassName = '',
     ...rest
   } = props;
   const mergedRef = useMergeRef(ref);
@@ -62,7 +63,7 @@ function Table <RecordType>(
     resetPagination,
   ] = usePagination(filtedData, pagination, showIndex);
 
-  const [transformSelectionPipeline] = useSelection(paginationedData, rowSelection, {
+  const [transformSelectionPipeline, selectedRowKeys] = useSelection(paginationedData, rowSelection, {
     rowKey,
   });
   const [transformEllipsisTooltipPipeline] = useEllipsisTooltip();
@@ -131,14 +132,19 @@ function Table <RecordType>(
         ref={mergedRef}
       >
         <Loading loading={debounceLoading}>
-          <RcTable
+          <RcTable<RecordType>
+            tableLayout='fixed'
             title={title ? () => title : undefined}
             prefixCls={prefixCls}
             columns={composedColumns}
             data={paginationedData}
             emptyText={emptyElement}
             rowKey={rowKey}
             onRow={onHackRow}
+            rowClassName={(record, index, indent) => {
+              const rowClassNameFromOutset = isFunction(rowClassName) ? rowClassName(record, index, indent) : rowClassName;              
+              return selectedRowKeys.includes(getRowKey(record, rowKey)) ? classNames(`${prefixCls}-row-selected`, rowClassNameFromOutset) : rowClassNameFromOutset;
+            }}
             {...rest}
           />
           <PaginationComponent onTriggerStateUpdate={onTriggerStateUpdate} />

src/components/table/Title.tsx

@@ -112,10 +112,8 @@ const Title = <RecordType,>(props: TitleProps<RecordType>): React.ReactElement =
 
   return (
     <div className={`${prefixCls}-column-title`}>
-      <span>
-        {column.title}
-        {renderInfo()}
-      </span>
+      {column.title}
+      {renderInfo()}
       {renderSorter()}
       {renderFilter()}
     </div>

src/components/table/__test__/Table.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { act } from 'react-test-renderer';
 import Table from '../index';
 
@@ -89,8 +90,8 @@ describe('Testing Table', () => {
   const getTable = () => <Table title="列表标题" dataSource={dataSource} columns={columns} pagination={false} />;
 
   it('should be stable', () => {
-    const wrapper = render(getTable());
-    expect(wrapper).toMatchSnapshot();
+    const { asFragment } = render(getTable());
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('should be mount, setProps, unmount with no error', () => {