From 3170ea7e1eed4a123686198b50a9e2f6c12c54a4 Mon Sep 17 00:00:00 2001 From: Li Chen Date: Fri, 23 Jun 2017 13:03:36 +0800 Subject: [PATCH 1/2] Add quirk mode for popover --- packages/zent/src/pop/Pop.js | 1 + packages/zent/src/popover/README.md | 3 ++- .../zent/src/popover/trigger/HoverTrigger.js | 25 +++++++++++++------ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/zent/src/pop/Pop.js b/packages/zent/src/pop/Pop.js index 7eff891d94..b80fa5f608 100644 --- a/packages/zent/src/pop/Pop.js +++ b/packages/zent/src/pop/Pop.js @@ -257,6 +257,7 @@ class Pop extends (PureComponent || Component) { showDelay={mouseEnterDelay} hideDelay={mouseLeaveDelay} isOutside={isOutside} + quirk > {children} diff --git a/packages/zent/src/popover/README.md b/packages/zent/src/popover/README.md index 6f6a2b97c5..e44c859546 100644 --- a/packages/zent/src/popover/README.md +++ b/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`。 diff --git a/packages/zent/src/popover/trigger/HoverTrigger.js b/packages/zent/src/popover/trigger/HoverTrigger.js index 368ffa61b6..59ef0a633e 100644 --- a/packages/zent/src/popover/trigger/HoverTrigger.js +++ b/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 }); } From dff98e50aa98d10f1895c4d6175fcc552b9c8ad6 Mon Sep 17 00:00:00 2001 From: Li Chen Date: Fri, 23 Jun 2017 20:20:20 +0800 Subject: [PATCH 2/2] expose quirk option in Pop --- packages/zent/src/pop/Pop.js | 9 ++++++--- packages/zent/src/pop/README.md | 1 + 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/zent/src/pop/Pop.js b/packages/zent/src/pop/Pop.js index b80fa5f608..0493adde30 100644 --- a/packages/zent/src/pop/Pop.js +++ b/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,7 +260,7 @@ class Pop extends (PureComponent || Component) { showDelay={mouseEnterDelay} hideDelay={mouseLeaveDelay} isOutside={isOutside} - quirk + quirk={quirk} > {children} diff --git a/packages/zent/src/pop/README.md b/packages/zent/src/pop/README.md index 89a4f58aa2..d998172282 100644 --- a/packages/zent/src/pop/README.md +++ b/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