From a1aae1302d1b2cb6c4b44cb253a6141a0b6c0109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AB=A0=E9=B1=BC=E6=80=AA?= Date: Tue, 26 Mar 2024 14:54:31 +0800 Subject: [PATCH] feat: add rowHoverable to disable hover interaction (#1068) * feat: Table add disabledHover * test: add disabledHover case * docs: add disabledHover * feat: add demo * feat: rename disabledHover to rowHoverable * fix: demo --- README.md | 1 + docs/demo/row-hoverable.md | 8 +++++++ docs/examples/row-hoverable.tsx | 23 ++++++++++++++++++++ src/Cell/index.tsx | 7 +++--- src/Table.tsx | 7 ++++++ src/context/TableContext.tsx | 2 ++ tests/Table.spec.jsx | 38 +++++++++++++++++++++++++++++++++ 7 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 docs/demo/row-hoverable.md create mode 100644 docs/examples/row-hoverable.tsx diff --git a/README.md b/README.md index 88ef771b6..6f6ab2138 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,7 @@ React.render(, mountNode); | components | Object | | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details | | sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar | | summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. | +| rowHoverable | boolean | true | Table hover interaction | ## Column Props diff --git a/docs/demo/row-hoverable.md b/docs/demo/row-hoverable.md new file mode 100644 index 000000000..2b08096d7 --- /dev/null +++ b/docs/demo/row-hoverable.md @@ -0,0 +1,8 @@ +--- +title: row-hoverable +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/row-hoverable.tsx b/docs/examples/row-hoverable.tsx new file mode 100644 index 000000000..4b52abb6f --- /dev/null +++ b/docs/examples/row-hoverable.tsx @@ -0,0 +1,23 @@ +import type { TableProps } from 'rc-table'; +import Table from 'rc-table'; +import React from 'react'; +import '../../assets/index.less'; + +interface RecordType { + a?: string; +} + +const data = [{ a: 'A' }, { a: 'B' }, { a: 'C' }]; + +const Demo = () => { + const columns: TableProps['columns'] = [ + { + title: 'title', + dataIndex: 'a', + }, + ]; + + return columns={columns} data={data} rowHoverable={false} />; +}; + +export default Demo; diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx index c5c729807..90bb04a48 100644 --- a/src/Cell/index.tsx +++ b/src/Cell/index.tsx @@ -118,9 +118,10 @@ function Cell(props: CellProps) { } = props; const cellPrefixCls = `${prefixCls}-cell`; - const { supportSticky, allColumnsFixedLeft } = useContext(TableContext, [ + const { supportSticky, allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [ 'supportSticky', 'allColumnsFixedLeft', + 'rowHoverable', ]); // ====================== Value ======================= @@ -244,8 +245,8 @@ function Cell(props: CellProps) { title={title} scope={scope} // Hover - onMouseEnter={onMouseEnter} - onMouseLeave={onMouseLeave} + onMouseEnter={rowHoverable ? onMouseEnter : undefined} + onMouseLeave={rowHoverable ? onMouseLeave : undefined} //Span colSpan={mergedColSpan !== 1 ? mergedColSpan : null} rowSpan={mergedRowSpan !== 1 ? mergedRowSpan : null} diff --git a/src/Table.tsx b/src/Table.tsx index a159ac506..755d1ebdc 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -121,6 +121,8 @@ export interface TableProps sticky?: boolean | TableSticky; + rowHoverable?: boolean; + // Events onScroll?: React.UIEventHandler; @@ -218,6 +220,7 @@ function Table( getContainerWidth, sticky, + rowHoverable = true, } = props; const mergedData = data || EMPTY_DATA; @@ -832,6 +835,8 @@ function Table( getRowKey, expandedKeys: mergedExpandedKeys, childrenColumnName: mergedChildrenColumnName, + + rowHoverable, }), [ // Scroll @@ -879,6 +884,8 @@ function Table( getRowKey, mergedExpandedKeys, mergedChildrenColumnName, + + rowHoverable, ], ); diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index ee5eeae2a..fd810b378 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -66,6 +66,8 @@ export interface TableContextProps { expandedKeys: Set; getRowKey: GetRowKey; childrenColumnName: string; + + rowHoverable?: boolean; } const TableContext = createContext(); diff --git a/tests/Table.spec.jsx b/tests/Table.spec.jsx index 3d5bff38f..872cd89c2 100644 --- a/tests/Table.spec.jsx +++ b/tests/Table.spec.jsx @@ -1142,6 +1142,44 @@ describe('Table.Basic', () => { expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1); }); }); + + it('when rowHoverable is false', () => { + const tColumns = [ + { + title: 'Key', + dataIndex: 'key', + }, + ]; + + const tData = [ + { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] }, + { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] }, + ]; + const wrapper = mount( +
, + ); + + const trs = wrapper.find('tr.rc-table-row'); + + trs.forEach((tr, index) => { + tr.find('td.rc-table-cell').at(0).simulate('mouseEnter'); + const currentClassName = wrapper + .find('tr.rc-table-row') + .at(index) + .find('td.rc-table-cell') + .at(0) + .getElement().props.className; + + expect(currentClassName.includes('rc-table-cell-row-hover')).toEqual(false); + expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(0); + }); + }); + it('should get scrollbar size', () => { const tColumns = [{ title: 'Name', dataIndex: 'name', key: 'name', width: 100 }]; const wrapper = mount(