@rc-component/trigger 1.15.2 → 1.15.4

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 -8
  2. package/lib/hooks/useAlign.js +27 -8
  3. package/package.json +1 -1
package/es/hooks/useAlign.js CHANGED
@@ -106,17 +106,31 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
106
106
  // ========================= Align =========================
107
107
  var onAlign = useEvent(function () {
108
108
  if (popupEle && target && open) {
109
+ var _popupElement$parentE, _popupElement$parentE2;
109
110
  var popupElement = popupEle;
111
+ var doc = popupElement.ownerDocument;
112
+ var win = getWin(popupElement);
113
+ var _win$getComputedStyle = win.getComputedStyle(popupElement),
114
+ width = _win$getComputedStyle.width,
115
+ height = _win$getComputedStyle.height,
116
+ popupPosition = _win$getComputedStyle.position;
110
117
  var originLeft = popupElement.style.left;
111
118
  var originTop = popupElement.style.top;
112
119
  var originRight = popupElement.style.right;
113
120
  var originBottom = popupElement.style.bottom;
114
- var doc = popupElement.ownerDocument;
115
- var win = getWin(popupElement);
116
121
 
117
122
  // Placement
118
123
  var placementInfo = _objectSpread(_objectSpread({}, builtinPlacements[placement]), popupAlign);
119
124
 
125
+ // placeholder element
126
+ var placeholderElement = doc.createElement('div');
127
+ (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 ? void 0 : _popupElement$parentE.appendChild(placeholderElement);
128
+ placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
129
+ placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
130
+ placeholderElement.style.position = popupPosition;
131
+ placeholderElement.style.height = "".concat(popupElement.offsetHeight, "px");
132
+ placeholderElement.style.width = "".concat(popupElement.offsetWidth, "px");
133
+
120
134
  // Reset first
121
135
  popupElement.style.left = '0';
122
136
  popupElement.style.top = '0';
@@ -142,9 +156,6 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
142
156
  };
143
157
  }
144
158
  var popupRect = popupElement.getBoundingClientRect();
145
- var _win$getComputedStyle = win.getComputedStyle(popupElement),
146
- width = _win$getComputedStyle.width,
147
- height = _win$getComputedStyle.height;
148
159
  var _doc$documentElement = doc.documentElement,
149
160
  clientWidth = _doc$documentElement.clientWidth,
150
161
  clientHeight = _doc$documentElement.clientHeight,
@@ -197,6 +208,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
197
208
  popupElement.style.top = originTop;
198
209
  popupElement.style.right = originRight;
199
210
  popupElement.style.bottom = originBottom;
211
+ (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 ? void 0 : _popupElement$parentE2.removeChild(placeholderElement);
200
212
 
201
213
  // Calculate scale
202
214
  var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
@@ -308,6 +320,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
308
320
  newVisibleRecommendArea >= originIntersectionRecommendArea)) {
309
321
  prevFlipRef.current.bt = true;
310
322
  nextOffsetY = tmpNextOffsetY;
323
+ popupOffsetY = -popupOffsetY;
311
324
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
312
325
  } else {
313
326
  prevFlipRef.current.bt = false;
@@ -331,6 +344,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
331
344
  _newVisibleRecommendArea >= originIntersectionRecommendArea)) {
332
345
  prevFlipRef.current.tb = true;
333
346
  nextOffsetY = _tmpNextOffsetY;
347
+ popupOffsetY = -popupOffsetY;
334
348
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
335
349
  } else {
336
350
  prevFlipRef.current.tb = false;
@@ -360,6 +374,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
360
374
  _newVisibleRecommendArea2 >= originIntersectionRecommendArea)) {
361
375
  prevFlipRef.current.rl = true;
362
376
  nextOffsetX = tmpNextOffsetX;
377
+ popupOffsetX = -popupOffsetX;
363
378
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
364
379
  } else {
365
380
  prevFlipRef.current.rl = false;
@@ -383,6 +398,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
383
398
  _newVisibleRecommendArea3 >= originIntersectionRecommendArea)) {
384
399
  prevFlipRef.current.lr = true;
385
400
  nextOffsetX = _tmpNextOffsetX;
401
+ popupOffsetX = -popupOffsetX;
386
402
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
387
403
  } else {
388
404
  prevFlipRef.current.lr = false;
@@ -395,7 +411,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
395
411
  if (typeof numShiftX === 'number') {
396
412
  // Left
397
413
  if (nextPopupX < visibleRegionArea.left) {
398
- nextOffsetX -= nextPopupX - visibleRegionArea.left;
414
+ nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
399
415
  if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
400
416
  nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
401
417
  }
@@ -403,7 +419,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
403
419
 
404
420
  // Right
405
421
  if (nextPopupRight > visibleRegionArea.right) {
406
- nextOffsetX -= nextPopupRight - visibleRegionArea.right;
422
+ nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
407
423
  if (targetRect.x > visibleRegionArea.right - numShiftX) {
408
424
  nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
409
425
  }
@@ -413,7 +429,10 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
413
429
  if (typeof numShiftY === 'number') {
414
430
  // Top
415
431
  if (nextPopupY < visibleRegionArea.top) {
416
- nextOffsetY -= nextPopupY - visibleRegionArea.top + popupOffsetY;
432
+ nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
433
+
434
+ // When target if far away from visible area
435
+ // Stop shift
417
436
  if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
418
437
  nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
419
438
  }
package/lib/hooks/useAlign.js CHANGED
@@ -114,17 +114,31 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
114
114
  // ========================= Align =========================
115
115
  var onAlign = (0, _useEvent.default)(function () {
116
116
  if (popupEle && target && open) {
117
+ var _popupElement$parentE, _popupElement$parentE2;
117
118
  var popupElement = popupEle;
119
+ var doc = popupElement.ownerDocument;
120
+ var win = (0, _util.getWin)(popupElement);
121
+ var _win$getComputedStyle = win.getComputedStyle(popupElement),
122
+ width = _win$getComputedStyle.width,
123
+ height = _win$getComputedStyle.height,
124
+ popupPosition = _win$getComputedStyle.position;
118
125
  var originLeft = popupElement.style.left;
119
126
  var originTop = popupElement.style.top;
120
127
  var originRight = popupElement.style.right;
121
128
  var originBottom = popupElement.style.bottom;
122
- var doc = popupElement.ownerDocument;
123
- var win = (0, _util.getWin)(popupElement);
124
129
 
125
130
  // Placement
126
131
  var placementInfo = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, builtinPlacements[placement]), popupAlign);
127
132
 
133
+ // placeholder element
134
+ var placeholderElement = doc.createElement('div');
135
+ (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 ? void 0 : _popupElement$parentE.appendChild(placeholderElement);
136
+ placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
137
+ placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
138
+ placeholderElement.style.position = popupPosition;
139
+ placeholderElement.style.height = "".concat(popupElement.offsetHeight, "px");
140
+ placeholderElement.style.width = "".concat(popupElement.offsetWidth, "px");
141
+
128
142
  // Reset first
129
143
  popupElement.style.left = '0';
130
144
  popupElement.style.top = '0';
@@ -150,9 +164,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
150
164
  };
151
165
  }
152
166
  var popupRect = popupElement.getBoundingClientRect();
153
- var _win$getComputedStyle = win.getComputedStyle(popupElement),
154
- width = _win$getComputedStyle.width,
155
- height = _win$getComputedStyle.height;
156
167
  var _doc$documentElement = doc.documentElement,
157
168
  clientWidth = _doc$documentElement.clientWidth,
158
169
  clientHeight = _doc$documentElement.clientHeight,
@@ -205,6 +216,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
205
216
  popupElement.style.top = originTop;
206
217
  popupElement.style.right = originRight;
207
218
  popupElement.style.bottom = originBottom;
219
+ (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 ? void 0 : _popupElement$parentE2.removeChild(placeholderElement);
208
220
 
209
221
  // Calculate scale
210
222
  var _scaleX = (0, _util.toNum)(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
@@ -316,6 +328,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
316
328
  newVisibleRecommendArea >= originIntersectionRecommendArea)) {
317
329
  prevFlipRef.current.bt = true;
318
330
  nextOffsetY = tmpNextOffsetY;
331
+ popupOffsetY = -popupOffsetY;
319
332
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
320
333
  } else {
321
334
  prevFlipRef.current.bt = false;
@@ -339,6 +352,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
339
352
  _newVisibleRecommendArea >= originIntersectionRecommendArea)) {
340
353
  prevFlipRef.current.tb = true;
341
354
  nextOffsetY = _tmpNextOffsetY;
355
+ popupOffsetY = -popupOffsetY;
342
356
  nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
343
357
  } else {
344
358
  prevFlipRef.current.tb = false;
@@ -368,6 +382,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
368
382
  _newVisibleRecommendArea2 >= originIntersectionRecommendArea)) {
369
383
  prevFlipRef.current.rl = true;
370
384
  nextOffsetX = tmpNextOffsetX;
385
+ popupOffsetX = -popupOffsetX;
371
386
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
372
387
  } else {
373
388
  prevFlipRef.current.rl = false;
@@ -391,6 +406,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
391
406
  _newVisibleRecommendArea3 >= originIntersectionRecommendArea)) {
392
407
  prevFlipRef.current.lr = true;
393
408
  nextOffsetX = _tmpNextOffsetX;
409
+ popupOffsetX = -popupOffsetX;
394
410
  nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
395
411
  } else {
396
412
  prevFlipRef.current.lr = false;
@@ -403,7 +419,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
403
419
  if (typeof numShiftX === 'number') {
404
420
  // Left
405
421
  if (nextPopupX < visibleRegionArea.left) {
406
- nextOffsetX -= nextPopupX - visibleRegionArea.left;
422
+ nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
407
423
  if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
408
424
  nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
409
425
  }
@@ -411,7 +427,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
411
427
 
412
428
  // Right
413
429
  if (nextPopupRight > visibleRegionArea.right) {
414
- nextOffsetX -= nextPopupRight - visibleRegionArea.right;
430
+ nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
415
431
  if (targetRect.x > visibleRegionArea.right - numShiftX) {
416
432
  nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
417
433
  }
@@ -421,7 +437,10 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
421
437
  if (typeof numShiftY === 'number') {
422
438
  // Top
423
439
  if (nextPopupY < visibleRegionArea.top) {
424
- nextOffsetY -= nextPopupY - visibleRegionArea.top + popupOffsetY;
440
+ nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
441
+
442
+ // When target if far away from visible area
443
+ // Stop shift
425
444
  if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
426
445
  nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
427
446
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.15.2",
3
+ "version": "1.15.4",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"