@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.
@@ -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
- };