@rc-component/trigger 1.10.0 → 1.10.2

package/README.md

@@ -65,8 +65,6 @@ ReactDOM.render((
 
 http://localhost:9001
 
-online example: http://react-component.github.io/trigger/
-
 ## Development
 
 ```
@@ -252,75 +250,11 @@ npm start
 
 ```
 npm test
-npm run chrome-test
-```
-
-## Coverage
-
-```
 npm run coverage
 ```
 
 open coverage/ dir
 
-## React 16 Note
-
-After React 16, you won't access popup element's ref in parent component's componentDidMount, which means following code won't work.
-
-```javascript
-class App extends React.Component {
-  componentDidMount() {
-    this.input.focus(); // error, this.input is undefined.
-  }
-
-  render() {
-    return (
-      <Trigger
-        action={['click']}
-        popup={<div><input ref={node => this.input = node} type="text" /></div>}
-      >
-        <button>click</button>
-      </Trigger>
-    )
-  }
-}
-```
-
-Consider wrap your popup element to a separate component:
-
-```javascript
-class InputPopup extends React.Component {
-  componentDidMount() {
-    this.props.onMount();
-  }
-
-  render() {
-    return (
-      <div>
-        <input ref={this.props.inputRef} type="text" />
-      </div>
-    );
-  }
-}
-
-class App extends React.Component {
-  handlePopupMount() {
-    this.input.focus(); // error, this.input is undefined.
-  }
-
-  render() {
-    return (
-      <Trigger
-        action={['click']}
-        popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
-      >
-        <button>click</button>
-      </Trigger>
-    )
-  }
-}
-```
-
 ## License
 
 rc-trigger is released under the MIT license.

package/es/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { ActionType, AlignType, ArrowTypeOuter, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType };
+import type { ActionType, AlignType, AnimationType, ArrowTypeOuter, BuildInPlacements, TransitionNameType } from './interface';
+export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType, };
 export interface TriggerRef {
     forceAlign: VoidFunction;
 }

package/es/index.js

@@ -327,19 +327,29 @@ 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 onWindowClick = function onWindowClick(_ref) {
+        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;
-          if (openRef.current && !inPopupOrChild(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);
         }
 
@@ -349,8 +359,10 @@ export function generateTrigger() {
           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);
           }
         };

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { ActionType, AlignType, ArrowTypeOuter, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType };
+import type { ActionType, AlignType, AnimationType, ArrowTypeOuter, BuildInPlacements, TransitionNameType } from './interface';
+export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType, };
 export interface TriggerRef {
     forceAlign: VoidFunction;
 }

package/lib/index.js

@@ -336,19 +336,29 @@ function generateTrigger() {
     // Click to hide is special action since click popup element should not hide
     React.useEffect(function () {
       if (clickToHide && popupEle && (!mask || maskClosable)) {
-        var onWindowClick = function onWindowClick(_ref) {
+        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;
-          if (openRef.current && !inPopupOrChild(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);
         }
 
@@ -358,8 +368,10 @@ function generateTrigger() {
           (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);
           }
         };

package/package.json

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