forked from mantinedev/mantine
/
get-arrow-position-styles.ts
112 lines (97 loc) · 2.28 KB
/
get-arrow-position-styles.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
102
103
104
105
106
107
108
109
110
111
112
import type { FloatingPosition, FloatingSide, FloatingPlacement } from '../types';
function horizontalSide(
placement: FloatingPlacement | 'center',
arrowY: number,
arrowOffset: number
) {
if (placement === 'center') {
return { top: arrowY };
}
if (placement === 'end') {
return { bottom: arrowOffset };
}
if (placement === 'start') {
return { top: arrowOffset };
}
return {};
}
function verticalSide(
placement: FloatingPlacement | 'center',
arrowX: number,
arrowOffset: number,
dir: 'rtl' | 'ltr'
) {
if (placement === 'center') {
return { [dir === 'ltr' ? 'left' : 'right']: arrowX };
}
if (placement === 'end') {
return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset };
}
if (placement === 'start') {
return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset };
}
return {};
}
export function getArrowPositionStyles({
position,
withBorder,
arrowSize,
arrowOffset,
arrowX,
arrowY,
dir,
}: {
position: FloatingPosition;
withBorder: boolean;
arrowSize: number;
arrowOffset: number;
arrowX: number;
arrowY: number;
dir: 'rtl' | 'ltr';
}) {
const [side, placement = 'center'] = position.split('-') as [FloatingSide, FloatingPlacement];
const baseStyles = {
width: arrowSize,
height: arrowSize,
transform: 'rotate(45deg)',
position: 'absolute',
};
const arrowPosition = withBorder ? -arrowSize / 2 - 1 : -arrowSize / 2;
if (side === 'left') {
return {
...baseStyles,
...horizontalSide(placement, arrowY, arrowOffset),
right: arrowPosition,
borderLeft: 0,
borderBottom: 0,
};
}
if (side === 'right') {
return {
...baseStyles,
...horizontalSide(placement, arrowY, arrowOffset),
left: arrowPosition,
borderRight: 0,
borderTop: 0,
};
}
if (side === 'top') {
return {
...baseStyles,
...verticalSide(placement, arrowX, arrowOffset, dir),
bottom: arrowPosition,
borderTop: 0,
[dir === 'ltr' ? 'borderLeft' : 'borderRight']: 0,
};
}
if (side === 'bottom') {
return {
...baseStyles,
...verticalSide(placement, arrowX, arrowOffset, dir),
top: arrowPosition,
borderBottom: 0,
[dir === 'ltr' ? 'borderRight' : 'borderLeft']: 0,
};
}
return {};
}