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