@rc-component/trigger 1.7.3 → 1.8.0

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 +27 -4
  2. package/lib/hooks/useAlign.js +27 -4
  3. package/package.json +1 -1
package/es/hooks/useAlign.js CHANGED
@@ -74,6 +74,17 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
74
74
  return collectScroller(popupEle);
75
75
  }, [popupEle]);
76
76
 
77
+ // ========================= Flip ==========================
78
+ // We will memo flip info.
79
+ // If size change to make flip, it will memo the flip info and use it in next align.
80
+ var prevFlipRef = React.useRef({});
81
+ var resetFlipCache = function resetFlipCache() {
82
+ prevFlipRef.current = {};
83
+ };
84
+ if (!open) {
85
+ resetFlipCache();
86
+ }
87
+
77
88
  // ========================= Align =========================
78
89
  var onAlign = useEvent(function () {
79
90
  if (popupEle && target && open) {
@@ -238,7 +249,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
238
249
  var sameTB = popupPoints[0] === targetPoints[0];
239
250
 
240
251
  // Bottom to Top
241
- if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
252
+ if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > visibleArea.bottom || prevFlipRef.current.bt)) {
242
253
  var tmpNextOffsetY = nextOffsetY;
243
254
  if (sameTB) {
244
255
  tmpNextOffsetY -= popupHeight - targetHeight;
@@ -246,13 +257,16 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
246
257
  tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
247
258
  }
248
259
  if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >= originIntersectionVisibleArea) {
260
+ prevFlipRef.current.bt = true;
249
261
  nextOffsetY = tmpNextOffsetY;
250
262
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
263
+ } else {
264
+ prevFlipRef.current.bt = false;
251
265
  }
252
266
  }
253
267
 
254
268
  // Top to Bottom
255
- if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
269
+ if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < visibleArea.top || prevFlipRef.current.tb)) {
256
270
  var _tmpNextOffsetY = nextOffsetY;
257
271
  if (sameTB) {
258
272
  _tmpNextOffsetY += popupHeight - targetHeight;
@@ -260,8 +274,11 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
260
274
  _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
261
275
  }
262
276
  if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) >= originIntersectionVisibleArea) {
277
+ prevFlipRef.current.tb = true;
263
278
  nextOffsetY = _tmpNextOffsetY;
264
279
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
280
+ } else {
281
+ prevFlipRef.current.tb = false;
265
282
  }
266
283
  }
267
284
 
@@ -272,7 +289,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
272
289
  var sameLR = popupPoints[1] === targetPoints[1];
273
290
 
274
291
  // Right to Left
275
- if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
292
+ if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > visibleArea.right || prevFlipRef.current.rl)) {
276
293
  var tmpNextOffsetX = nextOffsetX;
277
294
  if (sameLR) {
278
295
  tmpNextOffsetX -= popupWidth - targetWidth;
@@ -280,13 +297,16 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
280
297
  tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
281
298
  }
282
299
  if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
300
+ prevFlipRef.current.rl = true;
283
301
  nextOffsetX = tmpNextOffsetX;
284
302
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
303
+ } else {
304
+ prevFlipRef.current.rl = false;
285
305
  }
286
306
  }
287
307
 
288
308
  // Left to Right
289
- if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
309
+ if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < visibleArea.left || prevFlipRef.current.lr)) {
290
310
  var _tmpNextOffsetX = nextOffsetX;
291
311
  if (sameLR) {
292
312
  _tmpNextOffsetX += popupWidth - targetWidth;
@@ -294,8 +314,11 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
294
314
  _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
295
315
  }
296
316
  if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
317
+ prevFlipRef.current.lr = true;
297
318
  nextOffsetX = _tmpNextOffsetX;
298
319
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
320
+ } else {
321
+ prevFlipRef.current.lr = false;
299
322
  }
300
323
  }
301
324
 
package/lib/hooks/useAlign.js CHANGED
@@ -82,6 +82,17 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
82
82
  return (0, _util.collectScroller)(popupEle);
83
83
  }, [popupEle]);
84
84
 
85
+ // ========================= Flip ==========================
86
+ // We will memo flip info.
87
+ // If size change to make flip, it will memo the flip info and use it in next align.
88
+ var prevFlipRef = React.useRef({});
89
+ var resetFlipCache = function resetFlipCache() {
90
+ prevFlipRef.current = {};
91
+ };
92
+ if (!open) {
93
+ resetFlipCache();
94
+ }
95
+
85
96
  // ========================= Align =========================
86
97
  var onAlign = (0, _useEvent.default)(function () {
87
98
  if (popupEle && target && open) {
@@ -246,7 +257,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
246
257
  var sameTB = popupPoints[0] === targetPoints[0];
247
258
 
248
259
  // Bottom to Top
249
- if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > visibleArea.bottom) {
260
+ if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > visibleArea.bottom || prevFlipRef.current.bt)) {
250
261
  var tmpNextOffsetY = nextOffsetY;
251
262
  if (sameTB) {
252
263
  tmpNextOffsetY -= popupHeight - targetHeight;
@@ -254,13 +265,16 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
254
265
  tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
255
266
  }
256
267
  if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >= originIntersectionVisibleArea) {
268
+ prevFlipRef.current.bt = true;
257
269
  nextOffsetY = tmpNextOffsetY;
258
270
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
271
+ } else {
272
+ prevFlipRef.current.bt = false;
259
273
  }
260
274
  }
261
275
 
262
276
  // Top to Bottom
263
- if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < visibleArea.top) {
277
+ if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < visibleArea.top || prevFlipRef.current.tb)) {
264
278
  var _tmpNextOffsetY = nextOffsetY;
265
279
  if (sameTB) {
266
280
  _tmpNextOffsetY += popupHeight - targetHeight;
@@ -268,8 +282,11 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
268
282
  _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
269
283
  }
270
284
  if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) >= originIntersectionVisibleArea) {
285
+ prevFlipRef.current.tb = true;
271
286
  nextOffsetY = _tmpNextOffsetY;
272
287
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
288
+ } else {
289
+ prevFlipRef.current.tb = false;
273
290
  }
274
291
  }
275
292
 
@@ -280,7 +297,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
280
297
  var sameLR = popupPoints[1] === targetPoints[1];
281
298
 
282
299
  // Right to Left
283
- if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > visibleArea.right) {
300
+ if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > visibleArea.right || prevFlipRef.current.rl)) {
284
301
  var tmpNextOffsetX = nextOffsetX;
285
302
  if (sameLR) {
286
303
  tmpNextOffsetX -= popupWidth - targetWidth;
@@ -288,13 +305,16 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
288
305
  tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
289
306
  }
290
307
  if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
308
+ prevFlipRef.current.rl = true;
291
309
  nextOffsetX = tmpNextOffsetX;
292
310
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
311
+ } else {
312
+ prevFlipRef.current.rl = false;
293
313
  }
294
314
  }
295
315
 
296
316
  // Left to Right
297
- if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < visibleArea.left) {
317
+ if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < visibleArea.left || prevFlipRef.current.lr)) {
298
318
  var _tmpNextOffsetX = nextOffsetX;
299
319
  if (sameLR) {
300
320
  _tmpNextOffsetX += popupWidth - targetWidth;
@@ -302,8 +322,11 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
302
322
  _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
303
323
  }
304
324
  if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) >= originIntersectionVisibleArea) {
325
+ prevFlipRef.current.lr = true;
305
326
  nextOffsetX = _tmpNextOffsetX;
306
327
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
328
+ } else {
329
+ prevFlipRef.current.lr = false;
307
330
  }
308
331
  }
309
332
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.7.3",
3
+ "version": "1.8.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"