@bifrostui/utils 1.4.2-beta.1 → 1.4.2
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,12 +1,11 @@
|
|
1
1
|
/**
|
2
2
|
* 根据元素宽高判断是否超出边界,超出边界则重新定义方向
|
3
3
|
*/
|
4
|
-
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation,
|
4
|
+
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
5
5
|
rootOffset: any;
|
6
6
|
arrowDirection: any;
|
7
7
|
tipOffset: any;
|
8
8
|
arrowLocation: any;
|
9
|
-
offsetSpacing: any;
|
10
9
|
}) => {
|
11
10
|
newArrowDirection: any;
|
12
11
|
newArrowLocation: any;
|
@@ -14,21 +13,19 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
|
|
14
13
|
/**
|
15
14
|
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
16
15
|
*/
|
17
|
-
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation,
|
16
|
+
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
18
17
|
rootOffset: any;
|
19
18
|
arrowDirection: any;
|
20
19
|
tipOffset: any;
|
21
20
|
arrowLocation: any;
|
22
|
-
offsetSpacing: any;
|
23
21
|
}) => any;
|
24
22
|
/**
|
25
23
|
* 获取气泡位置和箭头位置
|
26
24
|
*/
|
27
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation,
|
25
|
+
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
|
28
26
|
childrenRef: any;
|
29
27
|
arrowDirection: any;
|
30
28
|
arrowLocation: any;
|
31
|
-
offsetSpacing: any;
|
32
29
|
selector: any;
|
33
30
|
}) => {
|
34
31
|
styles: any;
|
@@ -33,17 +33,9 @@ const getNewDirectionLocation = ({
|
|
33
33
|
rootOffset,
|
34
34
|
arrowDirection,
|
35
35
|
tipOffset,
|
36
|
-
arrowLocation
|
37
|
-
offsetSpacing
|
36
|
+
arrowLocation
|
38
37
|
}) => {
|
39
|
-
const {
|
40
|
-
left: cLeft,
|
41
|
-
right: cRight,
|
42
|
-
top: cTop,
|
43
|
-
bottom: cBottom,
|
44
|
-
width: cWidth,
|
45
|
-
height: cHeight
|
46
|
-
} = rootOffset;
|
38
|
+
const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
|
47
39
|
const { width, height } = tipOffset;
|
48
40
|
const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
49
41
|
const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
@@ -53,7 +45,7 @@ const getNewDirectionLocation = ({
|
|
53
45
|
const isDirectionBottom = arrowDirection === "bottom";
|
54
46
|
const isDirectionLeft = arrowDirection === "left";
|
55
47
|
const isDirectionRight = arrowDirection === "right";
|
56
|
-
if (isDirectionTop && cTop - height
|
48
|
+
if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
|
57
49
|
newArrowDirection = directionCssMap[arrowDirection];
|
58
50
|
}
|
59
51
|
if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
|
@@ -61,15 +53,15 @@ const getNewDirectionLocation = ({
|
|
61
53
|
}
|
62
54
|
const isCenter = arrowLocation === "center";
|
63
55
|
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
64
|
-
if (cLeft +
|
56
|
+
if (cLeft + width > pgegWidth) {
|
65
57
|
newArrowLocation = directionCssMap.left;
|
66
|
-
} else if (
|
58
|
+
} else if (cRight - width < 0) {
|
67
59
|
newArrowLocation = directionCssMap.right;
|
68
60
|
}
|
69
61
|
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
70
|
-
if (cTop +
|
62
|
+
if (cTop + height > pgegHeight) {
|
71
63
|
newArrowLocation = directionCssMap.top;
|
72
|
-
} else if (
|
64
|
+
} else if (cBottom - height < 0) {
|
73
65
|
newArrowLocation = directionCssMap.bottom;
|
74
66
|
}
|
75
67
|
}
|
@@ -82,11 +74,10 @@ const getDirectionLocationStyle = ({
|
|
82
74
|
rootOffset,
|
83
75
|
arrowDirection,
|
84
76
|
tipOffset,
|
85
|
-
arrowLocation
|
86
|
-
offsetSpacing
|
77
|
+
arrowLocation
|
87
78
|
}) => {
|
88
79
|
const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
|
89
|
-
const scrollLeft = window.
|
80
|
+
const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
|
90
81
|
const styles = {};
|
91
82
|
const {
|
92
83
|
width: cWidth,
|
@@ -98,7 +89,7 @@ const getDirectionLocationStyle = ({
|
|
98
89
|
} = rootOffset;
|
99
90
|
const { width, height } = tipOffset;
|
100
91
|
if (arrowDirection === "top") {
|
101
|
-
styles.top = cTop
|
92
|
+
styles.top = cTop;
|
102
93
|
styles.transform = `translateY(-100%)`;
|
103
94
|
switch (arrowLocation) {
|
104
95
|
case "left":
|
@@ -115,7 +106,7 @@ const getDirectionLocationStyle = ({
|
|
115
106
|
break;
|
116
107
|
}
|
117
108
|
} else if (arrowDirection === "bottom") {
|
118
|
-
styles.top = cBottom
|
109
|
+
styles.top = cBottom;
|
119
110
|
switch (arrowLocation) {
|
120
111
|
case "left":
|
121
112
|
styles.left = cLeft;
|
@@ -131,7 +122,7 @@ const getDirectionLocationStyle = ({
|
|
131
122
|
break;
|
132
123
|
}
|
133
124
|
} else if (arrowDirection === "left") {
|
134
|
-
styles.left = cLeft
|
125
|
+
styles.left = cLeft;
|
135
126
|
styles.transform = `translateX(-100%)`;
|
136
127
|
switch (arrowLocation) {
|
137
128
|
case "top":
|
@@ -148,7 +139,7 @@ const getDirectionLocationStyle = ({
|
|
148
139
|
break;
|
149
140
|
}
|
150
141
|
} else if (arrowDirection === "right") {
|
151
|
-
styles.left = cRight
|
142
|
+
styles.left = cRight;
|
152
143
|
switch (arrowLocation) {
|
153
144
|
case "top":
|
154
145
|
styles.top = cTop;
|
@@ -170,14 +161,12 @@ const getDirectionLocationStyle = ({
|
|
170
161
|
if (styles.left) {
|
171
162
|
styles.left = `${styles.left + scrollLeft}px`;
|
172
163
|
}
|
173
|
-
styles.width = `${width}px`;
|
174
164
|
return styles;
|
175
165
|
};
|
176
166
|
const getStylesAndLocation = ({
|
177
167
|
childrenRef,
|
178
168
|
arrowDirection,
|
179
169
|
arrowLocation,
|
180
|
-
offsetSpacing,
|
181
170
|
selector
|
182
171
|
}) => {
|
183
172
|
if (!(childrenRef == null ? void 0 : childrenRef.current)) {
|
@@ -195,15 +184,13 @@ const getStylesAndLocation = ({
|
|
195
184
|
rootOffset,
|
196
185
|
arrowDirection,
|
197
186
|
tipOffset,
|
198
|
-
arrowLocation
|
199
|
-
offsetSpacing
|
187
|
+
arrowLocation
|
200
188
|
});
|
201
189
|
const styles = getDirectionLocationStyle({
|
202
190
|
rootOffset,
|
203
191
|
arrowDirection: newArrowDirection,
|
204
192
|
tipOffset,
|
205
|
-
arrowLocation: newArrowLocation
|
206
|
-
offsetSpacing
|
193
|
+
arrowLocation: newArrowLocation
|
207
194
|
});
|
208
195
|
styles.visibility = "visible";
|
209
196
|
return {
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import type { TaroElement } from '@tarojs/runtime';
|
2
|
-
declare const getRootElement: (rootEle?: TaroElement | (() => TaroElement)) =>
|
2
|
+
declare const getRootElement: (rootEle?: TaroElement | (() => TaroElement)) => TaroElement | HTMLElement;
|
3
3
|
export default getRootElement;
|
@@ -1,12 +1,11 @@
|
|
1
1
|
/**
|
2
2
|
* 根据元素宽高判断是否超出边界,超出边界则重新定义方向
|
3
3
|
*/
|
4
|
-
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation,
|
4
|
+
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
5
5
|
rootOffset: any;
|
6
6
|
arrowDirection: any;
|
7
7
|
tipOffset: any;
|
8
8
|
arrowLocation: any;
|
9
|
-
offsetSpacing: any;
|
10
9
|
}) => {
|
11
10
|
newArrowDirection: any;
|
12
11
|
newArrowLocation: any;
|
@@ -14,21 +13,19 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
|
|
14
13
|
/**
|
15
14
|
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
16
15
|
*/
|
17
|
-
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation,
|
16
|
+
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
18
17
|
rootOffset: any;
|
19
18
|
arrowDirection: any;
|
20
19
|
tipOffset: any;
|
21
20
|
arrowLocation: any;
|
22
|
-
offsetSpacing: any;
|
23
21
|
}) => any;
|
24
22
|
/**
|
25
23
|
* 获取气泡位置和箭头位置
|
26
24
|
*/
|
27
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation,
|
25
|
+
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
|
28
26
|
childrenRef: any;
|
29
27
|
arrowDirection: any;
|
30
28
|
arrowLocation: any;
|
31
|
-
offsetSpacing: any;
|
32
29
|
selector: any;
|
33
30
|
}) => {
|
34
31
|
styles: any;
|
@@ -8,17 +8,9 @@ const getNewDirectionLocation = ({
|
|
8
8
|
rootOffset,
|
9
9
|
arrowDirection,
|
10
10
|
tipOffset,
|
11
|
-
arrowLocation
|
12
|
-
offsetSpacing
|
11
|
+
arrowLocation
|
13
12
|
}) => {
|
14
|
-
const {
|
15
|
-
left: cLeft,
|
16
|
-
right: cRight,
|
17
|
-
top: cTop,
|
18
|
-
bottom: cBottom,
|
19
|
-
width: cWidth,
|
20
|
-
height: cHeight
|
21
|
-
} = rootOffset;
|
13
|
+
const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
|
22
14
|
const { width, height } = tipOffset;
|
23
15
|
const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
24
16
|
const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
@@ -28,7 +20,7 @@ const getNewDirectionLocation = ({
|
|
28
20
|
const isDirectionBottom = arrowDirection === "bottom";
|
29
21
|
const isDirectionLeft = arrowDirection === "left";
|
30
22
|
const isDirectionRight = arrowDirection === "right";
|
31
|
-
if (isDirectionTop && cTop - height
|
23
|
+
if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
|
32
24
|
newArrowDirection = directionCssMap[arrowDirection];
|
33
25
|
}
|
34
26
|
if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
|
@@ -36,15 +28,15 @@ const getNewDirectionLocation = ({
|
|
36
28
|
}
|
37
29
|
const isCenter = arrowLocation === "center";
|
38
30
|
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
39
|
-
if (cLeft +
|
31
|
+
if (cLeft + width > pgegWidth) {
|
40
32
|
newArrowLocation = directionCssMap.left;
|
41
|
-
} else if (
|
33
|
+
} else if (cRight - width < 0) {
|
42
34
|
newArrowLocation = directionCssMap.right;
|
43
35
|
}
|
44
36
|
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
45
|
-
if (cTop +
|
37
|
+
if (cTop + height > pgegHeight) {
|
46
38
|
newArrowLocation = directionCssMap.top;
|
47
|
-
} else if (
|
39
|
+
} else if (cBottom - height < 0) {
|
48
40
|
newArrowLocation = directionCssMap.bottom;
|
49
41
|
}
|
50
42
|
}
|
@@ -57,11 +49,10 @@ const getDirectionLocationStyle = ({
|
|
57
49
|
rootOffset,
|
58
50
|
arrowDirection,
|
59
51
|
tipOffset,
|
60
|
-
arrowLocation
|
61
|
-
offsetSpacing
|
52
|
+
arrowLocation
|
62
53
|
}) => {
|
63
54
|
const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
|
64
|
-
const scrollLeft = window.
|
55
|
+
const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
|
65
56
|
const styles = {};
|
66
57
|
const {
|
67
58
|
width: cWidth,
|
@@ -73,7 +64,7 @@ const getDirectionLocationStyle = ({
|
|
73
64
|
} = rootOffset;
|
74
65
|
const { width, height } = tipOffset;
|
75
66
|
if (arrowDirection === "top") {
|
76
|
-
styles.top = cTop
|
67
|
+
styles.top = cTop;
|
77
68
|
styles.transform = `translateY(-100%)`;
|
78
69
|
switch (arrowLocation) {
|
79
70
|
case "left":
|
@@ -90,7 +81,7 @@ const getDirectionLocationStyle = ({
|
|
90
81
|
break;
|
91
82
|
}
|
92
83
|
} else if (arrowDirection === "bottom") {
|
93
|
-
styles.top = cBottom
|
84
|
+
styles.top = cBottom;
|
94
85
|
switch (arrowLocation) {
|
95
86
|
case "left":
|
96
87
|
styles.left = cLeft;
|
@@ -106,7 +97,7 @@ const getDirectionLocationStyle = ({
|
|
106
97
|
break;
|
107
98
|
}
|
108
99
|
} else if (arrowDirection === "left") {
|
109
|
-
styles.left = cLeft
|
100
|
+
styles.left = cLeft;
|
110
101
|
styles.transform = `translateX(-100%)`;
|
111
102
|
switch (arrowLocation) {
|
112
103
|
case "top":
|
@@ -123,7 +114,7 @@ const getDirectionLocationStyle = ({
|
|
123
114
|
break;
|
124
115
|
}
|
125
116
|
} else if (arrowDirection === "right") {
|
126
|
-
styles.left = cRight
|
117
|
+
styles.left = cRight;
|
127
118
|
switch (arrowLocation) {
|
128
119
|
case "top":
|
129
120
|
styles.top = cTop;
|
@@ -145,14 +136,12 @@ const getDirectionLocationStyle = ({
|
|
145
136
|
if (styles.left) {
|
146
137
|
styles.left = `${styles.left + scrollLeft}px`;
|
147
138
|
}
|
148
|
-
styles.width = `${width}px`;
|
149
139
|
return styles;
|
150
140
|
};
|
151
141
|
const getStylesAndLocation = ({
|
152
142
|
childrenRef,
|
153
143
|
arrowDirection,
|
154
144
|
arrowLocation,
|
155
|
-
offsetSpacing,
|
156
145
|
selector
|
157
146
|
}) => {
|
158
147
|
if (!(childrenRef == null ? void 0 : childrenRef.current)) {
|
@@ -170,15 +159,13 @@ const getStylesAndLocation = ({
|
|
170
159
|
rootOffset,
|
171
160
|
arrowDirection,
|
172
161
|
tipOffset,
|
173
|
-
arrowLocation
|
174
|
-
offsetSpacing
|
162
|
+
arrowLocation
|
175
163
|
});
|
176
164
|
const styles = getDirectionLocationStyle({
|
177
165
|
rootOffset,
|
178
166
|
arrowDirection: newArrowDirection,
|
179
167
|
tipOffset,
|
180
|
-
arrowLocation: newArrowLocation
|
181
|
-
offsetSpacing
|
168
|
+
arrowLocation: newArrowLocation
|
182
169
|
});
|
183
170
|
styles.visibility = "visible";
|
184
171
|
return {
|