@bifrostui/utils 1.4.2 → 1.4.3-beta.0
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.
- package/dist/directionLocationUtil.d.ts +15 -3
- package/dist/directionLocationUtil.js +46 -25
- package/dist/getRootElement/index.miniapp.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -0
- package/es/directionLocationUtil.d.ts +15 -3
- package/es/directionLocationUtil.js +45 -25
- package/es/index.d.ts +1 -1
- package/es/index.js +3 -1
- package/package.json +1 -1
@@ -1,11 +1,12 @@
|
|
1
1
|
/**
|
2
2
|
* 根据元素宽高判断是否超出边界,超出边界则重新定义方向
|
3
3
|
*/
|
4
|
-
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
4
|
+
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
5
5
|
rootOffset: any;
|
6
6
|
arrowDirection: any;
|
7
7
|
tipOffset: any;
|
8
8
|
arrowLocation: any;
|
9
|
+
offsetSpacing: any;
|
9
10
|
}) => {
|
10
11
|
newArrowDirection: any;
|
11
12
|
newArrowLocation: any;
|
@@ -13,19 +14,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
|
|
13
14
|
/**
|
14
15
|
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
15
16
|
*/
|
16
|
-
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
17
|
+
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
17
18
|
rootOffset: any;
|
18
19
|
arrowDirection: any;
|
19
20
|
tipOffset: any;
|
20
21
|
arrowLocation: any;
|
22
|
+
offsetSpacing: any;
|
21
23
|
}) => any;
|
22
24
|
/**
|
23
25
|
* 获取气泡位置和箭头位置
|
24
26
|
*/
|
25
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
|
27
|
+
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
|
26
28
|
childrenRef: any;
|
27
29
|
arrowDirection: any;
|
28
30
|
arrowLocation: any;
|
31
|
+
offsetSpacing: any;
|
29
32
|
selector: any;
|
30
33
|
}) => {
|
31
34
|
styles: any;
|
@@ -38,3 +41,12 @@ export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
|
|
38
41
|
show: any;
|
39
42
|
hide: any;
|
40
43
|
}) => {};
|
44
|
+
/**
|
45
|
+
* for example: placement = 'topLeft', return { direction: 'top', location: 'left' }
|
46
|
+
* @param placement
|
47
|
+
* @returns
|
48
|
+
*/
|
49
|
+
export declare const parsePlacement: (placement: any) => {
|
50
|
+
direction: any;
|
51
|
+
location: any;
|
52
|
+
};
|
@@ -20,6 +20,7 @@ __export(directionLocationUtil_exports, {
|
|
20
20
|
getDirectionLocationStyle: () => getDirectionLocationStyle,
|
21
21
|
getNewDirectionLocation: () => getNewDirectionLocation,
|
22
22
|
getStylesAndLocation: () => getStylesAndLocation,
|
23
|
+
parsePlacement: () => parsePlacement,
|
23
24
|
triggerEventTransform: () => triggerEventTransform
|
24
25
|
});
|
25
26
|
module.exports = __toCommonJS(directionLocationUtil_exports);
|
@@ -33,9 +34,17 @@ const getNewDirectionLocation = ({
|
|
33
34
|
rootOffset,
|
34
35
|
arrowDirection,
|
35
36
|
tipOffset,
|
36
|
-
arrowLocation
|
37
|
+
arrowLocation,
|
38
|
+
offsetSpacing
|
37
39
|
}) => {
|
38
|
-
const {
|
40
|
+
const {
|
41
|
+
left: cLeft,
|
42
|
+
right: cRight,
|
43
|
+
top: cTop,
|
44
|
+
bottom: cBottom,
|
45
|
+
width: cWidth,
|
46
|
+
height: cHeight
|
47
|
+
} = rootOffset;
|
39
48
|
const { width, height } = tipOffset;
|
40
49
|
const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
41
50
|
const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
@@ -45,7 +54,7 @@ const getNewDirectionLocation = ({
|
|
45
54
|
const isDirectionBottom = arrowDirection === "bottom";
|
46
55
|
const isDirectionLeft = arrowDirection === "left";
|
47
56
|
const isDirectionRight = arrowDirection === "right";
|
48
|
-
if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
|
57
|
+
if (isDirectionTop && cTop - height - offsetSpacing < 0 || isDirectionBottom && cBottom + height + offsetSpacing > pgegHeight || isDirectionLeft && cLeft - width - offsetSpacing < 0 || isDirectionRight && cRight + width + offsetSpacing > pgegWidth) {
|
49
58
|
newArrowDirection = directionCssMap[arrowDirection];
|
50
59
|
}
|
51
60
|
if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
|
@@ -53,15 +62,15 @@ const getNewDirectionLocation = ({
|
|
53
62
|
}
|
54
63
|
const isCenter = arrowLocation === "center";
|
55
64
|
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
56
|
-
if (cLeft + width > pgegWidth) {
|
65
|
+
if (cLeft + (cWidth - width) / 2 + width > pgegWidth) {
|
57
66
|
newArrowLocation = directionCssMap.left;
|
58
|
-
} else if (
|
67
|
+
} else if (cLeft + (cWidth - width) / 2 < 0) {
|
59
68
|
newArrowLocation = directionCssMap.right;
|
60
69
|
}
|
61
70
|
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
62
|
-
if (cTop + height > pgegHeight) {
|
71
|
+
if (cTop + (cHeight - height) / 2 + cHeight > pgegHeight) {
|
63
72
|
newArrowLocation = directionCssMap.top;
|
64
|
-
} else if (
|
73
|
+
} else if (cTop + (cHeight - height) / 2 < 0) {
|
65
74
|
newArrowLocation = directionCssMap.bottom;
|
66
75
|
}
|
67
76
|
}
|
@@ -74,10 +83,11 @@ const getDirectionLocationStyle = ({
|
|
74
83
|
rootOffset,
|
75
84
|
arrowDirection,
|
76
85
|
tipOffset,
|
77
|
-
arrowLocation
|
86
|
+
arrowLocation,
|
87
|
+
offsetSpacing
|
78
88
|
}) => {
|
79
89
|
const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
|
80
|
-
const scrollLeft = window.
|
90
|
+
const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
|
81
91
|
const styles = {};
|
82
92
|
const {
|
83
93
|
width: cWidth,
|
@@ -89,8 +99,7 @@ const getDirectionLocationStyle = ({
|
|
89
99
|
} = rootOffset;
|
90
100
|
const { width, height } = tipOffset;
|
91
101
|
if (arrowDirection === "top") {
|
92
|
-
styles.top = cTop;
|
93
|
-
styles.transform = `translateY(-100%)`;
|
102
|
+
styles.top = cTop - offsetSpacing - height;
|
94
103
|
switch (arrowLocation) {
|
95
104
|
case "left":
|
96
105
|
styles.left = cLeft;
|
@@ -99,14 +108,13 @@ const getDirectionLocationStyle = ({
|
|
99
108
|
styles.left = cLeft + (cWidth - width) / 2;
|
100
109
|
break;
|
101
110
|
case "right":
|
102
|
-
styles.left = cRight;
|
103
|
-
styles.transform = `translate(-100%, -100%)`;
|
111
|
+
styles.left = cRight - width;
|
104
112
|
break;
|
105
113
|
default:
|
106
114
|
break;
|
107
115
|
}
|
108
116
|
} else if (arrowDirection === "bottom") {
|
109
|
-
styles.top = cBottom;
|
117
|
+
styles.top = cBottom + offsetSpacing;
|
110
118
|
switch (arrowLocation) {
|
111
119
|
case "left":
|
112
120
|
styles.left = cLeft;
|
@@ -115,15 +123,13 @@ const getDirectionLocationStyle = ({
|
|
115
123
|
styles.left = cLeft + (cWidth - width) / 2;
|
116
124
|
break;
|
117
125
|
case "right":
|
118
|
-
styles.left = cRight;
|
119
|
-
styles.transform = `translateX(-100%)`;
|
126
|
+
styles.left = cRight - width;
|
120
127
|
break;
|
121
128
|
default:
|
122
129
|
break;
|
123
130
|
}
|
124
131
|
} else if (arrowDirection === "left") {
|
125
|
-
styles.left = cLeft;
|
126
|
-
styles.transform = `translateX(-100%)`;
|
132
|
+
styles.left = cLeft - offsetSpacing - width;
|
127
133
|
switch (arrowLocation) {
|
128
134
|
case "top":
|
129
135
|
styles.top = cTop;
|
@@ -132,14 +138,13 @@ const getDirectionLocationStyle = ({
|
|
132
138
|
styles.top = cTop + (cHeight - height) / 2;
|
133
139
|
break;
|
134
140
|
case "bottom":
|
135
|
-
styles.top = cBottom;
|
136
|
-
styles.transform = `translate(-100%, -100%)`;
|
141
|
+
styles.top = cBottom - height;
|
137
142
|
break;
|
138
143
|
default:
|
139
144
|
break;
|
140
145
|
}
|
141
146
|
} else if (arrowDirection === "right") {
|
142
|
-
styles.left = cRight;
|
147
|
+
styles.left = cRight + offsetSpacing;
|
143
148
|
switch (arrowLocation) {
|
144
149
|
case "top":
|
145
150
|
styles.top = cTop;
|
@@ -148,8 +153,7 @@ const getDirectionLocationStyle = ({
|
|
148
153
|
styles.top = cTop + (cHeight - height) / 2;
|
149
154
|
break;
|
150
155
|
case "bottom":
|
151
|
-
styles.top = cBottom;
|
152
|
-
styles.transform = `translateY(-100%)`;
|
156
|
+
styles.top = cBottom - height;
|
153
157
|
break;
|
154
158
|
default:
|
155
159
|
break;
|
@@ -167,6 +171,7 @@ const getStylesAndLocation = ({
|
|
167
171
|
childrenRef,
|
168
172
|
arrowDirection,
|
169
173
|
arrowLocation,
|
174
|
+
offsetSpacing,
|
170
175
|
selector
|
171
176
|
}) => {
|
172
177
|
if (!(childrenRef == null ? void 0 : childrenRef.current)) {
|
@@ -184,13 +189,15 @@ const getStylesAndLocation = ({
|
|
184
189
|
rootOffset,
|
185
190
|
arrowDirection,
|
186
191
|
tipOffset,
|
187
|
-
arrowLocation
|
192
|
+
arrowLocation,
|
193
|
+
offsetSpacing
|
188
194
|
});
|
189
195
|
const styles = getDirectionLocationStyle({
|
190
196
|
rootOffset,
|
191
197
|
arrowDirection: newArrowDirection,
|
192
198
|
tipOffset,
|
193
|
-
arrowLocation: newArrowLocation
|
199
|
+
arrowLocation: newArrowLocation,
|
200
|
+
offsetSpacing
|
194
201
|
});
|
195
202
|
styles.visibility = "visible";
|
196
203
|
return {
|
@@ -232,10 +239,24 @@ const triggerEventTransform = ({ trigger, click, show, hide }) => {
|
|
232
239
|
});
|
233
240
|
return option;
|
234
241
|
};
|
242
|
+
const parsePlacement = (placement) => {
|
243
|
+
const positionArr = placement.split(/([A-Z])/);
|
244
|
+
const direction = positionArr[0];
|
245
|
+
let location;
|
246
|
+
if (positionArr.length > 1) {
|
247
|
+
positionArr.splice(0, 1);
|
248
|
+
location = positionArr.join("").toLowerCase();
|
249
|
+
}
|
250
|
+
return {
|
251
|
+
direction,
|
252
|
+
location
|
253
|
+
};
|
254
|
+
};
|
235
255
|
// Annotate the CommonJS export names for ESM import in node:
|
236
256
|
0 && (module.exports = {
|
237
257
|
getDirectionLocationStyle,
|
238
258
|
getNewDirectionLocation,
|
239
259
|
getStylesAndLocation,
|
260
|
+
parsePlacement,
|
240
261
|
triggerEventTransform
|
241
262
|
});
|
@@ -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)) => HTMLElement | TaroElement;
|
3
3
|
export default getRootElement;
|
package/dist/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
export { default as debounce } from './debounce';
|
2
|
-
export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
|
2
|
+
export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
|
3
3
|
export { default as convertHexToRGBA } from './hex2rgba';
|
4
4
|
export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
|
5
5
|
export { default as isDev } from './isDev';
|
package/dist/index.js
CHANGED
@@ -43,6 +43,7 @@ __export(src_exports, {
|
|
43
43
|
isMini: () => import_isMini.isMini,
|
44
44
|
isMiniapp: () => import_isMini.isMiniapp,
|
45
45
|
isWeapp: () => import_isMini.isWeapp,
|
46
|
+
parsePlacement: () => import_directionLocationUtil.parsePlacement,
|
46
47
|
setRef: () => import_setRef.default,
|
47
48
|
throttle: () => import_throttle.default,
|
48
49
|
toArray: () => import_toArray.default,
|
@@ -91,6 +92,7 @@ __reExport(src_exports, require("./render"), module.exports);
|
|
91
92
|
isMini,
|
92
93
|
isMiniapp,
|
93
94
|
isWeapp,
|
95
|
+
parsePlacement,
|
94
96
|
setRef,
|
95
97
|
throttle,
|
96
98
|
toArray,
|
@@ -1,11 +1,12 @@
|
|
1
1
|
/**
|
2
2
|
* 根据元素宽高判断是否超出边界,超出边界则重新定义方向
|
3
3
|
*/
|
4
|
-
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
4
|
+
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
5
5
|
rootOffset: any;
|
6
6
|
arrowDirection: any;
|
7
7
|
tipOffset: any;
|
8
8
|
arrowLocation: any;
|
9
|
+
offsetSpacing: any;
|
9
10
|
}) => {
|
10
11
|
newArrowDirection: any;
|
11
12
|
newArrowLocation: any;
|
@@ -13,19 +14,21 @@ export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tip
|
|
13
14
|
/**
|
14
15
|
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
15
16
|
*/
|
16
|
-
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
17
|
+
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, offsetSpacing, }: {
|
17
18
|
rootOffset: any;
|
18
19
|
arrowDirection: any;
|
19
20
|
tipOffset: any;
|
20
21
|
arrowLocation: any;
|
22
|
+
offsetSpacing: any;
|
21
23
|
}) => any;
|
22
24
|
/**
|
23
25
|
* 获取气泡位置和箭头位置
|
24
26
|
*/
|
25
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
|
27
|
+
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
|
26
28
|
childrenRef: any;
|
27
29
|
arrowDirection: any;
|
28
30
|
arrowLocation: any;
|
31
|
+
offsetSpacing: any;
|
29
32
|
selector: any;
|
30
33
|
}) => {
|
31
34
|
styles: any;
|
@@ -38,3 +41,12 @@ export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
|
|
38
41
|
show: any;
|
39
42
|
hide: any;
|
40
43
|
}) => {};
|
44
|
+
/**
|
45
|
+
* for example: placement = 'topLeft', return { direction: 'top', location: 'left' }
|
46
|
+
* @param placement
|
47
|
+
* @returns
|
48
|
+
*/
|
49
|
+
export declare const parsePlacement: (placement: any) => {
|
50
|
+
direction: any;
|
51
|
+
location: any;
|
52
|
+
};
|
@@ -8,9 +8,17 @@ const getNewDirectionLocation = ({
|
|
8
8
|
rootOffset,
|
9
9
|
arrowDirection,
|
10
10
|
tipOffset,
|
11
|
-
arrowLocation
|
11
|
+
arrowLocation,
|
12
|
+
offsetSpacing
|
12
13
|
}) => {
|
13
|
-
const {
|
14
|
+
const {
|
15
|
+
left: cLeft,
|
16
|
+
right: cRight,
|
17
|
+
top: cTop,
|
18
|
+
bottom: cBottom,
|
19
|
+
width: cWidth,
|
20
|
+
height: cHeight
|
21
|
+
} = rootOffset;
|
14
22
|
const { width, height } = tipOffset;
|
15
23
|
const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
16
24
|
const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
@@ -20,7 +28,7 @@ const getNewDirectionLocation = ({
|
|
20
28
|
const isDirectionBottom = arrowDirection === "bottom";
|
21
29
|
const isDirectionLeft = arrowDirection === "left";
|
22
30
|
const isDirectionRight = arrowDirection === "right";
|
23
|
-
if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
|
31
|
+
if (isDirectionTop && cTop - height - offsetSpacing < 0 || isDirectionBottom && cBottom + height + offsetSpacing > pgegHeight || isDirectionLeft && cLeft - width - offsetSpacing < 0 || isDirectionRight && cRight + width + offsetSpacing > pgegWidth) {
|
24
32
|
newArrowDirection = directionCssMap[arrowDirection];
|
25
33
|
}
|
26
34
|
if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
|
@@ -28,15 +36,15 @@ const getNewDirectionLocation = ({
|
|
28
36
|
}
|
29
37
|
const isCenter = arrowLocation === "center";
|
30
38
|
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
31
|
-
if (cLeft + width > pgegWidth) {
|
39
|
+
if (cLeft + (cWidth - width) / 2 + width > pgegWidth) {
|
32
40
|
newArrowLocation = directionCssMap.left;
|
33
|
-
} else if (
|
41
|
+
} else if (cLeft + (cWidth - width) / 2 < 0) {
|
34
42
|
newArrowLocation = directionCssMap.right;
|
35
43
|
}
|
36
44
|
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
37
|
-
if (cTop + height > pgegHeight) {
|
45
|
+
if (cTop + (cHeight - height) / 2 + cHeight > pgegHeight) {
|
38
46
|
newArrowLocation = directionCssMap.top;
|
39
|
-
} else if (
|
47
|
+
} else if (cTop + (cHeight - height) / 2 < 0) {
|
40
48
|
newArrowLocation = directionCssMap.bottom;
|
41
49
|
}
|
42
50
|
}
|
@@ -49,10 +57,11 @@ const getDirectionLocationStyle = ({
|
|
49
57
|
rootOffset,
|
50
58
|
arrowDirection,
|
51
59
|
tipOffset,
|
52
|
-
arrowLocation
|
60
|
+
arrowLocation,
|
61
|
+
offsetSpacing
|
53
62
|
}) => {
|
54
63
|
const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
|
55
|
-
const scrollLeft = window.
|
64
|
+
const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
|
56
65
|
const styles = {};
|
57
66
|
const {
|
58
67
|
width: cWidth,
|
@@ -64,8 +73,7 @@ const getDirectionLocationStyle = ({
|
|
64
73
|
} = rootOffset;
|
65
74
|
const { width, height } = tipOffset;
|
66
75
|
if (arrowDirection === "top") {
|
67
|
-
styles.top = cTop;
|
68
|
-
styles.transform = `translateY(-100%)`;
|
76
|
+
styles.top = cTop - offsetSpacing - height;
|
69
77
|
switch (arrowLocation) {
|
70
78
|
case "left":
|
71
79
|
styles.left = cLeft;
|
@@ -74,14 +82,13 @@ const getDirectionLocationStyle = ({
|
|
74
82
|
styles.left = cLeft + (cWidth - width) / 2;
|
75
83
|
break;
|
76
84
|
case "right":
|
77
|
-
styles.left = cRight;
|
78
|
-
styles.transform = `translate(-100%, -100%)`;
|
85
|
+
styles.left = cRight - width;
|
79
86
|
break;
|
80
87
|
default:
|
81
88
|
break;
|
82
89
|
}
|
83
90
|
} else if (arrowDirection === "bottom") {
|
84
|
-
styles.top = cBottom;
|
91
|
+
styles.top = cBottom + offsetSpacing;
|
85
92
|
switch (arrowLocation) {
|
86
93
|
case "left":
|
87
94
|
styles.left = cLeft;
|
@@ -90,15 +97,13 @@ const getDirectionLocationStyle = ({
|
|
90
97
|
styles.left = cLeft + (cWidth - width) / 2;
|
91
98
|
break;
|
92
99
|
case "right":
|
93
|
-
styles.left = cRight;
|
94
|
-
styles.transform = `translateX(-100%)`;
|
100
|
+
styles.left = cRight - width;
|
95
101
|
break;
|
96
102
|
default:
|
97
103
|
break;
|
98
104
|
}
|
99
105
|
} else if (arrowDirection === "left") {
|
100
|
-
styles.left = cLeft;
|
101
|
-
styles.transform = `translateX(-100%)`;
|
106
|
+
styles.left = cLeft - offsetSpacing - width;
|
102
107
|
switch (arrowLocation) {
|
103
108
|
case "top":
|
104
109
|
styles.top = cTop;
|
@@ -107,14 +112,13 @@ const getDirectionLocationStyle = ({
|
|
107
112
|
styles.top = cTop + (cHeight - height) / 2;
|
108
113
|
break;
|
109
114
|
case "bottom":
|
110
|
-
styles.top = cBottom;
|
111
|
-
styles.transform = `translate(-100%, -100%)`;
|
115
|
+
styles.top = cBottom - height;
|
112
116
|
break;
|
113
117
|
default:
|
114
118
|
break;
|
115
119
|
}
|
116
120
|
} else if (arrowDirection === "right") {
|
117
|
-
styles.left = cRight;
|
121
|
+
styles.left = cRight + offsetSpacing;
|
118
122
|
switch (arrowLocation) {
|
119
123
|
case "top":
|
120
124
|
styles.top = cTop;
|
@@ -123,8 +127,7 @@ const getDirectionLocationStyle = ({
|
|
123
127
|
styles.top = cTop + (cHeight - height) / 2;
|
124
128
|
break;
|
125
129
|
case "bottom":
|
126
|
-
styles.top = cBottom;
|
127
|
-
styles.transform = `translateY(-100%)`;
|
130
|
+
styles.top = cBottom - height;
|
128
131
|
break;
|
129
132
|
default:
|
130
133
|
break;
|
@@ -142,6 +145,7 @@ const getStylesAndLocation = ({
|
|
142
145
|
childrenRef,
|
143
146
|
arrowDirection,
|
144
147
|
arrowLocation,
|
148
|
+
offsetSpacing,
|
145
149
|
selector
|
146
150
|
}) => {
|
147
151
|
if (!(childrenRef == null ? void 0 : childrenRef.current)) {
|
@@ -159,13 +163,15 @@ const getStylesAndLocation = ({
|
|
159
163
|
rootOffset,
|
160
164
|
arrowDirection,
|
161
165
|
tipOffset,
|
162
|
-
arrowLocation
|
166
|
+
arrowLocation,
|
167
|
+
offsetSpacing
|
163
168
|
});
|
164
169
|
const styles = getDirectionLocationStyle({
|
165
170
|
rootOffset,
|
166
171
|
arrowDirection: newArrowDirection,
|
167
172
|
tipOffset,
|
168
|
-
arrowLocation: newArrowLocation
|
173
|
+
arrowLocation: newArrowLocation,
|
174
|
+
offsetSpacing
|
169
175
|
});
|
170
176
|
styles.visibility = "visible";
|
171
177
|
return {
|
@@ -207,9 +213,23 @@ const triggerEventTransform = ({ trigger, click, show, hide }) => {
|
|
207
213
|
});
|
208
214
|
return option;
|
209
215
|
};
|
216
|
+
const parsePlacement = (placement) => {
|
217
|
+
const positionArr = placement.split(/([A-Z])/);
|
218
|
+
const direction = positionArr[0];
|
219
|
+
let location;
|
220
|
+
if (positionArr.length > 1) {
|
221
|
+
positionArr.splice(0, 1);
|
222
|
+
location = positionArr.join("").toLowerCase();
|
223
|
+
}
|
224
|
+
return {
|
225
|
+
direction,
|
226
|
+
location
|
227
|
+
};
|
228
|
+
};
|
210
229
|
export {
|
211
230
|
getDirectionLocationStyle,
|
212
231
|
getNewDirectionLocation,
|
213
232
|
getStylesAndLocation,
|
233
|
+
parsePlacement,
|
214
234
|
triggerEventTransform
|
215
235
|
};
|
package/es/index.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
export { default as debounce } from './debounce';
|
2
|
-
export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
|
2
|
+
export { getStylesAndLocation, triggerEventTransform, parsePlacement, } from './directionLocationUtil';
|
3
3
|
export { default as convertHexToRGBA } from './hex2rgba';
|
4
4
|
export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, useUniqueId, } from './hooks';
|
5
5
|
export { default as isDev } from './isDev';
|
package/es/index.js
CHANGED
@@ -1,7 +1,8 @@
|
|
1
1
|
import { default as default2 } from "./debounce";
|
2
2
|
import {
|
3
3
|
getStylesAndLocation,
|
4
|
-
triggerEventTransform
|
4
|
+
triggerEventTransform,
|
5
|
+
parsePlacement
|
5
6
|
} from "./directionLocationUtil";
|
6
7
|
import { default as default3 } from "./hex2rgba";
|
7
8
|
import {
|
@@ -48,6 +49,7 @@ export {
|
|
48
49
|
isMini,
|
49
50
|
isMiniapp,
|
50
51
|
isWeapp,
|
52
|
+
parsePlacement,
|
51
53
|
default5 as setRef,
|
52
54
|
default6 as throttle,
|
53
55
|
default7 as toArray,
|