Merge pull request #19 from uxcore/fix-action-eventv2

default actions ICON changed to more-dot

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

demo/TreeDemo.jsx

@@ -297,14 +297,19 @@ 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}
           onSelect={() => { console.log('onSelect 回调'); }}
         >
           {loopDropDown(gDropDownData)}
         </Tree>
+        <button onClick={() => {
+          this.setState({
+            expandedKeys: ['0-0-1-1-key'],
+          });
+        }}>手动展开</button>
         <h2>
           dragable
         </h2>

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(<Menu.Item key={`${index + 1}`}>
             <div onClick={(e) => {
               e.stopPropagation();
+              this.actionClickBlocker = true;
+
               value.onClick(value, index, e);
             }}
             >
-              {value.icon ? <Icon usei name={value.icon} /> : null}
+              {value.icon ? <Icon usei name={value.icon} className="kuma-tree-icon-valign" /> : null}
               {value.text}
             </div>
           </Menu.Item>);
@@ -93,6 +110,7 @@ class ActionTreeNode extends RcTree.TreeNode {
         renderActionContent = (<Dropdown
           overlayClassName={classNames(
             `${prefixCls}-dropdown-menu`,
+            'uxcore-tree-node-actions-blocker',
           )}
           overlay={<Menu>{menuContent}</Menu>}
           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: () => {},

src/Tree.less

@@ -290,4 +290,9 @@
      }
    }
  }
-
+
+ .kuma-tree-icon-valign {
+    vertical-align: -2px;
+    margin-right: 3px;
+ }
+