@rc-component/trigger 2.2.1 → 2.2.2

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/README.md +22 -22
  2. package/assets/index/Mask.less +4 -2
  3. package/es/hooks/useAlign.js +6 -1
  4. package/es/index.js +8 -6
  5. package/lib/hooks/useAlign.js +6 -1
  6. package/lib/index.js +8 -6
  7. package/package.json +5 -3
package/README.md CHANGED
@@ -9,20 +9,20 @@ React Trigger Component
9
9
  [![bundle size][bundlephobia-image]][bundlephobia-url]
10
10
  [![dumi][dumi-image]][dumi-url]
11
11
 
12
- [npm-image]: http://img.shields.io/npm/v/rc-checkbox.svg?style=flat-square
13
- [npm-url]: http://npmjs.org/package/rc-checkbox
14
- [github-actions-image]: https://github.com/react-component/checkbox/workflows/CI/badge.svg
15
- [github-actions-url]: https://github.com/react-component/checkbox/actions
16
- [codecov-image]: https://img.shields.io/codecov/c/github/react-component/checkbox/master.svg?style=flat-square
17
- [codecov-url]: https://codecov.io/gh/react-component/checkbox/branch/master
18
- [david-url]: https://david-dm.org/react-component/checkbox
19
- [david-image]: https://david-dm.org/react-component/checkbox/status.svg?style=flat-square
20
- [david-dev-url]: https://david-dm.org/react-component/checkbox?type=dev
21
- [david-dev-image]: https://david-dm.org/react-component/checkbox/dev-status.svg?style=flat-square
22
- [download-image]: https://img.shields.io/npm/dm/rc-checkbox.svg?style=flat-square
23
- [download-url]: https://npmjs.org/package/rc-checkbox
24
- [bundlephobia-url]: https://bundlephobia.com/result?p=rc-checkbox
25
- [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-checkbox
12
+ [npm-image]: http://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square
13
+ [npm-url]: http://npmjs.org/package/@rc-component/trigger
14
+ [github-actions-image]: https://github.com/react-component/trigger/workflows/CI/badge.svg
15
+ [github-actions-url]: https://github.com/react-component/trigger/actions
16
+ [codecov-image]: https://img.shields.io/codecov/c/github/react-component/trigger/master.svg?style=flat-square
17
+ [codecov-url]: https://codecov.io/gh/react-component/trigger/branch/master
18
+ [david-url]: https://david-dm.org/react-component/trigger
19
+ [david-image]: https://david-dm.org/react-component/trigger/status.svg?style=flat-square
20
+ [david-dev-url]: https://david-dm.org/react-component/trigger?type=dev
21
+ [david-dev-image]: https://david-dm.org/react-component/trigger/dev-status.svg?style=flat-square
22
+ [download-image]: https://img.shields.io/npm/dm/@rc-component/trigger.svg?style=flat-square
23
+ [download-url]: https://npmjs.org/package/@rc-component/trigger
24
+ [bundlephobia-url]: https://bundlephobia.com/result?p=@rc-component/trigger
25
+ [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/trigger
26
26
  [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
27
27
  [dumi-url]: https://github.com/umijs/dumi
28
28
 
@@ -39,25 +39,26 @@ import React from 'react';
39
39
  import ReactDOM from 'react-dom';
40
40
  import Trigger from '@rc-component/trigger';
41
41
 
42
- ReactDOM.render((
42
+ ReactDOM.render(
43
43
  <Trigger
44
44
  action={['click']}
45
45
  popup={<span>popup</span>}
46
46
  popupAlign={{
47
47
  points: ['tl', 'bl'],
48
- offset: [0, 3]
48
+ offset: [0, 3],
49
49
  }}
50
50
  >
51
- <a href='#'>hover</a>
52
- </Trigger>
53
- ), container);
51
+ <a href="#">hover</a>
52
+ </Trigger>,
53
+ container,
54
+ );
54
55
  ```
55
56
 
56
57
  ## Compatibility
57
58
 
58
59
  | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
59
- | --- | --- | --- | --- | --- |
60
- | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
60
+ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
61
+ | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
61
62
 
62
63
  ## Example
63
64
 
@@ -243,7 +244,6 @@ npm start
243
244
  </tbody>
244
245
  </table>
245
246
 
246
-
247
247
  ## Test Case
248
248
 
249
249
  ```
package/assets/index/Mask.less CHANGED
@@ -22,7 +22,8 @@
22
22
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
23
23
  }
24
24
 
25
- &-fade-enter,&-fade-appear {
25
+ &-fade-enter,
26
+ &-fade-appear {
26
27
  opacity: 0;
27
28
  .fade-effect();
28
29
  animation-play-state: paused;
@@ -33,7 +34,8 @@
33
34
  animation-play-state: paused;
34
35
  }
35
36
 
36
- &-fade-enter&-fade-enter-active,&-fade-appear&-fade-appear-active {
37
+ &-fade-enter&-fade-enter-active,
38
+ &-fade-appear&-fade-appear-active {
37
39
  animation-name: rcTriggerMaskFadeIn;
38
40
  animation-play-state: running;
39
41
  }
package/es/hooks/useAlign.js CHANGED
@@ -106,7 +106,7 @@ 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
+ var _popupElement$parentE, _popupRect$x, _popupRect$y, _popupElement$parentE2;
110
110
  var popupElement = popupEle;
111
111
  var doc = popupElement.ownerDocument;
112
112
  var win = getWin(popupElement);
@@ -149,7 +149,10 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
149
149
  height: 0
150
150
  };
151
151
  } else {
152
+ var _rect$x, _rect$y;
152
153
  var rect = target.getBoundingClientRect();
154
+ rect.x = (_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left;
155
+ rect.y = (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top;
153
156
  targetRect = {
154
157
  x: rect.x,
155
158
  y: rect.y,
@@ -158,6 +161,8 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
158
161
  };
159
162
  }
160
163
  var popupRect = popupElement.getBoundingClientRect();
164
+ popupRect.x = (_popupRect$x = popupRect.x) !== null && _popupRect$x !== void 0 ? _popupRect$x : popupRect.left;
165
+ popupRect.y = (_popupRect$y = popupRect.y) !== null && _popupRect$y !== void 0 ? _popupRect$y : popupRect.top;
161
166
  var _doc$documentElement = doc.documentElement,
162
167
  clientWidth = _doc$documentElement.clientWidth,
163
168
  clientHeight = _doc$documentElement.clientHeight,
package/es/index.js CHANGED
@@ -137,12 +137,14 @@ export function generateTrigger() {
137
137
  var child = React.Children.only(children);
138
138
  var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
139
139
  var cloneProps = {};
140
- var inPopupOrChild = useEvent(function (ele) {
140
+ var inContainer = function inContainer(target, container) {
141
141
  var _getShadowRoot, _getShadowRoot2;
142
+ return target === container || container.contains(target) || ((_getShadowRoot = getShadowRoot(container)) === null || _getShadowRoot === void 0 ? void 0 : _getShadowRoot.host) === target || container.contains((_getShadowRoot2 = getShadowRoot(target)) === null || _getShadowRoot2 === void 0 ? void 0 : _getShadowRoot2.host);
143
+ };
144
+ var inPopupOrChild = useEvent(function (ele) {
142
145
  var childDOM = targetEle;
143
- return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ((_getShadowRoot = getShadowRoot(childDOM)) === null || _getShadowRoot === void 0 ? void 0 : _getShadowRoot.host) === ele || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ((_getShadowRoot2 = getShadowRoot(popupEle)) === null || _getShadowRoot2 === void 0 ? void 0 : _getShadowRoot2.host) === ele || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
144
- return (subPopupEle === null || subPopupEle === void 0 ? void 0 : subPopupEle.contains(ele)) || ele === subPopupEle;
145
- });
146
+ var eleInContainer = inContainer.bind(null, ele);
147
+ return eleInContainer(childDOM) || eleInContainer(popupEle) || Object.values(subPopupElements.current).some(eleInContainer);
146
148
  });
147
149
 
148
150
  // =========================== Motion ===========================
@@ -220,14 +222,14 @@ export function generateTrigger() {
220
222
  setMotionPrepareResolve = _React$useState12[1];
221
223
 
222
224
  // =========================== Align ============================
223
- var _React$useState13 = React.useState([0, 0]),
225
+ var _React$useState13 = React.useState(null),
224
226
  _React$useState14 = _slicedToArray(_React$useState13, 2),
225
227
  mousePos = _React$useState14[0],
226
228
  setMousePos = _React$useState14[1];
227
229
  var setMousePosByEvent = function setMousePosByEvent(event) {
228
230
  setMousePos([event.clientX, event.clientY]);
229
231
  };
230
- var _useAlign = useAlign(mergedOpen, popupEle, alignPoint ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
232
+ var _useAlign = useAlign(mergedOpen, popupEle, alignPoint && mousePos !== null ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
231
233
  _useAlign2 = _slicedToArray(_useAlign, 11),
232
234
  ready = _useAlign2[0],
233
235
  offsetX = _useAlign2[1],
package/lib/hooks/useAlign.js CHANGED
@@ -114,7 +114,7 @@ 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
+ var _popupElement$parentE, _popupRect$x, _popupRect$y, _popupElement$parentE2;
118
118
  var popupElement = popupEle;
119
119
  var doc = popupElement.ownerDocument;
120
120
  var win = (0, _util.getWin)(popupElement);
@@ -157,7 +157,10 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
157
157
  height: 0
158
158
  };
159
159
  } else {
160
+ var _rect$x, _rect$y;
160
161
  var rect = target.getBoundingClientRect();
162
+ rect.x = (_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left;
163
+ rect.y = (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top;
161
164
  targetRect = {
162
165
  x: rect.x,
163
166
  y: rect.y,
@@ -166,6 +169,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
166
169
  };
167
170
  }
168
171
  var popupRect = popupElement.getBoundingClientRect();
172
+ popupRect.x = (_popupRect$x = popupRect.x) !== null && _popupRect$x !== void 0 ? _popupRect$x : popupRect.left;
173
+ popupRect.y = (_popupRect$y = popupRect.y) !== null && _popupRect$y !== void 0 ? _popupRect$y : popupRect.top;
169
174
  var _doc$documentElement = doc.documentElement,
170
175
  clientWidth = _doc$documentElement.clientWidth,
171
176
  clientHeight = _doc$documentElement.clientHeight,
package/lib/index.js CHANGED
@@ -145,12 +145,14 @@ function generateTrigger() {
145
145
  var child = React.Children.only(children);
146
146
  var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
147
147
  var cloneProps = {};
148
- var inPopupOrChild = (0, _useEvent.default)(function (ele) {
148
+ var inContainer = function inContainer(target, container) {
149
149
  var _getShadowRoot, _getShadowRoot2;
150
+ return target === container || container.contains(target) || ((_getShadowRoot = (0, _shadow.getShadowRoot)(container)) === null || _getShadowRoot === void 0 ? void 0 : _getShadowRoot.host) === target || container.contains((_getShadowRoot2 = (0, _shadow.getShadowRoot)(target)) === null || _getShadowRoot2 === void 0 ? void 0 : _getShadowRoot2.host);
151
+ };
152
+ var inPopupOrChild = (0, _useEvent.default)(function (ele) {
150
153
  var childDOM = targetEle;
151
- return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ((_getShadowRoot = (0, _shadow.getShadowRoot)(childDOM)) === null || _getShadowRoot === void 0 ? void 0 : _getShadowRoot.host) === ele || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ((_getShadowRoot2 = (0, _shadow.getShadowRoot)(popupEle)) === null || _getShadowRoot2 === void 0 ? void 0 : _getShadowRoot2.host) === ele || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
152
- return (subPopupEle === null || subPopupEle === void 0 ? void 0 : subPopupEle.contains(ele)) || ele === subPopupEle;
153
- });
154
+ var eleInContainer = inContainer.bind(null, ele);
155
+ return eleInContainer(childDOM) || eleInContainer(popupEle) || Object.values(subPopupElements.current).some(eleInContainer);
154
156
  });
155
157
 
156
158
  // =========================== Motion ===========================
@@ -228,14 +230,14 @@ function generateTrigger() {
228
230
  setMotionPrepareResolve = _React$useState12[1];
229
231
 
230
232
  // =========================== Align ============================
231
- var _React$useState13 = React.useState([0, 0]),
233
+ var _React$useState13 = React.useState(null),
232
234
  _React$useState14 = (0, _slicedToArray2.default)(_React$useState13, 2),
233
235
  mousePos = _React$useState14[0],
234
236
  setMousePos = _React$useState14[1];
235
237
  var setMousePosByEvent = function setMousePosByEvent(event) {
236
238
  setMousePos([event.clientX, event.clientY]);
237
239
  };
238
- var _useAlign = (0, _useAlign3.default)(mergedOpen, popupEle, alignPoint ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
240
+ var _useAlign = (0, _useAlign3.default)(mergedOpen, popupEle, alignPoint && mousePos !== null ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign),
239
241
  _useAlign2 = (0, _slicedToArray2.default)(_useAlign, 11),
240
242
  ready = _useAlign2[0],
241
243
  offsetX = _useAlign2[1],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "2.2.1",
3
+ "version": "2.2.2",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"
@@ -36,16 +36,17 @@
36
36
  "prepublishOnly": "npm run compile && np --yolo --no-publish",
37
37
  "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
38
38
  "test": "rc-test",
39
+ "prettier": "prettier --write .",
39
40
  "coverage": "rc-test --coverage",
40
41
  "now-build": "npm run build"
41
42
  },
42
43
  "devDependencies": {
43
44
  "@rc-component/father-plugin": "^1.0.0",
44
45
  "@testing-library/jest-dom": "^6.1.4",
45
- "@testing-library/react": "^15.0.4",
46
+ "@testing-library/react": "^16.0.0",
46
47
  "@types/classnames": "^2.2.10",
47
48
  "@types/jest": "^29.5.2",
48
- "@types/node": "^20.11.6",
49
+ "@types/node": "^22.0.2",
49
50
  "@types/react": "^18.0.0",
50
51
  "@types/react-dom": "^18.0.11",
51
52
  "@umijs/fabric": "^4.0.1",
@@ -55,6 +56,7 @@
55
56
  "father": "^4.0.0",
56
57
  "less": "^4.2.0",
57
58
  "np": "^10.0.5",
59
+ "prettier": "^3.3.3",
58
60
  "rc-test": "^7.0.13",
59
61
  "react": "^18.0.0",
60
62
  "react-dom": "^18.0.0",