@rc-component/trigger 1.3.6 → 1.4.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 +20 -9
  2. package/es/interface.d.ts +6 -0
  3. package/lib/hooks/useAlign.js +20 -9
  4. package/lib/interface.d.ts +6 -0
  5. package/package.json +1 -1
package/es/hooks/useAlign.js CHANGED
@@ -84,6 +84,9 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
84
84
  var doc = popupElement.ownerDocument;
85
85
  var win = getWin(popupElement);
86
86
 
87
+ // Placement
88
+ var placementInfo = builtinPlacements[placement] || popupAlign || {};
89
+
87
90
  // Reset first
88
91
  popupElement.style.left = '0';
89
92
  popupElement.style.top = '0';
@@ -112,12 +115,23 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
112
115
  height = _win$getComputedStyle.height;
113
116
  var _doc$documentElement = doc.documentElement,
114
117
  clientWidth = _doc$documentElement.clientWidth,
115
- clientHeight = _doc$documentElement.clientHeight;
118
+ clientHeight = _doc$documentElement.clientHeight,
119
+ scrollWidth = _doc$documentElement.scrollWidth,
120
+ scrollHeight = _doc$documentElement.scrollHeight,
121
+ scrollTop = _doc$documentElement.scrollTop,
122
+ scrollLeft = _doc$documentElement.scrollLeft;
116
123
  var popupHeight = popupRect.height;
117
124
  var popupWidth = popupRect.width;
118
125
 
119
126
  // Get bounding of visible area
120
- var visibleArea = {
127
+ var visibleArea = placementInfo.htmlRegion === 'scroll' ?
128
+ // Scroll region should take scrollLeft & scrollTop into account
129
+ {
130
+ left: -scrollLeft,
131
+ top: -scrollTop,
132
+ right: scrollWidth - scrollLeft,
133
+ bottom: scrollHeight - scrollTop
134
+ } : {
121
135
  left: 0,
122
136
  top: 0,
123
137
  right: clientWidth,
@@ -131,10 +145,10 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
131
145
  eleInnerWidth = ele.clientWidth;
132
146
  var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
133
147
  var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
134
- var scrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
135
- var scrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
136
- var eleRight = eleRect.x + eleRect.width - scrollWidth;
137
- var eleBottom = eleRect.y + eleRect.height - scrollHeight;
148
+ var eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
149
+ var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
150
+ var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
151
+ var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
138
152
  visibleArea.left = Math.max(visibleArea.left, eleRect.left);
139
153
  visibleArea.top = Math.max(visibleArea.top, eleRect.top);
140
154
  visibleArea.right = Math.min(visibleArea.right, eleRight);
@@ -149,9 +163,6 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
149
163
  var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
150
164
  var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
151
165
 
152
- // Placement
153
- var placementInfo = builtinPlacements[placement] || popupAlign || {};
154
-
155
166
  // Offset
156
167
  var offset = placementInfo.offset,
157
168
  targetOffset = placementInfo.targetOffset;
package/es/interface.d.ts CHANGED
@@ -33,6 +33,12 @@ export interface AlignType {
33
33
  };
34
34
  /** Auto adjust arrow position */
35
35
  autoArrow?: boolean;
36
+ /**
37
+ * Config visible region check of html node. Default `visible`:
38
+ * - `visible`: The visible region of user browser window. Use `clientHeight` for check.
39
+ * - `scroll`: The whole region of the html scroll area. Use `scrollHeight` for check.
40
+ */
41
+ htmlRegion?: 'visible' | 'scroll';
36
42
  /**
37
43
  * Whether use css right instead of left to position
38
44
  */
package/lib/hooks/useAlign.js CHANGED
@@ -92,6 +92,9 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
92
92
  var doc = popupElement.ownerDocument;
93
93
  var win = (0, _util.getWin)(popupElement);
94
94
 
95
+ // Placement
96
+ var placementInfo = builtinPlacements[placement] || popupAlign || {};
97
+
95
98
  // Reset first
96
99
  popupElement.style.left = '0';
97
100
  popupElement.style.top = '0';
@@ -120,12 +123,23 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
120
123
  height = _win$getComputedStyle.height;
121
124
  var _doc$documentElement = doc.documentElement,
122
125
  clientWidth = _doc$documentElement.clientWidth,
123
- clientHeight = _doc$documentElement.clientHeight;
126
+ clientHeight = _doc$documentElement.clientHeight,
127
+ scrollWidth = _doc$documentElement.scrollWidth,
128
+ scrollHeight = _doc$documentElement.scrollHeight,
129
+ scrollTop = _doc$documentElement.scrollTop,
130
+ scrollLeft = _doc$documentElement.scrollLeft;
124
131
  var popupHeight = popupRect.height;
125
132
  var popupWidth = popupRect.width;
126
133
 
127
134
  // Get bounding of visible area
128
- var visibleArea = {
135
+ var visibleArea = placementInfo.htmlRegion === 'scroll' ?
136
+ // Scroll region should take scrollLeft & scrollTop into account
137
+ {
138
+ left: -scrollLeft,
139
+ top: -scrollTop,
140
+ right: scrollWidth - scrollLeft,
141
+ bottom: scrollHeight - scrollTop
142
+ } : {
129
143
  left: 0,
130
144
  top: 0,
131
145
  right: clientWidth,
@@ -139,10 +153,10 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
139
153
  eleInnerWidth = ele.clientWidth;
140
154
  var scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
141
155
  var scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
142
- var scrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
143
- var scrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
144
- var eleRight = eleRect.x + eleRect.width - scrollWidth;
145
- var eleBottom = eleRect.y + eleRect.height - scrollHeight;
156
+ var eleScrollWidth = (eleOutWidth - eleInnerWidth) * scaleX;
157
+ var eleScrollHeight = (eleOutHeight - eleInnerHeight) * scaleY;
158
+ var eleRight = eleRect.x + eleRect.width - eleScrollWidth;
159
+ var eleBottom = eleRect.y + eleRect.height - eleScrollHeight;
146
160
  visibleArea.left = Math.max(visibleArea.left, eleRect.left);
147
161
  visibleArea.top = Math.max(visibleArea.top, eleRect.top);
148
162
  visibleArea.right = Math.min(visibleArea.right, eleRight);
@@ -157,9 +171,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
157
171
  var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
158
172
  var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
159
173
 
160
- // Placement
161
- var placementInfo = builtinPlacements[placement] || popupAlign || {};
162
-
163
174
  // Offset
164
175
  var offset = placementInfo.offset,
165
176
  targetOffset = placementInfo.targetOffset;
package/lib/interface.d.ts CHANGED
@@ -33,6 +33,12 @@ export interface AlignType {
33
33
  };
34
34
  /** Auto adjust arrow position */
35
35
  autoArrow?: boolean;
36
+ /**
37
+ * Config visible region check of html node. Default `visible`:
38
+ * - `visible`: The visible region of user browser window. Use `clientHeight` for check.
39
+ * - `scroll`: The whole region of the html scroll area. Use `scrollHeight` for check.
40
+ */
41
+ htmlRegion?: 'visible' | 'scroll';
36
42
  /**
37
43
  * Whether use css right instead of left to position
38
44
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.3.6",
3
+ "version": "1.4.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"