@bifrostui/utils 1.4.2-beta.0 → 1.4.2-beta.1

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.
Files changed (5) hide show
  1. package/dist/directionLocationUtil.d.ts +6 -3
  2. package/dist/directionLocationUtil.js +26 -15
  3. package/es/directionLocationUtil.d.ts +6 -3
  4. package/es/directionLocationUtil.js +26 -15
  5. package/package.json +1 -1
package/dist/directionLocationUtil.d.ts CHANGED
@@ -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;
package/dist/directionLocationUtil.js CHANGED
@@ -33,9 +33,17 @@ const getNewDirectionLocation = ({
33
33
  rootOffset,
34
34
  arrowDirection,
35
35
  tipOffset,
36
- arrowLocation
36
+ arrowLocation,
37
+ offsetSpacing
37
38
  }) => {
38
- const { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
39
+ const {
40
+ left: cLeft,
41
+ right: cRight,
42
+ top: cTop,
43
+ bottom: cBottom,
44
+ width: cWidth,
45
+ height: cHeight
46
+ } = rootOffset;
39
47
  const { width, height } = tipOffset;
40
48
  const pgegWidth = document.documentElement.clientWidth || document.body.clientWidth;
41
49
  const pgegHeight = document.documentElement.clientHeight || document.body.clientHeight;
@@ -45,7 +53,7 @@ const getNewDirectionLocation = ({
45
53
  const isDirectionBottom = arrowDirection === "bottom";
46
54
  const isDirectionLeft = arrowDirection === "left";
47
55
  const isDirectionRight = arrowDirection === "right";
48
- if (isDirectionTop && cTop - height < 0 || isDirectionBottom && cBottom + height > pgegHeight || isDirectionLeft && cLeft - width < 0 || isDirectionRight && cRight + width > pgegWidth) {
56
+ if (isDirectionTop && cTop - height - offsetSpacing < 0 || isDirectionBottom && cBottom + height + offsetSpacing > pgegHeight || isDirectionLeft && cLeft - width - offsetSpacing < 0 || isDirectionRight && cRight + width + offsetSpacing > pgegWidth) {
49
57
  newArrowDirection = directionCssMap[arrowDirection];
50
58
  }
51
59
  if (arrowLocation === "top" && cTop + height > pgegHeight || arrowLocation === "bottom" && cBottom - height < 0 || arrowLocation === "left" && cLeft + width > pgegWidth || arrowLocation === "right" && cRight - width < 0) {
@@ -53,15 +61,15 @@ const getNewDirectionLocation = ({
53
61
  }
54
62
  const isCenter = arrowLocation === "center";
55
63
  if (isCenter && (isDirectionTop || isDirectionBottom)) {
56
- if (cLeft + width > pgegWidth) {
64
+ if (cLeft + (cWidth - width) / 2 + width > pgegWidth) {
57
65
  newArrowLocation = directionCssMap.left;
58
- } else if (cRight - width < 0) {
66
+ } else if (cLeft + (cWidth - width) / 2 < 0) {
59
67
  newArrowLocation = directionCssMap.right;
60
68
  }
61
69
  } else if (isCenter && (isDirectionLeft || isDirectionRight)) {
62
- if (cTop + height > pgegHeight) {
70
+ if (cTop + (cHeight - height) / 2 + cHeight > pgegHeight) {
63
71
  newArrowLocation = directionCssMap.top;
64
- } else if (cBottom - height < 0) {
72
+ } else if (cTop + (cHeight - height) / 2 < 0) {
65
73
  newArrowLocation = directionCssMap.bottom;
66
74
  }
67
75
  }
@@ -74,7 +82,8 @@ const getDirectionLocationStyle = ({
74
82
  rootOffset,
75
83
  arrowDirection,
76
84
  tipOffset,
77
- arrowLocation
85
+ arrowLocation,
86
+ offsetSpacing
78
87
  }) => {
79
88
  const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
80
89
  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
@@ -89,7 +98,7 @@ const getDirectionLocationStyle = ({
89
98
  } = rootOffset;
90
99
  const { width, height } = tipOffset;
91
100
  if (arrowDirection === "top") {
92
- styles.top = cTop;
101
+ styles.top = cTop - offsetSpacing;
93
102
  styles.transform = `translateY(-100%)`;
94
103
  switch (arrowLocation) {
95
104
  case "left":
@@ -106,7 +115,7 @@ const getDirectionLocationStyle = ({
106
115
  break;
107
116
  }
108
117
  } else if (arrowDirection === "bottom") {
109
- styles.top = cBottom;
118
+ styles.top = cBottom + offsetSpacing;
110
119
  switch (arrowLocation) {
111
120
  case "left":
112
121
  styles.left = cLeft;
@@ -122,7 +131,7 @@ const getDirectionLocationStyle = ({
122
131
  break;
123
132
  }
124
133
  } else if (arrowDirection === "left") {
125
- styles.left = cLeft;
134
+ styles.left = cLeft - offsetSpacing;
126
135
  styles.transform = `translateX(-100%)`;
127
136
  switch (arrowLocation) {
128
137
  case "top":
@@ -139,7 +148,7 @@ const getDirectionLocationStyle = ({
139
148
  break;
140
149
  }
141
150
  } else if (arrowDirection === "right") {
142
- styles.left = cRight;
151
+ styles.left = cRight + offsetSpacing;
143
152
  switch (arrowLocation) {
144
153
  case "top":
145
154
  styles.top = cTop;
@@ -162,13 +171,13 @@ const getDirectionLocationStyle = ({
162
171
  styles.left = `${styles.left + scrollLeft}px`;
163
172
  }
164
173
  styles.width = `${width}px`;
165
- styles.height = `${height}px`;
166
174
  return styles;
167
175
  };
168
176
  const getStylesAndLocation = ({
169
177
  childrenRef,
170
178
  arrowDirection,
171
179
  arrowLocation,
180
+ offsetSpacing,
172
181
  selector
173
182
  }) => {
174
183
  if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -186,13 +195,15 @@ const getStylesAndLocation = ({
186
195
  rootOffset,
187
196
  arrowDirection,
188
197
  tipOffset,
189
- arrowLocation
198
+ arrowLocation,
199
+ offsetSpacing
190
200
  });
191
201
  const styles = getDirectionLocationStyle({
192
202
  rootOffset,
193
203
  arrowDirection: newArrowDirection,
194
204
  tipOffset,
195
- arrowLocation: newArrowLocation
205
+ arrowLocation: newArrowLocation,
206
+ offsetSpacing
196
207
  });
197
208
  styles.visibility = "visible";
198
209
  return {
package/es/directionLocationUtil.d.ts CHANGED
@@ -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;
package/es/directionLocationUtil.js CHANGED
@@ -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 { left: cLeft, right: cRight, top: cTop, bottom: cBottom } = rootOffset;
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 (cRight - width < 0) {
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 (cBottom - height < 0) {
47
+ } else if (cTop + (cHeight - height) / 2 < 0) {
40
48
  newArrowLocation = directionCssMap.bottom;
41
49
  }
42
50
  }
@@ -49,7 +57,8 @@ 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
64
  const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
@@ -64,7 +73,7 @@ const getDirectionLocationStyle = ({
64
73
  } = rootOffset;
65
74
  const { width, height } = tipOffset;
66
75
  if (arrowDirection === "top") {
67
- styles.top = cTop;
76
+ styles.top = cTop - offsetSpacing;
68
77
  styles.transform = `translateY(-100%)`;
69
78
  switch (arrowLocation) {
70
79
  case "left":
@@ -81,7 +90,7 @@ const getDirectionLocationStyle = ({
81
90
  break;
82
91
  }
83
92
  } else if (arrowDirection === "bottom") {
84
- styles.top = cBottom;
93
+ styles.top = cBottom + offsetSpacing;
85
94
  switch (arrowLocation) {
86
95
  case "left":
87
96
  styles.left = cLeft;
@@ -97,7 +106,7 @@ const getDirectionLocationStyle = ({
97
106
  break;
98
107
  }
99
108
  } else if (arrowDirection === "left") {
100
- styles.left = cLeft;
109
+ styles.left = cLeft - offsetSpacing;
101
110
  styles.transform = `translateX(-100%)`;
102
111
  switch (arrowLocation) {
103
112
  case "top":
@@ -114,7 +123,7 @@ const getDirectionLocationStyle = ({
114
123
  break;
115
124
  }
116
125
  } else if (arrowDirection === "right") {
117
- styles.left = cRight;
126
+ styles.left = cRight + offsetSpacing;
118
127
  switch (arrowLocation) {
119
128
  case "top":
120
129
  styles.top = cTop;
@@ -137,13 +146,13 @@ const getDirectionLocationStyle = ({
137
146
  styles.left = `${styles.left + scrollLeft}px`;
138
147
  }
139
148
  styles.width = `${width}px`;
140
- styles.height = `${height}px`;
141
149
  return styles;
142
150
  };
143
151
  const getStylesAndLocation = ({
144
152
  childrenRef,
145
153
  arrowDirection,
146
154
  arrowLocation,
155
+ offsetSpacing,
147
156
  selector
148
157
  }) => {
149
158
  if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -161,13 +170,15 @@ const getStylesAndLocation = ({
161
170
  rootOffset,
162
171
  arrowDirection,
163
172
  tipOffset,
164
- arrowLocation
173
+ arrowLocation,
174
+ offsetSpacing
165
175
  });
166
176
  const styles = getDirectionLocationStyle({
167
177
  rootOffset,
168
178
  arrowDirection: newArrowDirection,
169
179
  tipOffset,
170
- arrowLocation: newArrowLocation
180
+ arrowLocation: newArrowLocation,
181
+ offsetSpacing
171
182
  });
172
183
  styles.visibility = "visible";
173
184
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/utils",
3
- "version": "1.4.2-beta.0",
3
+ "version": "1.4.2-beta.1",
4
4
  "description": "BUI React utilities for building components.",
5
5
  "main": "dist/index.js",
6
6
  "module": "es/index.js",