@rc-component/trigger 1.7.2 → 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 +32 -9
  2. package/lib/hooks/useAlign.js +32 -9
  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) {
@@ -199,7 +210,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
199
210
  var visibleT = Math.max(t, visibleArea.top);
200
211
  var visibleR = Math.min(r, visibleArea.right);
201
212
  var visibleB = Math.min(b, visibleArea.bottom);
202
- return (visibleR - visibleL) * (visibleB - visibleT);
213
+ return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
203
214
  }
204
215
  var originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
205
216
 
@@ -238,30 +249,36 @@ 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;
245
256
  } else {
246
257
  tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
247
258
  }
248
- if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) > originIntersectionVisibleArea) {
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;
259
273
  } else {
260
274
  _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
261
275
  }
262
- if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) > originIntersectionVisibleArea) {
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,30 +289,36 @@ 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;
279
296
  } else {
280
297
  tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
281
298
  }
282
- if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
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;
293
313
  } else {
294
314
  _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
295
315
  }
296
- if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
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) {
@@ -207,7 +218,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
207
218
  var visibleT = Math.max(t, visibleArea.top);
208
219
  var visibleR = Math.min(r, visibleArea.right);
209
220
  var visibleB = Math.min(b, visibleArea.bottom);
210
- return (visibleR - visibleL) * (visibleB - visibleT);
221
+ return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
211
222
  }
212
223
  var originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
213
224
 
@@ -246,30 +257,36 @@ 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;
253
264
  } else {
254
265
  tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
255
266
  }
256
- if (getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) > originIntersectionVisibleArea) {
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;
267
281
  } else {
268
282
  _tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
269
283
  }
270
- if (getIntersectionVisibleArea(nextOffsetX, _tmpNextOffsetY) > originIntersectionVisibleArea) {
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,30 +297,36 @@ 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;
287
304
  } else {
288
305
  tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
289
306
  }
290
- if (getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
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;
301
321
  } else {
302
322
  _tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
303
323
  }
304
- if (getIntersectionVisibleArea(_tmpNextOffsetX, nextOffsetY) > originIntersectionVisibleArea) {
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.2",
3
+ "version": "1.8.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"