Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table 组件新增 colHoverable 属性 #1221

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
feat: Table add prop "colHoverable"
guaijie committed Jan 13, 2025
commit d8917715e11f13c571276de6dc9e143f9dcf710a
3 changes: 2 additions & 1 deletion src/Body/BodyRow.tsx
Original file line number Diff line number Diff line change
@@ -165,7 +165,8 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
prefixCls={prefixCls}
key={key}
record={record}
index={index}
colIndex={colIndex}
rowIndex={index}
renderIndex={renderIndex}
dataIndex={dataIndex}
render={render}
30 changes: 20 additions & 10 deletions src/Cell/index.tsx
Original file line number Diff line number Diff line change
@@ -20,8 +20,9 @@ export interface CellProps<RecordType extends DefaultRecordType> {
prefixCls?: string;
className?: string;
record?: RecordType;
colIndex?: number;
/** `column` index is the real show rowIndex */
index?: number;
rowIndex?: number;
/** the index of the record. For the render(value, record, renderIndex) */
renderIndex?: number;
dataIndex?: DataIndex<RecordType>;
@@ -95,8 +96,10 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
renderIndex,
shouldCellUpdate,

colIndex,

// Row
index,
rowIndex,
rowType,

// Span
@@ -118,10 +121,9 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
} = props;

const cellPrefixCls = `${prefixCls}-cell`;
const { supportSticky, allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
const { supportSticky, allColumnsFixedLeft } = useContext(TableContext, [
'supportSticky',
'allColumnsFixedLeft',
'rowHoverable',
]);

// ====================== Value =======================
@@ -153,19 +155,26 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
const mergedRowSpan = legacyCellProps?.rowSpan ?? additionalProps.rowSpan ?? rowSpan ?? 1;

// ====================== Hover =======================
const [hovering, onHover] = useHoverState(index, mergedRowSpan);
const [rowHovering, colHovering, onRowHover, onColHover] = useHoverState(
rowIndex,
mergedRowSpan,
colIndex,
mergedColSpan,
);

const onMouseEnter: React.MouseEventHandler<HTMLTableCellElement> = useEvent(event => {
if (record) {
onHover(index, index + mergedRowSpan - 1);
onRowHover(rowIndex, rowIndex + mergedRowSpan - 1);
onColHover(colIndex, colIndex + mergedColSpan - 1);
}

additionalProps?.onMouseEnter?.(event);
});

const onMouseLeave: React.MouseEventHandler<HTMLTableCellElement> = useEvent(event => {
if (record) {
onHover(-1, -1);
onRowHover(-1, -1);
onColHover(-1, -1);
}

additionalProps?.onMouseLeave?.(event);
@@ -200,7 +209,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
[`${cellPrefixCls}-ellipsis`]: ellipsis,
[`${cellPrefixCls}-with-append`]: appendNode,
[`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky,
[`${cellPrefixCls}-row-hover`]: !legacyCellProps && hovering,
[`${cellPrefixCls}-row-hover`]: !legacyCellProps && rowHovering,
[`${cellPrefixCls}-col-hover`]: !legacyCellProps && colHovering,
},
additionalProps.className,
legacyCellProps?.className,
@@ -247,8 +257,8 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
title={title}
scope={scope}
// Hover
onMouseEnter={rowHoverable ? onMouseEnter : undefined}
onMouseLeave={rowHoverable ? onMouseLeave : undefined}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
//Span
colSpan={mergedColSpan !== 1 ? mergedColSpan : null}
rowSpan={mergedRowSpan !== 1 ? mergedRowSpan : null}
11 changes: 8 additions & 3 deletions src/Cell/useHoverState.ts
Original file line number Diff line number Diff line change
@@ -11,10 +11,15 @@ function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: numbe
export default function useHoverState(
rowIndex: number,
rowSpan: number,
): [hovering: boolean, onHover: OnHover] {
colIndex: number,
colSpan: number,
): [hovering: boolean, colHovering: boolean, onRowHover: OnHover, onColHover: OnHover] {
return useContext(TableContext, ctx => {
const hovering = inHoverRange(rowIndex, rowSpan || 1, ctx.hoverStartRow, ctx.hoverEndRow);
const rowHovering =
ctx.rowHoverable && inHoverRange(rowIndex, rowSpan || 1, ctx.hoverStartRow, ctx.hoverEndRow);
const colHovering =
ctx.colHoverable && inHoverRange(colIndex, colSpan || 1, ctx.hoverStartCol, ctx.hoverEndCol);

return [hovering, ctx.onHover];
return [rowHovering, colHovering, ctx.onRowHover, ctx.onColHover];
});
}
2 changes: 1 addition & 1 deletion src/Footer/Cell.tsx
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ export default function SummaryCell({
return (
<Cell
className={className}
index={index}
rowIndex={index}
component="td"
prefixCls={prefixCls}
record={null}
18 changes: 15 additions & 3 deletions src/Table.tsx
Original file line number Diff line number Diff line change
@@ -122,6 +122,7 @@ export interface TableProps<RecordType = any>

sticky?: boolean | TableSticky;

colHoverable?: boolean;
rowHoverable?: boolean;

// Events
@@ -221,6 +222,7 @@ function Table<RecordType extends DefaultRecordType>(
getContainerWidth,

sticky,
colHoverable = false,
rowHoverable = true,
} = props;

@@ -274,7 +276,7 @@ function Table<RecordType extends DefaultRecordType>(
const customizeScrollBody = getComponent(['body']) as CustomizeScrollBody<RecordType>;

// ====================== Hover =======================
const [startRow, endRow, onHover] = useHover();
const [startRow, endRow, startCol, endCol, onRowHover, onColHover] = useHover();

// ====================== Expand ======================
const [
@@ -835,17 +837,22 @@ function Table<RecordType extends DefaultRecordType>(
flattenColumns,
onColumnResize,

hoverStartCol: startCol,
hoverEndCol: endCol,
onColHover,

// Row
hoverStartRow: startRow,
hoverEndRow: endRow,
onHover,
onRowHover,
rowExpandable: expandableConfig.rowExpandable,
onRow,

getRowKey,
expandedKeys: mergedExpandedKeys,
childrenColumnName: mergedChildrenColumnName,

colHoverable,
rowHoverable,
}),
[
@@ -884,17 +891,22 @@ function Table<RecordType extends DefaultRecordType>(
flattenColumns,
onColumnResize,

startCol,
endCol,
onColHover,

// Row
startRow,
endRow,
onHover,
onRowHover,
expandableConfig.rowExpandable,
onRow,

getRowKey,
mergedExpandedKeys,
mergedChildrenColumnName,

colHoverable,
rowHoverable,
],
);
3 changes: 2 additions & 1 deletion src/VirtualTable/VirtualCell.tsx
Original file line number Diff line number Diff line change
@@ -120,7 +120,8 @@ function VirtualCell<RecordType = any>(props: VirtualCellProps<RecordType>) {
prefixCls={rowInfo.prefixCls}
key={key}
record={record}
index={index}
rowIndex={index}
colIndex={colIndex}
renderIndex={renderIndex}
dataIndex={dataIndex}
render={mergedRender}
7 changes: 6 additions & 1 deletion src/context/TableContext.tsx
Original file line number Diff line number Diff line change
@@ -57,16 +57,21 @@ export interface TableContextProps<RecordType = any> {
flattenColumns: readonly ColumnType<RecordType>[];
onColumnResize: (columnKey: React.Key, width: number) => void;

hoverStartCol: number;
hoverEndCol: number;
onColHover: (start: number, end: number) => void;

// Row
hoverStartRow: number;
hoverEndRow: number;
onHover: (start: number, end: number) => void;
onRowHover: (start: number, end: number) => void;
rowExpandable: (record: RecordType) => boolean;

expandedKeys: Set<React.Key>;
getRowKey: GetRowKey<RecordType>;
childrenColumnName: string;

colHoverable?: boolean;
rowHoverable?: boolean;
}

20 changes: 17 additions & 3 deletions src/hooks/useHover.ts
Original file line number Diff line number Diff line change
@@ -2,14 +2,28 @@ import * as React from 'react';

export type OnHover = (start: number, end: number) => void;

export default function useHover(): [startRow: number, endRow: number, onHover: OnHover] {
export default function useHover(): [
startRow: number,
endRow: number,
startCol: number,
endCol: number,
onRowHover: OnHover,
onColHover: OnHover,
] {
const [startRow, setStartRow] = React.useState(-1);
const [endRow, setEndRow] = React.useState(-1);
const [startCol, setStartCol] = React.useState(-1);
const [endCol, setEndCol] = React.useState(-1);

const onHover = React.useCallback<OnHover>((start, end) => {
const onRowHover = React.useCallback<OnHover>((start, end) => {
setStartRow(start);
setEndRow(end);
}, []);

return [startRow, endRow, onHover];
const onColHover = React.useCallback<OnHover>((start, end) => {
setStartCol(start);
setEndCol(end);
}, []);

return [startRow, endRow, startCol, endCol, onRowHover, onColHover];
}
54 changes: 50 additions & 4 deletions tests/Hover.spec.tsx
Original file line number Diff line number Diff line change
@@ -13,16 +13,18 @@ describe('Table.Hover', () => {
const createTable = (props?: TableProps) => {
const columns = [{ title: 'Name', dataIndex: 'name', key: 'name' }];

return <Table columns={columns} data={data} {...props} />;
return <Table columns={columns} data={data} colHoverable {...props} />;
};

it('basic', () => {
const wrapper = mount(createTable());
wrapper.find('tbody td').first().simulate('mouseEnter');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeTruthy();

wrapper.find('tbody td').first().simulate('mouseLeave');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();
});

it('works on shouldCellUpdate', () => {
@@ -34,9 +36,11 @@ describe('Table.Hover', () => {

wrapper.find('tbody td').first().simulate('mouseEnter');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeTruthy();

wrapper.find('tbody td').first().simulate('mouseLeave');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();
});

it('warning if use `render` for rowSpan', () => {
@@ -151,7 +155,7 @@ describe('Table.Hover', () => {
renderTimes = 0;
wrapper.find('tbody td').at(0).simulate('mouseEnter');
expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1);
expect(renderTimes).toBe(1);
expect(renderTimes).toBe(2);

// Hover 0-1
renderTimes = 0;
@@ -163,7 +167,7 @@ describe('Table.Hover', () => {
renderTimes = 0;
wrapper.find('tbody td').at(1).simulate('mouseLeave');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
expect(renderTimes).toBe(1);
expect(renderTimes).toBe(2);
});

it('perf mode to save render times', () => {
@@ -204,7 +208,7 @@ describe('Table.Hover', () => {
});
});

it('perf', () => {
it('perf row', () => {
const renderTimes: Record<string, any> = {};

const TD = (props: any) => {
@@ -217,6 +221,7 @@ describe('Table.Hover', () => {

const wrapper = mount(
createTable({
colHoverable: false,
components: {
body: {
cell: TD,
@@ -229,11 +234,52 @@ describe('Table.Hover', () => {

wrapper.find('tbody td').first().simulate('mouseEnter');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();

wrapper.find('tbody td').first().simulate('mouseLeave');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();

expect(firstMountTimes).toEqual(renderTimes.Jack);
expect(renderTimes.Lucy).toBeGreaterThan(renderTimes.Jack);
});

it('perf col', () => {
const renderTimes: Record<string, any> = {};

const TD = (props: any) => {
const children = toArray(props.children);
const first = children[0] as unknown as string;

renderTimes[first] = (renderTimes[first] || 0) + 1;
return <td {...props} />;
};

const columns = [
{ title: 'index', dataIndex: 'key', key: 'key' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
];

const wrapper = mount(
createTable({
columns,
rowHoverable: false,
components: {
body: {
cell: TD,
},
},
}),
);

wrapper.find('tbody td').at(1).simulate('mouseEnter');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeTruthy();

wrapper.find('tbody td').at(1).simulate('mouseLeave');
expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy();
expect(wrapper.exists('.rc-table-cell-col-hover')).toBeFalsy();

expect(renderTimes.Lucy).toEqual(renderTimes.Jack);
});
});