@bifrostui/utils 1.4.3-beta.0 → 1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* 根据元素宽高判断是否超出边界，超出边界则重新定义方向
|
|
3
3
|
*/
|
|
4
|
-
export declare const getNewDirectionLocation: ({
|
|
5
|
-
|
|
4
|
+
export declare const getNewDirectionLocation: ({ scrollRoot, scrollRootOffset, childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
|
5
|
+
scrollRoot: any;
|
|
6
|
+
scrollRootOffset: any;
|
|
7
|
+
childrenOffset: any;
|
|
6
8
|
arrowDirection: any;
|
|
7
9
|
tipOffset: any;
|
|
8
10
|
arrowLocation: any;
|
|
@@ -14,17 +16,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
|
|
|
14
16
|
/**
|
|
15
17
|
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
|
16
18
|
*/
|
|
17
|
-
export declare const getDirectionLocationStyle: ({
|
|
18
|
-
|
|
19
|
+
export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
|
20
|
+
childrenOffset: any;
|
|
19
21
|
arrowDirection: any;
|
|
20
22
|
tipOffset: any;
|
|
21
23
|
arrowLocation: any;
|
|
22
24
|
offsetSpacing: any;
|
|
23
|
-
}) =>
|
|
25
|
+
}) => {
|
|
26
|
+
styles: any;
|
|
27
|
+
childrenStyle: any;
|
|
28
|
+
};
|
|
24
29
|
/**
|
|
25
30
|
* 获取气泡位置和箭头位置
|
|
26
31
|
*/
|
|
27
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
|
|
32
|
+
export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
|
|
33
|
+
scrollRoot?: Element;
|
|
28
34
|
childrenRef: any;
|
|
29
35
|
arrowDirection: any;
|
|
30
36
|
arrowLocation: any;
|
|
@@ -32,6 +38,7 @@ export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrow
|
|
|
32
38
|
selector: any;
|
|
33
39
|
}) => {
|
|
34
40
|
styles: any;
|
|
41
|
+
childrenStyle: any;
|
|
35
42
|
newArrowDirection: any;
|
|
36
43
|
newArrowLocation: any;
|
|
37
44
|
};
|
|
@@ -30,8 +30,13 @@ const directionCssMap = {
|
|
|
30
30
|
top: "bottom",
|
|
31
31
|
bottom: "top"
|
|
32
32
|
};
|
|
33
|
+
const isBodyScroll = (scrollRoot) => {
|
|
34
|
+
return scrollRoot === document.body;
|
|
35
|
+
};
|
|
33
36
|
const getNewDirectionLocation = ({
|
|
34
|
-
|
|
37
|
+
scrollRoot,
|
|
38
|
+
scrollRootOffset,
|
|
39
|
+
childrenOffset,
|
|
35
40
|
arrowDirection,
|
|
36
41
|
tipOffset,
|
|
37
42
|
arrowLocation,
|
|
@@ -44,43 +49,56 @@ const getNewDirectionLocation = ({
|
|
|
44
49
|
bottom: cBottom,
|
|
45
50
|
width: cWidth,
|
|
46
51
|
height: cHeight
|
|
47
|
-
} =
|
|
52
|
+
} = childrenOffset;
|
|
48
53
|
const { width, height } = tipOffset;
|
|
49
|
-
const
|
|
50
|
-
|
|
54
|
+
const {
|
|
55
|
+
top: sTop,
|
|
56
|
+
bottom: sBottom,
|
|
57
|
+
left: sLeft,
|
|
58
|
+
right: sRight
|
|
59
|
+
} = scrollRootOffset;
|
|
60
|
+
const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
|
61
|
+
const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
|
62
|
+
const maxTop = isBodyScroll(scrollRoot) ? 0 : sTop;
|
|
63
|
+
const maxBottom = isBodyScroll(scrollRoot) ? pageHeight : sBottom;
|
|
64
|
+
const maxLeft = isBodyScroll(scrollRoot) ? 0 : sLeft;
|
|
65
|
+
const maxRight = isBodyScroll(scrollRoot) ? pageWidth : sRight;
|
|
51
66
|
let newArrowDirection = arrowDirection;
|
|
52
67
|
let newArrowLocation = arrowLocation;
|
|
53
68
|
const isDirectionTop = arrowDirection === "top";
|
|
54
69
|
const isDirectionBottom = arrowDirection === "bottom";
|
|
55
70
|
const isDirectionLeft = arrowDirection === "left";
|
|
56
71
|
const isDirectionRight = arrowDirection === "right";
|
|
57
|
-
if (isDirectionTop && cTop - height - offsetSpacing <
|
|
72
|
+
if (isDirectionTop && cTop - height - offsetSpacing < maxTop || isDirectionBottom && cBottom + height + offsetSpacing > maxBottom || isDirectionLeft && cLeft - width - offsetSpacing < maxLeft || isDirectionRight && cRight + width + offsetSpacing > maxRight) {
|
|
58
73
|
newArrowDirection = directionCssMap[arrowDirection];
|
|
59
74
|
}
|
|
60
|
-
if (arrowLocation === "top" && cTop + height >
|
|
75
|
+
if (arrowLocation === "top" && cTop + height > maxBottom || arrowLocation === "bottom" && cBottom - height < maxTop || arrowLocation === "left" && cLeft + width > maxRight || arrowLocation === "right" && cRight - width < maxLeft) {
|
|
61
76
|
newArrowLocation = directionCssMap[arrowLocation];
|
|
62
77
|
}
|
|
63
78
|
const isCenter = arrowLocation === "center";
|
|
64
79
|
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
|
65
|
-
if (cLeft + (cWidth - width) / 2 + width >
|
|
80
|
+
if (cLeft + (cWidth - width) / 2 + width > maxRight) {
|
|
66
81
|
newArrowLocation = directionCssMap.left;
|
|
67
|
-
} else if (cLeft + (cWidth - width) / 2 <
|
|
82
|
+
} else if (cLeft + (cWidth - width) / 2 < maxLeft) {
|
|
68
83
|
newArrowLocation = directionCssMap.right;
|
|
69
84
|
}
|
|
70
85
|
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
|
71
|
-
if (cTop + (cHeight - height) / 2 + cHeight >
|
|
86
|
+
if (cTop + (cHeight - height) / 2 + cHeight > maxBottom) {
|
|
72
87
|
newArrowLocation = directionCssMap.top;
|
|
73
|
-
} else if (cTop + (cHeight - height) / 2 <
|
|
88
|
+
} else if (cTop + (cHeight - height) / 2 < maxTop) {
|
|
74
89
|
newArrowLocation = directionCssMap.bottom;
|
|
75
90
|
}
|
|
76
91
|
}
|
|
92
|
+
if (arrowLocation === "none") {
|
|
93
|
+
newArrowLocation = "none";
|
|
94
|
+
}
|
|
77
95
|
return {
|
|
78
96
|
newArrowDirection,
|
|
79
97
|
newArrowLocation
|
|
80
98
|
};
|
|
81
99
|
};
|
|
82
100
|
const getDirectionLocationStyle = ({
|
|
83
|
-
|
|
101
|
+
childrenOffset,
|
|
84
102
|
arrowDirection,
|
|
85
103
|
tipOffset,
|
|
86
104
|
arrowLocation,
|
|
@@ -96,7 +114,11 @@ const getDirectionLocationStyle = ({
|
|
|
96
114
|
right: cRight,
|
|
97
115
|
top: cTop,
|
|
98
116
|
bottom: cBottom
|
|
99
|
-
} =
|
|
117
|
+
} = childrenOffset;
|
|
118
|
+
let childrenStyle = {};
|
|
119
|
+
if (cWidth && cHeight) {
|
|
120
|
+
childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
|
|
121
|
+
}
|
|
100
122
|
const { width, height } = tipOffset;
|
|
101
123
|
if (arrowDirection === "top") {
|
|
102
124
|
styles.top = cTop - offsetSpacing - height;
|
|
@@ -110,6 +132,9 @@ const getDirectionLocationStyle = ({
|
|
|
110
132
|
case "right":
|
|
111
133
|
styles.left = cRight - width;
|
|
112
134
|
break;
|
|
135
|
+
case "none":
|
|
136
|
+
styles.left = cLeft;
|
|
137
|
+
break;
|
|
113
138
|
default:
|
|
114
139
|
break;
|
|
115
140
|
}
|
|
@@ -125,6 +150,9 @@ const getDirectionLocationStyle = ({
|
|
|
125
150
|
case "right":
|
|
126
151
|
styles.left = cRight - width;
|
|
127
152
|
break;
|
|
153
|
+
case "none":
|
|
154
|
+
styles.left = cLeft;
|
|
155
|
+
break;
|
|
128
156
|
default:
|
|
129
157
|
break;
|
|
130
158
|
}
|
|
@@ -140,6 +168,9 @@ const getDirectionLocationStyle = ({
|
|
|
140
168
|
case "bottom":
|
|
141
169
|
styles.top = cBottom - height;
|
|
142
170
|
break;
|
|
171
|
+
case "none":
|
|
172
|
+
styles.top = cTop;
|
|
173
|
+
break;
|
|
143
174
|
default:
|
|
144
175
|
break;
|
|
145
176
|
}
|
|
@@ -155,6 +186,9 @@ const getDirectionLocationStyle = ({
|
|
|
155
186
|
case "bottom":
|
|
156
187
|
styles.top = cBottom - height;
|
|
157
188
|
break;
|
|
189
|
+
case "none":
|
|
190
|
+
styles.top = cTop;
|
|
191
|
+
break;
|
|
158
192
|
default:
|
|
159
193
|
break;
|
|
160
194
|
}
|
|
@@ -165,9 +199,10 @@ const getDirectionLocationStyle = ({
|
|
|
165
199
|
if (styles.left) {
|
|
166
200
|
styles.left = `${styles.left + scrollLeft}px`;
|
|
167
201
|
}
|
|
168
|
-
return styles;
|
|
202
|
+
return { styles, childrenStyle };
|
|
169
203
|
};
|
|
170
204
|
const getStylesAndLocation = ({
|
|
205
|
+
scrollRoot = document.body,
|
|
171
206
|
childrenRef,
|
|
172
207
|
arrowDirection,
|
|
173
208
|
arrowLocation,
|
|
@@ -180,20 +215,23 @@ const getStylesAndLocation = ({
|
|
|
180
215
|
);
|
|
181
216
|
return null;
|
|
182
217
|
}
|
|
183
|
-
const
|
|
218
|
+
const childrenOffset = childrenRef.current.getBoundingClientRect();
|
|
184
219
|
const $rtDom = document.querySelector(selector);
|
|
185
220
|
if (!$rtDom)
|
|
186
221
|
return null;
|
|
187
222
|
const tipOffset = $rtDom.getBoundingClientRect();
|
|
223
|
+
const scrollRootOffset = scrollRoot.getBoundingClientRect();
|
|
188
224
|
const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
|
|
189
|
-
|
|
225
|
+
scrollRoot,
|
|
226
|
+
scrollRootOffset,
|
|
227
|
+
childrenOffset,
|
|
190
228
|
arrowDirection,
|
|
191
229
|
tipOffset,
|
|
192
230
|
arrowLocation,
|
|
193
231
|
offsetSpacing
|
|
194
232
|
});
|
|
195
|
-
const styles = getDirectionLocationStyle({
|
|
196
|
-
|
|
233
|
+
const { styles, childrenStyle } = getDirectionLocationStyle({
|
|
234
|
+
childrenOffset,
|
|
197
235
|
arrowDirection: newArrowDirection,
|
|
198
236
|
tipOffset,
|
|
199
237
|
arrowLocation: newArrowLocation,
|
|
@@ -202,6 +240,7 @@ const getStylesAndLocation = ({
|
|
|
202
240
|
styles.visibility = "visible";
|
|
203
241
|
return {
|
|
204
242
|
styles,
|
|
243
|
+
childrenStyle,
|
|
205
244
|
newArrowDirection,
|
|
206
245
|
newArrowLocation
|
|
207
246
|
};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* 根据元素宽高判断是否超出边界，超出边界则重新定义方向
|
|
3
3
|
*/
|
|
4
|
-
export declare const getNewDirectionLocation: ({
|
|
5
|
-
|
|
4
|
+
export declare const getNewDirectionLocation: ({ scrollRoot, scrollRootOffset, childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
|
5
|
+
scrollRoot: any;
|
|
6
|
+
scrollRootOffset: any;
|
|
7
|
+
childrenOffset: any;
|
|
6
8
|
arrowDirection: any;
|
|
7
9
|
tipOffset: any;
|
|
8
10
|
arrowLocation: any;
|
|
@@ -14,17 +16,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
|
|
|
14
16
|
/**
|
|
15
17
|
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
|
16
18
|
*/
|
|
17
|
-
export declare const getDirectionLocationStyle: ({
|
|
18
|
-
|
|
19
|
+
export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
|
20
|
+
childrenOffset: any;
|
|
19
21
|
arrowDirection: any;
|
|
20
22
|
tipOffset: any;
|
|
21
23
|
arrowLocation: any;
|
|
22
24
|
offsetSpacing: any;
|
|
23
|
-
}) =>
|
|
25
|
+
}) => {
|
|
26
|
+
styles: any;
|
|
27
|
+
childrenStyle: any;
|
|
28
|
+
};
|
|
24
29
|
/**
|
|
25
30
|
* 获取气泡位置和箭头位置
|
|
26
31
|
*/
|
|
27
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
|
|
32
|
+
export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
|
|
33
|
+
scrollRoot?: Element;
|
|
28
34
|
childrenRef: any;
|
|
29
35
|
arrowDirection: any;
|
|
30
36
|
arrowLocation: any;
|
|
@@ -32,6 +38,7 @@ export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrow
|
|
|
32
38
|
selector: any;
|
|
33
39
|
}) => {
|
|
34
40
|
styles: any;
|
|
41
|
+
childrenStyle: any;
|
|
35
42
|
newArrowDirection: any;
|
|
36
43
|
newArrowLocation: any;
|
|
37
44
|
};
|
|
@@ -4,8 +4,13 @@ const directionCssMap = {
|
|
|
4
4
|
top: "bottom",
|
|
5
5
|
bottom: "top"
|
|
6
6
|
};
|
|
7
|
+
const isBodyScroll = (scrollRoot) => {
|
|
8
|
+
return scrollRoot === document.body;
|
|
9
|
+
};
|
|
7
10
|
const getNewDirectionLocation = ({
|
|
8
|
-
|
|
11
|
+
scrollRoot,
|
|
12
|
+
scrollRootOffset,
|
|
13
|
+
childrenOffset,
|
|
9
14
|
arrowDirection,
|
|
10
15
|
tipOffset,
|
|
11
16
|
arrowLocation,
|
|
@@ -18,43 +23,56 @@ const getNewDirectionLocation = ({
|
|
|
18
23
|
bottom: cBottom,
|
|
19
24
|
width: cWidth,
|
|
20
25
|
height: cHeight
|
|
21
|
-
} =
|
|
26
|
+
} = childrenOffset;
|
|
22
27
|
const { width, height } = tipOffset;
|
|
23
|
-
const
|
|
24
|
-
|
|
28
|
+
const {
|
|
29
|
+
top: sTop,
|
|
30
|
+
bottom: sBottom,
|
|
31
|
+
left: sLeft,
|
|
32
|
+
right: sRight
|
|
33
|
+
} = scrollRootOffset;
|
|
34
|
+
const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
|
35
|
+
const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
|
36
|
+
const maxTop = isBodyScroll(scrollRoot) ? 0 : sTop;
|
|
37
|
+
const maxBottom = isBodyScroll(scrollRoot) ? pageHeight : sBottom;
|
|
38
|
+
const maxLeft = isBodyScroll(scrollRoot) ? 0 : sLeft;
|
|
39
|
+
const maxRight = isBodyScroll(scrollRoot) ? pageWidth : sRight;
|
|
25
40
|
let newArrowDirection = arrowDirection;
|
|
26
41
|
let newArrowLocation = arrowLocation;
|
|
27
42
|
const isDirectionTop = arrowDirection === "top";
|
|
28
43
|
const isDirectionBottom = arrowDirection === "bottom";
|
|
29
44
|
const isDirectionLeft = arrowDirection === "left";
|
|
30
45
|
const isDirectionRight = arrowDirection === "right";
|
|
31
|
-
if (isDirectionTop && cTop - height - offsetSpacing <
|
|
46
|
+
if (isDirectionTop && cTop - height - offsetSpacing < maxTop || isDirectionBottom && cBottom + height + offsetSpacing > maxBottom || isDirectionLeft && cLeft - width - offsetSpacing < maxLeft || isDirectionRight && cRight + width + offsetSpacing > maxRight) {
|
|
32
47
|
newArrowDirection = directionCssMap[arrowDirection];
|
|
33
48
|
}
|
|
34
|
-
if (arrowLocation === "top" && cTop + height >
|
|
49
|
+
if (arrowLocation === "top" && cTop + height > maxBottom || arrowLocation === "bottom" && cBottom - height < maxTop || arrowLocation === "left" && cLeft + width > maxRight || arrowLocation === "right" && cRight - width < maxLeft) {
|
|
35
50
|
newArrowLocation = directionCssMap[arrowLocation];
|
|
36
51
|
}
|
|
37
52
|
const isCenter = arrowLocation === "center";
|
|
38
53
|
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
|
39
|
-
if (cLeft + (cWidth - width) / 2 + width >
|
|
54
|
+
if (cLeft + (cWidth - width) / 2 + width > maxRight) {
|
|
40
55
|
newArrowLocation = directionCssMap.left;
|
|
41
|
-
} else if (cLeft + (cWidth - width) / 2 <
|
|
56
|
+
} else if (cLeft + (cWidth - width) / 2 < maxLeft) {
|
|
42
57
|
newArrowLocation = directionCssMap.right;
|
|
43
58
|
}
|
|
44
59
|
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
|
45
|
-
if (cTop + (cHeight - height) / 2 + cHeight >
|
|
60
|
+
if (cTop + (cHeight - height) / 2 + cHeight > maxBottom) {
|
|
46
61
|
newArrowLocation = directionCssMap.top;
|
|
47
|
-
} else if (cTop + (cHeight - height) / 2 <
|
|
62
|
+
} else if (cTop + (cHeight - height) / 2 < maxTop) {
|
|
48
63
|
newArrowLocation = directionCssMap.bottom;
|
|
49
64
|
}
|
|
50
65
|
}
|
|
66
|
+
if (arrowLocation === "none") {
|
|
67
|
+
newArrowLocation = "none";
|
|
68
|
+
}
|
|
51
69
|
return {
|
|
52
70
|
newArrowDirection,
|
|
53
71
|
newArrowLocation
|
|
54
72
|
};
|
|
55
73
|
};
|
|
56
74
|
const getDirectionLocationStyle = ({
|
|
57
|
-
|
|
75
|
+
childrenOffset,
|
|
58
76
|
arrowDirection,
|
|
59
77
|
tipOffset,
|
|
60
78
|
arrowLocation,
|
|
@@ -70,7 +88,11 @@ const getDirectionLocationStyle = ({
|
|
|
70
88
|
right: cRight,
|
|
71
89
|
top: cTop,
|
|
72
90
|
bottom: cBottom
|
|
73
|
-
} =
|
|
91
|
+
} = childrenOffset;
|
|
92
|
+
let childrenStyle = {};
|
|
93
|
+
if (cWidth && cHeight) {
|
|
94
|
+
childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
|
|
95
|
+
}
|
|
74
96
|
const { width, height } = tipOffset;
|
|
75
97
|
if (arrowDirection === "top") {
|
|
76
98
|
styles.top = cTop - offsetSpacing - height;
|
|
@@ -84,6 +106,9 @@ const getDirectionLocationStyle = ({
|
|
|
84
106
|
case "right":
|
|
85
107
|
styles.left = cRight - width;
|
|
86
108
|
break;
|
|
109
|
+
case "none":
|
|
110
|
+
styles.left = cLeft;
|
|
111
|
+
break;
|
|
87
112
|
default:
|
|
88
113
|
break;
|
|
89
114
|
}
|
|
@@ -99,6 +124,9 @@ const getDirectionLocationStyle = ({
|
|
|
99
124
|
case "right":
|
|
100
125
|
styles.left = cRight - width;
|
|
101
126
|
break;
|
|
127
|
+
case "none":
|
|
128
|
+
styles.left = cLeft;
|
|
129
|
+
break;
|
|
102
130
|
default:
|
|
103
131
|
break;
|
|
104
132
|
}
|
|
@@ -114,6 +142,9 @@ const getDirectionLocationStyle = ({
|
|
|
114
142
|
case "bottom":
|
|
115
143
|
styles.top = cBottom - height;
|
|
116
144
|
break;
|
|
145
|
+
case "none":
|
|
146
|
+
styles.top = cTop;
|
|
147
|
+
break;
|
|
117
148
|
default:
|
|
118
149
|
break;
|
|
119
150
|
}
|
|
@@ -129,6 +160,9 @@ const getDirectionLocationStyle = ({
|
|
|
129
160
|
case "bottom":
|
|
130
161
|
styles.top = cBottom - height;
|
|
131
162
|
break;
|
|
163
|
+
case "none":
|
|
164
|
+
styles.top = cTop;
|
|
165
|
+
break;
|
|
132
166
|
default:
|
|
133
167
|
break;
|
|
134
168
|
}
|
|
@@ -139,9 +173,10 @@ const getDirectionLocationStyle = ({
|
|
|
139
173
|
if (styles.left) {
|
|
140
174
|
styles.left = `${styles.left + scrollLeft}px`;
|
|
141
175
|
}
|
|
142
|
-
return styles;
|
|
176
|
+
return { styles, childrenStyle };
|
|
143
177
|
};
|
|
144
178
|
const getStylesAndLocation = ({
|
|
179
|
+
scrollRoot = document.body,
|
|
145
180
|
childrenRef,
|
|
146
181
|
arrowDirection,
|
|
147
182
|
arrowLocation,
|
|
@@ -154,20 +189,23 @@ const getStylesAndLocation = ({
|
|
|
154
189
|
);
|
|
155
190
|
return null;
|
|
156
191
|
}
|
|
157
|
-
const
|
|
192
|
+
const childrenOffset = childrenRef.current.getBoundingClientRect();
|
|
158
193
|
const $rtDom = document.querySelector(selector);
|
|
159
194
|
if (!$rtDom)
|
|
160
195
|
return null;
|
|
161
196
|
const tipOffset = $rtDom.getBoundingClientRect();
|
|
197
|
+
const scrollRootOffset = scrollRoot.getBoundingClientRect();
|
|
162
198
|
const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
|
|
163
|
-
|
|
199
|
+
scrollRoot,
|
|
200
|
+
scrollRootOffset,
|
|
201
|
+
childrenOffset,
|
|
164
202
|
arrowDirection,
|
|
165
203
|
tipOffset,
|
|
166
204
|
arrowLocation,
|
|
167
205
|
offsetSpacing
|
|
168
206
|
});
|
|
169
|
-
const styles = getDirectionLocationStyle({
|
|
170
|
-
|
|
207
|
+
const { styles, childrenStyle } = getDirectionLocationStyle({
|
|
208
|
+
childrenOffset,
|
|
171
209
|
arrowDirection: newArrowDirection,
|
|
172
210
|
tipOffset,
|
|
173
211
|
arrowLocation: newArrowLocation,
|
|
@@ -176,6 +214,7 @@ const getStylesAndLocation = ({
|
|
|
176
214
|
styles.visibility = "visible";
|
|
177
215
|
return {
|
|
178
216
|
styles,
|
|
217
|
+
childrenStyle,
|
|
179
218
|
newArrowDirection,
|
|
180
219
|
newArrowLocation
|
|
181
220
|
};
|