@rc-component/trigger 1.1.2 → 1.2.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 (5) hide show
  1. package/es/hooks/useAlign.js +41 -19
  2. package/es/interface.d.ts +1 -0
  3. package/lib/hooks/useAlign.js +41 -19
  4. package/lib/interface.d.ts +1 -0
  5. package/package.json +1 -1
package/es/hooks/useAlign.js CHANGED
@@ -81,12 +81,23 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
81
81
  popupElement.style.top = '0';
82
82
 
83
83
  // Calculate align style, we should consider `transform` case
84
- var targetRect = Array.isArray(target) ? {
85
- x: target[0],
86
- y: target[1],
87
- width: 0,
88
- height: 0
89
- } : target.getBoundingClientRect();
84
+ var targetRect;
85
+ if (Array.isArray(target)) {
86
+ targetRect = {
87
+ x: target[0],
88
+ y: target[1],
89
+ width: 0,
90
+ height: 0
91
+ };
92
+ } else {
93
+ var rect = target.getBoundingClientRect();
94
+ targetRect = {
95
+ x: rect.x,
96
+ y: rect.y,
97
+ width: rect.width,
98
+ height: rect.height
99
+ };
100
+ }
90
101
  var popupRect = popupElement.getBoundingClientRect();
91
102
  var _win$getComputedStyle = win.getComputedStyle(popupElement),
92
103
  width = _win$getComputedStyle.width,
@@ -107,10 +118,30 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
107
118
 
108
119
  // Placement
109
120
  var placementInfo = builtinPlacements[placement] || popupAlign || {};
110
- var _ref = placementInfo.points || [],
121
+
122
+ // Offset
123
+ var offset = placementInfo.offset,
124
+ targetOffset = placementInfo.targetOffset;
125
+ var _ref = offset || [],
111
126
  _ref2 = _slicedToArray(_ref, 2),
112
- popupPoint = _ref2[0],
113
- targetPoint = _ref2[1];
127
+ _ref2$ = _ref2[0],
128
+ popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
129
+ _ref2$2 = _ref2[1],
130
+ popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
131
+ var _ref3 = targetOffset || [],
132
+ _ref4 = _slicedToArray(_ref3, 2),
133
+ _ref4$ = _ref4[0],
134
+ targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
135
+ _ref4$2 = _ref4[1],
136
+ targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
137
+ targetRect.x += targetOffsetX;
138
+ targetRect.y += targetOffsetY;
139
+
140
+ // Points
141
+ var _ref5 = placementInfo.points || [],
142
+ _ref6 = _slicedToArray(_ref5, 2),
143
+ popupPoint = _ref6[0],
144
+ targetPoint = _ref6[1];
114
145
  var targetPoints = splitPoints(targetPoint);
115
146
  var popupPoints = splitPoints(popupPoint);
116
147
  var targetAlignPoint = getAlignPoint(targetRect, targetPoints);
@@ -119,16 +150,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
119
150
  // Real align info may not same as origin one
120
151
  var nextAlignInfo = _objectSpread({}, placementInfo);
121
152
 
122
- // Offset
123
- var offset = placementInfo.offset;
124
- var _ref3 = offset || [],
125
- _ref4 = _slicedToArray(_ref3, 2),
126
- _ref4$ = _ref4[0],
127
- popupOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
128
- _ref4$2 = _ref4[1],
129
- popupOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
130
-
131
- // Placement
153
+ // Next Offset
132
154
  var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
133
155
  var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
134
156
 
package/es/interface.d.ts CHANGED
@@ -20,6 +20,7 @@ export interface AlignType {
20
20
  * offset target node by offset[0] in x and offset[1] in y.
21
21
  * If targetOffset contains percentage string value, it is relative to targetNode region.
22
22
  */
23
+ targetOffset?: number[];
23
24
  /**
24
25
  * If adjustX field is true, will adjust source node in x direction if source node is invisible.
25
26
  * If adjustY field is true, will adjust source node in y direction if source node is invisible.
package/lib/hooks/useAlign.js CHANGED
@@ -89,12 +89,23 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
89
89
  popupElement.style.top = '0';
90
90
 
91
91
  // Calculate align style, we should consider `transform` case
92
- var targetRect = Array.isArray(target) ? {
93
- x: target[0],
94
- y: target[1],
95
- width: 0,
96
- height: 0
97
- } : target.getBoundingClientRect();
92
+ var targetRect;
93
+ if (Array.isArray(target)) {
94
+ targetRect = {
95
+ x: target[0],
96
+ y: target[1],
97
+ width: 0,
98
+ height: 0
99
+ };
100
+ } else {
101
+ var rect = target.getBoundingClientRect();
102
+ targetRect = {
103
+ x: rect.x,
104
+ y: rect.y,
105
+ width: rect.width,
106
+ height: rect.height
107
+ };
108
+ }
98
109
  var popupRect = popupElement.getBoundingClientRect();
99
110
  var _win$getComputedStyle = win.getComputedStyle(popupElement),
100
111
  width = _win$getComputedStyle.width,
@@ -115,10 +126,30 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
115
126
 
116
127
  // Placement
117
128
  var placementInfo = builtinPlacements[placement] || popupAlign || {};
118
- var _ref = placementInfo.points || [],
129
+
130
+ // Offset
131
+ var offset = placementInfo.offset,
132
+ targetOffset = placementInfo.targetOffset;
133
+ var _ref = offset || [],
119
134
  _ref2 = (0, _slicedToArray2.default)(_ref, 2),
120
- popupPoint = _ref2[0],
121
- targetPoint = _ref2[1];
135
+ _ref2$ = _ref2[0],
136
+ popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
137
+ _ref2$2 = _ref2[1],
138
+ popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
139
+ var _ref3 = targetOffset || [],
140
+ _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
141
+ _ref4$ = _ref4[0],
142
+ targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
143
+ _ref4$2 = _ref4[1],
144
+ targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
145
+ targetRect.x += targetOffsetX;
146
+ targetRect.y += targetOffsetY;
147
+
148
+ // Points
149
+ var _ref5 = placementInfo.points || [],
150
+ _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
151
+ popupPoint = _ref6[0],
152
+ targetPoint = _ref6[1];
122
153
  var targetPoints = splitPoints(targetPoint);
123
154
  var popupPoints = splitPoints(popupPoint);
124
155
  var targetAlignPoint = getAlignPoint(targetRect, targetPoints);
@@ -127,16 +158,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
127
158
  // Real align info may not same as origin one
128
159
  var nextAlignInfo = (0, _objectSpread2.default)({}, placementInfo);
129
160
 
130
- // Offset
131
- var offset = placementInfo.offset;
132
- var _ref3 = offset || [],
133
- _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
134
- _ref4$ = _ref4[0],
135
- popupOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
136
- _ref4$2 = _ref4[1],
137
- popupOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
138
-
139
- // Placement
161
+ // Next Offset
140
162
  var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
141
163
  var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
142
164
 
package/lib/interface.d.ts CHANGED
@@ -20,6 +20,7 @@ export interface AlignType {
20
20
  * offset target node by offset[0] in x and offset[1] in y.
21
21
  * If targetOffset contains percentage string value, it is relative to targetNode region.
22
22
  */
23
+ targetOffset?: number[];
23
24
  /**
24
25
  * If adjustX field is true, will adjust source node in x direction if source node is invisible.
25
26
  * If adjustY field is true, will adjust source node in y direction if source node is invisible.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.1.2",
3
+ "version": "1.2.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"