popover: Add quirk mode for popover

packages/zent/src/pop/Pop.js

@@ -152,6 +152,7 @@ class Pop extends (PureComponent || Component) {
     // 只有trigger为hover时才有效
     mouseLeaveDelay: PropTypes.number,
     mouseEnterDelay: PropTypes.number,
+    quirk: PropTypes.bool,
 
     // 只有trigger为click时才有效
     closeOnClickOutside: PropTypes.bool,
@@ -175,7 +176,8 @@ class Pop extends (PureComponent || Component) {
     mouseEnterDelay: 200,
     className: '',
     wrapperClassName: '',
-    prefix: 'zent'
+    prefix: 'zent',
+    quirk: true
   };
 
   state = {
@@ -240,7 +242,8 @@ class Pop extends (PureComponent || Component) {
       isOutside,
       mouseLeaveDelay,
       mouseEnterDelay,
-      children
+      children,
+      quirk
     } = this.props;
 
     if (trigger === 'click') {
@@ -257,6 +260,7 @@ class Pop extends (PureComponent || Component) {
           showDelay={mouseEnterDelay}
           hideDelay={mouseLeaveDelay}
           isOutside={isOutside}
+          quirk={quirk}
         >
           {children}
         </Trigger.Hover>

packages/zent/src/pop/README.md

@@ -306,6 +306,7 @@ ReactDOM.render(
 | mouseEnterDelay | hover打开的延迟（单位：毫秒） | number | `200` |
 | mouseLeaveDelay | 关闭的的延迟（单位：毫秒） | number | `200` |
 | isOutside | 用来判断点击目标是否在外面的可选函数 | func | |
+| quirk | 开启 Popover 的 quirk 模式，该模式下判断关闭条件时不需要先从内部移动出去 | bool | `true` |
 
 #### None
 

packages/zent/src/popover/README.md

@@ -116,7 +116,8 @@ isOutside 的 `data` 包含两个属性：`contentNode` 和 `triggerNode`。
 | --------- | ---------------------------------------- | -------------------- | ------------- |
 | showDelay | 可选, 打开弹层前的延迟（单位毫秒）, 如果在这段时间内鼠标移出弹层范围, 弹层不会打开   | number   | `150`  |
 | hideDelay | 可选, 关闭弹层前的延迟（单位毫秒）, 如果在这段时间内鼠标重新移入弹层范围, 弹层不会关闭 | number    | `150` |
-| isOutside | 可选, 判断一个节点是否在‘外面’。默认trigger和弹层以外的节点都是‘外面’  | func: (node, data) => bool |  |
+| isOutside | 可选, 判断一个节点是否在‘外面’。默认 trigger 和弹层以外的节点都是‘外面’  | func: (node, data) => bool |  |
+| quirk | 可选，quirk 模式，该模式下触发关闭时不要求鼠标先从 trigger 和弹层里面出去 | bool | `false` |
 
 isOutside 的 `data` 包含两个属性：`contentNode` 和 `triggerNode`。
 

packages/zent/src/popover/trigger/HoverTrigger.js

@@ -143,7 +143,7 @@ function makeHoverEnterRecognizer({ enterDelay, onEnter }) {
 /**
  * 离开状态的识别
  */
-function makeHoverLeaveRecognizer({ leaveDelay, onLeave, isOutSide }) {
+function makeHoverLeaveRecognizer({ leaveDelay, onLeave, isOutSide, quirk }) {
   const state = makeState('leave', onLeave);
   let recognizer;
   let timerId;
@@ -159,7 +159,7 @@ function makeHoverLeaveRecognizer({ leaveDelay, onLeave, isOutSide }) {
         const { target } = evt;
 
         if (isOutSide(target)) {
-          if (!state.is(HoverState.Started)) {
+          if (!quirk && !state.is(HoverState.Started)) {
             return;
           }
 
@@ -226,12 +226,15 @@ export default class PopoverHoverTrigger extends Trigger {
     showDelay: PropTypes.number,
     hideDelay: PropTypes.number,
 
-    isOutside: PropTypes.func
+    isOutside: PropTypes.func,
+
+    quirk: PropTypes.bool
   };
 
   static defaultProps = {
     showDelay: 150,
-    hideDelay: 150
+    hideDelay: 150,
+    quirk: false
   };
 
   open = () => {
@@ -248,17 +251,23 @@ export default class PopoverHoverTrigger extends Trigger {
   };
 
   makeEnterRecognizer() {
+    const { showDelay, quirk } = this.props;
+
     return makeHoverEnterRecognizer({
-      enterDelay: this.props.showDelay,
-      onEnter: this.open
+      enterDelay: showDelay,
+      onEnter: this.open,
+      quirk
     });
   }
 
   makeLeaveRecognizer() {
+    const { quirk, hideDelay, isOutsideStacked } = this.props;
+
     return makeHoverLeaveRecognizer({
-      leaveDelay: this.props.hideDelay,
+      leaveDelay: hideDelay,
       onLeave: this.close,
-      isOutSide: this.props.isOutsideStacked
+      isOutSide: isOutsideStacked,
+      quirk
     });
   }