@rc-component/trigger 1.15.5 → 1.16.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 (7) hide show
  1. package/es/Popup/index.js +3 -3
  2. package/es/index.js +22 -18
  3. package/es/interface.d.ts +4 -9
  4. package/lib/Popup/index.js +3 -3
  5. package/lib/index.js +22 -18
  6. package/lib/interface.d.ts +4 -9
  7. package/package.json +1 -1
package/es/Popup/index.js CHANGED
@@ -79,9 +79,9 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
79
79
 
80
80
  // Set align style
81
81
  if (ready || !open) {
82
- var points = align.points,
83
- _experimental = align._experimental;
84
- var dynamicInset = _experimental === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset;
82
+ var _experimental;
83
+ var points = align.points;
84
+ var dynamicInset = align.dynamicInset || ((_experimental = align._experimental) === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset);
85
85
  var alignRight = dynamicInset && points[0][1] === 'r';
86
86
  var alignBottom = dynamicInset && points[0][0] === 'b';
87
87
  if (alignRight) {
package/es/index.js CHANGED
@@ -263,6 +263,27 @@ export function generateTrigger() {
263
263
  };
264
264
  });
265
265
 
266
+ // ========================== Stretch ===========================
267
+ var _React$useState15 = React.useState(0),
268
+ _React$useState16 = _slicedToArray(_React$useState15, 2),
269
+ targetWidth = _React$useState16[0],
270
+ setTargetWidth = _React$useState16[1];
271
+ var _React$useState17 = React.useState(0),
272
+ _React$useState18 = _slicedToArray(_React$useState17, 2),
273
+ targetHeight = _React$useState18[0],
274
+ setTargetHeight = _React$useState18[1];
275
+ var syncTargetSize = function syncTargetSize() {
276
+ if (stretch && targetEle) {
277
+ var rect = targetEle.getBoundingClientRect();
278
+ setTargetWidth(rect.width);
279
+ setTargetHeight(rect.height);
280
+ }
281
+ };
282
+ var onTargetResize = function onTargetResize() {
283
+ syncTargetSize();
284
+ triggerAlign();
285
+ };
286
+
266
287
  // ========================== Motion ============================
267
288
  var onVisibleChanged = function onVisibleChanged(visible) {
268
289
  setInMotion(false);
@@ -273,6 +294,7 @@ export function generateTrigger() {
273
294
  // We will trigger align when motion is in prepare
274
295
  var onPrepare = function onPrepare() {
275
296
  return new Promise(function (resolve) {
297
+ syncTargetSize();
276
298
  setMotionPrepareResolve(function () {
277
299
  return resolve;
278
300
  });
@@ -286,24 +308,6 @@ export function generateTrigger() {
286
308
  }
287
309
  }, [motionPrepareResolve]);
288
310
 
289
- // ========================== Stretch ===========================
290
- var _React$useState15 = React.useState(0),
291
- _React$useState16 = _slicedToArray(_React$useState15, 2),
292
- targetWidth = _React$useState16[0],
293
- setTargetWidth = _React$useState16[1];
294
- var _React$useState17 = React.useState(0),
295
- _React$useState18 = _slicedToArray(_React$useState17, 2),
296
- targetHeight = _React$useState18[0],
297
- setTargetHeight = _React$useState18[1];
298
- var onTargetResize = function onTargetResize(_, ele) {
299
- triggerAlign();
300
- if (stretch) {
301
- var rect = ele.getBoundingClientRect();
302
- setTargetWidth(rect.width);
303
- setTargetHeight(rect.height);
304
- }
305
- };
306
-
307
311
  // =========================== Action ===========================
308
312
  /**
309
313
  * Util wrapper for trigger action
package/es/interface.d.ts CHANGED
@@ -12,15 +12,6 @@ export interface AlignType {
12
12
  * Such as ['tr','cc'], align top right point of source node with center point of target node.
13
13
  * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
14
14
  points?: (string | AlignPoint)[];
15
- /**
16
- * @private Do not use in your production code
17
- */
18
- _experimental?: {
19
- /**
20
- * @private Do not use in your production code. Auto adjust align logic
21
- */
22
- dynamicInset?: boolean;
23
- };
24
15
  /**
25
16
  * offset source node by offset[0] in x and offset[1] in y.
26
17
  * If offset contains percentage string value, it is relative to sourceNode region.
@@ -56,6 +47,10 @@ export interface AlignType {
56
47
  * Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
57
48
  */
58
49
  htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
50
+ /**
51
+ * Auto chose position with `top` or `bottom` by the align result
52
+ */
53
+ dynamicInset?: boolean;
59
54
  /**
60
55
  * Whether use css right instead of left to position
61
56
  */
package/lib/Popup/index.js CHANGED
@@ -87,9 +87,9 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
87
87
 
88
88
  // Set align style
89
89
  if (ready || !open) {
90
- var points = align.points,
91
- _experimental = align._experimental;
92
- var dynamicInset = _experimental === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset;
90
+ var _experimental;
91
+ var points = align.points;
92
+ var dynamicInset = align.dynamicInset || ((_experimental = align._experimental) === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset);
93
93
  var alignRight = dynamicInset && points[0][1] === 'r';
94
94
  var alignBottom = dynamicInset && points[0][0] === 'b';
95
95
  if (alignRight) {
package/lib/index.js CHANGED
@@ -273,6 +273,27 @@ function generateTrigger() {
273
273
  };
274
274
  });
275
275
 
276
+ // ========================== Stretch ===========================
277
+ var _React$useState15 = React.useState(0),
278
+ _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
279
+ targetWidth = _React$useState16[0],
280
+ setTargetWidth = _React$useState16[1];
281
+ var _React$useState17 = React.useState(0),
282
+ _React$useState18 = (0, _slicedToArray2.default)(_React$useState17, 2),
283
+ targetHeight = _React$useState18[0],
284
+ setTargetHeight = _React$useState18[1];
285
+ var syncTargetSize = function syncTargetSize() {
286
+ if (stretch && targetEle) {
287
+ var rect = targetEle.getBoundingClientRect();
288
+ setTargetWidth(rect.width);
289
+ setTargetHeight(rect.height);
290
+ }
291
+ };
292
+ var onTargetResize = function onTargetResize() {
293
+ syncTargetSize();
294
+ triggerAlign();
295
+ };
296
+
276
297
  // ========================== Motion ============================
277
298
  var onVisibleChanged = function onVisibleChanged(visible) {
278
299
  setInMotion(false);
@@ -283,6 +304,7 @@ function generateTrigger() {
283
304
  // We will trigger align when motion is in prepare
284
305
  var onPrepare = function onPrepare() {
285
306
  return new Promise(function (resolve) {
307
+ syncTargetSize();
286
308
  setMotionPrepareResolve(function () {
287
309
  return resolve;
288
310
  });
@@ -296,24 +318,6 @@ function generateTrigger() {
296
318
  }
297
319
  }, [motionPrepareResolve]);
298
320
 
299
- // ========================== Stretch ===========================
300
- var _React$useState15 = React.useState(0),
301
- _React$useState16 = (0, _slicedToArray2.default)(_React$useState15, 2),
302
- targetWidth = _React$useState16[0],
303
- setTargetWidth = _React$useState16[1];
304
- var _React$useState17 = React.useState(0),
305
- _React$useState18 = (0, _slicedToArray2.default)(_React$useState17, 2),
306
- targetHeight = _React$useState18[0],
307
- setTargetHeight = _React$useState18[1];
308
- var onTargetResize = function onTargetResize(_, ele) {
309
- triggerAlign();
310
- if (stretch) {
311
- var rect = ele.getBoundingClientRect();
312
- setTargetWidth(rect.width);
313
- setTargetHeight(rect.height);
314
- }
315
- };
316
-
317
321
  // =========================== Action ===========================
318
322
  /**
319
323
  * Util wrapper for trigger action
package/lib/interface.d.ts CHANGED
@@ -12,15 +12,6 @@ export interface AlignType {
12
12
  * Such as ['tr','cc'], align top right point of source node with center point of target node.
13
13
  * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
14
14
  points?: (string | AlignPoint)[];
15
- /**
16
- * @private Do not use in your production code
17
- */
18
- _experimental?: {
19
- /**
20
- * @private Do not use in your production code. Auto adjust align logic
21
- */
22
- dynamicInset?: boolean;
23
- };
24
15
  /**
25
16
  * offset source node by offset[0] in x and offset[1] in y.
26
17
  * If offset contains percentage string value, it is relative to sourceNode region.
@@ -56,6 +47,10 @@ export interface AlignType {
56
47
  * Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
57
48
  */
58
49
  htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
50
+ /**
51
+ * Auto chose position with `top` or `bottom` by the align result
52
+ */
53
+ dynamicInset?: boolean;
59
54
  /**
60
55
  * Whether use css right instead of left to position
61
56
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.15.5",
3
+ "version": "1.16.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"