@bifrostui/utils 1.3.1-beta.1 → 1.3.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
- import useUniqueId from './useUniqueId';
11
- export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };
10
+ export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, };
@@ -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, useUniqueId, } from './hooks';
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")
@@ -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;
@@ -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
- import useUniqueId from './useUniqueId';
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, useUniqueId, } from './hooks';
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
  };
@@ -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,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/utils",
3
- "version": "1.3.1-beta.1",
3
+ "version": "1.3.3",
4
4
  "description": "BUI React utilities for building components.",
5
5
  "main": "dist/index.js",
6
6
  "module": "es/index.js",
@@ -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,2 +0,0 @@
1
- declare function useUniqueId(): string;
2
- export default useUniqueId;
@@ -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
- };
@@ -1,2 +0,0 @@
1
- declare function useUniqueId(): string;
2
- export default useUniqueId;
@@ -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
- };