forked from alibaba/ali-react-table
/
columnRangeHover.ts
101 lines (89 loc) · 2.44 KB
/
columnRangeHover.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React from 'react'
import { isLeafNode } from '../../common-utils'
import { TableTransform } from '../interfaces'
import { transformColumn } from '../utils'
const EMPTY_RANGE = { start: -1, end: -1 }
export type HoverRange = {
start: number
end: number
}
type ReactTdAttributes = React.TdHTMLAttributes<HTMLTableDataCellElement>
export function attachColumnHoverCellProps(
cellProps: ReactTdAttributes = {},
{
onChangeHoverRange,
hoverRange,
colRange,
hoverColor,
}: {
onChangeHoverRange: (nextColIndexRange: HoverRange) => void
hoverRange: HoverRange
colRange: HoverRange
hoverColor: string
},
): ReactTdAttributes {
const colIndexMatched = colRange.end > hoverRange.start && hoverRange.end > colRange.start
return {
...cellProps,
onMouseEnter(e) {
cellProps.onMouseEnter?.(e)
onChangeHoverRange(colRange)
},
onMouseLeave(e) {
cellProps.onMouseLeave?.(e)
onChangeHoverRange(EMPTY_RANGE)
},
style: {
...cellProps.style,
backgroundColor: colIndexMatched ? hoverColor : cellProps?.style?.backgroundColor,
},
}
}
export interface ColumnRangeHoverOptions {
hoverColor?: string
headerHoverColor?: string
hoverRange: HoverRange
onChangeHoverRange(nextColIndexRange: HoverRange): void
}
export function columnRangeHover({
hoverColor = '#f5f5f5',
headerHoverColor = '#ddd',
hoverRange,
onChangeHoverRange,
}: ColumnRangeHoverOptions): TableTransform {
return transformColumn((col, { range: colRange }) => {
if (!isLeafNode(col)) {
if (headerHoverColor == null) {
return col
}
return {
...col,
headerCellProps: attachColumnHoverCellProps(col.headerCellProps, {
onChangeHoverRange,
hoverColor: headerHoverColor,
colRange,
hoverRange,
}),
}
}
const prevGetCellProps = col.getCellProps
return {
...col,
headerCellProps: attachColumnHoverCellProps(col.headerCellProps, {
onChangeHoverRange,
hoverColor: headerHoverColor,
colRange,
hoverRange,
}),
getCellProps(value: any, record: any, rowIndex: number): ReactTdAttributes {
const prevCellProps = prevGetCellProps?.(value, record, rowIndex) ?? {}
return attachColumnHoverCellProps(prevCellProps, {
onChangeHoverRange,
hoverColor,
colRange,
hoverRange,
})
},
}
})
}