/
MRT_TableHeadCellResizeHandle.tsx
76 lines (73 loc) · 1.9 KB
/
MRT_TableHeadCellResizeHandle.tsx
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
import React from 'react';
import { Box, Divider } from '@mantine/core';
import { MRT_Header, MRT_TableInstance } from '..';
import { getPrimaryColor } from '../column.utils';
interface Props {
header: MRT_Header;
table: MRT_TableInstance;
}
export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
const {
getState,
options: { columnResizeMode },
setColumnSizingInfo,
} = table;
const { density } = getState();
const { column } = header;
return (
<Box
onDoubleClick={() => {
setColumnSizingInfo((old) => ({
...old,
isResizingColumn: false,
}));
column.resetSize();
}}
onMouseDown={header.getResizeHandler()}
onTouchStart={header.getResizeHandler()}
sx={(theme) => ({
cursor: 'col-resize',
marginRight:
density === 'xl'
? '-24px'
: density === 'lg'
? '-22px'
: density === 'md'
? '-20px'
: density === 'sm'
? '-16px'
: '-14px',
position: 'absolute',
right: '1px',
paddingLeft: '4px',
paddingRight: '4px',
'&:active > .mantine-Divider-vertical': {
borderLeftColor: getPrimaryColor(theme),
opacity: 1,
},
})}
style={{
transform:
column.getIsResizing() && columnResizeMode === 'onEnd'
? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
: undefined,
}}
>
<Divider
orientation="vertical"
size="lg"
sx={{
borderRadius: '2px',
borderWidth: '4px',
height: '24px',
touchAction: 'none',
transition: column.getIsResizing()
? undefined
: 'all 100ms ease-in-out',
userSelect: 'none',
zIndex: 4,
}}
/>
</Box>
);
};