@bifrostui/utils 1.4.1 → 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 +28 -15
  3. package/es/directionLocationUtil.d.ts +6 -3
  4. package/es/directionLocationUtil.js +28 -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,10 +82,11 @@ 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
- const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
89
+ const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
81
90
  const styles = {};
82
91
  const {
83
92
  width: cWidth,
@@ -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;
@@ -161,12 +170,14 @@ const getDirectionLocationStyle = ({
161
170
  if (styles.left) {
162
171
  styles.left = `${styles.left + scrollLeft}px`;
163
172
  }
173
+ styles.width = `${width}px`;
164
174
  return styles;
165
175
  };
166
176
  const getStylesAndLocation = ({
167
177
  childrenRef,
168
178
  arrowDirection,
169
179
  arrowLocation,
180
+ offsetSpacing,
170
181
  selector
171
182
  }) => {
172
183
  if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -184,13 +195,15 @@ const getStylesAndLocation = ({
184
195
  rootOffset,
185
196
  arrowDirection,
186
197
  tipOffset,
187
- arrowLocation
198
+ arrowLocation,
199
+ offsetSpacing
188
200
  });
189
201
  const styles = getDirectionLocationStyle({
190
202
  rootOffset,
191
203
  arrowDirection: newArrowDirection,
192
204
  tipOffset,
193
- arrowLocation: newArrowLocation
205
+ arrowLocation: newArrowLocation,
206
+ offsetSpacing
194
207
  });
195
208
  styles.visibility = "visible";
196
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,10 +57,11 @@ const getDirectionLocationStyle = ({
49
57
  rootOffset,
50
58
  arrowDirection,
51
59
  tipOffset,
52
- arrowLocation
60
+ arrowLocation,
61
+ offsetSpacing
53
62
  }) => {
54
63
  const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
55
- const scrollLeft = window.screenX >= 0 && window.screenX || document.documentElement.scrollLeft;
64
+ const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
56
65
  const styles = {};
57
66
  const {
58
67
  width: cWidth,
@@ -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;
@@ -136,12 +145,14 @@ const getDirectionLocationStyle = ({
136
145
  if (styles.left) {
137
146
  styles.left = `${styles.left + scrollLeft}px`;
138
147
  }
148
+ styles.width = `${width}px`;
139
149
  return styles;
140
150
  };
141
151
  const getStylesAndLocation = ({
142
152
  childrenRef,
143
153
  arrowDirection,
144
154
  arrowLocation,
155
+ offsetSpacing,
145
156
  selector
146
157
  }) => {
147
158
  if (!(childrenRef == null ? void 0 : childrenRef.current)) {
@@ -159,13 +170,15 @@ const getStylesAndLocation = ({
159
170
  rootOffset,
160
171
  arrowDirection,
161
172
  tipOffset,
162
- arrowLocation
173
+ arrowLocation,
174
+ offsetSpacing
163
175
  });
164
176
  const styles = getDirectionLocationStyle({
165
177
  rootOffset,
166
178
  arrowDirection: newArrowDirection,
167
179
  tipOffset,
168
- arrowLocation: newArrowLocation
180
+ arrowLocation: newArrowLocation,
181
+ offsetSpacing
169
182
  });
170
183
  styles.visibility = "visible";
171
184
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/utils",
3
- "version": "1.4.1",
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",