diff --git a/HISTORY.md b/HISTORY.md index f6d6a15..9877232 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,6 +2,11 @@ --- +## 0.4.5 + +* `FIXED` for ActionTreeNode, fix the event stop propagation problem under react@15 and smaller +* `CHANGED` default actions ICON changed to more-dot + ## 0.4.4 * `CHANGED` for ActionTreeNode, prevent click event to propagation on action item so it won't trigger selectable event on tree node diff --git a/demo/TreeDemo.jsx b/demo/TreeDemo.jsx index abd50a4..a312b1d 100644 --- a/demo/TreeDemo.jsx +++ b/demo/TreeDemo.jsx @@ -297,7 +297,7 @@ class Demo extends React.Component { selectable expandedKeys={this.state.expandedKeys} onExpand={this.onExpand} - autoExpandParent={this.state.autoExpandParent} + autoExpandParent onDragStart={this.onDragStart} onDragEnter={this.onDragEnter} onDrop={this.onDrop} @@ -305,6 +305,11 @@ class Demo extends React.Component { > {loopDropDown(gDropDownData)} +

dragable

diff --git a/src/ActionTreeNode.jsx b/src/ActionTreeNode.jsx index 6464c23..218cfb7 100644 --- a/src/ActionTreeNode.jsx +++ b/src/ActionTreeNode.jsx @@ -9,6 +9,8 @@ import Menu from 'uxcore-menu'; const LOAD_STATUS_LOADING = 1; class ActionTreeNode extends RcTree.TreeNode { + actionClickBlocker = false; + // Icon + Title renderSelector = () => { const { loadStatus, dragNodeHighlight } = this.state; @@ -54,11 +56,24 @@ class ActionTreeNode extends RcTree.TreeNode { )} draggable={(!disabled && draggable) || undefined} aria-grabbed={(!disabled && draggable) || undefined} - onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onContextMenu={this.onContextMenu} - onClick={this.onSelectorClick} + onClick={(e) => { + // the event stop propagation will fial in popover under react@15 or smaller, so try to + // block it by logic code + if (e.target && e.target.closest) { + this.actionClickBlocker = false; + if (e.target.closest('.uxcore-tree-node-actions-blocker')) { + return; + } + } else if (this.actionClickBlocker) { + this.actionClickBlocker = false; + return; + } + + this.onSelectorClick(e); + }} onDragStart={this.onDragStart} > {$icon}{$title} @@ -81,10 +96,12 @@ class ActionTreeNode extends RcTree.TreeNode { menuContent.push(
{ e.stopPropagation(); + this.actionClickBlocker = true; + value.onClick(value, index, e); }} > - {value.icon ? : null} + {value.icon ? : null} {value.text}
); @@ -93,6 +110,7 @@ class ActionTreeNode extends RcTree.TreeNode { renderActionContent = ({menuContent}} getPopupContainer={node => node.parentNode} @@ -155,7 +173,7 @@ ActionTreeNode.propTypes = { ActionTreeNode.defaultProps = { ...RcTree.TreeNode.defaultProps, actionAble: false, - actionIcon: 'shezhi', + actionIcon: 'more-dot', actions: { text: '', onClick: () => {}, diff --git a/src/Tree.less b/src/Tree.less index 5ddc3af..83aead9 100644 --- a/src/Tree.less +++ b/src/Tree.less @@ -290,4 +290,9 @@ } } } - \ No newline at end of file + + .kuma-tree-icon-valign { + vertical-align: -2px; + margin-right: 3px; + } + \ No newline at end of file