@rc-component/trigger 1.15.1 → 1.15.3

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 (9) hide show
  1. package/es/hooks/useAlign.js +10 -3
  2. package/es/hooks/useWatch.d.ts +1 -1
  3. package/es/hooks/useWatch.js +2 -1
  4. package/es/index.js +12 -8
  5. package/lib/hooks/useAlign.js +10 -3
  6. package/lib/hooks/useWatch.d.ts +1 -1
  7. package/lib/hooks/useWatch.js +2 -1
  8. package/lib/index.js +12 -8
  9. package/package.json +1 -1
package/es/hooks/useAlign.js CHANGED
@@ -308,6 +308,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
308
308
  newVisibleRecommendArea >= originIntersectionRecommendArea)) {
309
309
  prevFlipRef.current.bt = true;
310
310
  nextOffsetY = tmpNextOffsetY;
311
+ popupOffsetY = -popupOffsetY;
311
312
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
312
313
  } else {
313
314
  prevFlipRef.current.bt = false;
@@ -331,6 +332,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
331
332
  _newVisibleRecommendArea >= originIntersectionRecommendArea)) {
332
333
  prevFlipRef.current.tb = true;
333
334
  nextOffsetY = _tmpNextOffsetY;
335
+ popupOffsetY = -popupOffsetY;
334
336
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
335
337
  } else {
336
338
  prevFlipRef.current.tb = false;
@@ -360,6 +362,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
360
362
  _newVisibleRecommendArea2 >= originIntersectionRecommendArea)) {
361
363
  prevFlipRef.current.rl = true;
362
364
  nextOffsetX = tmpNextOffsetX;
365
+ popupOffsetX = -popupOffsetX;
363
366
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
364
367
  } else {
365
368
  prevFlipRef.current.rl = false;
@@ -383,6 +386,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
383
386
  _newVisibleRecommendArea3 >= originIntersectionRecommendArea)) {
384
387
  prevFlipRef.current.lr = true;
385
388
  nextOffsetX = _tmpNextOffsetX;
389
+ popupOffsetX = -popupOffsetX;
386
390
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
387
391
  } else {
388
392
  prevFlipRef.current.lr = false;
@@ -395,7 +399,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
395
399
  if (typeof numShiftX === 'number') {
396
400
  // Left
397
401
  if (nextPopupX < visibleRegionArea.left) {
398
- nextOffsetX -= nextPopupX - visibleRegionArea.left;
402
+ nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
399
403
  if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
400
404
  nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
401
405
  }
@@ -403,7 +407,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
403
407
 
404
408
  // Right
405
409
  if (nextPopupRight > visibleRegionArea.right) {
406
- nextOffsetX -= nextPopupRight - visibleRegionArea.right;
410
+ nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
407
411
  if (targetRect.x > visibleRegionArea.right - numShiftX) {
408
412
  nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
409
413
  }
@@ -413,7 +417,10 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
413
417
  if (typeof numShiftY === 'number') {
414
418
  // Top
415
419
  if (nextPopupY < visibleRegionArea.top) {
416
- nextOffsetY -= nextPopupY - visibleRegionArea.top + popupOffsetY;
420
+ nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
421
+
422
+ // When target if far away from visible area
423
+ // Stop shift
417
424
  if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
418
425
  nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
419
426
  }
package/es/hooks/useWatch.d.ts CHANGED
@@ -1 +1 @@
1
- export default function useWatch(open: boolean, target: HTMLElement, popup: HTMLElement, onAlign: VoidFunction): void;
1
+ export default function useWatch(open: boolean, target: HTMLElement, popup: HTMLElement, onAlign: VoidFunction, onScroll: VoidFunction): void;
package/es/hooks/useWatch.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
2
2
  import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
3
3
  import { collectScroller, getWin } from "../util";
4
- export default function useWatch(open, target, popup, onAlign) {
4
+ export default function useWatch(open, target, popup, onAlign, onScroll) {
5
5
  useLayoutEffect(function () {
6
6
  if (open && target && popup) {
7
7
  var targetElement = target;
@@ -12,6 +12,7 @@ export default function useWatch(open, target, popup, onAlign) {
12
12
  var mergedList = new Set([win].concat(_toConsumableArray(targetScrollList), _toConsumableArray(popupScrollList)));
13
13
  function notifyScroll() {
14
14
  onAlign();
15
+ onScroll();
15
16
  }
16
17
  mergedList.forEach(function (scroller) {
17
18
  scroller.addEventListener('scroll', notifyScroll, {
package/es/index.js CHANGED
@@ -226,12 +226,23 @@ export function generateTrigger() {
226
226
  scaleY = _useAlign2[8],
227
227
  alignInfo = _useAlign2[9],
228
228
  onAlign = _useAlign2[10];
229
+ var _useAction = useAction(mobile, action, showAction, hideAction),
230
+ _useAction2 = _slicedToArray(_useAction, 2),
231
+ showActions = _useAction2[0],
232
+ hideActions = _useAction2[1];
233
+ var clickToShow = showActions.has('click');
234
+ var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
229
235
  var triggerAlign = useEvent(function () {
230
236
  if (!inMotion) {
231
237
  onAlign();
232
238
  }
233
239
  });
234
- useWatch(mergedOpen, targetEle, popupEle, triggerAlign);
240
+ var onScroll = function onScroll() {
241
+ if (openRef.current && alignPoint && clickToHide) {
242
+ triggerOpen(false);
243
+ }
244
+ };
245
+ useWatch(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
235
246
  useLayoutEffect(function () {
236
247
  triggerAlign();
237
248
  }, [mousePos, popupPlacement]);
@@ -294,11 +305,6 @@ export function generateTrigger() {
294
305
  };
295
306
 
296
307
  // =========================== Action ===========================
297
- var _useAction = useAction(mobile, action, showAction, hideAction),
298
- _useAction2 = _slicedToArray(_useAction, 2),
299
- showActions = _useAction2[0],
300
- hideActions = _useAction2[1];
301
-
302
308
  /**
303
309
  * Util wrapper for trigger action
304
310
  */
@@ -317,8 +323,6 @@ export function generateTrigger() {
317
323
  }
318
324
 
319
325
  // ======================= Action: Click ========================
320
- var clickToShow = showActions.has('click');
321
- var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
322
326
  if (clickToShow || clickToHide) {
323
327
  cloneProps.onClick = function (event) {
324
328
  var _originChildProps$onC;
package/lib/hooks/useAlign.js CHANGED
@@ -316,6 +316,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
316
316
  newVisibleRecommendArea >= originIntersectionRecommendArea)) {
317
317
  prevFlipRef.current.bt = true;
318
318
  nextOffsetY = tmpNextOffsetY;
319
+ popupOffsetY = -popupOffsetY;
319
320
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
320
321
  } else {
321
322
  prevFlipRef.current.bt = false;
@@ -339,6 +340,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
339
340
  _newVisibleRecommendArea >= originIntersectionRecommendArea)) {
340
341
  prevFlipRef.current.tb = true;
341
342
  nextOffsetY = _tmpNextOffsetY;
343
+ popupOffsetY = -popupOffsetY;
342
344
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
343
345
  } else {
344
346
  prevFlipRef.current.tb = false;
@@ -368,6 +370,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
368
370
  _newVisibleRecommendArea2 >= originIntersectionRecommendArea)) {
369
371
  prevFlipRef.current.rl = true;
370
372
  nextOffsetX = tmpNextOffsetX;
373
+ popupOffsetX = -popupOffsetX;
371
374
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
372
375
  } else {
373
376
  prevFlipRef.current.rl = false;
@@ -391,6 +394,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
391
394
  _newVisibleRecommendArea3 >= originIntersectionRecommendArea)) {
392
395
  prevFlipRef.current.lr = true;
393
396
  nextOffsetX = _tmpNextOffsetX;
397
+ popupOffsetX = -popupOffsetX;
394
398
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
395
399
  } else {
396
400
  prevFlipRef.current.lr = false;
@@ -403,7 +407,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
403
407
  if (typeof numShiftX === 'number') {
404
408
  // Left
405
409
  if (nextPopupX < visibleRegionArea.left) {
406
- nextOffsetX -= nextPopupX - visibleRegionArea.left;
410
+ nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
407
411
  if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
408
412
  nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
409
413
  }
@@ -411,7 +415,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
411
415
 
412
416
  // Right
413
417
  if (nextPopupRight > visibleRegionArea.right) {
414
- nextOffsetX -= nextPopupRight - visibleRegionArea.right;
418
+ nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
415
419
  if (targetRect.x > visibleRegionArea.right - numShiftX) {
416
420
  nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
417
421
  }
@@ -421,7 +425,10 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
421
425
  if (typeof numShiftY === 'number') {
422
426
  // Top
423
427
  if (nextPopupY < visibleRegionArea.top) {
424
- nextOffsetY -= nextPopupY - visibleRegionArea.top + popupOffsetY;
428
+ nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
429
+
430
+ // When target if far away from visible area
431
+ // Stop shift
425
432
  if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
426
433
  nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
427
434
  }
package/lib/hooks/useWatch.d.ts CHANGED
@@ -1 +1 @@
1
- export default function useWatch(open: boolean, target: HTMLElement, popup: HTMLElement, onAlign: VoidFunction): void;
1
+ export default function useWatch(open: boolean, target: HTMLElement, popup: HTMLElement, onAlign: VoidFunction, onScroll: VoidFunction): void;
package/lib/hooks/useWatch.js CHANGED
@@ -8,7 +8,7 @@ exports.default = useWatch;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
10
10
  var _util = require("../util");
11
- function useWatch(open, target, popup, onAlign) {
11
+ function useWatch(open, target, popup, onAlign, onScroll) {
12
12
  (0, _useLayoutEffect.default)(function () {
13
13
  if (open && target && popup) {
14
14
  var targetElement = target;
@@ -19,6 +19,7 @@ function useWatch(open, target, popup, onAlign) {
19
19
  var mergedList = new Set([win].concat((0, _toConsumableArray2.default)(targetScrollList), (0, _toConsumableArray2.default)(popupScrollList)));
20
20
  function notifyScroll() {
21
21
  onAlign();
22
+ onScroll();
22
23
  }
23
24
  mergedList.forEach(function (scroller) {
24
25
  scroller.addEventListener('scroll', notifyScroll, {
package/lib/index.js CHANGED
@@ -236,12 +236,23 @@ function generateTrigger() {
236
236
  scaleY = _useAlign2[8],
237
237
  alignInfo = _useAlign2[9],
238
238
  onAlign = _useAlign2[10];
239
+ var _useAction = (0, _useAction3.default)(mobile, action, showAction, hideAction),
240
+ _useAction2 = (0, _slicedToArray2.default)(_useAction, 2),
241
+ showActions = _useAction2[0],
242
+ hideActions = _useAction2[1];
243
+ var clickToShow = showActions.has('click');
244
+ var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
239
245
  var triggerAlign = (0, _useEvent.default)(function () {
240
246
  if (!inMotion) {
241
247
  onAlign();
242
248
  }
243
249
  });
244
- (0, _useWatch.default)(mergedOpen, targetEle, popupEle, triggerAlign);
250
+ var onScroll = function onScroll() {
251
+ if (openRef.current && alignPoint && clickToHide) {
252
+ triggerOpen(false);
253
+ }
254
+ };
255
+ (0, _useWatch.default)(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
245
256
  (0, _useLayoutEffect.default)(function () {
246
257
  triggerAlign();
247
258
  }, [mousePos, popupPlacement]);
@@ -304,11 +315,6 @@ function generateTrigger() {
304
315
  };
305
316
 
306
317
  // =========================== Action ===========================
307
- var _useAction = (0, _useAction3.default)(mobile, action, showAction, hideAction),
308
- _useAction2 = (0, _slicedToArray2.default)(_useAction, 2),
309
- showActions = _useAction2[0],
310
- hideActions = _useAction2[1];
311
-
312
318
  /**
313
319
  * Util wrapper for trigger action
314
320
  */
@@ -327,8 +333,6 @@ function generateTrigger() {
327
333
  }
328
334
 
329
335
  // ======================= Action: Click ========================
330
- var clickToShow = showActions.has('click');
331
- var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
332
336
  if (clickToShow || clickToHide) {
333
337
  cloneProps.onClick = function (event) {
334
338
  var _originChildProps$onC;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.15.1",
3
+ "version": "1.15.3",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"