@rc-component/trigger 1.13.0 → 1.13.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/es/hooks/useWinClick.d.ts +1 -0
  2. package/es/hooks/useWinClick.js +68 -0
  3. package/es/index.js +6 -47
  4. package/lib/hooks/useWinClick.d.ts +1 -0
  5. package/lib/hooks/useWinClick.js +76 -0
  6. package/lib/index.js +5 -46
  7. package/package.json +2 -2
package/es/hooks/useWinClick.d.ts ADDED
@@ -0,0 +1 @@
1
+ export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): void;
package/es/hooks/useWinClick.js ADDED
@@ -0,0 +1,68 @@
1
+ import { warning } from 'rc-util';
2
+ import { getShadowRoot } from "rc-util/es/Dom/shadow";
3
+ import raf from "rc-util/es/raf";
4
+ import * as React from 'react';
5
+ import { getWin } from "../util";
6
+ export default function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
7
+ var openRef = React.useRef(open);
8
+
9
+ // Window click to hide should be lock to avoid trigger lock immediately
10
+ var lockRef = React.useRef(false);
11
+ if (openRef.current !== open) {
12
+ lockRef.current = true;
13
+ openRef.current = open;
14
+ }
15
+ React.useEffect(function () {
16
+ var id = raf(function () {
17
+ lockRef.current = false;
18
+ });
19
+ return function () {
20
+ raf.cancel(id);
21
+ };
22
+ }, [open]);
23
+
24
+ // Click to hide is special action since click popup element should not hide
25
+ React.useEffect(function () {
26
+ if (clickToHide && popupEle && (!mask || maskClosable)) {
27
+ var clickInside = false;
28
+
29
+ // User may mouseDown inside and drag out of popup and mouse up
30
+ // Record here to prevent close
31
+ var onWindowMouseDown = function onWindowMouseDown(_ref) {
32
+ var target = _ref.target;
33
+ clickInside = inPopupOrChild(target);
34
+ };
35
+ var onWindowClick = function onWindowClick(_ref2) {
36
+ var target = _ref2.target;
37
+ if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
38
+ triggerOpen(false);
39
+ }
40
+ };
41
+ var win = getWin(popupEle);
42
+ var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
43
+ win.addEventListener('mousedown', onWindowMouseDown);
44
+ win.addEventListener('click', onWindowClick);
45
+
46
+ // shadow root
47
+ var targetShadowRoot = getShadowRoot(targetEle);
48
+ if (targetShadowRoot) {
49
+ targetShadowRoot.addEventListener('mousedown', onWindowMouseDown);
50
+ targetShadowRoot.addEventListener('click', onWindowClick);
51
+ }
52
+
53
+ // Warning if target and popup not in same root
54
+ if (process.env.NODE_ENV !== 'production') {
55
+ var popupRoot = popupEle.getRootNode();
56
+ warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
57
+ }
58
+ return function () {
59
+ win.removeEventListener('mousedown', onWindowMouseDown);
60
+ win.removeEventListener('click', onWindowClick);
61
+ if (targetShadowRoot) {
62
+ targetShadowRoot.removeEventListener('mousedown', onWindowMouseDown);
63
+ targetShadowRoot.removeEventListener('click', onWindowClick);
64
+ }
65
+ };
66
+ }
67
+ }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
68
+ }
package/es/index.js CHANGED
@@ -6,19 +6,20 @@ import Portal from '@rc-component/portal';
6
6
  import classNames from 'classnames';
7
7
  import ResizeObserver from 'rc-resize-observer';
8
8
  import { isDOM } from "rc-util/es/Dom/findDOMNode";
9
+ import { getShadowRoot } from "rc-util/es/Dom/shadow";
9
10
  import useEvent from "rc-util/es/hooks/useEvent";
10
11
  import useId from "rc-util/es/hooks/useId";
11
12
  import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
12
13
  import isMobile from "rc-util/es/isMobile";
13
- import warning from "rc-util/es/warning";
14
14
  import * as React from 'react';
15
15
  import TriggerContext from "./context";
16
16
  import useAction from "./hooks/useAction";
17
17
  import useAlign from "./hooks/useAlign";
18
18
  import useWatch from "./hooks/useWatch";
19
+ import useWinClick from "./hooks/useWinClick";
19
20
  import Popup from "./Popup";
20
21
  import TriggerWrapper from "./TriggerWrapper";
21
- import { getAlignPopupClassName, getMotion, getWin } from "./util";
22
+ import { getAlignPopupClassName, getMotion } from "./util";
22
23
  export function generateTrigger() {
23
24
  var PortalComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Portal;
24
25
  var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -121,9 +122,9 @@ export function generateTrigger() {
121
122
  var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
122
123
  var cloneProps = {};
123
124
  var inPopupOrChild = useEvent(function (ele) {
124
- var _childDOM$getRootNode, _popupEle$getRootNode;
125
+ var _getShadowRoot, _getShadowRoot2;
125
126
  var childDOM = targetEle;
126
- return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || (childDOM === null || childDOM === void 0 ? void 0 : (_childDOM$getRootNode = childDOM.getRootNode()) === null || _childDOM$getRootNode === void 0 ? void 0 : _childDOM$getRootNode.host) === ele || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || (popupEle === null || popupEle === void 0 ? void 0 : (_popupEle$getRootNode = popupEle.getRootNode()) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.host) === ele || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
127
+ 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) {
127
128
  return (subPopupEle === null || subPopupEle === void 0 ? void 0 : subPopupEle.contains(ele)) || ele === subPopupEle;
128
129
  });
129
130
  });
@@ -325,49 +326,7 @@ export function generateTrigger() {
325
326
  }
326
327
 
327
328
  // Click to hide is special action since click popup element should not hide
328
- React.useEffect(function () {
329
- if (clickToHide && popupEle && (!mask || maskClosable)) {
330
- var clickInside = false;
331
-
332
- // User may mouseDown inside and drag out of popup and mouse up
333
- // Record here to prevent close
334
- var onWindowMouseDown = function onWindowMouseDown(_ref) {
335
- var target = _ref.target;
336
- clickInside = inPopupOrChild(target);
337
- };
338
- var onWindowClick = function onWindowClick(_ref2) {
339
- var target = _ref2.target;
340
- if (openRef.current && !clickInside && !inPopupOrChild(target)) {
341
- triggerOpen(false);
342
- }
343
- };
344
- var win = getWin(popupEle);
345
- var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
346
- win.addEventListener('mousedown', onWindowMouseDown);
347
- win.addEventListener('click', onWindowClick);
348
-
349
- // shadow root
350
- var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
351
- if (inShadow) {
352
- targetRoot.addEventListener('mousedown', onWindowMouseDown);
353
- targetRoot.addEventListener('click', onWindowClick);
354
- }
355
-
356
- // Warning if target and popup not in same root
357
- if (process.env.NODE_ENV !== 'production') {
358
- var popupRoot = popupEle.getRootNode();
359
- warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
360
- }
361
- return function () {
362
- win.removeEventListener('mousedown', onWindowMouseDown);
363
- win.removeEventListener('click', onWindowClick);
364
- if (inShadow) {
365
- targetRoot.removeEventListener('mousedown', onWindowMouseDown);
366
- targetRoot.removeEventListener('click', onWindowClick);
367
- }
368
- };
369
- }
370
- }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
329
+ useWinClick(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
371
330
 
372
331
  // ======================= Action: Hover ========================
373
332
  var hoverToShow = showActions.has('hover');
package/lib/hooks/useWinClick.d.ts ADDED
@@ -0,0 +1 @@
1
+ export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): void;
package/lib/hooks/useWinClick.js ADDED
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = useWinClick;
9
+ var _rcUtil = require("rc-util");
10
+ var _shadow = require("rc-util/lib/Dom/shadow");
11
+ var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
12
+ var React = _interopRequireWildcard(require("react"));
13
+ var _util = require("../util");
14
+ function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
15
+ var openRef = React.useRef(open);
16
+
17
+ // Window click to hide should be lock to avoid trigger lock immediately
18
+ var lockRef = React.useRef(false);
19
+ if (openRef.current !== open) {
20
+ lockRef.current = true;
21
+ openRef.current = open;
22
+ }
23
+ React.useEffect(function () {
24
+ var id = (0, _raf.default)(function () {
25
+ lockRef.current = false;
26
+ });
27
+ return function () {
28
+ _raf.default.cancel(id);
29
+ };
30
+ }, [open]);
31
+
32
+ // Click to hide is special action since click popup element should not hide
33
+ React.useEffect(function () {
34
+ if (clickToHide && popupEle && (!mask || maskClosable)) {
35
+ var clickInside = false;
36
+
37
+ // User may mouseDown inside and drag out of popup and mouse up
38
+ // Record here to prevent close
39
+ var onWindowMouseDown = function onWindowMouseDown(_ref) {
40
+ var target = _ref.target;
41
+ clickInside = inPopupOrChild(target);
42
+ };
43
+ var onWindowClick = function onWindowClick(_ref2) {
44
+ var target = _ref2.target;
45
+ if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
46
+ triggerOpen(false);
47
+ }
48
+ };
49
+ var win = (0, _util.getWin)(popupEle);
50
+ var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
51
+ win.addEventListener('mousedown', onWindowMouseDown);
52
+ win.addEventListener('click', onWindowClick);
53
+
54
+ // shadow root
55
+ var targetShadowRoot = (0, _shadow.getShadowRoot)(targetEle);
56
+ if (targetShadowRoot) {
57
+ targetShadowRoot.addEventListener('mousedown', onWindowMouseDown);
58
+ targetShadowRoot.addEventListener('click', onWindowClick);
59
+ }
60
+
61
+ // Warning if target and popup not in same root
62
+ if (process.env.NODE_ENV !== 'production') {
63
+ var popupRoot = popupEle.getRootNode();
64
+ (0, _rcUtil.warning)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
65
+ }
66
+ return function () {
67
+ win.removeEventListener('mousedown', onWindowMouseDown);
68
+ win.removeEventListener('click', onWindowClick);
69
+ if (targetShadowRoot) {
70
+ targetShadowRoot.removeEventListener('mousedown', onWindowMouseDown);
71
+ targetShadowRoot.removeEventListener('click', onWindowClick);
72
+ }
73
+ };
74
+ }
75
+ }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
76
+ }
package/lib/index.js CHANGED
@@ -14,16 +14,17 @@ var _portal = _interopRequireDefault(require("@rc-component/portal"));
14
14
  var _classnames = _interopRequireDefault(require("classnames"));
15
15
  var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
16
16
  var _findDOMNode = require("rc-util/lib/Dom/findDOMNode");
17
+ var _shadow = require("rc-util/lib/Dom/shadow");
17
18
  var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
18
19
  var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
19
20
  var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
20
21
  var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
21
- var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
22
22
  var React = _interopRequireWildcard(require("react"));
23
23
  var _context = _interopRequireDefault(require("./context"));
24
24
  var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
25
25
  var _useAlign3 = _interopRequireDefault(require("./hooks/useAlign"));
26
26
  var _useWatch = _interopRequireDefault(require("./hooks/useWatch"));
27
+ var _useWinClick = _interopRequireDefault(require("./hooks/useWinClick"));
27
28
  var _Popup = _interopRequireDefault(require("./Popup"));
28
29
  var _TriggerWrapper = _interopRequireDefault(require("./TriggerWrapper"));
29
30
  var _util = require("./util");
@@ -130,9 +131,9 @@ function generateTrigger() {
130
131
  var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
131
132
  var cloneProps = {};
132
133
  var inPopupOrChild = (0, _useEvent.default)(function (ele) {
133
- var _childDOM$getRootNode, _popupEle$getRootNode;
134
+ var _getShadowRoot, _getShadowRoot2;
134
135
  var childDOM = targetEle;
135
- return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || (childDOM === null || childDOM === void 0 ? void 0 : (_childDOM$getRootNode = childDOM.getRootNode()) === null || _childDOM$getRootNode === void 0 ? void 0 : _childDOM$getRootNode.host) === ele || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || (popupEle === null || popupEle === void 0 ? void 0 : (_popupEle$getRootNode = popupEle.getRootNode()) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.host) === ele || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
136
+ 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) {
136
137
  return (subPopupEle === null || subPopupEle === void 0 ? void 0 : subPopupEle.contains(ele)) || ele === subPopupEle;
137
138
  });
138
139
  });
@@ -334,49 +335,7 @@ function generateTrigger() {
334
335
  }
335
336
 
336
337
  // Click to hide is special action since click popup element should not hide
337
- React.useEffect(function () {
338
- if (clickToHide && popupEle && (!mask || maskClosable)) {
339
- var clickInside = false;
340
-
341
- // User may mouseDown inside and drag out of popup and mouse up
342
- // Record here to prevent close
343
- var onWindowMouseDown = function onWindowMouseDown(_ref) {
344
- var target = _ref.target;
345
- clickInside = inPopupOrChild(target);
346
- };
347
- var onWindowClick = function onWindowClick(_ref2) {
348
- var target = _ref2.target;
349
- if (openRef.current && !clickInside && !inPopupOrChild(target)) {
350
- triggerOpen(false);
351
- }
352
- };
353
- var win = (0, _util.getWin)(popupEle);
354
- var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
355
- win.addEventListener('mousedown', onWindowMouseDown);
356
- win.addEventListener('click', onWindowClick);
357
-
358
- // shadow root
359
- var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
360
- if (inShadow) {
361
- targetRoot.addEventListener('mousedown', onWindowMouseDown);
362
- targetRoot.addEventListener('click', onWindowClick);
363
- }
364
-
365
- // Warning if target and popup not in same root
366
- if (process.env.NODE_ENV !== 'production') {
367
- var popupRoot = popupEle.getRootNode();
368
- (0, _warning.default)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
369
- }
370
- return function () {
371
- win.removeEventListener('mousedown', onWindowMouseDown);
372
- win.removeEventListener('click', onWindowClick);
373
- if (inShadow) {
374
- targetRoot.removeEventListener('mousedown', onWindowMouseDown);
375
- targetRoot.removeEventListener('click', onWindowClick);
376
- }
377
- };
378
- }
379
- }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
338
+ (0, _useWinClick.default)(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
380
339
 
381
340
  // ======================= Action: Hover ========================
382
341
  var hoverToShow = showActions.has('hover');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.13.0",
3
+ "version": "1.13.2",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"
@@ -66,7 +66,7 @@
66
66
  "rc-align": "^4.0.0",
67
67
  "rc-motion": "^2.0.0",
68
68
  "rc-resize-observer": "^1.3.1",
69
- "rc-util": "^5.29.2"
69
+ "rc-util": "^5.31.1"
70
70
  },
71
71
  "peerDependencies": {
72
72
  "react": ">=16.9.0",