@rc-component/trigger 1.13.0 → 1.13.1

package/es/hooks/useWinClick.d.ts

@@ -0,0 +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

@@ -0,0 +1,67 @@
+import { warning } from 'rc-util';
+import raf from "rc-util/es/raf";
+import * as React from 'react';
+import { getWin } from "../util";
+export default function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
+  var openRef = React.useRef(open);
+
+  // Window click to hide should be lock to avoid trigger lock immediately
+  var lockRef = React.useRef(false);
+  if (openRef.current !== open) {
+    lockRef.current = true;
+    openRef.current = open;
+  }
+  React.useEffect(function () {
+    var id = raf(function () {
+      lockRef.current = false;
+    });
+    return function () {
+      raf.cancel(id);
+    };
+  }, [open]);
+
+  // Click to hide is special action since click popup element should not hide
+  React.useEffect(function () {
+    if (clickToHide && popupEle && (!mask || maskClosable)) {
+      var clickInside = false;
+
+      // User may mouseDown inside and drag out of popup and mouse up
+      // Record here to prevent close
+      var onWindowMouseDown = function onWindowMouseDown(_ref) {
+        var target = _ref.target;
+        clickInside = inPopupOrChild(target);
+      };
+      var onWindowClick = function onWindowClick(_ref2) {
+        var target = _ref2.target;
+        if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
+          triggerOpen(false);
+        }
+      };
+      var win = getWin(popupEle);
+      var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
+      win.addEventListener('mousedown', onWindowMouseDown);
+      win.addEventListener('click', onWindowClick);
+
+      // shadow root
+      var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
+      if (inShadow) {
+        targetRoot.addEventListener('mousedown', onWindowMouseDown);
+        targetRoot.addEventListener('click', onWindowClick);
+      }
+
+      // Warning if target and popup not in same root
+      if (process.env.NODE_ENV !== 'production') {
+        var popupRoot = popupEle.getRootNode();
+        warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
+      }
+      return function () {
+        win.removeEventListener('mousedown', onWindowMouseDown);
+        win.removeEventListener('click', onWindowClick);
+        if (inShadow) {
+          targetRoot.removeEventListener('mousedown', onWindowMouseDown);
+          targetRoot.removeEventListener('click', onWindowClick);
+        }
+      };
+    }
+  }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
+}

package/es/index.js

@@ -10,15 +10,15 @@ import useEvent from "rc-util/es/hooks/useEvent";
 import useId from "rc-util/es/hooks/useId";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import isMobile from "rc-util/es/isMobile";
-import warning from "rc-util/es/warning";
 import * as React from 'react';
 import TriggerContext from "./context";
 import useAction from "./hooks/useAction";
 import useAlign from "./hooks/useAlign";
 import useWatch from "./hooks/useWatch";
+import useWinClick from "./hooks/useWinClick";
 import Popup from "./Popup";
 import TriggerWrapper from "./TriggerWrapper";
-import { getAlignPopupClassName, getMotion, getWin } from "./util";
+import { getAlignPopupClassName, getMotion } from "./util";
 export function generateTrigger() {
   var PortalComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Portal;
   var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -325,49 +325,7 @@ export function generateTrigger() {
     }
 
     // Click to hide is special action since click popup element should not hide
-    React.useEffect(function () {
-      if (clickToHide && popupEle && (!mask || maskClosable)) {
-        var clickInside = false;
-
-        // User may mouseDown inside and drag out of popup and mouse up
-        // Record here to prevent close
-        var onWindowMouseDown = function onWindowMouseDown(_ref) {
-          var target = _ref.target;
-          clickInside = inPopupOrChild(target);
-        };
-        var onWindowClick = function onWindowClick(_ref2) {
-          var target = _ref2.target;
-          if (openRef.current && !clickInside && !inPopupOrChild(target)) {
-            triggerOpen(false);
-          }
-        };
-        var win = getWin(popupEle);
-        var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
-        win.addEventListener('mousedown', onWindowMouseDown);
-        win.addEventListener('click', onWindowClick);
-
-        // shadow root
-        var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
-        if (inShadow) {
-          targetRoot.addEventListener('mousedown', onWindowMouseDown);
-          targetRoot.addEventListener('click', onWindowClick);
-        }
-
-        // Warning if target and popup not in same root
-        if (process.env.NODE_ENV !== 'production') {
-          var popupRoot = popupEle.getRootNode();
-          warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
-        }
-        return function () {
-          win.removeEventListener('mousedown', onWindowMouseDown);
-          win.removeEventListener('click', onWindowClick);
-          if (inShadow) {
-            targetRoot.removeEventListener('mousedown', onWindowMouseDown);
-            targetRoot.removeEventListener('click', onWindowClick);
-          }
-        };
-      }
-    }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
+    useWinClick(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
 
     // ======================= Action: Hover ========================
     var hoverToShow = showActions.has('hover');

package/lib/hooks/useWinClick.d.ts

@@ -0,0 +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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useWinClick;
+var _rcUtil = require("rc-util");
+var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
+var React = _interopRequireWildcard(require("react"));
+var _util = require("../util");
+function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
+  var openRef = React.useRef(open);
+
+  // Window click to hide should be lock to avoid trigger lock immediately
+  var lockRef = React.useRef(false);
+  if (openRef.current !== open) {
+    lockRef.current = true;
+    openRef.current = open;
+  }
+  React.useEffect(function () {
+    var id = (0, _raf.default)(function () {
+      lockRef.current = false;
+    });
+    return function () {
+      _raf.default.cancel(id);
+    };
+  }, [open]);
+
+  // Click to hide is special action since click popup element should not hide
+  React.useEffect(function () {
+    if (clickToHide && popupEle && (!mask || maskClosable)) {
+      var clickInside = false;
+
+      // User may mouseDown inside and drag out of popup and mouse up
+      // Record here to prevent close
+      var onWindowMouseDown = function onWindowMouseDown(_ref) {
+        var target = _ref.target;
+        clickInside = inPopupOrChild(target);
+      };
+      var onWindowClick = function onWindowClick(_ref2) {
+        var target = _ref2.target;
+        if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
+          triggerOpen(false);
+        }
+      };
+      var win = (0, _util.getWin)(popupEle);
+      var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
+      win.addEventListener('mousedown', onWindowMouseDown);
+      win.addEventListener('click', onWindowClick);
+
+      // shadow root
+      var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
+      if (inShadow) {
+        targetRoot.addEventListener('mousedown', onWindowMouseDown);
+        targetRoot.addEventListener('click', onWindowClick);
+      }
+
+      // Warning if target and popup not in same root
+      if (process.env.NODE_ENV !== 'production') {
+        var popupRoot = popupEle.getRootNode();
+        (0, _rcUtil.warning)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
+      }
+      return function () {
+        win.removeEventListener('mousedown', onWindowMouseDown);
+        win.removeEventListener('click', onWindowClick);
+        if (inShadow) {
+          targetRoot.removeEventListener('mousedown', onWindowMouseDown);
+          targetRoot.removeEventListener('click', onWindowClick);
+        }
+      };
+    }
+  }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
+}

package/lib/index.js

@@ -18,12 +18,12 @@ var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
 var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
-var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
 var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
 var _useAlign3 = _interopRequireDefault(require("./hooks/useAlign"));
 var _useWatch = _interopRequireDefault(require("./hooks/useWatch"));
+var _useWinClick = _interopRequireDefault(require("./hooks/useWinClick"));
 var _Popup = _interopRequireDefault(require("./Popup"));
 var _TriggerWrapper = _interopRequireDefault(require("./TriggerWrapper"));
 var _util = require("./util");
@@ -334,49 +334,7 @@ function generateTrigger() {
     }
 
     // Click to hide is special action since click popup element should not hide
-    React.useEffect(function () {
-      if (clickToHide && popupEle && (!mask || maskClosable)) {
-        var clickInside = false;
-
-        // User may mouseDown inside and drag out of popup and mouse up
-        // Record here to prevent close
-        var onWindowMouseDown = function onWindowMouseDown(_ref) {
-          var target = _ref.target;
-          clickInside = inPopupOrChild(target);
-        };
-        var onWindowClick = function onWindowClick(_ref2) {
-          var target = _ref2.target;
-          if (openRef.current && !clickInside && !inPopupOrChild(target)) {
-            triggerOpen(false);
-          }
-        };
-        var win = (0, _util.getWin)(popupEle);
-        var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
-        win.addEventListener('mousedown', onWindowMouseDown);
-        win.addEventListener('click', onWindowClick);
-
-        // shadow root
-        var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
-        if (inShadow) {
-          targetRoot.addEventListener('mousedown', onWindowMouseDown);
-          targetRoot.addEventListener('click', onWindowClick);
-        }
-
-        // Warning if target and popup not in same root
-        if (process.env.NODE_ENV !== 'production') {
-          var popupRoot = popupEle.getRootNode();
-          (0, _warning.default)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
-        }
-        return function () {
-          win.removeEventListener('mousedown', onWindowMouseDown);
-          win.removeEventListener('click', onWindowClick);
-          if (inShadow) {
-            targetRoot.removeEventListener('mousedown', onWindowMouseDown);
-            targetRoot.removeEventListener('click', onWindowClick);
-          }
-        };
-      }
-    }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
+    (0, _useWinClick.default)(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
 
     // ======================= Action: Hover ========================
     var hoverToShow = showActions.has('hover');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"