@bifrostui/utils 1.4.1 → 1.4.2-beta.1

Sign up to get free protection for your applications and to get access to all the features.
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",