@rc-component/trigger 1.5.8 → 1.5.9

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 (3) hide show
  1. package/es/hooks/useAlign.js +41 -12
  2. package/lib/hooks/useAlign.js +41 -12
  3. package/package.json +1 -1
package/es/hooks/useAlign.js CHANGED
@@ -210,6 +210,19 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
210
210
  var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
211
211
  var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
212
212
 
213
+ // ============== Intersection ===============
214
+ // Get area by position. Used for check if flip area is better
215
+ function getIntersectionVisibleArea(x, y) {
216
+ var r = x + popupWidth;
217
+ var b = y + popupHeight;
218
+ var visibleX = Math.max(x, visibleArea.left);
219
+ var visibleY = Math.max(y, visibleArea.top);
220
+ var visibleR = Math.min(r, visibleArea.right);
221
+ var visibleB = Math.min(b, visibleArea.bottom);
222
+ return (visibleR - visibleX) * (visibleB - visibleY);
223
+ }
224
+ var originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
225
+
213
226
  // ================ Overflow =================
214
227
  var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
215
228
  var popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
@@ -235,22 +248,30 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
235
248
 
236
249
  // Bottom to Top
237
250
  if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
251
+ var tmpNextOffsetY;
238
252
  if (sameTB) {
239
- nextOffsetY -= popupHeight - targetHeight;
253
+ tmpNextOffsetY -= popupHeight - targetHeight;
240
254
  } else {
241
- nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
255
+ tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
256
+ }
257
+ if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) > originIntersectionVisibleArea) {
258
+ nextOffsetY = tmpNextOffsetY;
259
+ nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
242
260
  }
243
- nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
244
261
  }
245
262
 
246
263
  // Top to Bottom
247
264
  if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
265
+ var _tmpNextOffsetY;
248
266
  if (sameTB) {
249
- nextOffsetY += popupHeight - targetHeight;
267
+ _tmpNextOffsetY += popupHeight - targetHeight;
250
268
  } else {
251
- nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
269
+ _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
270
+ }
271
+ if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) > originIntersectionVisibleArea) {
272
+ nextOffsetY = _tmpNextOffsetY;
273
+ nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
252
274
  }
253
- nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
254
275
  }
255
276
 
256
277
  // >>>>>>>>>> Left & Right
@@ -263,22 +284,30 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
263
284
 
264
285
  // Right to Left
265
286
  if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
287
+ var tmpNextOffsetX;
266
288
  if (sameLR) {
267
- nextOffsetX -= popupWidth - targetWidth;
289
+ tmpNextOffsetX -= popupWidth - targetWidth;
268
290
  } else {
269
- nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
291
+ tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
292
+ }
293
+ if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
294
+ nextOffsetX = tmpNextOffsetX;
295
+ nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
270
296
  }
271
- nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
272
297
  }
273
298
 
274
299
  // Left to Right
275
300
  if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
301
+ var _tmpNextOffsetX;
276
302
  if (sameLR) {
277
- nextOffsetX += popupWidth - targetWidth;
303
+ _tmpNextOffsetX += popupWidth - targetWidth;
278
304
  } else {
279
- nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
305
+ _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
306
+ }
307
+ if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
308
+ nextOffsetX = _tmpNextOffsetX;
309
+ nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
280
310
  }
281
- nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
282
311
  }
283
312
 
284
313
  // >>>>> Shift
package/lib/hooks/useAlign.js CHANGED
@@ -218,6 +218,19 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
218
218
  var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
219
219
  var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
220
220
 
221
+ // ============== Intersection ===============
222
+ // Get area by position. Used for check if flip area is better
223
+ function getIntersectionVisibleArea(x, y) {
224
+ var r = x + popupWidth;
225
+ var b = y + popupHeight;
226
+ var visibleX = Math.max(x, visibleArea.left);
227
+ var visibleY = Math.max(y, visibleArea.top);
228
+ var visibleR = Math.min(r, visibleArea.right);
229
+ var visibleB = Math.min(b, visibleArea.bottom);
230
+ return (visibleR - visibleX) * (visibleB - visibleY);
231
+ }
232
+ var originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
233
+
221
234
  // ================ Overflow =================
222
235
  var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
223
236
  var popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
@@ -243,22 +256,30 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
243
256
 
244
257
  // Bottom to Top
245
258
  if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
259
+ var tmpNextOffsetY;
246
260
  if (sameTB) {
247
- nextOffsetY -= popupHeight - targetHeight;
261
+ tmpNextOffsetY -= popupHeight - targetHeight;
248
262
  } else {
249
- nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
263
+ tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
264
+ }
265
+ if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) > originIntersectionVisibleArea) {
266
+ nextOffsetY = tmpNextOffsetY;
267
+ nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
250
268
  }
251
- nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
252
269
  }
253
270
 
254
271
  // Top to Bottom
255
272
  if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
273
+ var _tmpNextOffsetY;
256
274
  if (sameTB) {
257
- nextOffsetY += popupHeight - targetHeight;
275
+ _tmpNextOffsetY += popupHeight - targetHeight;
258
276
  } else {
259
- nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
277
+ _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
278
+ }
279
+ if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) > originIntersectionVisibleArea) {
280
+ nextOffsetY = _tmpNextOffsetY;
281
+ nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
260
282
  }
261
- nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
262
283
  }
263
284
 
264
285
  // >>>>>>>>>> Left & Right
@@ -271,22 +292,30 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
271
292
 
272
293
  // Right to Left
273
294
  if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
295
+ var tmpNextOffsetX;
274
296
  if (sameLR) {
275
- nextOffsetX -= popupWidth - targetWidth;
297
+ tmpNextOffsetX -= popupWidth - targetWidth;
276
298
  } else {
277
- nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
299
+ tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
300
+ }
301
+ if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
302
+ nextOffsetX = tmpNextOffsetX;
303
+ nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
278
304
  }
279
- nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
280
305
  }
281
306
 
282
307
  // Left to Right
283
308
  if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
309
+ var _tmpNextOffsetX;
284
310
  if (sameLR) {
285
- nextOffsetX += popupWidth - targetWidth;
311
+ _tmpNextOffsetX += popupWidth - targetWidth;
286
312
  } else {
287
- nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
313
+ _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
314
+ }
315
+ if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
316
+ nextOffsetX = _tmpNextOffsetX;
317
+ nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
288
318
  }
289
- nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
290
319
  }
291
320
 
292
321
  // >>>>> Shift
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.5.8",
3
+ "version": "1.5.9",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"