rc-tree - npm Package Compare versions

Comparing version 0.19.1 to 0.20.0

HISTORY.md

 # History
 ---
 
-## 0.9.5 / 2015-05-26 
-- support checkbox
+## 0.20.0 / 2015-12-01
+- add draggable feature #5
+
+## 0.18.0 / 2015-10-23
+- add contextmenu feature #5
+
+## 0.17.0 / 2015-10-14
+- add dynamic feature #4
+
+## 0.9.5 / 2015-05-26
+- support checkbox

lib/Tree.js

@@ -66,3 +66,6 @@ 'use strict';
       checkedKeys: checkedKeys,
-      selectedKeys: selectedKeys
+      selectedKeys: selectedKeys,
+      dragNodesKeys: '',
+      dragOverNodeKey: '',
+      dropNodeKey: ''
     };
@@ -73,2 +76,5 @@ this.contextmenuKeys = [];
   _createClass(Tree, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {}
+  }, {
     key: 'componentWillReceiveProps',
@@ -92,4 +98,4 @@ value: function componentWillReceiveProps(nextProps) {
       var checkedKeys = [];
-      Object.keys(this.treeNodesChkStates).forEach(function (item) {
-        var itemObj = _this2.treeNodesChkStates[item];
+      Object.keys(this.treeNodesStates).forEach(function (item) {
+        var itemObj = _this2.treeNodesStates[item];
         if (itemObj.checked) {
@@ -117,2 +123,128 @@ checkedKeys.push(itemObj.key);
   }, {
+    key: 'getDragNodes',
+    value: function getDragNodes(treeNode) {
+      var _this3 = this;
+
+      var dragNodesKeys = [];
+      Object.keys(this.treeNodesStates).forEach(function (item) {
+        if (item.indexOf(treeNode.props.pos) === 0) {
+          dragNodesKeys.push(_this3.treeNodesStates[item].key);
+        }
+      });
+      return dragNodesKeys;
+    }
+  }, {
+    key: 'getExpandedKeys',
+    value: function getExpandedKeys(treeNode, expand) {
+      var key = treeNode.props.eventKey;
+      var expandedKeys = this.state.expandedKeys;
+      var expandedIndex = expandedKeys.indexOf(key);
+      var exKeys = undefined;
+      if (expandedIndex > -1 && !expand) {
+        exKeys = [].concat(_toConsumableArray(expandedKeys));
+        exKeys.splice(expandedIndex, 1);
+        return exKeys;
+      }
+      if (expand) {
+        return expandedKeys.concat([key]);
+      }
+    }
+
+    /*
+    // ie8
+    createDragElement(treeNode) {
+      const props = this.props;
+       // copy treeNode and it's childNodes, remove data-reactid attribute.
+      let tn = treeNode.refs.selectHandle.cloneNode(true);
+      [...tn.childNodes].forEach(child => {
+        if (child.nodeType !== 1) {
+          return;
+        }
+        child.removeAttribute('data-reactid');
+      });
+      tn.removeAttribute('data-reactid');
+       // make element
+      const li = document.createElement("li");
+      li.className = treeNode.props.className || '';
+      li.appendChild(tn);
+      const ul = document.createElement("ul");
+      ul.className = `${props.prefixCls}-dragUl ${classSet(props.className, props.prefixCls)}`;
+      ul.appendChild(li);
+       ul.setAttribute('draggable', 'true');
+      this.refs.tree.parentNode.insertBefore(ul, this.refs.tree);
+      ul.focus();
+    }
+    */
+  }, {
+    key: 'handleDragStart',
+    value: function handleDragStart(e, treeNode) {
+      // console.log(this.refs.tree.parentNode, treeNode.refs.selectHandle);
+      // this.createDragElement(treeNode);
+      this.dragNode = treeNode;
+      this.dragNodesKeys = this.getDragNodes(treeNode);
+      var st = {
+        dragNodesKeys: this.dragNodesKeys
+      };
+      var expandedKeys = this.getExpandedKeys(treeNode, false);
+      if (expandedKeys) {
+        st.expandedKeys = expandedKeys;
+      }
+      this.setState(st);
+      if (this.props.onTreeDragStart) {
+        this.props.onTreeDragStart({ event: e, node: treeNode });
+      }
+    }
+  }, {
+    key: 'handleDragEnter',
+    value: function handleDragEnter(e, treeNode) {
+      if (this.dragNode.props.eventKey === treeNode.props.eventKey) {
+        return;
+      }
+      var st = {
+        dragOverNodeKey: treeNode.props.eventKey
+      };
+      var expandedKeys = this.getExpandedKeys(treeNode, true);
+      if (expandedKeys) {
+        st.expandedKeys = expandedKeys;
+      }
+      this.setState(st);
+      if (this.props.onTreeDragEnter) {
+        this.props.onTreeDragEnter({ event: e, node: treeNode });
+      }
+    }
+  }, {
+    key: 'handleDragOver',
+    value: function handleDragOver(e, treeNode) {
+      if (this.props.onTreeDragOver) {
+        this.props.onTreeDragOver({ event: e, node: treeNode });
+      }
+    }
+  }, {
+    key: 'handleDragLeave',
+    value: function handleDragLeave(e, treeNode) {
+      if (this.props.onTreeDragLeave) {
+        this.props.onTreeDragLeave({ event: e, node: treeNode });
+      }
+    }
+  }, {
+    key: 'handleDrop',
+    value: function handleDrop(e, treeNode) {
+      var key = treeNode.props.eventKey;
+      if (this.dragNode.props.eventKey === key) {
+        return;
+      }
+      this.setState({
+        dragOverNodeKey: '',
+        dropNodeKey: key
+      });
+      if (this.props.onTreeDrop) {
+        this.props.onTreeDrop({
+          event: e,
+          node: treeNode,
+          dragNode: this.dragNode,
+          dragNodesKeys: this.dragNodesKeys
+        });
+      }
+    }
+  }, {
     key: 'loopAllChildren',
@@ -136,2 +268,41 @@ value: function loopAllChildren(childs, callback) {
   }, {
+    key: 'handleExpand',
+    value: function handleExpand(treeNode) {
+      var _this4 = this;
+
+      var thisProps = this.props;
+      var tnProps = treeNode.props;
+      var expandedKeys = this.state.expandedKeys.concat([]);
+      var expanded = !tnProps.expanded;
+      if (this.defaultExpandAll) {
+        this.loopAllChildren(thisProps.children, function (item, index, pos) {
+          var key = item.key || pos;
+          if (expandedKeys.indexOf(key) === -1) {
+            expandedKeys.push(key);
+          }
+        });
+        this.defaultExpandAll = false;
+      }
+      var index = expandedKeys.indexOf(tnProps.eventKey);
+      if (expanded) {
+        if (index === -1) {
+          expandedKeys.push(tnProps.eventKey);
+          if (thisProps.onDataLoaded) {
+            return thisProps.onDataLoaded(treeNode).then(function () {
+              _this4.setState({
+                expandedKeys: expandedKeys
+              });
+            })['catch'](function () {
+              // console.error('Something went wrong', reason);
+            });
+          }
+        }
+      } else {
+          expandedKeys.splice(index, 1);
+        }
+      this.setState({
+        expandedKeys: expandedKeys
+      });
+    }
+  }, {
     key: 'handleCheckState',
@@ -209,3 +380,3 @@ value: function handleCheckState(obj, checkedArr, unCheckEvent) {
     value: function handleCheck(treeNode) {
-      var _this3 = this;
+      var _this5 = this;
 
@@ -218,4 +389,4 @@ var tnProps = treeNode.props;
       var pos = undefined;
-      Object.keys(this.treeNodesChkStates).forEach(function (item) {
-        var itemObj = _this3.treeNodesChkStates[item];
+      Object.keys(this.treeNodesStates).forEach(function (item) {
+        var itemObj = _this5.treeNodesStates[item];
         if (itemObj.key === (treeNode.key || tnProps.eventKey)) {
@@ -227,3 +398,3 @@ pos = item;
       });
-      this.handleCheckState(this.treeNodesChkStates, [pos], !checked);
+      this.handleCheckState(this.treeNodesStates, [pos], !checked);
       var checkKeys = this.getCheckKeys();
@@ -306,42 +477,3 @@ this.checkPartKeys = checkKeys.checkPartKeys;
     }
-  }, {
-    key: 'handleExpand',
-    value: function handleExpand(treeNode) {
-      var _this4 = this;
 
-      var thisProps = this.props;
-      var tnProps = treeNode.props;
-      var expandedKeys = this.state.expandedKeys.concat([]);
-      var expanded = !tnProps.expanded;
-      if (this.defaultExpandAll) {
-        this.loopAllChildren(thisProps.children, function (item, index, pos) {
-          var key = item.key || pos;
-          if (expandedKeys.indexOf(key) === -1) {
-            expandedKeys.push(key);
-          }
-        });
-        this.defaultExpandAll = false;
-      }
-      var index = expandedKeys.indexOf(tnProps.eventKey);
-      if (expanded) {
-        if (index === -1) {
-          expandedKeys.push(tnProps.eventKey);
-          if (thisProps.onDataLoaded) {
-            return thisProps.onDataLoaded(treeNode).then(function () {
-              _this4.setState({
-                expandedKeys: expandedKeys
-              });
-            })['catch'](function () {
-              // console.error('Something went wrong', reason);
-            });
-          }
-        }
-      } else {
-          expandedKeys.splice(index, 1);
-        }
-      this.setState({
-        expandedKeys: expandedKeys
-      });
-    }
-
     // all keyboard events callbacks run from here at first
@@ -372,2 +504,4 @@ }, {
         checkable: props.checkable,
+        draggable: props.draggable,
+        dragOver: state.dragOverNodeKey === key,
         expanded: this.defaultExpandAll || state.expandedKeys.indexOf(key) !== -1,
@@ -385,3 +519,3 @@ selected: state.selectedKeys.indexOf(key) !== -1,
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -399,3 +533,3 @@ var props = this.props;
       var checkedPos = [];
-      this.treeNodesChkStates = {};
+      this.treeNodesStates = {};
       this.loopAllChildren(props.children, function (item, index, pos) {
@@ -408,3 +542,3 @@ var key = item.key || pos;
         }
-        _this5.treeNodesChkStates[pos] = {
+        _this6.treeNodesStates[pos] = {
           key: key,
@@ -415,3 +549,3 @@ checked: checked,
       });
-      this.handleCheckState(this.treeNodesChkStates, filterMin(checkedPos.sort()));
+      this.handleCheckState(this.treeNodesStates, filterMin(checkedPos.sort()));
       var checkKeys = this.getCheckKeys();
@@ -423,3 +557,3 @@ this.checkPartKeys = checkKeys.checkPartKeys;
         'ul',
-        _extends({}, domProps, { ref: 'tree' }),
+        _extends({}, domProps, { unselectable: true, ref: 'tree' }),
         this.newChildren
@@ -449,2 +583,7 @@ );
   onRightClick: _react2['default'].PropTypes.func,
+  onTreeDragStart: _react2['default'].PropTypes.func,
+  onTreeDragEnter: _react2['default'].PropTypes.func,
+  onTreeDragOver: _react2['default'].PropTypes.func,
+  onTreeDragLeave: _react2['default'].PropTypes.func,
+  onTreeDrop: _react2['default'].PropTypes.func,
   openTransitionName: _react2['default'].PropTypes.string,
@@ -458,2 +597,3 @@ openAnimation: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.string, _react2['default'].PropTypes.object])
   checkable: false,
+  draggable: false,
   showLine: false,
@@ -460,0 +600,0 @@ showIcon: true,

lib/TreeNode.js

@@ -25,4 +25,6 @@ 'use strict';
 
-var _rcUtil = require('rc-util');
+var _objectAssign = require('object-assign');
 
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
 var _rcAnimate = require('rc-animate');
@@ -32,6 +34,11 @@
 
-var _objectAssign = require('object-assign');
+var _rcUtil = require('rc-util');
 
-var _objectAssign2 = _interopRequireDefault(_objectAssign);
+var _util = require('./util');
 
+var browserUa = (0, _util.browser)(window.navigator.userAgent || '');
+var ieOrEdge = /.*(IE|Edge).+/.test(browserUa);
+// const uaArray = browserUa.split(' ');
+// const gtIE8 = uaArray.length !== 2 || uaArray[0].indexOf('IE') === -1 || Number(uaArray[1]) > 8;
+
 var defaultTitle = '---';
@@ -48,3 +55,3 @@
     _get(Object.getPrototypeOf(TreeNode.prototype), 'constructor', this).call(this, props);
-    ['handleExpand', 'handleCheck', 'handleContextMenu'].forEach(function (m) {
+    ['handleExpand', 'handleCheck', 'handleContextMenu', 'handleDragStart', 'handleDragEnter', 'handleDragOver', 'handleDragLeave', 'handleDrop'].forEach(function (m) {
       _this[m] = _this[m].bind(_this);
@@ -64,3 +71,3 @@ });
       };
-      var siblings = Object.keys(this.props.root.treeNodesChkStates).filter(function (item) {
+      var siblings = Object.keys(this.props.root.treeNodesStates).filter(function (item) {
         var len = pos.length;
@@ -95,2 +102,42 @@ return len === item.length && pos.substring(0, len - 2) === item.substring(0, len - 2);
   }, {
+    key: 'handleDragStart',
+    value: function handleDragStart(e) {
+      // console.log('dragstart', this.props.eventKey, e);
+      // e.preventDefault();
+      e.stopPropagation();
+      this.props.root.handleSelect(this);
+      this.props.root.handleDragStart(e, this);
+    }
+  }, {
+    key: 'handleDragEnter',
+    value: function handleDragEnter(e) {
+      // console.log('dragenter', this.props.eventKey, e);
+      e.preventDefault();
+      e.stopPropagation();
+      this.props.root.handleDragEnter(e, this);
+    }
+  }, {
+    key: 'handleDragOver',
+    value: function handleDragOver(e) {
+      // console.log(this.props.eventKey, e);
+      // todo disabled
+      e.preventDefault();
+      e.stopPropagation();
+      this.props.root.handleDragOver(e, this);
+      return false;
+    }
+  }, {
+    key: 'handleDragLeave',
+    value: function handleDragLeave(e) {
+      // console.log(this.props.eventKey, e);
+      e.stopPropagation();
+      this.props.root.handleDragLeave(e, this);
+    }
+  }, {
+    key: 'handleDrop',
+    value: function handleDrop(e) {
+      e.stopPropagation();
+      this.props.root.handleDrop(e, this);
+    }
+  }, {
     key: 'handleExpand',
@@ -258,3 +305,4 @@ value: function handleExpand() {
           }
-          domProps.onClick = function () {
+          domProps.onClick = function (e) {
+            e.preventDefault();
             _this3.handleSelect();
@@ -268,2 +316,11 @@ if (props.checkable) {
           }
+          if (props.draggable) {
+            if (ieOrEdge) {
+              // ie bug!
+              domProps.href = '#';
+            }
+            domProps.draggable = true;
+            domProps['aria-grabbed'] = true;
+            domProps.onDragStart = _this3.handleDragStart;
+          }
         }
@@ -278,5 +335,21 @@ return _react2['default'].createElement(
 
+      var liProps = {};
+      if (props.draggable) {
+        liProps.onDragEnter = this.handleDragEnter;
+        liProps.onDragOver = this.handleDragOver;
+        liProps.onDragLeave = this.handleDragLeave;
+        liProps.onDrop = this.handleDrop;
+      }
+
+      var disabledCls = '';
+      var dragOverCls = '';
+      if (props.disabled) {
+        disabledCls = prefixCls + '-treenode-disabled';
+      } else if (props.dragOver) {
+        dragOverCls = 'drag-over';
+      }
+
       return _react2['default'].createElement(
         'li',
-        { className: (0, _rcUtil.joinClasses)(props.className, props.disabled ? prefixCls + '-treenode-disabled' : '') },
+        _extends({}, liProps, { ref: 'li', className: (0, _rcUtil.joinClasses)(props.className, disabledCls, dragOverCls) }),
         canRenderSwitcher ? this.renderSwitcher(props, expandedState) : _react2['default'].createElement('span', { className: prefixCls + '-switcher-noop' }),
@@ -283,0 +356,0 @@ props.checkable ? this.renderCheckbox(props) : null,

package.json

 {
   "name": "rc-tree",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "tree ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -52,12 +52,3 @@ # rc-tree
 
-```js
-var React = require('react');
-var Tree = require('rc-tree');
-var TreeNode = Tree.TreeNode;
-React.render(
-  <Tree>
-    <TreeNode>leaf </TreeNode>
-    <TreeNode>leaf </TreeNode>
-  <Tree/>, container);
-```
+see examples
 
@@ -86,2 +77,8 @@ ## API
 |onRightClick | select current treeNode and show customized contextmenu | function({event,node}) | - |
+|draggable | whether can drag treeNode. (drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.) | bool | false |
+|onTreeDragStart | it execs when fire the tree's dragstart event | function({event,node}) | - |
+|onTreeDragEnter | it execs when fire the tree's dragenter event | function({event,node}) | - |
+|onTreeDragOver | it execs when fire the tree's dragover event | function({event,node}) | - |
+|onTreeDragLeave | it execs when fire the tree's dragleave event | function({event,node}) | - |
+|onTreeDrop | it execs when fire the tree's drop event | function({event,node,dragNode,dragNodesKeys}) | - |
 
@@ -88,0 +85,0 @@ ### TreeNode props

No alert changes

Improved metrics

Total package byte prevSize

45908

increased by22.6%

Number of package files

9

increased by12.5%

Lines of code

1093

increased by29.2%

Worsened metrics

Number of lines in readme file

111

decreased by-2.63%

No dependency changes