@rc-component/trigger 1.5.7 → 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 (5) hide show
  1. package/es/hooks/useAlign.js +41 -12
  2. package/es/index.js +7 -7
  3. package/lib/hooks/useAlign.js +41 -12
  4. package/lib/index.js +7 -7
  5. 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/es/index.js CHANGED
@@ -5,10 +5,10 @@ var _excluded = ["prefixCls", "children", "action", "showAction", "hideAction",
5
5
  import Portal from '@rc-component/portal';
6
6
  import classNames from 'classnames';
7
7
  import ResizeObserver from 'rc-resize-observer';
8
+ import { isDOM } from "rc-util/es/Dom/findDOMNode";
8
9
  import useEvent from "rc-util/es/hooks/useEvent";
9
10
  import useId from "rc-util/es/hooks/useId";
10
11
  import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
11
- import { isDOM } from "rc-util/es/Dom/findDOMNode";
12
12
  import * as React from 'react';
13
13
  import TriggerContext from "./context";
14
14
  import useAction from "./hooks/useAction";
@@ -86,12 +86,12 @@ export function generateTrigger() {
86
86
  _React$useState2 = _slicedToArray(_React$useState, 2),
87
87
  popupEle = _React$useState2[0],
88
88
  setPopupEle = _React$useState2[1];
89
- var setPopupRef = React.useCallback(function (node) {
90
- if (isDOM(node)) {
89
+ var setPopupRef = useEvent(function (node) {
90
+ if (isDOM(node) && popupEle !== node) {
91
91
  setPopupEle(node);
92
92
  }
93
93
  parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
94
- }, []);
94
+ });
95
95
 
96
96
  // =========================== Target ===========================
97
97
  // Use state to control here since `useRef` update not trigger render
@@ -99,11 +99,11 @@ export function generateTrigger() {
99
99
  _React$useState4 = _slicedToArray(_React$useState3, 2),
100
100
  targetEle = _React$useState4[0],
101
101
  setTargetEle = _React$useState4[1];
102
- var setTargetRef = React.useCallback(function (node) {
103
- if (isDOM(node)) {
102
+ var setTargetRef = useEvent(function (node) {
103
+ if (isDOM(node) && targetEle !== node) {
104
104
  setTargetEle(node);
105
105
  }
106
- }, []);
106
+ });
107
107
 
108
108
  // ========================== Children ==========================
109
109
  var child = React.Children.only(children);
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/lib/index.js CHANGED
@@ -13,10 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
13
13
  var _portal = _interopRequireDefault(require("@rc-component/portal"));
14
14
  var _classnames = _interopRequireDefault(require("classnames"));
15
15
  var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
16
+ var _findDOMNode = require("rc-util/lib/Dom/findDOMNode");
16
17
  var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
17
18
  var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
18
19
  var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
19
- var _findDOMNode = require("rc-util/lib/Dom/findDOMNode");
20
20
  var React = _interopRequireWildcard(require("react"));
21
21
  var _context = _interopRequireDefault(require("./context"));
22
22
  var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
@@ -95,12 +95,12 @@ function generateTrigger() {
95
95
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
96
96
  popupEle = _React$useState2[0],
97
97
  setPopupEle = _React$useState2[1];
98
- var setPopupRef = React.useCallback(function (node) {
99
- if ((0, _findDOMNode.isDOM)(node)) {
98
+ var setPopupRef = (0, _useEvent.default)(function (node) {
99
+ if ((0, _findDOMNode.isDOM)(node) && popupEle !== node) {
100
100
  setPopupEle(node);
101
101
  }
102
102
  parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
103
- }, []);
103
+ });
104
104
 
105
105
  // =========================== Target ===========================
106
106
  // Use state to control here since `useRef` update not trigger render
@@ -108,11 +108,11 @@ function generateTrigger() {
108
108
  _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
109
109
  targetEle = _React$useState4[0],
110
110
  setTargetEle = _React$useState4[1];
111
- var setTargetRef = React.useCallback(function (node) {
112
- if ((0, _findDOMNode.isDOM)(node)) {
111
+ var setTargetRef = (0, _useEvent.default)(function (node) {
112
+ if ((0, _findDOMNode.isDOM)(node) && targetEle !== node) {
113
113
  setTargetEle(node);
114
114
  }
115
- }, []);
115
+ });
116
116
 
117
117
  // ========================== Children ==========================
118
118
  var child = React.Children.only(children);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.5.7",
3
+ "version": "1.5.9",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"