@bifrostui/utils 1.3.1-beta.1 → 1.3.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.
- package/dist/hooks/index.d.ts +1 -2
- package/dist/hooks/index.js +0 -3
- package/dist/index.d.ts +1 -2
- package/dist/index.js +0 -7
- package/dist/touchBlocker.js +5 -1
- package/es/hooks/index.d.ts +1 -2
- package/es/hooks/index.js +0 -2
- package/es/index.d.ts +1 -2
- package/es/index.js +1 -9
- package/es/touchBlocker.js +5 -1
- package/package.json +1 -1
- package/dist/directionLocationUtil.d.ts +0 -40
- package/dist/directionLocationUtil.js +0 -235
- package/dist/hooks/useUniqueId.d.ts +0 -2
- package/dist/hooks/useUniqueId.js +0 -33
- package/es/directionLocationUtil.d.ts +0 -40
- package/es/directionLocationUtil.js +0 -209
- package/es/hooks/useUniqueId.d.ts +0 -2
- package/es/hooks/useUniqueId.js +0 -14
package/dist/hooks/index.d.ts
CHANGED
@@ -7,5 +7,4 @@ import useDomReady from './useDomReady';
|
|
7
7
|
import useSize from './useSize';
|
8
8
|
import useDomCss from './useDomCss';
|
9
9
|
import useTouch from './useTouch';
|
10
|
-
|
11
|
-
export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };
|
10
|
+
export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, };
|
package/dist/hooks/index.js
CHANGED
@@ -35,7 +35,6 @@ __export(hooks_exports, {
|
|
35
35
|
useSize: () => import_useSize.default,
|
36
36
|
useTouch: () => import_useTouch.default,
|
37
37
|
useTouchEmulator: () => import_useTouchEmulator.default,
|
38
|
-
useUniqueId: () => import_useUniqueId.default,
|
39
38
|
useValue: () => import_useValue.default
|
40
39
|
});
|
41
40
|
module.exports = __toCommonJS(hooks_exports);
|
@@ -48,7 +47,6 @@ var import_useDomReady = __toESM(require("./useDomReady"));
|
|
48
47
|
var import_useSize = __toESM(require("./useSize"));
|
49
48
|
var import_useDomCss = __toESM(require("./useDomCss"));
|
50
49
|
var import_useTouch = __toESM(require("./useTouch"));
|
51
|
-
var import_useUniqueId = __toESM(require("./useUniqueId"));
|
52
50
|
// Annotate the CommonJS export names for ESM import in node:
|
53
51
|
0 && (module.exports = {
|
54
52
|
useDidMountEffect,
|
@@ -59,6 +57,5 @@ var import_useUniqueId = __toESM(require("./useUniqueId"));
|
|
59
57
|
useSize,
|
60
58
|
useTouch,
|
61
59
|
useTouchEmulator,
|
62
|
-
useUniqueId,
|
63
60
|
useValue
|
64
61
|
});
|
package/dist/index.d.ts
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
export { default as debounce } from './debounce';
|
2
|
-
export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
|
3
2
|
export { default as convertHexToRGBA } from './hex2rgba';
|
4
|
-
export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch,
|
3
|
+
export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, } from './hooks';
|
5
4
|
export { default as isDev } from './isDev';
|
6
5
|
export { isMini, isWeapp, isAlipay, isMiniapp } from './isMini';
|
7
6
|
export { default as setRef } from './setRef';
|
package/dist/index.js
CHANGED
@@ -36,7 +36,6 @@ __export(src_exports, {
|
|
36
36
|
easing: () => import_transitions.easing,
|
37
37
|
getBoundingClientRect: () => import_getBoundingClientRect.default,
|
38
38
|
getRootElement: () => import_getRootElement.default,
|
39
|
-
getStylesAndLocation: () => import_directionLocationUtil.getStylesAndLocation,
|
40
39
|
getTransitionProps: () => import_transitions.getTransitionProps,
|
41
40
|
isAlipay: () => import_isMini.isAlipay,
|
42
41
|
isDev: () => import_isDev.default,
|
@@ -46,7 +45,6 @@ __export(src_exports, {
|
|
46
45
|
setRef: () => import_setRef.default,
|
47
46
|
throttle: () => import_throttle.default,
|
48
47
|
toArray: () => import_toArray.default,
|
49
|
-
triggerEventTransform: () => import_directionLocationUtil.triggerEventTransform,
|
50
48
|
useDidMountEffect: () => import_hooks.useDidMountEffect,
|
51
49
|
useDomCss: () => import_hooks.useDomCss,
|
52
50
|
useDomReady: () => import_hooks.useDomReady,
|
@@ -55,12 +53,10 @@ __export(src_exports, {
|
|
55
53
|
useSize: () => import_hooks.useSize,
|
56
54
|
useTouch: () => import_hooks.useTouch,
|
57
55
|
useTouchEmulator: () => import_hooks.useTouchEmulator,
|
58
|
-
useUniqueId: () => import_hooks.useUniqueId,
|
59
56
|
useValue: () => import_hooks.useValue
|
60
57
|
});
|
61
58
|
module.exports = __toCommonJS(src_exports);
|
62
59
|
var import_debounce = __toESM(require("./debounce"));
|
63
|
-
var import_directionLocationUtil = require("./directionLocationUtil");
|
64
60
|
var import_hex2rgba = __toESM(require("./hex2rgba"));
|
65
61
|
var import_hooks = require("./hooks");
|
66
62
|
var import_isDev = __toESM(require("./isDev"));
|
@@ -84,7 +80,6 @@ __reExport(src_exports, require("./render"), module.exports);
|
|
84
80
|
easing,
|
85
81
|
getBoundingClientRect,
|
86
82
|
getRootElement,
|
87
|
-
getStylesAndLocation,
|
88
83
|
getTransitionProps,
|
89
84
|
isAlipay,
|
90
85
|
isDev,
|
@@ -94,7 +89,6 @@ __reExport(src_exports, require("./render"), module.exports);
|
|
94
89
|
setRef,
|
95
90
|
throttle,
|
96
91
|
toArray,
|
97
|
-
triggerEventTransform,
|
98
92
|
useDidMountEffect,
|
99
93
|
useDomCss,
|
100
94
|
useDomReady,
|
@@ -103,7 +97,6 @@ __reExport(src_exports, require("./render"), module.exports);
|
|
103
97
|
useSize,
|
104
98
|
useTouch,
|
105
99
|
useTouchEmulator,
|
106
|
-
useUniqueId,
|
107
100
|
useValue,
|
108
101
|
...require("./isType"),
|
109
102
|
...require("./render")
|
package/dist/touchBlocker.js
CHANGED
@@ -66,6 +66,8 @@ function blockTouch(root) {
|
|
66
66
|
};
|
67
67
|
const onTouchMove = (e) => {
|
68
68
|
const currentTouch = e.touches[0];
|
69
|
+
if (!lastTouch || !currentTouch)
|
70
|
+
return;
|
69
71
|
if (!moveAxis) {
|
70
72
|
if (Math.abs(lastTouch.screenY - currentTouch.screenY) > Math.abs(lastTouch.screenX - currentTouch.screenX))
|
71
73
|
moveAxis = "y";
|
@@ -79,7 +81,9 @@ function blockTouch(root) {
|
|
79
81
|
) && !e.cancelable === false)
|
80
82
|
e.preventDefault();
|
81
83
|
};
|
82
|
-
const onTouchEnd = () => {
|
84
|
+
const onTouchEnd = (e) => {
|
85
|
+
if (e.touches.length !== 0)
|
86
|
+
return;
|
83
87
|
lastTouch = void 0;
|
84
88
|
moveDirection = void 0;
|
85
89
|
moveAxis = void 0;
|
package/es/hooks/index.d.ts
CHANGED
@@ -7,5 +7,4 @@ import useDomReady from './useDomReady';
|
|
7
7
|
import useSize from './useSize';
|
8
8
|
import useDomCss from './useDomCss';
|
9
9
|
import useTouch from './useTouch';
|
10
|
-
|
11
|
-
export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };
|
10
|
+
export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, };
|
package/es/hooks/index.js
CHANGED
@@ -7,7 +7,6 @@ import useDomReady from "./useDomReady";
|
|
7
7
|
import useSize from "./useSize";
|
8
8
|
import useDomCss from "./useDomCss";
|
9
9
|
import useTouch from "./useTouch";
|
10
|
-
import useUniqueId from "./useUniqueId";
|
11
10
|
export {
|
12
11
|
useDidMountEffect,
|
13
12
|
useDomCss,
|
@@ -17,6 +16,5 @@ export {
|
|
17
16
|
useSize,
|
18
17
|
useTouch,
|
19
18
|
useTouchEmulator,
|
20
|
-
useUniqueId,
|
21
19
|
useValue
|
22
20
|
};
|
package/es/index.d.ts
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
export { default as debounce } from './debounce';
|
2
|
-
export { getStylesAndLocation, triggerEventTransform, } from './directionLocationUtil';
|
3
2
|
export { default as convertHexToRGBA } from './hex2rgba';
|
4
|
-
export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch,
|
3
|
+
export { useDidMountEffect, useEventCallback, useForkRef, useTouchEmulator, useValue, useDomReady, useSize, useDomCss, useTouch, } from './hooks';
|
5
4
|
export { default as isDev } from './isDev';
|
6
5
|
export { isMini, isWeapp, isAlipay, isMiniapp } from './isMini';
|
7
6
|
export { default as setRef } from './setRef';
|
package/es/index.js
CHANGED
@@ -1,8 +1,4 @@
|
|
1
1
|
import { default as default2 } from "./debounce";
|
2
|
-
import {
|
3
|
-
getStylesAndLocation,
|
4
|
-
triggerEventTransform
|
5
|
-
} from "./directionLocationUtil";
|
6
2
|
import { default as default3 } from "./hex2rgba";
|
7
3
|
import {
|
8
4
|
useDidMountEffect,
|
@@ -13,8 +9,7 @@ import {
|
|
13
9
|
useDomReady,
|
14
10
|
useSize,
|
15
11
|
useDomCss,
|
16
|
-
useTouch
|
17
|
-
useUniqueId
|
12
|
+
useTouch
|
18
13
|
} from "./hooks";
|
19
14
|
import { default as default4 } from "./isDev";
|
20
15
|
import { isMini, isWeapp, isAlipay, isMiniapp } from "./isMini";
|
@@ -41,7 +36,6 @@ export {
|
|
41
36
|
easing,
|
42
37
|
default10 as getBoundingClientRect,
|
43
38
|
default9 as getRootElement,
|
44
|
-
getStylesAndLocation,
|
45
39
|
getTransitionProps,
|
46
40
|
isAlipay,
|
47
41
|
default4 as isDev,
|
@@ -51,7 +45,6 @@ export {
|
|
51
45
|
default5 as setRef,
|
52
46
|
default6 as throttle,
|
53
47
|
default7 as toArray,
|
54
|
-
triggerEventTransform,
|
55
48
|
useDidMountEffect,
|
56
49
|
useDomCss,
|
57
50
|
useDomReady,
|
@@ -60,6 +53,5 @@ export {
|
|
60
53
|
useSize,
|
61
54
|
useTouch,
|
62
55
|
useTouchEmulator,
|
63
|
-
useUniqueId,
|
64
56
|
useValue
|
65
57
|
};
|
package/es/touchBlocker.js
CHANGED
@@ -44,6 +44,8 @@ function blockTouch(root) {
|
|
44
44
|
};
|
45
45
|
const onTouchMove = (e) => {
|
46
46
|
const currentTouch = e.touches[0];
|
47
|
+
if (!lastTouch || !currentTouch)
|
48
|
+
return;
|
47
49
|
if (!moveAxis) {
|
48
50
|
if (Math.abs(lastTouch.screenY - currentTouch.screenY) > Math.abs(lastTouch.screenX - currentTouch.screenX))
|
49
51
|
moveAxis = "y";
|
@@ -57,7 +59,9 @@ function blockTouch(root) {
|
|
57
59
|
) && !e.cancelable === false)
|
58
60
|
e.preventDefault();
|
59
61
|
};
|
60
|
-
const onTouchEnd = () => {
|
62
|
+
const onTouchEnd = (e) => {
|
63
|
+
if (e.touches.length !== 0)
|
64
|
+
return;
|
61
65
|
lastTouch = void 0;
|
62
66
|
moveDirection = void 0;
|
63
67
|
moveAxis = void 0;
|
package/package.json
CHANGED
@@ -1,40 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* 根据元素宽高判断是否超出边界,超出边界则重新定义方向
|
3
|
-
*/
|
4
|
-
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
5
|
-
rootOffset: any;
|
6
|
-
arrowDirection: any;
|
7
|
-
tipOffset: any;
|
8
|
-
arrowLocation: any;
|
9
|
-
}) => {
|
10
|
-
newArrowDirection: any;
|
11
|
-
newArrowLocation: any;
|
12
|
-
};
|
13
|
-
/**
|
14
|
-
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
15
|
-
*/
|
16
|
-
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
17
|
-
rootOffset: any;
|
18
|
-
arrowDirection: any;
|
19
|
-
tipOffset: any;
|
20
|
-
arrowLocation: any;
|
21
|
-
}) => any;
|
22
|
-
/**
|
23
|
-
* 获取气泡位置和箭头位置
|
24
|
-
*/
|
25
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
|
26
|
-
childrenRef: any;
|
27
|
-
arrowDirection: any;
|
28
|
-
arrowLocation: any;
|
29
|
-
selector: any;
|
30
|
-
}) => {
|
31
|
-
styles: any;
|
32
|
-
newArrowDirection: any;
|
33
|
-
newArrowLocation: any;
|
34
|
-
};
|
35
|
-
export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
|
36
|
-
trigger: any;
|
37
|
-
click: any;
|
38
|
-
show: any;
|
39
|
-
hide: any;
|
40
|
-
}) => {};
|
@@ -1,235 +0,0 @@
|
|
1
|
-
var __defProp = Object.defineProperty;
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
-
var __export = (target, all) => {
|
6
|
-
for (var name in all)
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
8
|
-
};
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
11
|
-
for (let key of __getOwnPropNames(from))
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
14
|
-
}
|
15
|
-
return to;
|
16
|
-
};
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
18
|
-
var directionLocationUtil_exports = {};
|
19
|
-
__export(directionLocationUtil_exports, {
|
20
|
-
getDirectionLocationStyle: () => getDirectionLocationStyle,
|
21
|
-
getNewDirectionLocation: () => getNewDirectionLocation,
|
22
|
-
getStylesAndLocation: () => getStylesAndLocation,
|
23
|
-
triggerEventTransform: () => triggerEventTransform
|
24
|
-
});
|
25
|
-
module.exports = __toCommonJS(directionLocationUtil_exports);
|
26
|
-
const directionCssMap = {
|
27
|
-
left: "right",
|
28
|
-
right: "left",
|
29
|
-
top: "bottom",
|
30
|
-
bottom: "top"
|
31
|
-
};
|
32
|
-
const getNewDirectionLocation = ({
|
33
|
-
rootOffset,
|
34
|
-
arrowDirection,
|
35
|
-
tipOffset,
|
36
|
-
arrowLocation
|
37
|
-
}) => {
|
38
|
-
const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
|
39
|
-
const { width, height } = tipOffset;
|
40
|
-
const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
41
|
-
const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
42
|
-
let newArrowDirection = arrowDirection;
|
43
|
-
let newArrowLocation = arrowLocation;
|
44
|
-
const isDirectionTop = arrowDirection === "top";
|
45
|
-
const isDirectionBottom = arrowDirection === "bottom";
|
46
|
-
const isDirectionLeft = arrowDirection === "left";
|
47
|
-
const isDirectionRight = arrowDirection === "right";
|
48
|
-
if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
|
49
|
-
newArrowDirection = directionCssMap[arrowDirection];
|
50
|
-
}
|
51
|
-
if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
|
52
|
-
newArrowLocation = directionCssMap[arrowLocation];
|
53
|
-
}
|
54
|
-
const isCenter = arrowLocation === "center";
|
55
|
-
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
56
|
-
if (cLeft + width > pgegWidth) {
|
57
|
-
newArrowLocation = directionCssMap.left;
|
58
|
-
} else if (cRight - width < 0) {
|
59
|
-
newArrowLocation = directionCssMap.right;
|
60
|
-
}
|
61
|
-
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
62
|
-
if (cTop + height > pgegHeight) {
|
63
|
-
newArrowLocation = directionCssMap.top;
|
64
|
-
} else if (cBottom - height < 0) {
|
65
|
-
newArrowLocation = directionCssMap.bottom;
|
66
|
-
}
|
67
|
-
}
|
68
|
-
return {
|
69
|
-
newArrowDirection,
|
70
|
-
newArrowLocation
|
71
|
-
};
|
72
|
-
};
|
73
|
-
const getDirectionLocationStyle = ({
|
74
|
-
rootOffset,
|
75
|
-
arrowDirection,
|
76
|
-
tipOffset,
|
77
|
-
arrowLocation
|
78
|
-
}) => {
|
79
|
-
const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
|
80
|
-
const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
|
81
|
-
const styles = {};
|
82
|
-
const {
|
83
|
-
width: cWidth,
|
84
|
-
height: cHeight,
|
85
|
-
left: cLeft,
|
86
|
-
right: cRight,
|
87
|
-
top: cTop,
|
88
|
-
bottom: cBottom
|
89
|
-
} = rootOffset;
|
90
|
-
const { width, height } = tipOffset;
|
91
|
-
if (arrowDirection === "top") {
|
92
|
-
styles.top = cTop;
|
93
|
-
styles.transform = `translateY(-100%)`;
|
94
|
-
switch (arrowLocation) {
|
95
|
-
case "left":
|
96
|
-
styles.left = cLeft;
|
97
|
-
break;
|
98
|
-
case "center":
|
99
|
-
styles.left = cLeft + (cWidth - width) / 2;
|
100
|
-
break;
|
101
|
-
case "right":
|
102
|
-
styles.left = cRight;
|
103
|
-
styles.transform = `translate(-100%, -100%)`;
|
104
|
-
break;
|
105
|
-
default:
|
106
|
-
break;
|
107
|
-
}
|
108
|
-
} else if (arrowDirection === "bottom") {
|
109
|
-
styles.top = cBottom;
|
110
|
-
switch (arrowLocation) {
|
111
|
-
case "left":
|
112
|
-
styles.left = cLeft;
|
113
|
-
break;
|
114
|
-
case "center":
|
115
|
-
styles.left = cLeft + (cWidth - width) / 2;
|
116
|
-
break;
|
117
|
-
case "right":
|
118
|
-
styles.left = cRight;
|
119
|
-
styles.transform = `translateX(-100%)`;
|
120
|
-
break;
|
121
|
-
default:
|
122
|
-
break;
|
123
|
-
}
|
124
|
-
} else if (arrowDirection === "left") {
|
125
|
-
styles.left = cLeft;
|
126
|
-
styles.transform = `translateX(-100%)`;
|
127
|
-
switch (arrowLocation) {
|
128
|
-
case "top":
|
129
|
-
styles.top = cTop;
|
130
|
-
break;
|
131
|
-
case "center":
|
132
|
-
styles.top = cTop + (cHeight - height) / 2;
|
133
|
-
break;
|
134
|
-
case "bottom":
|
135
|
-
styles.top = cBottom;
|
136
|
-
styles.transform = `translate(-100%, -100%)`;
|
137
|
-
break;
|
138
|
-
default:
|
139
|
-
break;
|
140
|
-
}
|
141
|
-
} else if (arrowDirection === "right") {
|
142
|
-
styles.left = cRight;
|
143
|
-
switch (arrowLocation) {
|
144
|
-
case "top":
|
145
|
-
styles.top = cTop;
|
146
|
-
break;
|
147
|
-
case "center":
|
148
|
-
styles.top = cTop + (cHeight - height) / 2;
|
149
|
-
break;
|
150
|
-
case "bottom":
|
151
|
-
styles.top = cBottom;
|
152
|
-
styles.transform = `translateY(-100%)`;
|
153
|
-
break;
|
154
|
-
default:
|
155
|
-
break;
|
156
|
-
}
|
157
|
-
}
|
158
|
-
if (styles.top) {
|
159
|
-
styles.top = `${styles.top + scrollTop}px`;
|
160
|
-
}
|
161
|
-
if (styles.left) {
|
162
|
-
styles.left = `${styles.left + scrollLeft}px`;
|
163
|
-
}
|
164
|
-
return styles;
|
165
|
-
};
|
166
|
-
const getStylesAndLocation = ({
|
167
|
-
childrenRef,
|
168
|
-
arrowDirection,
|
169
|
-
arrowLocation,
|
170
|
-
selector
|
171
|
-
}) => {
|
172
|
-
const rootOffset = childrenRef.current.getBoundingClientRect();
|
173
|
-
const $rtDom = document.querySelector(selector);
|
174
|
-
if (!$rtDom)
|
175
|
-
return null;
|
176
|
-
const tipOffset = $rtDom.getBoundingClientRect();
|
177
|
-
const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
|
178
|
-
rootOffset,
|
179
|
-
arrowDirection,
|
180
|
-
tipOffset,
|
181
|
-
arrowLocation
|
182
|
-
});
|
183
|
-
const styles = getDirectionLocationStyle({
|
184
|
-
rootOffset,
|
185
|
-
arrowDirection: newArrowDirection,
|
186
|
-
tipOffset,
|
187
|
-
arrowLocation: newArrowLocation
|
188
|
-
});
|
189
|
-
styles.visibility = "visible";
|
190
|
-
return {
|
191
|
-
styles,
|
192
|
-
newArrowDirection,
|
193
|
-
newArrowLocation
|
194
|
-
};
|
195
|
-
};
|
196
|
-
const onMouseEnter = "onMouseEnter";
|
197
|
-
const onMouseLeave = "onMouseLeave";
|
198
|
-
const onClick = "onClick";
|
199
|
-
const TriggerEvent = {
|
200
|
-
hover: [onMouseEnter, onMouseLeave],
|
201
|
-
click: [onClick]
|
202
|
-
};
|
203
|
-
const triggerEventTransform = ({ trigger, click, show, hide }) => {
|
204
|
-
let triggers = [];
|
205
|
-
if (typeof trigger === "string") {
|
206
|
-
triggers = [trigger];
|
207
|
-
} else if (Array.isArray(trigger)) {
|
208
|
-
triggers = trigger;
|
209
|
-
} else {
|
210
|
-
triggers = ["click"];
|
211
|
-
}
|
212
|
-
const option = {};
|
213
|
-
triggers.forEach((item) => {
|
214
|
-
const eventNames = TriggerEvent[item];
|
215
|
-
eventNames.forEach((eventName) => {
|
216
|
-
let cbk;
|
217
|
-
if (eventName === onMouseEnter) {
|
218
|
-
cbk = show;
|
219
|
-
} else if (eventName === onMouseLeave) {
|
220
|
-
cbk = hide;
|
221
|
-
} else if (eventName === onClick) {
|
222
|
-
cbk = click;
|
223
|
-
}
|
224
|
-
option[eventName] = cbk;
|
225
|
-
});
|
226
|
-
});
|
227
|
-
return option;
|
228
|
-
};
|
229
|
-
// Annotate the CommonJS export names for ESM import in node:
|
230
|
-
0 && (module.exports = {
|
231
|
-
getDirectionLocationStyle,
|
232
|
-
getNewDirectionLocation,
|
233
|
-
getStylesAndLocation,
|
234
|
-
triggerEventTransform
|
235
|
-
});
|
@@ -1,33 +0,0 @@
|
|
1
|
-
var __defProp = Object.defineProperty;
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
-
var __export = (target, all) => {
|
6
|
-
for (var name in all)
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
8
|
-
};
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
11
|
-
for (let key of __getOwnPropNames(from))
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
14
|
-
}
|
15
|
-
return to;
|
16
|
-
};
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
18
|
-
var useUniqueId_exports = {};
|
19
|
-
__export(useUniqueId_exports, {
|
20
|
-
default: () => useUniqueId_default
|
21
|
-
});
|
22
|
-
module.exports = __toCommonJS(useUniqueId_exports);
|
23
|
-
var import_react = require("react");
|
24
|
-
let globalClientIdCounter = 0;
|
25
|
-
function useUniqueId() {
|
26
|
-
const idRef = (0, import_react.useRef)();
|
27
|
-
if (!idRef.current) {
|
28
|
-
globalClientIdCounter += 1;
|
29
|
-
idRef.current = `b${globalClientIdCounter.toString(32)}`;
|
30
|
-
}
|
31
|
-
return idRef.current;
|
32
|
-
}
|
33
|
-
var useUniqueId_default = useUniqueId;
|
@@ -1,40 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* 根据元素宽高判断是否超出边界,超出边界则重新定义方向
|
3
|
-
*/
|
4
|
-
export declare const getNewDirectionLocation: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
5
|
-
rootOffset: any;
|
6
|
-
arrowDirection: any;
|
7
|
-
tipOffset: any;
|
8
|
-
arrowLocation: any;
|
9
|
-
}) => {
|
10
|
-
newArrowDirection: any;
|
11
|
-
newArrowLocation: any;
|
12
|
-
};
|
13
|
-
/**
|
14
|
-
* 根据新的气泡位置和箭头位置 计算气泡位置以及箭头位置
|
15
|
-
*/
|
16
|
-
export declare const getDirectionLocationStyle: ({ rootOffset, arrowDirection, tipOffset, arrowLocation, }: {
|
17
|
-
rootOffset: any;
|
18
|
-
arrowDirection: any;
|
19
|
-
tipOffset: any;
|
20
|
-
arrowLocation: any;
|
21
|
-
}) => any;
|
22
|
-
/**
|
23
|
-
* 获取气泡位置和箭头位置
|
24
|
-
*/
|
25
|
-
export declare const getStylesAndLocation: ({ childrenRef, arrowDirection, arrowLocation, selector, }: {
|
26
|
-
childrenRef: any;
|
27
|
-
arrowDirection: any;
|
28
|
-
arrowLocation: any;
|
29
|
-
selector: any;
|
30
|
-
}) => {
|
31
|
-
styles: any;
|
32
|
-
newArrowDirection: any;
|
33
|
-
newArrowLocation: any;
|
34
|
-
};
|
35
|
-
export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
|
36
|
-
trigger: any;
|
37
|
-
click: any;
|
38
|
-
show: any;
|
39
|
-
hide: any;
|
40
|
-
}) => {};
|
@@ -1,209 +0,0 @@
|
|
1
|
-
const directionCssMap = {
|
2
|
-
left: "right",
|
3
|
-
right: "left",
|
4
|
-
top: "bottom",
|
5
|
-
bottom: "top"
|
6
|
-
};
|
7
|
-
const getNewDirectionLocation = ({
|
8
|
-
rootOffset,
|
9
|
-
arrowDirection,
|
10
|
-
tipOffset,
|
11
|
-
arrowLocation
|
12
|
-
}) => {
|
13
|
-
const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
|
14
|
-
const { width, height } = tipOffset;
|
15
|
-
const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
16
|
-
const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
17
|
-
let newArrowDirection = arrowDirection;
|
18
|
-
let newArrowLocation = arrowLocation;
|
19
|
-
const isDirectionTop = arrowDirection === "top";
|
20
|
-
const isDirectionBottom = arrowDirection === "bottom";
|
21
|
-
const isDirectionLeft = arrowDirection === "left";
|
22
|
-
const isDirectionRight = arrowDirection === "right";
|
23
|
-
if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
|
24
|
-
newArrowDirection = directionCssMap[arrowDirection];
|
25
|
-
}
|
26
|
-
if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
|
27
|
-
newArrowLocation = directionCssMap[arrowLocation];
|
28
|
-
}
|
29
|
-
const isCenter = arrowLocation === "center";
|
30
|
-
if (isCenter && (isDirectionTop || isDirectionBottom)) {
|
31
|
-
if (cLeft + width > pgegWidth) {
|
32
|
-
newArrowLocation = directionCssMap.left;
|
33
|
-
} else if (cRight - width < 0) {
|
34
|
-
newArrowLocation = directionCssMap.right;
|
35
|
-
}
|
36
|
-
} else if (isCenter && (isDirectionLeft || isDirectionRight)) {
|
37
|
-
if (cTop + height > pgegHeight) {
|
38
|
-
newArrowLocation = directionCssMap.top;
|
39
|
-
} else if (cBottom - height < 0) {
|
40
|
-
newArrowLocation = directionCssMap.bottom;
|
41
|
-
}
|
42
|
-
}
|
43
|
-
return {
|
44
|
-
newArrowDirection,
|
45
|
-
newArrowLocation
|
46
|
-
};
|
47
|
-
};
|
48
|
-
const getDirectionLocationStyle = ({
|
49
|
-
rootOffset,
|
50
|
-
arrowDirection,
|
51
|
-
tipOffset,
|
52
|
-
arrowLocation
|
53
|
-
}) => {
|
54
|
-
const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
|
55
|
-
const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
|
56
|
-
const styles = {};
|
57
|
-
const {
|
58
|
-
width: cWidth,
|
59
|
-
height: cHeight,
|
60
|
-
left: cLeft,
|
61
|
-
right: cRight,
|
62
|
-
top: cTop,
|
63
|
-
bottom: cBottom
|
64
|
-
} = rootOffset;
|
65
|
-
const { width, height } = tipOffset;
|
66
|
-
if (arrowDirection === "top") {
|
67
|
-
styles.top = cTop;
|
68
|
-
styles.transform = `translateY(-100%)`;
|
69
|
-
switch (arrowLocation) {
|
70
|
-
case "left":
|
71
|
-
styles.left = cLeft;
|
72
|
-
break;
|
73
|
-
case "center":
|
74
|
-
styles.left = cLeft + (cWidth - width) / 2;
|
75
|
-
break;
|
76
|
-
case "right":
|
77
|
-
styles.left = cRight;
|
78
|
-
styles.transform = `translate(-100%, -100%)`;
|
79
|
-
break;
|
80
|
-
default:
|
81
|
-
break;
|
82
|
-
}
|
83
|
-
} else if (arrowDirection === "bottom") {
|
84
|
-
styles.top = cBottom;
|
85
|
-
switch (arrowLocation) {
|
86
|
-
case "left":
|
87
|
-
styles.left = cLeft;
|
88
|
-
break;
|
89
|
-
case "center":
|
90
|
-
styles.left = cLeft + (cWidth - width) / 2;
|
91
|
-
break;
|
92
|
-
case "right":
|
93
|
-
styles.left = cRight;
|
94
|
-
styles.transform = `translateX(-100%)`;
|
95
|
-
break;
|
96
|
-
default:
|
97
|
-
break;
|
98
|
-
}
|
99
|
-
} else if (arrowDirection === "left") {
|
100
|
-
styles.left = cLeft;
|
101
|
-
styles.transform = `translateX(-100%)`;
|
102
|
-
switch (arrowLocation) {
|
103
|
-
case "top":
|
104
|
-
styles.top = cTop;
|
105
|
-
break;
|
106
|
-
case "center":
|
107
|
-
styles.top = cTop + (cHeight - height) / 2;
|
108
|
-
break;
|
109
|
-
case "bottom":
|
110
|
-
styles.top = cBottom;
|
111
|
-
styles.transform = `translate(-100%, -100%)`;
|
112
|
-
break;
|
113
|
-
default:
|
114
|
-
break;
|
115
|
-
}
|
116
|
-
} else if (arrowDirection === "right") {
|
117
|
-
styles.left = cRight;
|
118
|
-
switch (arrowLocation) {
|
119
|
-
case "top":
|
120
|
-
styles.top = cTop;
|
121
|
-
break;
|
122
|
-
case "center":
|
123
|
-
styles.top = cTop + (cHeight - height) / 2;
|
124
|
-
break;
|
125
|
-
case "bottom":
|
126
|
-
styles.top = cBottom;
|
127
|
-
styles.transform = `translateY(-100%)`;
|
128
|
-
break;
|
129
|
-
default:
|
130
|
-
break;
|
131
|
-
}
|
132
|
-
}
|
133
|
-
if (styles.top) {
|
134
|
-
styles.top = `${styles.top + scrollTop}px`;
|
135
|
-
}
|
136
|
-
if (styles.left) {
|
137
|
-
styles.left = `${styles.left + scrollLeft}px`;
|
138
|
-
}
|
139
|
-
return styles;
|
140
|
-
};
|
141
|
-
const getStylesAndLocation = ({
|
142
|
-
childrenRef,
|
143
|
-
arrowDirection,
|
144
|
-
arrowLocation,
|
145
|
-
selector
|
146
|
-
}) => {
|
147
|
-
const rootOffset = childrenRef.current.getBoundingClientRect();
|
148
|
-
const $rtDom = document.querySelector(selector);
|
149
|
-
if (!$rtDom)
|
150
|
-
return null;
|
151
|
-
const tipOffset = $rtDom.getBoundingClientRect();
|
152
|
-
const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
|
153
|
-
rootOffset,
|
154
|
-
arrowDirection,
|
155
|
-
tipOffset,
|
156
|
-
arrowLocation
|
157
|
-
});
|
158
|
-
const styles = getDirectionLocationStyle({
|
159
|
-
rootOffset,
|
160
|
-
arrowDirection: newArrowDirection,
|
161
|
-
tipOffset,
|
162
|
-
arrowLocation: newArrowLocation
|
163
|
-
});
|
164
|
-
styles.visibility = "visible";
|
165
|
-
return {
|
166
|
-
styles,
|
167
|
-
newArrowDirection,
|
168
|
-
newArrowLocation
|
169
|
-
};
|
170
|
-
};
|
171
|
-
const onMouseEnter = "onMouseEnter";
|
172
|
-
const onMouseLeave = "onMouseLeave";
|
173
|
-
const onClick = "onClick";
|
174
|
-
const TriggerEvent = {
|
175
|
-
hover: [onMouseEnter, onMouseLeave],
|
176
|
-
click: [onClick]
|
177
|
-
};
|
178
|
-
const triggerEventTransform = ({ trigger, click, show, hide }) => {
|
179
|
-
let triggers = [];
|
180
|
-
if (typeof trigger === "string") {
|
181
|
-
triggers = [trigger];
|
182
|
-
} else if (Array.isArray(trigger)) {
|
183
|
-
triggers = trigger;
|
184
|
-
} else {
|
185
|
-
triggers = ["click"];
|
186
|
-
}
|
187
|
-
const option = {};
|
188
|
-
triggers.forEach((item) => {
|
189
|
-
const eventNames = TriggerEvent[item];
|
190
|
-
eventNames.forEach((eventName) => {
|
191
|
-
let cbk;
|
192
|
-
if (eventName === onMouseEnter) {
|
193
|
-
cbk = show;
|
194
|
-
} else if (eventName === onMouseLeave) {
|
195
|
-
cbk = hide;
|
196
|
-
} else if (eventName === onClick) {
|
197
|
-
cbk = click;
|
198
|
-
}
|
199
|
-
option[eventName] = cbk;
|
200
|
-
});
|
201
|
-
});
|
202
|
-
return option;
|
203
|
-
};
|
204
|
-
export {
|
205
|
-
getDirectionLocationStyle,
|
206
|
-
getNewDirectionLocation,
|
207
|
-
getStylesAndLocation,
|
208
|
-
triggerEventTransform
|
209
|
-
};
|
package/es/hooks/useUniqueId.js
DELETED
@@ -1,14 +0,0 @@
|
|
1
|
-
import { useRef } from "react";
|
2
|
-
let globalClientIdCounter = 0;
|
3
|
-
function useUniqueId() {
|
4
|
-
const idRef = useRef();
|
5
|
-
if (!idRef.current) {
|
6
|
-
globalClientIdCounter += 1;
|
7
|
-
idRef.current = `b${globalClientIdCounter.toString(32)}`;
|
8
|
-
}
|
9
|
-
return idRef.current;
|
10
|
-
}
|
11
|
-
var useUniqueId_default = useUniqueId;
|
12
|
-
export {
|
13
|
-
useUniqueId_default as default
|
14
|
-
};
|