更新包

build/Tree.css

@@ -0,0 +1,418 @@
+/* FormGroup */
+/*  Navlayout  */
+/* FormGroup */
+/*  Navlayout  */
+.u-checkbox {
+  width: 18px;
+  display: inline-block; }
+  .u-checkbox.disabled .u-checkbox-label {
+    cursor: not-allowed;
+    opacity: 0.5; }
+  .u-checkbox input[type='checkbox'] {
+    display: none;
+    cursor: pointer; }
+  .u-checkbox.is-checked .u-checkbox-label:before {
+    -moz-box-shadow: inset 0 0 0 10px rgb(30,136,229);
+    -webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229);
+    box-shadow: inset 0 0 0 10px rgb(30,136,229);
+    border-color: rgb(30,136,229); }
+  .u-checkbox.is-checked .u-checkbox-label:after {
+    color: #fff;
+    content: "\e658";
+    line-height: 18px;
+    font-size: 14px; }
+  .u-checkbox .u-checkbox-label {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    padding-left: 25px;
+    margin-right: 10px;
+    color: rgb(30,136,229); }
+    .u-checkbox .u-checkbox-label:before {
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      border: 1px solid;
+      background-color: #fafafa;
+      -moz-transition: all 0.3s ease-in-out;
+      -o-transition: all 0.3s ease-in-out;
+      -webkit-transition: all 0.3s ease-in-out;
+      transition: all 0.3s ease-in-out;
+      content: '';
+      font-family: 'uf';
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      left: 0;
+      bottom: 0;
+      text-align: center;
+      position: absolute; }
+    .u-checkbox .u-checkbox-label:after {
+      content: '';
+      font-family: 'uf';
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      left: 0;
+      bottom: 0;
+      text-align: center;
+      position: absolute; }
+
+.u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before {
+  -moz-box-shadow: inset 0 0 0 10px rgb(76,175,80);
+  -webkit-box-shadow: inset 0 0 0 10px rgb(76,175,80);
+  box-shadow: inset 0 0 0 10px rgb(76,175,80);
+  border-color: rgb(76,175,80); }
+
+.u-checkbox.u-checkbox-success .u-checkbox-label {
+  color: rgb(76,175,80); }
+
+.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
+  -moz-box-shadow: inset 0 0 0 10px rgb(255,152,0);
+  -webkit-box-shadow: inset 0 0 0 10px rgb(255,152,0);
+  box-shadow: inset 0 0 0 10px rgb(255,152,0);
+  border-color: rgb(255,152,0); }
+
+.u-checkbox.u-checkbox-warning .u-checkbox-label {
+  color: rgb(255,152,0); }
+
+.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
+  -moz-box-shadow: inset 0 0 0 10px rgb(244,67,54);
+  -webkit-box-shadow: inset 0 0 0 10px rgb(244,67,54);
+  box-shadow: inset 0 0 0 10px rgb(244,67,54);
+  border-color: rgb(244,67,54); }
+
+.u-checkbox.u-checkbox-danger .u-checkbox-label {
+  color: rgb(244,67,54); }
+
+.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
+  -moz-box-shadow: inset 0 0 0 10px rgb(97,97,97);
+  -webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97);
+  box-shadow: inset 0 0 0 10px rgb(97,97,97);
+  border-color: rgb(97,97,97); }
+
+.u-checkbox.u-checkbox-dark .u-checkbox-label {
+  color: rgb(97,97,97); }
+
+.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
+  -moz-box-shadow: inset 0 0 0 10px rgb(0,188,212);
+  -webkit-box-shadow: inset 0 0 0 10px rgb(0,188,212);
+  box-shadow: inset 0 0 0 10px rgb(0,188,212);
+  border-color: rgb(0,188,212); }
+
+.u-checkbox.u-checkbox-info .u-checkbox-label {
+  color: rgb(0,188,212); }
+
+.u-tree li span.u-tree-checkbox {
+  margin: 2px 4px 0 0; }
+
+.u-tree-checkbox {
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  line-height: 1;
+  position: relative;
+  vertical-align: middle; }
+
+.u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
+  background-color: #108ee9;
+  border-color: #108ee9; }
+
+.u-tree-checkbox-inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  background-color: #fff;
+  -webkit-transition: all .3s;
+  transition: all .3s; }
+
+.u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
+  background-color: #108ee9;
+  border-color: #108ee9; }
+
+u-tree-checkbox-disabled .u-tree-checkbox-inner {
+  border-color: #d9d9d9 !important;
+  background-color: #f3f3f3; }
+
+.u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
+  content: ' ';
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  position: absolute;
+  left: 2px;
+  top: 5px;
+  width: 8px;
+  height: 1px; }
+
+.u-tree-checkbox-disabled .u-tree-checkbox-inner {
+  border-color: #d9d9d9 !important;
+  background-color: #f3f3f3; }
+
+.u-tree-checkbox-disabled.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
+  -webkit-animation-name: none;
+  animation-name: none;
+  border-color: #ccc; }
+
+.u-tree-checkbox-disabled .u-tree-checkbox-inner:after {
+  -webkit-animation-name: none;
+  animation-name: none;
+  border-color: #f3f3f3; }
+
+.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
+  -webkit-transform: rotate(45deg) scale(1);
+  -ms-transform: rotate(45deg) scale(1);
+  transform: rotate(45deg) scale(1);
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  display: table;
+  width: 5px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+  -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; }
+
+.u-tree-checkbox-inner:after {
+  -webkit-transform: rotate(45deg) scale(0);
+  -ms-transform: rotate(45deg) scale(0);
+  transform: rotate(45deg) scale(0);
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  display: table;
+  width: 5px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: ' ';
+  -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6); }
+
+.u-tree {
+  margin: 0;
+  padding: 5px;
+  font-size: 12px; }
+
+.u-tree li {
+  padding: 0;
+  margin: 7px 0;
+  list-style: none;
+  white-space: nowrap;
+  outline: 0; }
+
+.u-tree li a[draggable],
+.u-tree li a[draggable="true"] {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* Required to make elements draggable in old WebKit */
+  -khtml-user-drag: element;
+  -webkit-user-drag: element; }
+
+.u-tree li.drag-over > a[draggable] {
+  background-color: #108ee9;
+  color: white;
+  opacity: 0.8; }
+
+.u-tree li.drag-over-gap-top > a[draggable] {
+  border-top: 2px #108ee9 solid; }
+
+.u-tree li.drag-over-gap-bottom > a[draggable] {
+  border-bottom: 2px #108ee9 solid; }
+
+.u-tree li.filter-node > a {
+  color: #f50 !important;
+  font-weight: bold !important; }
+
+.u-tree li ul {
+  margin: 0;
+  padding: 0 0 0 18px; }
+
+.u-tree li a {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: 2px;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  vertical-align: top;
+  color: #666;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease; }
+
+.u-tree li a:hover {
+  background-color: #e7f4fd; }
+
+.u-tree li a.u-tree-node-selected {
+  background-color: #cfe8fb; }
+
+.u-tree li span.u-checkbox {
+  margin: 2px 4px 0 0; }
+
+.u-tree li span.u-tree-switcher,
+.u-tree li span.u-tree-iconEle {
+  margin: 0;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 0 none;
+  cursor: pointer;
+  outline: none; }
+
+.u-tree li span.u-tree-icon_loading:after {
+  display: inline-block;
+  font-family: 'uf';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\E6AE";
+  -webkit-animation: loadingCircle 1s infinite linear;
+  animation: loadingCircle 1s infinite linear;
+  color: #108ee9; }
+
+.u-tree li span.u-tree-switcher.u-tree-switcher-noop {
+  cursor: auto; }
+
+.u-tree li span.u-tree-switcher.u-tree-roots_open,
+.u-tree li span.u-tree-switcher.u-tree-center_open,
+.u-tree li span.u-tree-switcher.u-tree-bottom_open,
+.u-tree li span.u-tree-switcher.u-tree-noline_open {
+  position: relative; }
+
+.u-tree li span.u-tree-switcher.u-tree-roots_open:after,
+.u-tree li span.u-tree-switcher.u-tree-center_open:after,
+.u-tree li span.u-tree-switcher.u-tree-bottom_open:after,
+.u-tree li span.u-tree-switcher.u-tree-noline_open:after {
+  font-size: 18px;
+  font-size: 7px \9;
+  -webkit-transform: scale(0.58333) rotate(0deg);
+  -ms-transform: scale(0.58333) rotate(0deg);
+  transform: scale(0.58333) rotate(0deg);
+  /* IE6-IE8 */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
+  zoom: 1;
+  display: inline-block;
+  font-family: 'uf';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e639";
+  font-weight: bold;
+  position: absolute;
+  top: 0;
+  right: 4px;
+  color: #666;
+  -webkit-transition: -webkit-transform .3s ease;
+  transition: -webkit-transform .3s ease;
+  transition: transform .3s ease;
+  transition: transform .3s ease, -webkit-transform .3s ease; }
+
+:root .u-tree li span.u-tree-switcher.u-tree-roots_open:after,
+:root .u-tree li span.u-tree-switcher.u-tree-center_open:after,
+:root .u-tree li span.u-tree-switcher.u-tree-bottom_open:after,
+:root .u-tree li span.u-tree-switcher.u-tree-noline_open:after {
+  -webkit-filter: none;
+  filter: none; }
+
+:root .u-tree li span.u-tree-switcher.u-tree-roots_open:after,
+:root .u-tree li span.u-tree-switcher.u-tree-center_open:after,
+:root .u-tree li span.u-tree-switcher.u-tree-bottom_open:after,
+:root .u-tree li span.u-tree-switcher.u-tree-noline_open:after {
+  font-size: 18px; }
+
+.u-tree li span.u-tree-switcher.u-tree-roots_close,
+.u-tree li span.u-tree-switcher.u-tree-center_close,
+.u-tree li span.u-tree-switcher.u-tree-bottom_close,
+.u-tree li span.u-tree-switcher.u-tree-noline_close {
+  position: relative;
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; }
+
+.u-tree li span.u-tree-switcher.u-tree-roots_close:after,
+.u-tree li span.u-tree-switcher.u-tree-center_close:after,
+.u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
+.u-tree li span.u-tree-switcher.u-tree-noline_close:after {
+  font-size: 18px;
+  font-size: 7px \9;
+  -webkit-transform: scale(0.58333) rotate(0deg);
+  -ms-transform: scale(0.58333) rotate(0deg);
+  transform: scale(0.58333) rotate(0deg);
+  /* IE6-IE8 */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
+  zoom: 1;
+  display: inline-block;
+  font-family: 'uf';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e639";
+  font-weight: bold;
+  position: absolute;
+  top: 0;
+  right: 4px;
+  color: #666;
+  -webkit-transition: -webkit-transform .3s ease;
+  transition: -webkit-transform .3s ease;
+  transition: transform .3s ease;
+  transition: transform .3s ease, -webkit-transform .3s ease; }
+
+:root .u-tree li span.u-tree-switcher.u-tree-roots_close:after,
+:root .u-tree li span.u-tree-switcher.u-tree-center_close:after,
+:root .u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
+:root .u-tree li span.u-tree-switcher.u-tree-noline_close:after {
+  -webkit-filter: none;
+  filter: none; }
+
+:root .u-tree li span.u-tree-switcher.u-tree-roots_close:after,
+:root .u-tree li span.u-tree-switcher.u-tree-center_close:after,
+:root .u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
+:root .u-tree li span.u-tree-switcher.u-tree-noline_close:after {
+  font-size: 18px; }
+
+.u-tree li span.u-tree-switcher.u-tree-roots_close:after,
+.u-tree li span.u-tree-switcher.u-tree-center_close:after,
+.u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
+.u-tree li span.u-tree-switcher.u-tree-noline_close:after {
+  -webkit-transform: rotate(270deg) scale(0.6);
+  -ms-transform: rotate(270deg) scale(0.6);
+  transform: rotate(270deg) scale(0.6); }
+
+.u-tree-child-tree {
+  display: none; }
+
+.u-tree-child-tree-open {
+  display: block; }
+
+.u-tree-treenode-disabled > span,
+.u-tree-treenode-disabled > a,
+.u-tree-treenode-disabled > a span {
+  color: #ccc;
+  cursor: not-allowed; }
+
+.u-tree-icon__open {
+  margin-right: 2px;
+  vertical-align: top; }
+
+.u-tree-icon__close {
+  margin-right: 2px;
+  vertical-align: top; }
+
+.u-motion-collapse {
+  overflow: hidden; }
+
+.u-motion-collapse-active {
+  -webkit-transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+  transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }

build/Tree.js

@@ -0,0 +1,677 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _util = require('./util');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /* eslint no-console:0 */
+
+
+function noop() {}
+
+var Tree = function (_React$Component) {
+  _inherits(Tree, _React$Component);
+
+  function Tree(props) {
+    _classCallCheck(this, Tree);
+
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+    ['onKeyDown', 'onCheck'].forEach(function (m) {
+      _this[m] = _this[m].bind(_this);
+    });
+    _this.contextmenuKeys = [];
+    _this.checkedKeysChange = true;
+
+    _this.state = {
+      expandedKeys: _this.getDefaultExpandedKeys(props),
+      checkedKeys: _this.getDefaultCheckedKeys(props),
+      selectedKeys: _this.getDefaultSelectedKeys(props),
+      dragNodesKeys: '',
+      dragOverNodeKey: '',
+      dropNodeKey: ''
+    };
+    return _this;
+  }
+
+  Tree.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var expandedKeys = this.getDefaultExpandedKeys(nextProps, true);
+    var checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
+    var selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
+    var st = {};
+    if (expandedKeys) {
+      st.expandedKeys = expandedKeys;
+    }
+    if (checkedKeys) {
+      if (nextProps.checkedKeys === this.props.checkedKeys) {
+        this.checkedKeysChange = false;
+      } else {
+        this.checkedKeysChange = true;
+      }
+      st.checkedKeys = checkedKeys;
+    }
+    if (selectedKeys) {
+      st.selectedKeys = selectedKeys;
+    }
+    this.setState(st);
+  };
+
+  Tree.prototype.onDragStart = function onDragStart(e, treeNode) {
+    this.dragNode = treeNode;
+    this.dragNodesKeys = this.getDragNodes(treeNode);
+    var st = {
+      dragNodesKeys: this.dragNodesKeys
+    };
+    var expandedKeys = this.getExpandedKeys(treeNode, false);
+    if (expandedKeys) {
+      // Controlled expand, save and then reset
+      this.getRawExpandedKeys();
+      st.expandedKeys = expandedKeys;
+    }
+    this.setState(st);
+    this.props.onDragStart({
+      event: e,
+      node: treeNode
+    });
+    this._dropTrigger = false;
+  };
+
+  Tree.prototype.onDragEnterGap = function onDragEnterGap(e, treeNode) {
+    var offsetTop = (0, _util.getOffset)(treeNode.refs.selectHandle).top;
+    var offsetHeight = treeNode.refs.selectHandle.offsetHeight;
+    var pageY = e.pageY;
+    var gapHeight = 2;
+    if (pageY > offsetTop + offsetHeight - gapHeight) {
+      this.dropPosition = 1;
+      return 1;
+    }
+    if (pageY < offsetTop + gapHeight) {
+      this.dropPosition = -1;
+      return -1;
+    }
+    this.dropPosition = 0;
+    return 0;
+  };
+
+  Tree.prototype.onDragEnter = function onDragEnter(e, treeNode) {
+    var enterGap = this.onDragEnterGap(e, treeNode);
+    if (this.dragNode.props.eventKey === treeNode.props.eventKey && enterGap === 0) {
+      this.setState({
+        dragOverNodeKey: ''
+      });
+      return;
+    }
+    var st = {
+      dragOverNodeKey: treeNode.props.eventKey
+    };
+    var expandedKeys = this.getExpandedKeys(treeNode, true);
+    if (expandedKeys) {
+      this.getRawExpandedKeys();
+      st.expandedKeys = expandedKeys;
+    }
+    this.setState(st);
+    this.props.onDragEnter({
+      event: e,
+      node: treeNode,
+      expandedKeys: expandedKeys && [].concat(_toConsumableArray(expandedKeys)) || [].concat(_toConsumableArray(this.state.expandedKeys))
+    });
+  };
+
+  Tree.prototype.onDragOver = function onDragOver(e, treeNode) {
+    this.props.onDragOver({ event: e, node: treeNode });
+  };
+
+  Tree.prototype.onDragLeave = function onDragLeave(e, treeNode) {
+    this.props.onDragLeave({ event: e, node: treeNode });
+  };
+
+  Tree.prototype.onDrop = function onDrop(e, treeNode) {
+    var key = treeNode.props.eventKey;
+    this.setState({
+      dragOverNodeKey: '',
+      dropNodeKey: key
+    });
+    if (this.dragNodesKeys.indexOf(key) > -1) {
+      if (console.warn) {
+        console.warn('can not drop to dragNode(include it\'s children node)');
+      }
+      return false;
+    }
+
+    var posArr = treeNode.props.pos.split('-');
+    var res = {
+      event: e,
+      node: treeNode,
+      dragNode: this.dragNode,
+      dragNodesKeys: [].concat(_toConsumableArray(this.dragNodesKeys)),
+      dropPosition: this.dropPosition + Number(posArr[posArr.length - 1])
+    };
+    if (this.dropPosition !== 0) {
+      res.dropToGap = true;
+    }
+    if ('expandedKeys' in this.props) {
+      res.rawExpandedKeys = [].concat(_toConsumableArray(this._rawExpandedKeys)) || [].concat(_toConsumableArray(this.state.expandedKeys));
+    }
+    this.props.onDrop(res);
+    this._dropTrigger = true;
+  };
+
+  Tree.prototype.onDragEnd = function onDragEnd(e, treeNode) {
+    this.setState({
+      dragOverNodeKey: ''
+    });
+    this.props.onDragEnd({ event: e, node: treeNode });
+  };
+
+  Tree.prototype.onExpand = function onExpand(treeNode) {
+    var _this2 = this;
+
+    var expanded = !treeNode.props.expanded;
+    var controlled = 'expandedKeys' in this.props;
+    var expandedKeys = [].concat(_toConsumableArray(this.state.expandedKeys));
+    var index = expandedKeys.indexOf(treeNode.props.eventKey);
+    if (expanded && index === -1) {
+      expandedKeys.push(treeNode.props.eventKey);
+    } else if (!expanded && index > -1) {
+      expandedKeys.splice(index, 1);
+    }
+    if (!controlled) {
+      this.setState({ expandedKeys: expandedKeys });
+    }
+    this.props.onExpand(expandedKeys, { node: treeNode, expanded: expanded });
+
+    // after data loaded, need set new expandedKeys
+    if (expanded && this.props.loadData) {
+      return this.props.loadData(treeNode).then(function () {
+        if (!controlled) {
+          _this2.setState({ expandedKeys: expandedKeys });
+        }
+      });
+    }
+  };
+
+  Tree.prototype.onCheck = function onCheck(treeNode) {
+    var _this3 = this;
+
+    var checked = !treeNode.props.checked;
+    if (treeNode.props.halfChecked) {
+      checked = true;
+    }
+    var key = treeNode.props.eventKey;
+    var checkedKeys = [].concat(_toConsumableArray(this.state.checkedKeys));
+    var index = checkedKeys.indexOf(key);
+
+    var newSt = {
+      event: 'check',
+      node: treeNode,
+      checked: checked
+    };
+
+    if (this.props.checkStrictly && 'checkedKeys' in this.props) {
+      if (checked && index === -1) {
+        checkedKeys.push(key);
+      }
+      if (!checked && index > -1) {
+        checkedKeys.splice(index, 1);
+      }
+      newSt.checkedNodes = [];
+      (0, _util.loopAllChildren)(this.props.children, function (item, ind, pos, keyOrPos) {
+        if (checkedKeys.indexOf(keyOrPos) !== -1) {
+          newSt.checkedNodes.push(item);
+        }
+      });
+      this.props.onCheck((0, _util.getStrictlyValue)(checkedKeys, this.props.checkedKeys.halfChecked), newSt);
+    } else {
+      if (checked && index === -1) {
+        (function () {
+          _this3.treeNodesStates[treeNode.props.pos].checked = true;
+          var checkedPositions = [];
+          Object.keys(_this3.treeNodesStates).forEach(function (i) {
+            if (_this3.treeNodesStates[i].checked) {
+              checkedPositions.push(i);
+            }
+          });
+          (0, _util.handleCheckState)(_this3.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
+        })();
+      }
+      if (!checked) {
+        this.treeNodesStates[treeNode.props.pos].checked = false;
+        this.treeNodesStates[treeNode.props.pos].halfChecked = false;
+        (0, _util.handleCheckState)(this.treeNodesStates, [treeNode.props.pos], false);
+      }
+      var checkKeys = (0, _util.getCheck)(this.treeNodesStates);
+      newSt.checkedNodes = checkKeys.checkedNodes;
+      newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
+      newSt.halfCheckedKeys = checkKeys.halfCheckedKeys;
+      this.checkKeys = checkKeys;
+
+      this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
+      if (!('checkedKeys' in this.props)) {
+        this.setState({
+          checkedKeys: checkedKeys
+        });
+      }
+      this.props.onCheck(checkedKeys, newSt);
+    }
+  };
+
+  Tree.prototype.onSelect = function onSelect(treeNode) {
+    var props = this.props;
+    var selectedKeys = [].concat(_toConsumableArray(this.state.selectedKeys));
+    var eventKey = treeNode.props.eventKey;
+    var index = selectedKeys.indexOf(eventKey);
+    var selected = void 0;
+    if (index !== -1) {
+      selected = false;
+      selectedKeys.splice(index, 1);
+    } else {
+      selected = true;
+      if (!props.multiple) {
+        selectedKeys.length = 0;
+      }
+      selectedKeys.push(eventKey);
+    }
+    var selectedNodes = [];
+    if (selectedKeys.length) {
+      (0, _util.loopAllChildren)(this.props.children, function (item) {
+        if (selectedKeys.indexOf(item.key) !== -1) {
+          selectedNodes.push(item);
+        }
+      });
+    }
+    var newSt = {
+      event: 'select',
+      node: treeNode,
+      selected: selected,
+      selectedNodes: selectedNodes
+    };
+    if (!('selectedKeys' in this.props)) {
+      this.setState({
+        selectedKeys: selectedKeys
+      });
+    }
+    props.onSelect(selectedKeys, newSt);
+  };
+
+  Tree.prototype.onMouseEnter = function onMouseEnter(e, treeNode) {
+    this.props.onMouseEnter({ event: e, node: treeNode });
+  };
+
+  Tree.prototype.onMouseLeave = function onMouseLeave(e, treeNode) {
+    this.props.onMouseLeave({ event: e, node: treeNode });
+  };
+
+  Tree.prototype.onContextMenu = function onContextMenu(e, treeNode) {
+    var selectedKeys = [].concat(_toConsumableArray(this.state.selectedKeys));
+    var eventKey = treeNode.props.eventKey;
+    if (this.contextmenuKeys.indexOf(eventKey) === -1) {
+      this.contextmenuKeys.push(eventKey);
+    }
+    this.contextmenuKeys.forEach(function (key) {
+      var index = selectedKeys.indexOf(key);
+      if (index !== -1) {
+        selectedKeys.splice(index, 1);
+      }
+    });
+    if (selectedKeys.indexOf(eventKey) === -1) {
+      selectedKeys.push(eventKey);
+    }
+    this.setState({
+      selectedKeys: selectedKeys
+    });
+    this.props.onRightClick({ event: e, node: treeNode });
+  };
+
+  // all keyboard events callbacks run from here at first
+
+
+  Tree.prototype.onKeyDown = function onKeyDown(e) {
+    e.preventDefault();
+  };
+
+  Tree.prototype.getFilterExpandedKeys = function getFilterExpandedKeys(props, expandKeyProp, expandAll) {
+    var keys = props[expandKeyProp];
+    if (!expandAll && !props.autoExpandParent) {
+      return keys || [];
+    }
+    var expandedPositionArr = [];
+    if (props.autoExpandParent) {
+      (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
+        if (keys.indexOf(newKey) > -1) {
+          expandedPositionArr.push(pos);
+        }
+      });
+    }
+    var filterExpandedKeys = [];
+    (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
+      if (expandAll) {
+        filterExpandedKeys.push(newKey);
+      } else if (props.autoExpandParent) {
+        expandedPositionArr.forEach(function (p) {
+          if ((p.split('-').length > pos.split('-').length && (0, _util.isInclude)(pos.split('-'), p.split('-')) || pos === p) && filterExpandedKeys.indexOf(newKey) === -1) {
+            filterExpandedKeys.push(newKey);
+          }
+        });
+      }
+    });
+    return filterExpandedKeys.length ? filterExpandedKeys : keys;
+  };
+
+  Tree.prototype.getDefaultExpandedKeys = function getDefaultExpandedKeys(props, willReceiveProps) {
+    var expandedKeys = willReceiveProps ? undefined : this.getFilterExpandedKeys(props, 'defaultExpandedKeys', props.defaultExpandedKeys.length ? false : props.defaultExpandAll);
+    if ('expandedKeys' in props) {
+      expandedKeys = (props.autoExpandParent ? this.getFilterExpandedKeys(props, 'expandedKeys', false) : props.expandedKeys) || [];
+    }
+    return expandedKeys;
+  };
+
+  Tree.prototype.getDefaultCheckedKeys = function getDefaultCheckedKeys(props, willReceiveProps) {
+    var checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
+    if ('checkedKeys' in props) {
+      checkedKeys = props.checkedKeys || [];
+      if (props.checkStrictly) {
+        if (props.checkedKeys.checked) {
+          checkedKeys = props.checkedKeys.checked;
+        } else if (!Array.isArray(props.checkedKeys)) {
+          checkedKeys = [];
+        }
+      }
+    }
+    return checkedKeys;
+  };
+
+  Tree.prototype.getDefaultSelectedKeys = function getDefaultSelectedKeys(props, willReceiveProps) {
+    var getKeys = function getKeys(keys) {
+      if (props.multiple) {
+        return [].concat(_toConsumableArray(keys));
+      }
+      if (keys.length) {
+        return [keys[0]];
+      }
+      return keys;
+    };
+    var selectedKeys = willReceiveProps ? undefined : getKeys(props.defaultSelectedKeys);
+    if ('selectedKeys' in props) {
+      selectedKeys = getKeys(props.selectedKeys);
+    }
+    return selectedKeys;
+  };
+
+  Tree.prototype.getRawExpandedKeys = function getRawExpandedKeys() {
+    if (!this._rawExpandedKeys && 'expandedKeys' in this.props) {
+      this._rawExpandedKeys = [].concat(_toConsumableArray(this.state.expandedKeys));
+    }
+  };
+
+  Tree.prototype.getOpenTransitionName = function getOpenTransitionName() {
+    var props = this.props;
+    var transitionName = props.openTransitionName;
+    var animationName = props.openAnimation;
+    if (!transitionName && typeof animationName === 'string') {
+      transitionName = props.prefixCls + '-open-' + animationName;
+    }
+    return transitionName;
+  };
+
+  Tree.prototype.getDragNodes = function getDragNodes(treeNode) {
+    var dragNodesKeys = [];
+    var tPArr = treeNode.props.pos.split('-');
+    (0, _util.loopAllChildren)(this.props.children, function (item, index, pos, newKey) {
+      var pArr = pos.split('-');
+      if (treeNode.props.pos === pos || tPArr.length < pArr.length && (0, _util.isInclude)(tPArr, pArr)) {
+        dragNodesKeys.push(newKey);
+      }
+    });
+    return dragNodesKeys;
+  };
+
+  Tree.prototype.getExpandedKeys = function getExpandedKeys(treeNode, expand) {
+    var key = treeNode.props.eventKey;
+    var expandedKeys = this.state.expandedKeys;
+    var expandedIndex = expandedKeys.indexOf(key);
+    var exKeys = void 0;
+    if (expandedIndex > -1 && !expand) {
+      exKeys = [].concat(_toConsumableArray(expandedKeys));
+      exKeys.splice(expandedIndex, 1);
+      return exKeys;
+    }
+    if (expand && expandedKeys.indexOf(key) === -1) {
+      return expandedKeys.concat([key]);
+    }
+  };
+
+  Tree.prototype.filterTreeNode = function filterTreeNode(treeNode) {
+    var filterTreeNode = this.props.filterTreeNode;
+    if (typeof filterTreeNode !== 'function' || treeNode.props.disabled) {
+      return false;
+    }
+    return filterTreeNode.call(this, treeNode);
+  };
+
+  Tree.prototype.renderTreeNode = function renderTreeNode(child, index) {
+    var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+
+    var pos = level + '-' + index;
+    var key = child.key || pos;
+    var state = this.state;
+    var props = this.props;
+
+    // prefer to child's own selectable property if passed
+    var selectable = props.selectable;
+    if (child.props.hasOwnProperty('selectable')) {
+      selectable = child.props.selectable;
+    }
+
+    var cloneProps = {
+      ref: 'treeNode-' + key,
+      root: this,
+      eventKey: key,
+      pos: pos,
+      selectable: selectable,
+      loadData: props.loadData,
+      onMouseEnter: props.onMouseEnter,
+      onMouseLeave: props.onMouseLeave,
+      onRightClick: props.onRightClick,
+      prefixCls: props.prefixCls,
+      showLine: props.showLine,
+      showIcon: props.showIcon,
+      draggable: props.draggable,
+      dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
+      dragOverGapTop: state.dragOverNodeKey === key && this.dropPosition === -1,
+      dragOverGapBottom: state.dragOverNodeKey === key && this.dropPosition === 1,
+      _dropTrigger: this._dropTrigger,
+      expanded: state.expandedKeys.indexOf(key) !== -1,
+      selected: state.selectedKeys.indexOf(key) !== -1,
+      openTransitionName: this.getOpenTransitionName(),
+      openAnimation: props.openAnimation,
+      filterTreeNode: this.filterTreeNode.bind(this)
+    };
+    if (props.checkable) {
+      cloneProps.checkable = props.checkable;
+      if (props.checkStrictly) {
+        if (state.checkedKeys) {
+          cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
+        }
+        if (props.checkedKeys.halfChecked) {
+          cloneProps.halfChecked = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
+        } else {
+          cloneProps.halfChecked = false;
+        }
+      } else {
+        if (this.checkedKeys) {
+          cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
+        }
+        cloneProps.halfChecked = this.halfCheckedKeys.indexOf(key) !== -1;
+      }
+    }
+    if (this.treeNodesStates && this.treeNodesStates[pos]) {
+      (0, _objectAssign2["default"])(cloneProps, this.treeNodesStates[pos].siblingPosition);
+    }
+    return _react2["default"].cloneElement(child, cloneProps);
+  };
+
+  Tree.prototype.render = function render() {
+    var _this4 = this;
+
+    var props = this.props;
+    var domProps = {
+      className: (0, _classnames2["default"])(props.className, props.prefixCls),
+      role: 'tree-node'
+    };
+    if (props.focusable) {
+      domProps.tabIndex = '0';
+      domProps.onKeyDown = this.onKeyDown;
+    }
+    var getTreeNodesStates = function getTreeNodesStates() {
+      _this4.treeNodesStates = {};
+      (0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
+        _this4.treeNodesStates[pos] = {
+          siblingPosition: siblingPosition
+        };
+      });
+    };
+    if (props.showLine && !props.checkable) {
+      getTreeNodesStates();
+    }
+    if (props.checkable && (this.checkedKeysChange || props.loadData)) {
+      if (props.checkStrictly) {
+        getTreeNodesStates();
+      } else if (props._treeNodesStates) {
+        this.treeNodesStates = props._treeNodesStates.treeNodesStates;
+        this.halfCheckedKeys = props._treeNodesStates.halfCheckedKeys;
+        this.checkedKeys = props._treeNodesStates.checkedKeys;
+      } else {
+        (function () {
+          var checkedKeys = _this4.state.checkedKeys;
+          var checkKeys = void 0;
+          if (!props.loadData && _this4.checkKeys && _this4._checkedKeys && (0, _util.arraysEqual)(_this4._checkedKeys, checkedKeys)) {
+            // if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
+            checkKeys = _this4.checkKeys;
+          } else {
+            (function () {
+              var checkedPositions = [];
+              _this4.treeNodesStates = {};
+              (0, _util.loopAllChildren)(props.children, function (item, index, pos, keyOrPos, siblingPosition) {
+                _this4.treeNodesStates[pos] = {
+                  node: item,
+                  key: keyOrPos,
+                  checked: false,
+                  halfChecked: false,
+                  siblingPosition: siblingPosition
+                };
+                if (checkedKeys.indexOf(keyOrPos) !== -1) {
+                  _this4.treeNodesStates[pos].checked = true;
+                  checkedPositions.push(pos);
+                }
+              });
+              // if the parent node's key exists, it all children node will be checked
+              (0, _util.handleCheckState)(_this4.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
+              checkKeys = (0, _util.getCheck)(_this4.treeNodesStates);
+            })();
+          }
+          _this4.halfCheckedKeys = checkKeys.halfCheckedKeys;
+          _this4.checkedKeys = checkKeys.checkedKeys;
+        })();
+      }
+    }
+
+    return _react2["default"].createElement(
+      'ul',
+      _extends({}, domProps, { unselectable: true, ref: 'tree' }),
+      _react2["default"].Children.map(props.children, this.renderTreeNode, this)
+    );
+  };
+
+  return Tree;
+}(_react2["default"].Component);
+
+Tree.propTypes = {
+  prefixCls: _react.PropTypes.string,
+  children: _react.PropTypes.any,
+  showLine: _react.PropTypes.bool,
+  showIcon: _react.PropTypes.bool,
+  selectable: _react.PropTypes.bool,
+  multiple: _react.PropTypes.bool,
+  checkable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.node]),
+  _treeNodesStates: _react.PropTypes.object,
+  checkStrictly: _react.PropTypes.bool,
+  draggable: _react.PropTypes.bool,
+  autoExpandParent: _react.PropTypes.bool,
+  defaultExpandAll: _react.PropTypes.bool,
+  defaultExpandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  expandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  defaultCheckedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  checkedKeys: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.string), _react.PropTypes.object]),
+  defaultSelectedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  selectedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  onExpand: _react.PropTypes.func,
+  onCheck: _react.PropTypes.func,
+  onSelect: _react.PropTypes.func,
+  loadData: _react.PropTypes.func,
+  onMouseEnter: _react.PropTypes.func,
+  onMouseLeave: _react.PropTypes.func,
+  onRightClick: _react.PropTypes.func,
+  onDragStart: _react.PropTypes.func,
+  onDragEnter: _react.PropTypes.func,
+  onDragOver: _react.PropTypes.func,
+  onDragLeave: _react.PropTypes.func,
+  onDrop: _react.PropTypes.func,
+  onDragEnd: _react.PropTypes.func,
+  filterTreeNode: _react.PropTypes.func,
+  openTransitionName: _react.PropTypes.string,
+  openAnimation: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
+};
+
+Tree.defaultProps = {
+  prefixCls: 'rc-tree',
+  showLine: false,
+  showIcon: true,
+  selectable: true,
+  multiple: false,
+  checkable: false,
+  checkStrictly: false,
+  draggable: false,
+  autoExpandParent: true,
+  defaultExpandAll: false,
+  defaultExpandedKeys: [],
+  defaultCheckedKeys: [],
+  defaultSelectedKeys: [],
+  onExpand: noop,
+  onCheck: noop,
+  onSelect: noop,
+  onDragStart: noop,
+  onDragEnter: noop,
+  onDragOver: noop,
+  onDragLeave: noop,
+  onDrop: noop,
+  onDragEnd: noop
+};
+
+exports["default"] = Tree;
+module.exports = exports['default'];

build/TreeNode.js

@@ -0,0 +1,423 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _beeAnimate = require('bee-animate');
+
+var _beeAnimate2 = _interopRequireDefault(_beeAnimate);
+
+var _util = require('./util');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var browserUa = typeof window !== 'undefined' ? (0, _util.browser)(window.navigator) : '';
+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 = '---';
+
+var TreeNode = function (_React$Component) {
+  _inherits(TreeNode, _React$Component);
+
+  function TreeNode(props) {
+    _classCallCheck(this, TreeNode);
+
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+    ['onExpand', 'onCheck', 'onContextMenu', 'onMouseEnter', 'onMouseLeave', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop', 'onDragEnd'].forEach(function (m) {
+      _this[m] = _this[m].bind(_this);
+    });
+    _this.state = {
+      dataLoading: false,
+      dragNodeHighlight: false
+    };
+    return _this;
+  }
+
+  TreeNode.prototype.componentDidMount = function componentDidMount() {
+    if (!this.props.root._treeNodeInstances) {
+      this.props.root._treeNodeInstances = [];
+    }
+    this.props.root._treeNodeInstances.push(this);
+  };
+  // shouldComponentUpdate(nextProps) {
+  //   if (!nextProps.expanded) {
+  //     return false;
+  //   }
+  //   return true;
+  // }
+
+  TreeNode.prototype.onCheck = function onCheck() {
+    this.props.root.onCheck(this);
+  };
+
+  TreeNode.prototype.onSelect = function onSelect() {
+    this.props.root.onSelect(this);
+  };
+
+  TreeNode.prototype.onMouseEnter = function onMouseEnter(e) {
+    e.preventDefault();
+    this.props.root.onMouseEnter(e, this);
+  };
+
+  TreeNode.prototype.onMouseLeave = function onMouseLeave(e) {
+    e.preventDefault();
+    this.props.root.onMouseLeave(e, this);
+  };
+
+  TreeNode.prototype.onContextMenu = function onContextMenu(e) {
+    e.preventDefault();
+    this.props.root.onContextMenu(e, this);
+  };
+
+  TreeNode.prototype.onDragStart = function onDragStart(e) {
+    // console.log('dragstart', this.props.eventKey, e);
+    // e.preventDefault();
+    e.stopPropagation();
+    this.setState({
+      dragNodeHighlight: true
+    });
+    this.props.root.onDragStart(e, this);
+    try {
+      // ie throw error
+      // firefox-need-it
+      e.dataTransfer.setData('text/plain', '');
+    } finally {
+      // empty
+    }
+  };
+
+  TreeNode.prototype.onDragEnter = function onDragEnter(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.root.onDragEnter(e, this);
+  };
+
+  TreeNode.prototype.onDragOver = function onDragOver(e) {
+    // todo disabled
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.root.onDragOver(e, this);
+    return false;
+  };
+
+  TreeNode.prototype.onDragLeave = function onDragLeave(e) {
+    e.stopPropagation();
+    this.props.root.onDragLeave(e, this);
+  };
+
+  TreeNode.prototype.onDrop = function onDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({
+      dragNodeHighlight: false
+    });
+    this.props.root.onDrop(e, this);
+  };
+
+  TreeNode.prototype.onDragEnd = function onDragEnd(e) {
+    e.stopPropagation();
+    this.setState({
+      dragNodeHighlight: false
+    });
+    this.props.root.onDragEnd(e, this);
+  };
+
+  TreeNode.prototype.onExpand = function onExpand() {
+    var _this2 = this;
+
+    var callbackPromise = this.props.root.onExpand(this);
+    if (callbackPromise && (typeof callbackPromise === 'undefined' ? 'undefined' : _typeof(callbackPromise)) === 'object') {
+      (function () {
+        var setLoading = function setLoading(dataLoading) {
+          _this2.setState({ dataLoading: dataLoading });
+        };
+        setLoading(true);
+        callbackPromise.then(function () {
+          setLoading(false);
+        }, function () {
+          setLoading(false);
+        });
+      })();
+    }
+  };
+
+  // keyboard event support
+
+
+  TreeNode.prototype.onKeyDown = function onKeyDown(e) {
+    e.preventDefault();
+  };
+
+  TreeNode.prototype.renderSwitcher = function renderSwitcher(props, expandedState) {
+    var prefixCls = props.prefixCls;
+    var switcherCls = _defineProperty({}, prefixCls + '-switcher', true);
+    if (!props.showLine) {
+      switcherCls[prefixCls + '-noline_' + expandedState] = true;
+    } else if (props.pos === '0-0') {
+      switcherCls[prefixCls + '-roots_' + expandedState] = true;
+    } else {
+      switcherCls[prefixCls + '-center_' + expandedState] = !props.last;
+      switcherCls[prefixCls + '-bottom_' + expandedState] = props.last;
+    }
+    if (props.disabled) {
+      switcherCls[prefixCls + '-switcher-disabled'] = true;
+      return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls) });
+    }
+    return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls), onClick: this.onExpand });
+  };
+
+  TreeNode.prototype.renderCheckbox = function renderCheckbox(props) {
+    var prefixCls = props.prefixCls;
+    var checkboxCls = _defineProperty({}, prefixCls + '-checkbox', true);
+    if (props.checked) {
+      checkboxCls[prefixCls + '-checkbox-checked'] = true;
+    } else if (props.halfChecked) {
+      checkboxCls[prefixCls + '-checkbox-indeterminate'] = true;
+    }
+    var customEle = null;
+    if (typeof props.checkable !== 'boolean') {
+      customEle = props.checkable;
+    }
+    if (props.disabled || props.disableCheckbox) {
+      checkboxCls[prefixCls + '-checkbox-disabled'] = true;
+      return _react2["default"].createElement(
+        'span',
+        { ref: 'checkbox', className: (0, _classnames2["default"])(checkboxCls) },
+        customEle
+      );
+    }
+    return _react2["default"].createElement(
+      'span',
+      { ref: 'checkbox',
+        className: (0, _classnames2["default"])(checkboxCls),
+        onClick: this.onCheck
+      },
+      customEle
+    );
+  };
+
+  TreeNode.prototype.renderChildren = function renderChildren(props) {
+    var renderFirst = this.renderFirst;
+    this.renderFirst = 1;
+    var transitionAppear = true;
+    if (!renderFirst && props.expanded) {
+      transitionAppear = false;
+    }
+    var children = props.children;
+    var newChildren = children;
+    if (children && (children.type === TreeNode || Array.isArray(children) && children.every(function (item) {
+      return item.type === TreeNode;
+    }))) {
+      var _cls;
+
+      var cls = (_cls = {}, _defineProperty(_cls, props.prefixCls + '-child-tree', true), _defineProperty(_cls, props.prefixCls + '-child-tree-open', props.expanded), _cls);
+      if (props.showLine) {
+        cls[props.prefixCls + '-line'] = !props.last;
+      }
+      var animProps = {};
+      if (props.openTransitionName) {
+        animProps.transitionName = props.openTransitionName;
+      } else if (_typeof(props.openAnimation) === 'object') {
+        animProps.animation = (0, _objectAssign2["default"])({}, props.openAnimation);
+        if (!transitionAppear) {
+          delete animProps.animation.appear;
+        }
+      }
+      newChildren = _react2["default"].createElement(
+        _beeAnimate2["default"],
+        _extends({}, animProps, {
+          showProp: 'data-expanded',
+          transitionAppear: transitionAppear,
+          component: ''
+        }),
+        !props.expanded ? null : _react2["default"].createElement(
+          'ul',
+          { className: (0, _classnames2["default"])(cls), 'data-expanded': props.expanded },
+          _react2["default"].Children.map(children, function (item, index) {
+            return props.root.renderTreeNode(item, index, props.pos);
+          }, props.root)
+        )
+      );
+    }
+    return newChildren;
+  };
+
+  TreeNode.prototype.render = function render() {
+    var _iconEleCls,
+        _this3 = this;
+
+    var props = this.props;
+    var prefixCls = props.prefixCls;
+    var expandedState = props.expanded ? 'open' : 'close';
+    var iconState = expandedState;
+
+    var canRenderSwitcher = true;
+    var content = props.title;
+    var newChildren = this.renderChildren(props);
+    if (!newChildren || newChildren === props.children) {
+      // content = newChildren;
+      newChildren = null;
+      if (!props.loadData || props.isLeaf) {
+        canRenderSwitcher = false;
+        iconState = 'docu';
+      }
+    }
+    // For performance, does't render children into dom when `!props.expanded` (move to Animate)
+    // if (!props.expanded) {
+    //   newChildren = null;
+    // }
+
+    var iconEleCls = (_iconEleCls = {}, _defineProperty(_iconEleCls, prefixCls + '-iconEle', true), _defineProperty(_iconEleCls, prefixCls + '-icon_loading', this.state.dataLoading), _defineProperty(_iconEleCls, prefixCls + '-icon__' + iconState, true), _iconEleCls);
+
+    var selectHandle = function selectHandle() {
+      var icon = props.showIcon || props.loadData && _this3.state.dataLoading ? _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }) : null;
+      var title = _react2["default"].createElement(
+        'span',
+        { className: prefixCls + '-title' },
+        content
+      );
+      var wrap = prefixCls + '-node-content-wrapper';
+      var domProps = {
+        className: wrap + ' ' + wrap + '-' + (iconState === expandedState ? iconState : 'normal')
+      };
+      if (!props.disabled) {
+        if (props.selected || !props._dropTrigger && _this3.state.dragNodeHighlight) {
+          domProps.className += ' ' + prefixCls + '-node-selected';
+        }
+        domProps.onClick = function (e) {
+          e.preventDefault();
+          if (props.selectable) {
+            _this3.onSelect();
+          }
+          // not fire check event
+          // if (props.checkable) {
+          //   this.onCheck();
+          // }
+        };
+        if (props.onRightClick) {
+          domProps.onContextMenu = _this3.onContextMenu;
+        }
+        if (props.onMouseEnter) {
+          domProps.onMouseEnter = _this3.onMouseEnter;
+        }
+        if (props.onMouseLeave) {
+          domProps.onMouseLeave = _this3.onMouseLeave;
+        }
+        if (props.draggable) {
+          domProps.className += ' draggable';
+          if (ieOrEdge) {
+            // ie bug!
+            domProps.href = '#';
+          }
+          domProps.draggable = true;
+          domProps['aria-grabbed'] = true;
+          domProps.onDragStart = _this3.onDragStart;
+        }
+      }
+      return _react2["default"].createElement(
+        'a',
+        _extends({ ref: 'selectHandle', title: typeof content === 'string' ? content : '' }, domProps),
+        icon,
+        title
+      );
+    };
+
+    var liProps = {};
+    if (props.draggable) {
+      liProps.onDragEnter = this.onDragEnter;
+      liProps.onDragOver = this.onDragOver;
+      liProps.onDragLeave = this.onDragLeave;
+      liProps.onDrop = this.onDrop;
+      liProps.onDragEnd = this.onDragEnd;
+    }
+
+    var disabledCls = '';
+    var dragOverCls = '';
+    if (props.disabled) {
+      disabledCls = prefixCls + '-treenode-disabled';
+    } else if (props.dragOver) {
+      dragOverCls = 'drag-over';
+    } else if (props.dragOverGapTop) {
+      dragOverCls = 'drag-over-gap-top';
+    } else if (props.dragOverGapBottom) {
+      dragOverCls = 'drag-over-gap-bottom';
+    }
+
+    var filterCls = props.filterTreeNode(this) ? 'filter-node' : '';
+
+    var noopSwitcher = function noopSwitcher() {
+      var _cls2;
+
+      var cls = (_cls2 = {}, _defineProperty(_cls2, prefixCls + '-switcher', true), _defineProperty(_cls2, prefixCls + '-switcher-noop', true), _cls2);
+      if (props.showLine) {
+        cls[prefixCls + '-center_docu'] = !props.last;
+        cls[prefixCls + '-bottom_docu'] = props.last;
+      } else {
+        cls[prefixCls + '-noline_docu'] = true;
+      }
+      return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(cls) });
+    };
+
+    return _react2["default"].createElement(
+      'li',
+      _extends({}, liProps, { ref: 'li',
+        className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls)
+      }),
+      canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher(),
+      props.checkable ? this.renderCheckbox(props) : null,
+      selectHandle(),
+      newChildren
+    );
+  };
+
+  return TreeNode;
+}(_react2["default"].Component);
+
+TreeNode.isTreeNode = 1;
+
+TreeNode.propTypes = {
+  prefixCls: _react.PropTypes.string,
+  disabled: _react.PropTypes.bool,
+  disableCheckbox: _react.PropTypes.bool,
+  expanded: _react.PropTypes.bool,
+  isLeaf: _react.PropTypes.bool,
+  root: _react.PropTypes.object,
+  onSelect: _react.PropTypes.func
+};
+
+TreeNode.defaultProps = {
+  title: defaultTitle
+};
+
+exports["default"] = TreeNode;
+module.exports = exports['default'];

build/index.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AntTreeNode = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Tree = require('./Tree');
+
+var _Tree2 = _interopRequireDefault(_Tree);
+
+var _TreeNode = require('./TreeNode');
+
+var _TreeNode2 = _interopRequireDefault(_TreeNode);
+
+var _openAnimation = require('./openAnimation');
+
+var _openAnimation2 = _interopRequireDefault(_openAnimation);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var AntTreeNodeProps = {
+  disabled: _react.PropTypes.bool,
+  disableCheckbox: _react.PropTypes.bool,
+  title: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
+  key: _react.PropTypes.string,
+  isLeaf: _react.PropTypes.bool
+};
+
+var AntTreeNode = exports.AntTreeNode = function (_Component) {
+  _inherits(AntTreeNode, _Component);
+
+  function AntTreeNode() {
+    _classCallCheck(this, AntTreeNode);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  AntTreeNode.prototype.render = function render() {
+    return _react2["default"].createElement(AntTreeNode, this.props);
+  };
+
+  return AntTreeNode;
+}(_react.Component);
+
+AntTreeNode.AntTreeNodeProps = AntTreeNodeProps;
+
+var TreeProps = {
+  showLine: _react.PropTypes.bool,
+  className: _react.PropTypes.string,
+  /** 是否支持多选 */
+  multiple: _react.PropTypes.bool,
+  /** 是否自动展开父节点 */
+  autoExpandParent: _react.PropTypes.bool,
+  /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
+  checkStrictly: _react.PropTypes.bool,
+  /** 是否支持选中 */
+  checkable: _react.PropTypes.bool,
+  /** 默认展开所有树节点 */
+  defaultExpandAll: _react.PropTypes.bool,
+  /** 默认展开指定的树节点 */
+  defaultExpandedKeys: _react.PropTypes.array,
+  /** （受控）展开指定的树节点 */
+  expandedKeys: _react.PropTypes.array,
+  /** （受控）选中复选框的树节点 */
+  checkedKeys: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object]),
+  /** 默认选中复选框的树节点 */
+  defaultCheckedKeys: _react.PropTypes.array,
+  /** （受控）设置选中的树节点 */
+  selectedKeys: _react.PropTypes.array,
+  /** 默认选中的树节点 */
+  defaultSelectedKeys: _react.PropTypes.array,
+  /** 展开/收起节点时触发 */
+  onExpand: _react.PropTypes.func,
+  /** 点击复选框触发 */
+  onCheck: _react.PropTypes.func,
+  /** 点击树节点触发 */
+  onSelect: _react.PropTypes.func,
+  /** filter some AntTreeNodes as you need. it should return true */
+  filterAntTreeNode: _react.PropTypes.func,
+  /** 异步加载数据 */
+  loadData: _react.PropTypes.func,
+  /** 响应右键点击 */
+  onRightClick: _react.PropTypes.func,
+  /** 设置节点可拖拽（IE>8）*/
+  draggable: _react.PropTypes.bool,
+  /** 开始拖拽时调用 */
+  onDragStart: _react.PropTypes.func,
+  /** dragenter 触发时调用 */
+  onDragEnter: _react.PropTypes.func,
+  /** dragover 触发时调用 */
+  onDragOver: _react.PropTypes.func,
+  /** dragleave 触发时调用 */
+  onDragLeave: _react.PropTypes.func,
+  /** drop 触发时调用 */
+  onDrop: _react.PropTypes.func,
+  style: _react2["default"].CSSProperties,
+  prefixCls: _react.PropTypes.string,
+  filterTreeNode: _react.PropTypes.func
+};
+
+var defaultProps = {
+  prefixCls: 'u-tree',
+  checkable: false,
+  showIcon: false,
+  openAnimation: _openAnimation2["default"]
+};
+
+var Tree = function (_Component2) {
+  _inherits(Tree, _Component2);
+
+  function Tree() {
+    _classCallCheck(this, Tree);
+
+    return _possibleConstructorReturn(this, _Component2.apply(this, arguments));
+  }
+
+  Tree.prototype.render = function render() {
+    var props = this.props;
+    var checkable = props.checkable;
+    return _react2["default"].createElement(
+      _Tree2["default"],
+      _extends({}, props, {
+        checkable: checkable ? _react2["default"].createElement('span', { className: props.prefixCls + '-checkbox-inner' }) : checkable
+      }),
+      this.props.children
+    );
+  };
+
+  return Tree;
+}(_react.Component);
+
+Tree.TreeNode = _TreeNode2["default"];
+Tree.TreeProps = TreeProps;
+Tree.defaultProps = defaultProps;
+exports["default"] = Tree;

build/openAnimation.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _tinperBeeCore = require('tinper-bee-core');
+
+function animate(node, show, done) {
+  var height = void 0;
+  return (0, _tinperBeeCore.cssAnimation)(node, 'u-motion-collapse', {
+    start: function start() {
+      if (!show) {
+        node.style.height = node.offsetHeight + 'px';
+      } else {
+        height = node.offsetHeight;
+        node.style.height = 0;
+      }
+    },
+    active: function active() {
+      node.style.height = (show ? height : 0) + 'px';
+    },
+    end: function end() {
+      node.style.height = '';
+      done();
+    }
+  });
+}
+
+var animation = {
+  enter: function enter(node, done) {
+    return animate(node, true, done);
+  },
+  leave: function leave(node, done) {
+    return animate(node, false, done);
+  },
+  appear: function appear(node, done) {
+    return animate(node, true, done);
+  }
+};
+
+exports["default"] = animation;
+module.exports = exports['default'];

build/util.js

@@ -1,14 +1,31 @@
-/* eslint no-loop-func: 0*/
+'use strict';
 
-import React from 'react';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.browser = browser;
+exports.getOffset = getOffset;
+exports.loopAllChildren = loopAllChildren;
+exports.isInclude = isInclude;
+exports.filterParentPosition = filterParentPosition;
+exports.handleCheckState = handleCheckState;
+exports.getCheck = getCheck;
+exports.getStrictlyValue = getStrictlyValue;
+exports.arraysEqual = arraysEqual;
 
-export function browser(navigator) {
-  let tem;
-  const ua = navigator.userAgent;
-  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function browser(navigator) {
+  var tem = void 0;
+  var ua = navigator.userAgent;
+  var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
   if (/trident/i.test(M[1])) {
     tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
-    return `IE ${tem[1] || ''}`;
+    return 'IE ' + (tem[1] || '');
   }
   if (M[1] === 'Chrome') {
     tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
@@ -51,8 +68,13 @@ export function browser(navigator) {
 // }
 
 /* eslint-disable */
-export function getOffset(ele) {
-  let doc, win, docElem, rect;
+/* eslint no-loop-func: 0*/
+
+function getOffset(ele) {
+  var doc = void 0,
+      win = void 0,
+      docElem = void 0,
+      rect = void 0;
 
   if (!ele.getClientRects().length) {
     return { top: 0, left: 0 };
@@ -76,7 +98,7 @@ export function getOffset(ele) {
 /* eslint-enable */
 
 function getChildrenlength(children) {
-  let len = 1;
+  var len = 1;
   if (Array.isArray(children)) {
     len = children.length;
   }
@@ -94,13 +116,13 @@ function getSiblingPosition(index, len, siblingPosition) {
   return siblingPosition;
 }
 
-export function loopAllChildren(childs, callback, parent) {
-  const loop = (children, level, _parent) => {
-    const len = getChildrenlength(children);
-    React.Children.forEach(children, (item, index) => {
-      const pos = `${level}-${index}`;
+function loopAllChildren(childs, callback, parent) {
+  var loop = function loop(children, level, _parent) {
+    var len = getChildrenlength(children);
+    _react2["default"].Children.forEach(children, function (item, index) {
+      var pos = level + '-' + index;
       if (item.props.children && item.type && item.type.isTreeNode) {
-        loop(item.props.children, pos, { node: item, pos });
+        loop(item.props.children, pos, { node: item, pos: pos });
       }
       callback(item, index, pos, item.key || pos, getSiblingPosition(index, len, {}), _parent);
     });
@@ -108,8 +130,8 @@ export function loopAllChildren(childs, callback, parent) {
   loop(childs, 0, parent);
 }
 
-export function isInclude(smallArray, bigArray) {
-  return smallArray.every((ii, i) => {
+function isInclude(smallArray, bigArray) {
+  return smallArray.every(function (ii, i) {
     return ii === bigArray[i];
   });
 }
@@ -117,32 +139,43 @@ export function isInclude(smallArray, bigArray) {
 
 
 // arr.length === 628, use time: ~20ms
-export function filterParentPosition(arr) {
-  const levelObj = {};
-  arr.forEach((item) => {
-    const posLen = item.split('-').length;
+function filterParentPosition(arr) {
+  var levelObj = {};
+  arr.forEach(function (item) {
+    var posLen = item.split('-').length;
     if (!levelObj[posLen]) {
       levelObj[posLen] = [];
     }
     levelObj[posLen].push(item);
   });
-  const levelArr = Object.keys(levelObj).sort();
-  for (let i = 0; i < levelArr.length; i++) {
+  var levelArr = Object.keys(levelObj).sort();
+
+  var _loop = function _loop(i) {
     if (levelArr[i + 1]) {
-      levelObj[levelArr[i]].forEach(ii => {
-        for (let j = i + 1; j < levelArr.length; j++) {
-          levelObj[levelArr[j]].forEach((_i, index) => {
+      levelObj[levelArr[i]].forEach(function (ii) {
+        var _loop2 = function _loop2(j) {
+          levelObj[levelArr[j]].forEach(function (_i, index) {
             if (isInclude(ii.split('-'), _i.split('-'))) {
               levelObj[levelArr[j]][index] = null;
             }
           });
-          levelObj[levelArr[j]] = levelObj[levelArr[j]].filter(p => p);
+          levelObj[levelArr[j]] = levelObj[levelArr[j]].filter(function (p) {
+            return p;
+          });
+        };
+
+        for (var j = i + 1; j < levelArr.length; j++) {
+          _loop2(j);
         }
       });
     }
+  };
+
+  for (var i = 0; i < levelArr.length; i++) {
+    _loop(i);
   }
-  let nArr = [];
-  levelArr.forEach(i => {
+  var nArr = [];
+  levelArr.forEach(function (i) {
     nArr = nArr.concat(levelObj[i]);
   });
   return nArr;
@@ -153,8 +186,8 @@ export function filterParentPosition(arr) {
 
 
 function stripTail(str) {
-  const arr = str.match(/(.+)(-[^-]+)$/);
-  let st = '';
+  var arr = str.match(/(.+)(-[^-]+)$/);
+  var st = '';
   if (arr && arr.length === 3) {
     st = arr[1];
   }
@@ -164,16 +197,16 @@ function splitPosition(pos) {
   return pos.split('-');
 }
 
-export function handleCheckState(obj, checkedPositionArr, checkIt) {
+function handleCheckState(obj, checkedPositionArr, checkIt) {
   // console.log(stripTail('0-101-000'));
-  let objKeys = Object.keys(obj);
+  var objKeys = Object.keys(obj);
   // let s = Date.now();
-  objKeys.forEach((i, index) => {
-    const iArr = splitPosition(i);
-    let saved = false;
-    checkedPositionArr.forEach((_pos) => {
+  objKeys.forEach(function (i, index) {
+    var iArr = splitPosition(i);
+    var saved = false;
+    checkedPositionArr.forEach(function (_pos) {
       // 设置子节点，全选或全不选
-      const _posArr = splitPosition(_pos);
+      var _posArr = splitPosition(_pos);
       if (iArr.length > _posArr.length && isInclude(_posArr, iArr)) {
         obj[i].halfChecked = false;
         obj[i].checked = checkIt;
@@ -190,29 +223,32 @@ export function handleCheckState(obj, checkedPositionArr, checkIt) {
   });
   // TODO: 循环 2470000 次耗时约 1400 ms。 性能瓶颈！
   // console.log(Date.now()-s, checkedPositionArr.length * objKeys.length);
-  objKeys = objKeys.filter(i => i); // filter non null;
+  objKeys = objKeys.filter(function (i) {
+    return i;
+  }); // filter non null;
 
-  for (let pIndex = 0; pIndex < checkedPositionArr.length; pIndex++) {
+  var _loop3 = function _loop3(_pIndex) {
     // 循环设置父节点的 选中 或 半选状态
-    const loop = (__pos) => {
-      const _posLen = splitPosition(__pos).length;
-      if (_posLen <= 2) { // e.g. '0-0', '0-1'
+    var loop = function loop(__pos) {
+      var _posLen = splitPosition(__pos).length;
+      if (_posLen <= 2) {
+        // e.g. '0-0', '0-1'
         return;
       }
-      let sibling = 0;
-      let siblingChecked = 0;
-      const parentPosition = stripTail(__pos);
-      objKeys.forEach((i /* , index*/) => {
-        const iArr = splitPosition(i);
+      var sibling = 0;
+      var siblingChecked = 0;
+      var parentPosition = stripTail(__pos);
+      objKeys.forEach(function (i /* , index*/) {
+        var iArr = splitPosition(i);
         if (iArr.length === _posLen && isInclude(splitPosition(parentPosition), iArr)) {
           sibling++;
           if (obj[i].checked) {
             siblingChecked++;
-            const _i = checkedPositionArr.indexOf(i);
+            var _i = checkedPositionArr.indexOf(i);
             if (_i > -1) {
               checkedPositionArr.splice(_i, 1);
-              if (_i <= pIndex) {
-                pIndex--;
+              if (_i <= _pIndex) {
+                _pIndex--;
               }
             }
           } else if (obj[i].halfChecked) {
@@ -222,7 +258,7 @@ export function handleCheckState(obj, checkedPositionArr, checkIt) {
         }
       });
       // objKeys = objKeys.filter(i => i); // filter non null;
-      const parent = obj[parentPosition];
+      var parent = obj[parentPosition];
       // sibling 不会等于0
       // 全不选 - 全选 - 半选
       if (siblingChecked === 0) {
@@ -237,18 +273,23 @@ export function handleCheckState(obj, checkedPositionArr, checkIt) {
       }
       loop(parentPosition);
     };
-    loop(checkedPositionArr[pIndex], pIndex);
+    loop(checkedPositionArr[_pIndex], _pIndex);
+    pIndex = _pIndex;
+  };
+
+  for (var pIndex = 0; pIndex < checkedPositionArr.length; pIndex++) {
+    _loop3(pIndex);
   }
   // console.log(Date.now()-s, objKeys.length, checkIt);
 }
 
-export function getCheck(treeNodesStates) {
-  const halfCheckedKeys = [];
-  const checkedKeys = [];
-  const checkedNodes = [];
-  const checkedNodesPositions = [];
-  Object.keys(treeNodesStates).forEach((item) => {
-    const itemObj = treeNodesStates[item];
+function getCheck(treeNodesStates) {
+  var halfCheckedKeys = [];
+  var checkedKeys = [];
+  var checkedNodes = [];
+  var checkedNodesPositions = [];
+  Object.keys(treeNodesStates).forEach(function (item) {
+    var itemObj = treeNodesStates[item];
     if (itemObj.checked) {
       checkedKeys.push(itemObj.key);
       checkedNodes.push(itemObj.node);
@@ -258,18 +299,18 @@ export function getCheck(treeNodesStates) {
     }
   });
   return {
-    halfCheckedKeys, checkedKeys, checkedNodes, checkedNodesPositions, treeNodesStates,
+    halfCheckedKeys: halfCheckedKeys, checkedKeys: checkedKeys, checkedNodes: checkedNodes, checkedNodesPositions: checkedNodesPositions, treeNodesStates: treeNodesStates
   };
 }
 
-export function getStrictlyValue(checkedKeys, halfChecked) {
+function getStrictlyValue(checkedKeys, halfChecked) {
   if (halfChecked) {
-    return { checked: checkedKeys, halfChecked };
+    return { checked: checkedKeys, halfChecked: halfChecked };
   }
   return checkedKeys;
 }
 
-export function arraysEqual(a, b) {
+function arraysEqual(a, b) {
   if (a === b) return true;
   if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') {
     return false;
@@ -279,8 +320,8 @@ export function arraysEqual(a, b) {
   // If you don't care about the order of the elements inside
   // the array, you should sort both arrays here.
 
-  for (let i = 0; i < a.length; ++i) {
+  for (var i = 0; i < a.length; ++i) {
     if (a[i] !== b[i]) return false;
   }
   return true;
-}
+}

package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "bee-animate": "latest",
-    "bee-checkbox": "^0.1.4",
+    "bee-checkbox": "latest",
     "bee-form-control": "^0.1.5",
     "classnames": "^2.2.5",
     "object-assign": "latest",
@@ -43,9 +43,9 @@
   "devDependencies": {
     "chai": "^3.5.0",
     "enzyme": "^2.4.1",
-    "react": "~0.14.0",
+    "react": "15.3.2",
     "react-addons-test-utils": "15.3.2",
-    "react-dom": "~0.14.0",
+    "react-dom": "15.3.2",
     "console-polyfill": "~0.2.1",
     "es5-shim": "~4.1.10",
     "bee-panel": "latest",

src copy/Tree.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import RcTree, { TreeNode } from './src/index';
-import animation from './openAnimation';
-
-export interface AntTreeNodeProps {
-  disabled?: boolean;
-  disableCheckbox?: boolean;
-  title?: string | React.ReactNode;
-  key?: string;
-  isLeaf?: boolean;
-}
-
-export class AntTreeNode extends React.Component<AntTreeNodeProps, {}> {
-  render() {
-    return <AntTreeNode {...this.props} />;
-  }
-}
-
-export interface AntTreeNodeEvent {
-  event: 'check' | 'select';
-  node: AntTreeNode;
-  checked?: boolean;
-  checkedNodes?: Array<AntTreeNode>;
-  selected?: boolean;
-  selectedNodes?: Array<AntTreeNode>;
-}
-
-export interface AntTreeNodeMouseEvent {
-  node: AntTreeNode;
-  event: React.MouseEventHandler<any>;
-}
-
-export interface TreeProps {
-  showLine?: boolean;
-  className?: string;
-  /** 是否支持多选 */
-  multiple?: boolean;
-  /** 是否自动展开父节点 */
-  autoExpandParent?: boolean;
-  /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
-  checkStrictly?: boolean;
-  /** 是否支持选中 */
-  checkable?: boolean;
-  /** 默认展开所有树节点 */
-  defaultExpandAll?: boolean;
-  /** 默认展开指定的树节点 */
-  defaultExpandedKeys?: Array<string>;
-  /** （受控）展开指定的树节点 */
-  expandedKeys?: Array<string>;
-  /** （受控）选中复选框的树节点 */
-  checkedKeys?: Array<string> | { checked: Array<string>, halfChecked: Array<string> };
-  /** 默认选中复选框的树节点 */
-  defaultCheckedKeys?: Array<string>;
-  /** （受控）设置选中的树节点 */
-  selectedKeys?: Array<string>;
-  /** 默认选中的树节点 */
-  defaultSelectedKeys?: Array<string>;
-  /** 展开/收起节点时触发 */
-  onExpand?: (expandedKeys: Array<string>, info: { node: AntTreeNode, expanded: boolean }) => void | PromiseLike<any>;
-  /** 点击复选框触发 */
-  onCheck?: (checkedKeys: Array<string>, e: AntTreeNodeEvent) => void;
-  /** 点击树节点触发 */
-  onSelect?: (selectedKeys: Array<string>, e: AntTreeNodeEvent) => void;
-  /** filter some AntTreeNodes as you need. it should return true */
-  filterAntTreeNode?: (node: AntTreeNode) => boolean;
-  /** 异步加载数据 */
-  loadData?: (node: AntTreeNode) => PromiseLike<any>;
-  /** 响应右键点击 */
-  onRightClick?: (options: AntTreeNodeMouseEvent) => void;
-  /** 设置节点可拖拽（IE>8）*/
-  draggable?: boolean;
-  /** 开始拖拽时调用 */
-  onDragStart?: (options: AntTreeNodeMouseEvent) => void;
-  /** dragenter 触发时调用 */
-  onDragEnter?: (options: AntTreeNodeMouseEvent) => void;
-  /** dragover 触发时调用 */
-  onDragOver?: (options: AntTreeNodeMouseEvent) => void;
-  /** dragleave 触发时调用 */
-  onDragLeave?: (options: AntTreeNodeMouseEvent) => void;
-  /** drop 触发时调用 */
-  onDrop?: (options: AntTreeNodeMouseEvent) => void;
-  style?: React.CSSProperties;
-  prefixCls?: string;
-  filterTreeNode?: (node: AntTreeNode) => boolean;
-}
-
-export default class Tree extends React.Component<TreeProps, any> {
-  static TreeNode = TreeNode;
-
-  static defaultProps = {
-    prefixCls: 'ant-tree',
-    checkable: false,
-    showIcon: false,
-    openAnimation: animation,
-  };
-
-  render() {
-    const props = this.props;
-    let checkable = props.checkable;
-    return (
-      <RcTree
-        {...props}
-        checkable={checkable ? (<span className={`${props.prefixCls}-checkbox-inner`} />) : checkable }
-      >
-        {this.props.children}
-      </RcTree>
-    );
-  }
-}

src copy/Tree.scss

@@ -1,313 +0,0 @@
-@import "../node_modules/tinper-bee-core/scss/minxin-variables";
-@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
-@import "../node_modules/bee-checkbox/src/Checkbox";
-
-
-//css 分割线
-.ant-tree li span.ant-tree-checkbox {
-    margin: 2px 4px 0 0;
-}
-.ant-tree-checkbox {
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    vertical-align: middle;
-}
-.ant-tree-checkbox-checked .ant-tree-checkbox-inner, .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
-    background-color: #108ee9;
-    border-color: #108ee9;
-}
-.ant-tree-checkbox-inner {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    border: 1px solid #d9d9d9;
-    border-radius: 3px;
-    background-color: #fff;
-    -webkit-transition: all .3s;
-    transition: all .3s;
-}
-.ant-tree-checkbox-checked .ant-tree-checkbox-inner, .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
-    background-color: #108ee9;
-    border-color: #108ee9;
-}
-ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
-    border-color: #d9d9d9 !important;
-    background-color: #f3f3f3;
-}
-.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after {
-    content: ' ';
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
-    position: absolute;
-    left: 2px;
-    top: 5px;
-    width: 8px;
-    height: 1px;
-}
-.ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
-    border-color: #d9d9d9 !important;
-    background-color: #f3f3f3;
-}
-.ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
-    -webkit-animation-name: none;
-    animation-name: none;
-    border-color: #ccc;
-}
-.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after {
-    -webkit-animation-name: none;
-    animation-name: none;
-    border-color: #f3f3f3;
-}
-.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
-    -webkit-transform: rotate(45deg) scale(1);
-    -ms-transform: rotate(45deg) scale(1);
-    transform: rotate(45deg) scale(1);
-    position: absolute;
-    left: 4px;
-    top: 1px;
-    display: table;
-    width: 5px;
-    height: 8px;
-    border: 2px solid #fff;
-    border-top: 0;
-    border-left: 0;
-    content: ' ';
-    -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-}
-.ant-tree-checkbox-inner:after {
-    -webkit-transform: rotate(45deg) scale(0);
-    -ms-transform: rotate(45deg) scale(0);
-    transform: rotate(45deg) scale(0);
-    position: absolute;
-    left: 4px;
-    top: 1px;
-    display: table;
-    width: 5px;
-    height: 8px;
-    border: 2px solid #fff;
-    border-top: 0;
-    border-left: 0;
-    content: ' ';
-    -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
-    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
-}
-.ant-tree {
-  margin: 0;
-  padding: 5px;
-  font-size: 12px;
-}
-.ant-tree li {
-  padding: 0;
-  margin: 7px 0;
-  list-style: none;
-  white-space: nowrap;
-  outline: 0;
-}
-.ant-tree li a[draggable],
-.ant-tree li a[draggable="true"] {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  /* Required to make elements draggable in old WebKit */
-  -khtml-user-drag: element;
-  -webkit-user-drag: element;
-}
-.ant-tree li.drag-over > a[draggable] {
-  background-color: #108ee9;
-  color: white;
-  opacity: 0.8;
-}
-.ant-tree li.drag-over-gap-top > a[draggable] {
-  border-top: 2px #108ee9 solid;
-}
-.ant-tree li.drag-over-gap-bottom > a[draggable] {
-  border-bottom: 2px #108ee9 solid;
-}
-.ant-tree li.filter-node > a {
-  color: #f50 !important;
-  font-weight: bold!important;
-}
-.ant-tree li ul {
-  margin: 0;
-  padding: 0 0 0 18px;
-}
-.ant-tree li a {
-  display: inline-block;
-  padding: 1px 5px;
-  border-radius: 2px;
-  margin: 0;
-  cursor: pointer;
-  text-decoration: none;
-  vertical-align: top;
-  color: #666;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;
-}
-.ant-tree li a:hover {
-  background-color: #e7f4fd;
-}
-.ant-tree li a.ant-tree-node-selected {
-  background-color: #cfe8fb;
-}
-.ant-tree li span.u-checkbox {
-  margin: 2px 4px 0 0;
-}
-.ant-tree li span.ant-tree-switcher,
-.ant-tree li span.ant-tree-iconEle {
-  margin: 0;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  border: 0 none;
-  cursor: pointer;
-  outline: none;
-}
-.ant-tree li span.ant-tree-icon_loading:after {
-  display: inline-block;
-  font-family: 'uf';
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: "\E6AE";
-  -webkit-animation: loadingCircle 1s infinite linear;
-          animation: loadingCircle 1s infinite linear;
-  color: #108ee9;
-}
-.ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
-  cursor: auto;
-}
-.ant-tree li span.ant-tree-switcher.ant-tree-roots_open,
-.ant-tree li span.ant-tree-switcher.ant-tree-center_open,
-.ant-tree li span.ant-tree-switcher.ant-tree-bottom_open,
-.ant-tree li span.ant-tree-switcher.ant-tree-noline_open {
-  position: relative;
-}
-.ant-tree li span.ant-tree-switcher.ant-tree-roots_open:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-center_open:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-bottom_open:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-noline_open:after {
-  font-size: 12px;
-  font-size: 7px \9;
-  -webkit-transform: scale(0.58333333) rotate(0deg);
-      -ms-transform: scale(0.58333333) rotate(0deg);
-          transform: scale(0.58333333) rotate(0deg);
-  /* IE6-IE8 */
-  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
-  zoom: 1;
-  display: inline-block;
-  font-family: 'uf';
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: "\e639";
-  font-weight: bold;
-  position: absolute;
-  top: 0;
-  right: 4px;
-  color: #666;
-  -webkit-transition: -webkit-transform .3s ease;
-  transition: -webkit-transform .3s ease;
-  transition: transform .3s ease;
-  transition: transform .3s ease, -webkit-transform .3s ease;
-}
-:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_open:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-center_open:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_open:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_open:after {
-  -webkit-filter: none;
-          filter: none;
-}
-:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_open:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-center_open:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_open:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_open:after {
-  font-size: 12px;
-}
-.ant-tree li span.ant-tree-switcher.ant-tree-roots_close,
-.ant-tree li span.ant-tree-switcher.ant-tree-center_close,
-.ant-tree li span.ant-tree-switcher.ant-tree-bottom_close,
-.ant-tree li span.ant-tree-switcher.ant-tree-noline_close {
-  position: relative;
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-}
-.ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
-  font-size: 12px;
-  font-size: 7px \9;
-  -webkit-transform: scale(0.58333333) rotate(0deg);
-      -ms-transform: scale(0.58333333) rotate(0deg);
-          transform: scale(0.58333333) rotate(0deg);
-  /* IE6-IE8 */
-  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
-  zoom: 1;
-  display: inline-block;
-  font-family: 'uf';
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: "\e639";
-  font-weight: bold;
-  position: absolute;
-  top: 0;
-  right: 4px;
-  color: #666;
-  -webkit-transition: -webkit-transform .3s ease;
-  transition: -webkit-transform .3s ease;
-  transition: transform .3s ease;
-  transition: transform .3s ease, -webkit-transform .3s ease;
-}
-:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
-  -webkit-filter: none;
-          filter: none;
-}
-:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
-:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
-  font-size: 12px;
-}
-.ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
-.ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
-  -webkit-transform: rotate(270deg) scale(0.6);
-      -ms-transform: rotate(270deg) scale(0.6);
-          transform: rotate(270deg) scale(0.6);
-}
-.ant-tree-child-tree {
-  display: none;
-}
-.ant-tree-child-tree-open {
-  display: block;
-}
-.ant-tree-treenode-disabled > span,
-.ant-tree-treenode-disabled > a,
-.ant-tree-treenode-disabled > a span {
-  color: #ccc;
-  cursor: not-allowed;
-}
-.ant-tree-icon__open {
-  margin-right: 2px;
-  vertical-align: top;
-}
-.ant-tree-icon__close {
-  margin-right: 2px;
-  vertical-align: top;
-}

src copy/TreeNode.js

@@ -1,389 +0,0 @@
-import React, { PropTypes } from 'react';
-import assign from 'object-assign';
-import classNames from 'classnames';
-import Animate from 'rc-animate';
-import Checkbox from 'bee-checkbox';
-import { browser } from './util';
-
-const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : '';
-const ieOrEdge = /.*(IE|Edge).+/.test(browserUa);
-// const uaArray = browserUa.split(' ');
-// const gtIE8 = uaArray.length !== 2 || uaArray[0].indexOf('IE') === -1 || Number(uaArray[1]) > 8;
-
-const defaultTitle = '---';
-
-class TreeNode extends React.Component {
-  constructor(props) {
-    super(props);
-    [
-      'onExpand',
-      'onCheck',
-      'onContextMenu',
-      'onMouseEnter',
-      'onMouseLeave',
-      'onDragStart',
-      'onDragEnter',
-      'onDragOver',
-      'onDragLeave',
-      'onDrop',
-      'onDragEnd',
-    ].forEach((m) => {
-      this[m] = this[m].bind(this);
-    });
-    this.state = {
-      dataLoading: false,
-      dragNodeHighlight: false,
-    };
-  }
-
-  componentDidMount() {
-    if (!this.props.root._treeNodeInstances) {
-      this.props.root._treeNodeInstances = [];
-    }
-    this.props.root._treeNodeInstances.push(this);
-  }
-  // shouldComponentUpdate(nextProps) {
-  //   if (!nextProps.expanded) {
-  //     return false;
-  //   }
-  //   return true;
-  // }
-
-  onCheck() {
-    this.props.root.onCheck(this);
-  }
-
-  onSelect() {
-    this.props.root.onSelect(this);
-  }
-
-  onMouseEnter(e) {
-    e.preventDefault();
-    this.props.root.onMouseEnter(e, this);
-  }
-
-  onMouseLeave(e) {
-    e.preventDefault();
-    this.props.root.onMouseLeave(e, this);
-  }
-
-  onContextMenu(e) {
-    e.preventDefault();
-    this.props.root.onContextMenu(e, this);
-  }
-
-  onDragStart(e) {
-    // console.log('dragstart', this.props.eventKey, e);
-    // e.preventDefault();
-    e.stopPropagation();
-    this.setState({
-      dragNodeHighlight: true,
-    });
-    this.props.root.onDragStart(e, this);
-    try {
-      // ie throw error
-      // firefox-need-it
-      e.dataTransfer.setData('text/plain', '');
-    } finally {
-      // empty
-    }
-  }
-
-  onDragEnter(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.props.root.onDragEnter(e, this);
-  }
-
-  onDragOver(e) {
-    // todo disabled
-    e.preventDefault();
-    e.stopPropagation();
-    this.props.root.onDragOver(e, this);
-    return false;
-  }
-
-  onDragLeave(e) {
-    e.stopPropagation();
-    this.props.root.onDragLeave(e, this);
-  }
-
-  onDrop(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.setState({
-      dragNodeHighlight: false,
-    });
-    this.props.root.onDrop(e, this);
-  }
-
-  onDragEnd(e) {
-    e.stopPropagation();
-    this.setState({
-      dragNodeHighlight: false,
-    });
-    this.props.root.onDragEnd(e, this);
-  }
-
-  onExpand() {
-    const callbackPromise = this.props.root.onExpand(this);
-    if (callbackPromise && typeof callbackPromise === 'object') {
-      const setLoading = (dataLoading) => {
-        this.setState({ dataLoading });
-      };
-      setLoading(true);
-      callbackPromise.then(() => {
-        setLoading(false);
-      }, () => {
-        setLoading(false);
-      });
-    }
-  }
-
-  // keyboard event support
-  onKeyDown(e) {
-    e.preventDefault();
-  }
-
-  renderSwitcher(props, expandedState) {
-    const prefixCls = props.prefixCls;
-    const switcherCls = {
-      [`${prefixCls}-switcher`]: true,
-    };
-    if (!props.showLine) {
-      switcherCls[`${prefixCls}-noline_${expandedState}`] = true;
-    } else if (props.pos === '0-0') {
-      switcherCls[`${prefixCls}-roots_${expandedState}`] = true;
-    } else {
-      switcherCls[`${prefixCls}-center_${expandedState}`] = !props.last;
-      switcherCls[`${prefixCls}-bottom_${expandedState}`] = props.last;
-    }
-    if (props.disabled) {
-      switcherCls[`${prefixCls}-switcher-disabled`] = true;
-      return <span className={classNames(switcherCls)}></span>;
-    }
-    return <span className={classNames(switcherCls)} onClick={this.onExpand}></span>;
-  }
-
-  renderCheckbox(props) {
-    const prefixCls = props.prefixCls;
-    const checkboxCls = {
-      [`${prefixCls}-checkbox`]: true,
-    };
-    if (props.checked) {
-      checkboxCls[`${prefixCls}-checkbox-checked`] = true;
-    } else if (props.halfChecked) {
-      checkboxCls[`${prefixCls}-checkbox-indeterminate`] = true;
-    }
-    let customEle = null;
-    if (typeof props.checkable !== 'boolean') {
-      customEle = props.checkable;
-    }
-    if (props.disabled || props.disableCheckbox) {
-      checkboxCls[`${prefixCls}-checkbox-disabled`] = true;
-      return <span ref="checkbox" className={classNames(checkboxCls)}>{customEle}</span>;
-    }
-    return (
-      <span ref="checkbox"
-        className={classNames(checkboxCls) }
-        onClick={this.onCheck}
-      >{customEle}</span>
-
-      );
-    /*return (
-      <Checkbox className={classNames(checkboxCls) } checked={props.checked} halfChecked={props.halfChecked} disabled={props.disabled || props.disableCheckbox} onClick={this.onCheck}></Checkbox>
-    )*/
-  }
-
-  renderChildren(props) {
-    const renderFirst = this.renderFirst;
-    this.renderFirst = 1;
-    let transitionAppear = true;
-    if (!renderFirst && props.expanded) {
-      transitionAppear = false;
-    }
-    const children = props.children;
-    let newChildren = children;
-    if (children &&
-      (children.type === TreeNode ||
-      Array.isArray(children) &&
-      children.every((item) => {
-        return item.type === TreeNode;
-      }))) {
-      const cls = {
-        [`${props.prefixCls}-child-tree`]: true,
-        [`${props.prefixCls}-child-tree-open`]: props.expanded,
-      };
-      if (props.showLine) {
-        cls[`${props.prefixCls}-line`] = !props.last;
-      }
-      const animProps = {};
-      if (props.openTransitionName) {
-        animProps.transitionName = props.openTransitionName;
-      } else if (typeof props.openAnimation === 'object') {
-        animProps.animation = assign({}, props.openAnimation);
-        if (!transitionAppear) {
-          delete animProps.animation.appear;
-        }
-      }
-      newChildren = (
-        <Animate {...animProps}
-          showProp="data-expanded"
-          transitionAppear={transitionAppear}
-          component=""
-        >
-          {!props.expanded ? null : <ul className={classNames(cls)} data-expanded={props.expanded}>
-            {React.Children.map(children, (item, index) => {
-              return props.root.renderTreeNode(item, index, props.pos);
-            }, props.root)}
-          </ul>}
-        </Animate>
-      );
-    }
-    return newChildren;
-  }
-
-  render() {
-    const props = this.props;
-    const prefixCls = props.prefixCls;
-    const expandedState = props.expanded ? 'open' : 'close';
-    let iconState = expandedState;
-
-    let canRenderSwitcher = true;
-    const content = props.title;
-    let newChildren = this.renderChildren(props);
-    if (!newChildren || newChildren === props.children) {
-      // content = newChildren;
-      newChildren = null;
-      if (!props.loadData || props.isLeaf) {
-        canRenderSwitcher = false;
-        iconState = 'docu';
-      }
-    }
-    // For performance, does't render children into dom when `!props.expanded` (move to Animate)
-    // if (!props.expanded) {
-    //   newChildren = null;
-    // }
-
-    const iconEleCls = {
-      [`${prefixCls}-iconEle`]: true,
-      [`${prefixCls}-icon_loading`]: this.state.dataLoading,
-      [`${prefixCls}-icon__${iconState}`]: true,
-    };
-
-    const selectHandle = () => {
-      const icon = (props.showIcon || props.loadData && this.state.dataLoading) ?
-        <span className={classNames(iconEleCls)}></span> : null;
-      const title = <span className={`${prefixCls}-title`}>{content}</span>;
-      const wrap = `${prefixCls}-node-content-wrapper`;
-      const domProps = {
-        className: `${wrap} ${wrap}-${iconState === expandedState ? iconState : 'normal'}`,
-      };
-      if (!props.disabled) {
-        if (props.selected || !props._dropTrigger && this.state.dragNodeHighlight) {
-          domProps.className += ` ${prefixCls}-node-selected`;
-        }
-        domProps.onClick = (e) => {
-          e.preventDefault();
-          if (props.selectable) {
-            this.onSelect();
-          }
-          // not fire check event
-          // if (props.checkable) {
-          //   this.onCheck();
-          // }
-        };
-        if (props.onRightClick) {
-          domProps.onContextMenu = this.onContextMenu;
-        }
-        if (props.onMouseEnter) {
-          domProps.onMouseEnter = this.onMouseEnter;
-        }
-        if (props.onMouseLeave) {
-          domProps.onMouseLeave = this.onMouseLeave;
-        }
-        if (props.draggable) {
-          domProps.className += ' draggable';
-          if (ieOrEdge) {
-            // ie bug!
-            domProps.href = '#';
-          }
-          domProps.draggable = true;
-          domProps['aria-grabbed'] = true;
-          domProps.onDragStart = this.onDragStart;
-        }
-      }
-      return (
-        <a ref="selectHandle" title={typeof content === 'string' ? content : ''} {...domProps}>
-          {icon}{title}
-        </a>
-      );
-    };
-
-    const liProps = {};
-    if (props.draggable) {
-      liProps.onDragEnter = this.onDragEnter;
-      liProps.onDragOver = this.onDragOver;
-      liProps.onDragLeave = this.onDragLeave;
-      liProps.onDrop = this.onDrop;
-      liProps.onDragEnd = this.onDragEnd;
-    }
-
-    let disabledCls = '';
-    let dragOverCls = '';
-    if (props.disabled) {
-      disabledCls = `${prefixCls}-treenode-disabled`;
-    } else if (props.dragOver) {
-      dragOverCls = 'drag-over';
-    } else if (props.dragOverGapTop) {
-      dragOverCls = 'drag-over-gap-top';
-    } else if (props.dragOverGapBottom) {
-      dragOverCls = 'drag-over-gap-bottom';
-    }
-
-    const filterCls = props.filterTreeNode(this) ? 'filter-node' : '';
-
-    const noopSwitcher = () => {
-      const cls = {
-        [`${prefixCls}-switcher`]: true,
-        [`${prefixCls}-switcher-noop`]: true,
-      };
-      if (props.showLine) {
-        cls[`${prefixCls}-center_docu`] = !props.last;
-        cls[`${prefixCls}-bottom_docu`] = props.last;
-      } else {
-        cls[`${prefixCls}-noline_docu`] = true;
-      }
-      return <span className={classNames(cls)}></span>;
-    };
-
-    return (
-      <li {...liProps} ref="li"
-        className={classNames(props.className, disabledCls, dragOverCls, filterCls) }
-      >
-        {canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher()}
-        {props.checkable ? this.renderCheckbox(props) : null}
-        {selectHandle()}
-        {newChildren}
-      </li>
-    );
-  }
-}
-
-TreeNode.isTreeNode = 1;
-
-TreeNode.propTypes = {
-  prefixCls: PropTypes.string,
-  disabled: PropTypes.bool,
-  disableCheckbox: PropTypes.bool,
-  expanded: PropTypes.bool,
-  isLeaf: PropTypes.bool,
-  root: PropTypes.object,
-  onSelect: PropTypes.func,
-};
-
-TreeNode.defaultProps = {
-  title: defaultTitle,
-};
-
-export default TreeNode;

src copy/Treecopy.scss

@@ -1,363 +0,0 @@
-
-$treePrefixCls: 'ant-tree';
-.#{$treePrefixCls} {
-  margin: 0;
-  padding: 5px;
-  li {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    white-space: nowrap;
-    outline: 0;
-    .draggable {
-      color: #333;
-      -moz-user-select: none;
-      -khtml-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      /* Required to make elements draggable in old WebKit */
-      -khtml-user-drag: element;
-      -webkit-user-drag: element;
-    }
-    &.drag-over {
-      > .draggable {
-        background-color: #316ac5;
-        color: white;
-        border: 1px #316ac5 solid;
-        opacity: 0.8;
-      }
-    }
-    &.drag-over-gap-top {
-      > .draggable {
-        border-top: 2px blue solid;
-      }
-    }
-    &.drag-over-gap-bottom {
-      > .draggable {
-        border-bottom: 2px blue solid;
-      }
-    }
-    &.filter-node {
-      > .#{$treePrefixCls}-node-content-wrapper {
-        color: #a60000!important;
-        font-weight: bold!important;
-      }
-    }
-    ul {
-      margin: 0;
-      padding: 0 0 0 18px;
-      &.#{$treePrefixCls}-line {
-        background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y;
-      }
-    }
-    .#{$treePrefixCls}-node-content-wrapper {
-      display: inline-block;
-      padding: 1px 3px 0 0;
-      margin: 0;
-      cursor: pointer;
-      height: 17px;
-      text-decoration: none;
-      vertical-align: top;
-    }
-    span {
-      &.#{$treePrefixCls}-switcher,
-      &.#{$treePrefixCls}-checkbox,
-      &.#{$treePrefixCls}-iconEle {
-        line-height: 16px;
-        margin-right: 2px;
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        vertical-align: middle;
-        border: 0 none;
-        cursor: pointer;
-        outline: none;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-attachment: scroll;
-        background-image: url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
-      }
-      &.#{$treePrefixCls}-icon_loading {
-        margin-right: 2px;
-        vertical-align: top;
-        background: url(https://t.alipayobjects.com/images/rmsweb/T1YxhiXgJbXXXXXXXX.gif) no-repeat scroll 0 0 transparent;
-      }
-      &.#{$treePrefixCls}-switcher {
-        &.#{$treePrefixCls}-switcher-noop {
-          cursor: auto;
-        }
-        &.#{$treePrefixCls}-roots_open {
-          background-position: -93px -56px;
-        }
-        &.#{$treePrefixCls}-roots_close {
-          background-position: -75px -56px;
-        }
-        &.#{$treePrefixCls}-center_open {
-          background-position: -92px -18px;
-        }
-        &.#{$treePrefixCls}-center_close {
-          background-position: -74px -18px;
-        }
-        &.#{$treePrefixCls}-bottom_open {
-          background-position: -92px -36px;
-        }
-        &.#{$treePrefixCls}-bottom_close {
-          background-position: -74px -36px;
-        }
-        &.#{$treePrefixCls}-noline_open {
-          background-position: -92px -72px;
-        }
-        &.#{$treePrefixCls}-noline_close {
-          background-position: -74px -72px;
-        }
-        &.#{$treePrefixCls}-center_docu {
-          background-position: -56px -18px;
-        }
-        &.#{$treePrefixCls}-bottom_docu {
-          background-position: -56px -36px;
-        }
-        &.#{$treePrefixCls}-noline_docu {
-          background: none;
-        }
-      }
-      &.#{$treePrefixCls}-checkbox {
-        width: 13px;
-        height: 13px;
-        margin: 0 3px;
-        background-position: 0 0;
-        &-checked {
-          background-position: -14px 0;
-        }
-        &-indeterminate {
-          background-position: -14px -28px;
-        }
-        &-disabled {
-          background-position: 0 -56px;
-        }
-        &.#{$treePrefixCls}-checkbox-checked.#{$treePrefixCls}-checkbox-disabled {
-          background-position: -14px -56px;
-        }
-        &.#{$treePrefixCls}-checkbox-indeterminate.#{$treePrefixCls}-checkbox-disabled {
-          position: relative;
-          background: #ccc;
-          border-radius: 3px;
-          &::after {
-            content: ' ';
-            -webkit-transform: scale(1);
-            transform: scale(1);
-            position: absolute;
-            left: 3px;
-            top: 5px;
-            width: 5px;
-            height: 0;
-            border: 2px solid #fff;
-            border-top: 0;
-            border-left: 0;
-          }
-        }
-      }
-    }
-  }
-  &-child-tree {
-    display: none;
-    &-open {
-      display: block;
-    }
-  }
-  &-treenode-disabled {
-    >span,
-    >a,
-    >a span {
-      color: #ccc;
-      cursor: not-allowed;
-    }
-  }
-  &-node-selected {
-    background-color: #ffe6b0;
-    border: 1px #ffb951 solid;
-    opacity: 0.8;
-  }
-  &-icon__open {
-    margin-right: 2px;
-    background-position: -110px -16px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    background-position: -110px 0;
-    vertical-align: top;
-  }
-  &-icon__docu {
-    margin-right: 2px;
-    background-position: -110px -32px;
-    vertical-align: top;
-  }
-}
-
-$tree-prefix-cls: "ant-tree";
-$primary-color: '#108ee9';
-$highlight-color: '#f50';
-$font-size-base: '12px';
-//.antCheckboxFn($checkbox-prefix-cls: "ant-tree-checkbox");
-
-.#{$tree-prefix-cls} {
-  margin: 0;
-  padding: 5px;
-  font-size: $font-size-base;
-  li {
-    padding: 0;
-    margin: 7px 0;
-    list-style: none;
-    white-space: nowrap;
-    outline: 0;
-    a[draggable],
-    a[draggable="true"] {
-      user-select: none;
-      /* Required to make elements draggable in old WebKit */
-      -khtml-user-drag: element;
-      -webkit-user-drag: element;
-    }
-    &.drag-over {
-      > a[draggable] {
-        background-color: $primary-color;
-        color: white;
-        opacity: 0.8;
-      }
-    }
-    &.drag-over-gap-top {
-      > a[draggable] {
-        border-top: 2px $primary-color solid;
-      }
-    }
-    &.drag-over-gap-bottom {
-      > a[draggable] {
-        border-bottom: 2px $primary-color solid;
-      }
-    }
-    &.filter-node {
-      > a {
-        color: $highlight-color!important;
-        font-weight: bold!important;
-      }
-    }
-    ul {
-      margin: 0;
-      padding: 0 0 0 18px;
-    }
-    a {
-      display: inline-block;
-      padding: 1px 5px;
-      border-radius: 2px;
-      margin: 0;
-      cursor: pointer;
-      text-decoration: none;
-      vertical-align: top;
-      color: $text-color;
-      transition: all 0.3s ease;
-      &:hover {
-        background-color: tint($primary-color, 90%);
-      }
-      &.#{$tree-prefix-cls}-node-selected {
-        background-color: tint($primary-color, 80%);
-      }
-    }
-    span {
-      &.#{$tree-prefix-cls}-checkbox {
-        margin: 2px 4px 0 0;
-      }
-      &.#{$tree-prefix-cls}-switcher,
-      &.#{$tree-prefix-cls}-iconEle {
-        margin: 0;
-        width: 16px;
-        height: 16px;
-        line-height: 16px;
-        display: inline-block;
-        vertical-align: middle;
-        border: 0 none;
-        cursor: pointer;
-        outline: none;
-      }
-      &.#{$tree-prefix-cls}-icon_loading {
-        &:after {
-          display: inline-block;
-          animation: loadingCircle 1s infinite linear;
-          color: $primary-color;
-          font-family: 'uf';
-		  	text-rendering: optimizeLegibility;
-		    -webkit-font-smoothing: antialiased;
-		    -moz-osx-font-smoothing: grayscale;
-		    content: "\e6ae";
-        }
-      }
-      &.#{$tree-prefix-cls}-switcher {
-        &.#{$tree-prefix-cls}-switcher-noop {
-          cursor: auto;
-        }
-        &.#{$tree-prefix-cls}-roots_open,
-        &.#{$tree-prefix-cls}-center_open,
-        &.#{$tree-prefix-cls}-bottom_open,
-        &.#{$tree-prefix-cls}-noline_open {
-          //@include antTreeSwitcherIcon;
-        }
-        &.#{$tree-prefix-cls}-roots_close,
-        &.#{$tree-prefix-cls}-center_close,
-        &.#{$tree-prefix-cls}-bottom_close,
-        &.#{$tree-prefix-cls}-noline_close {
-          //@include antTreeSwitcherIcon;
-          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-          &:after {
-            transform: rotate(270deg) scale(0.6);
-          }
-        }
-      }
-    }
-  }
-  &-child-tree {
-    display: none;
-    &-open {
-      display: block;
-    }
-  }
-  &-treenode-disabled {
-    >span,
-    >a,
-    >a span {
-      color: #ccc;
-      cursor: not-allowed;
-    }
-  }
-  &-icon__open {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-}
-@mixin antTreeSwitcherIcon {
-  position: relative;
-  &:after {
-  	font-size: 12px;
-    -webkit-transform: scale(0.58333333) rotate(0deg);
-    -ms-transform: scale(0.58333333) rotate(0deg);
-    transform: scale(0.58333333) rotate(0deg);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
-    zoom: 1;
-    display: inline-block;
-    font-family: 'anticon';
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    content: "\E606";
-    font-weight: bold;
-    position: absolute;
-    top: 0;
-    right: 4px;
-    color: #666;
-    -webkit-transition: -webkit-transform .3s ease;
-    transition: -webkit-transform .3s ease;
-    transition: transform .3s ease;
-    transition: transform .3s ease, -webkit-transform .3s ease;
-  }
-}

src copy/index.js

@@ -1,2 +0,0 @@
-import Tree from './Tree';
-export default Tree;

src copy/openAnimation.js

@@ -1,36 +0,0 @@
-import cssAnimation from 'rc-animate';
-
-function animate(node, show, done) {
-  let height;
-  return cssAnimation(node, 'ant-motion-collapse', {
-    start() {
-      if (!show) {
-        node.style.height = `${node.offsetHeight}px`;
-      } else {
-        height = node.offsetHeight;
-        node.style.height = 0;
-      }
-    },
-    active() {
-      node.style.height = `${show ? height : 0}px`;
-    },
-    end() {
-      node.style.height = '';
-      done();
-    },
-  });
-}
-
-const animation = {
-  enter(node, done) {
-    return animate(node, true, done);
-  },
-  leave(node, done) {
-    return animate(node, false, done);
-  },
-  appear(node, done) {
-    return animate(node, true, done);
-  },
-};
-
-export default animation;

src copy/rcTree.js

@@ -1,641 +0,0 @@
-/* eslint no-console:0 */
-import React, { PropTypes } from 'react';
-import assign from 'object-assign';
-import classNames from 'classnames';
-import {
-  loopAllChildren, isInclude, getOffset,
-  filterParentPosition, handleCheckState, getCheck,
-  getStrictlyValue, arraysEqual,
-} from './util';
-
-function noop() {
-}
-
-class Tree extends React.Component {
-  constructor(props) {
-    super(props);
-    ['onKeyDown', 'onCheck'].forEach((m) => {
-      this[m] = this[m].bind(this);
-    });
-    this.contextmenuKeys = [];
-    this.checkedKeysChange = true;
-
-    this.state = {
-      expandedKeys: this.getDefaultExpandedKeys(props),
-      checkedKeys: this.getDefaultCheckedKeys(props),
-      selectedKeys: this.getDefaultSelectedKeys(props),
-      dragNodesKeys: '',
-      dragOverNodeKey: '',
-      dropNodeKey: '',
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const expandedKeys = this.getDefaultExpandedKeys(nextProps, true);
-    const checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
-    const selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
-    const st = {};
-    if (expandedKeys) {
-      st.expandedKeys = expandedKeys;
-    }
-    if (checkedKeys) {
-      if (nextProps.checkedKeys === this.props.checkedKeys) {
-        this.checkedKeysChange = false;
-      } else {
-        this.checkedKeysChange = true;
-      }
-      st.checkedKeys = checkedKeys;
-    }
-    if (selectedKeys) {
-      st.selectedKeys = selectedKeys;
-    }
-    this.setState(st);
-  }
-
-  onDragStart(e, treeNode) {
-    this.dragNode = treeNode;
-    this.dragNodesKeys = this.getDragNodes(treeNode);
-    const st = {
-      dragNodesKeys: this.dragNodesKeys,
-    };
-    const expandedKeys = this.getExpandedKeys(treeNode, false);
-    if (expandedKeys) {
-      // Controlled expand, save and then reset
-      this.getRawExpandedKeys();
-      st.expandedKeys = expandedKeys;
-    }
-    this.setState(st);
-    this.props.onDragStart({
-      event: e,
-      node: treeNode,
-    });
-    this._dropTrigger = false;
-  }
-
-  onDragEnterGap(e, treeNode) {
-    const offsetTop = (0, getOffset)(treeNode.refs.selectHandle).top;
-    const offsetHeight = treeNode.refs.selectHandle.offsetHeight;
-    const pageY = e.pageY;
-    const gapHeight = 2;
-    if (pageY > offsetTop + offsetHeight - gapHeight) {
-      this.dropPosition = 1;
-      return 1;
-    }
-    if (pageY < offsetTop + gapHeight) {
-      this.dropPosition = -1;
-      return -1;
-    }
-    this.dropPosition = 0;
-    return 0;
-  }
-
-  onDragEnter(e, treeNode) {
-    const enterGap = this.onDragEnterGap(e, treeNode);
-    if (this.dragNode.props.eventKey === treeNode.props.eventKey && enterGap === 0) {
-      this.setState({
-        dragOverNodeKey: '',
-      });
-      return;
-    }
-    const st = {
-      dragOverNodeKey: treeNode.props.eventKey,
-    };
-    const expandedKeys = this.getExpandedKeys(treeNode, true);
-    if (expandedKeys) {
-      this.getRawExpandedKeys();
-      st.expandedKeys = expandedKeys;
-    }
-    this.setState(st);
-    this.props.onDragEnter({
-      event: e,
-      node: treeNode,
-      expandedKeys: expandedKeys && [...expandedKeys] || [...this.state.expandedKeys],
-    });
-  }
-
-  onDragOver(e, treeNode) {
-    this.props.onDragOver({ event: e, node: treeNode });
-  }
-
-  onDragLeave(e, treeNode) {
-    this.props.onDragLeave({ event: e, node: treeNode });
-  }
-
-  onDrop(e, treeNode) {
-    const key = treeNode.props.eventKey;
-    this.setState({
-      dragOverNodeKey: '',
-      dropNodeKey: key,
-    });
-    if (this.dragNodesKeys.indexOf(key) > -1) {
-      if (console.warn) {
-        console.warn('can not drop to dragNode(include it\'s children node)');
-      }
-      return false;
-    }
-
-    const posArr = treeNode.props.pos.split('-');
-    const res = {
-      event: e,
-      node: treeNode,
-      dragNode: this.dragNode,
-      dragNodesKeys: [...this.dragNodesKeys],
-      dropPosition: this.dropPosition + Number(posArr[posArr.length - 1]),
-    };
-    if (this.dropPosition !== 0) {
-      res.dropToGap = true;
-    }
-    if ('expandedKeys' in this.props) {
-      res.rawExpandedKeys = [...this._rawExpandedKeys] || [...this.state.expandedKeys];
-    }
-    this.props.onDrop(res);
-    this._dropTrigger = true;
-  }
-
-  onDragEnd(e, treeNode) {
-    this.setState({
-      dragOverNodeKey: '',
-    });
-    this.props.onDragEnd({ event: e, node: treeNode });
-  }
-
-  onExpand(treeNode) {
-    const expanded = !treeNode.props.expanded;
-    const controlled = 'expandedKeys' in this.props;
-    const expandedKeys = [...this.state.expandedKeys];
-    const index = expandedKeys.indexOf(treeNode.props.eventKey);
-    if (expanded && index === -1) {
-      expandedKeys.push(treeNode.props.eventKey);
-    } else if (!expanded && index > -1) {
-      expandedKeys.splice(index, 1);
-    }
-    if (!controlled) {
-      this.setState({ expandedKeys });
-    }
-    this.props.onExpand(expandedKeys, { node: treeNode, expanded });
-
-    // after data loaded, need set new expandedKeys
-    if (expanded && this.props.loadData) {
-      return this.props.loadData(treeNode).then(() => {
-        if (!controlled) {
-          this.setState({ expandedKeys });
-        }
-      });
-    }
-  }
-
-  onCheck(treeNode) {
-    let checked = !treeNode.props.checked;
-    if (treeNode.props.halfChecked) {
-      checked = true;
-    }
-    const key = treeNode.props.eventKey;
-    let checkedKeys = [...this.state.checkedKeys];
-    const index = checkedKeys.indexOf(key);
-
-    const newSt = {
-      event: 'check',
-      node: treeNode,
-      checked,
-    };
-
-    if (this.props.checkStrictly && ('checkedKeys' in this.props)) {
-      if (checked && index === -1) {
-        checkedKeys.push(key);
-      }
-      if (!checked && index > -1) {
-        checkedKeys.splice(index, 1);
-      }
-      newSt.checkedNodes = [];
-      loopAllChildren(this.props.children, (item, ind, pos, keyOrPos) => {
-        if (checkedKeys.indexOf(keyOrPos) !== -1) {
-          newSt.checkedNodes.push(item);
-        }
-      });
-      this.props.onCheck(getStrictlyValue(checkedKeys, this.props.checkedKeys.halfChecked), newSt);
-    } else {
-      if (checked && index === -1) {
-        this.treeNodesStates[treeNode.props.pos].checked = true;
-        const checkedPositions = [];
-        Object.keys(this.treeNodesStates).forEach(i => {
-          if (this.treeNodesStates[i].checked) {
-            checkedPositions.push(i);
-          }
-        });
-        handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
-      }
-      if (!checked) {
-        this.treeNodesStates[treeNode.props.pos].checked = false;
-        this.treeNodesStates[treeNode.props.pos].halfChecked = false;
-        handleCheckState(this.treeNodesStates, [treeNode.props.pos], false);
-      }
-      const checkKeys = getCheck(this.treeNodesStates);
-      newSt.checkedNodes = checkKeys.checkedNodes;
-      newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
-      newSt.halfCheckedKeys = checkKeys.halfCheckedKeys;
-      this.checkKeys = checkKeys;
-
-      this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
-      if (!('checkedKeys' in this.props)) {
-        this.setState({
-          checkedKeys,
-        });
-      }
-      this.props.onCheck(checkedKeys, newSt);
-    }
-  }
-
-  onSelect(treeNode) {
-    const props = this.props;
-    const selectedKeys = [...this.state.selectedKeys];
-    const eventKey = treeNode.props.eventKey;
-    const index = selectedKeys.indexOf(eventKey);
-    let selected;
-    if (index !== -1) {
-      selected = false;
-      selectedKeys.splice(index, 1);
-    } else {
-      selected = true;
-      if (!props.multiple) {
-        selectedKeys.length = 0;
-      }
-      selectedKeys.push(eventKey);
-    }
-    const selectedNodes = [];
-    if (selectedKeys.length) {
-      loopAllChildren(this.props.children, (item) => {
-        if (selectedKeys.indexOf(item.key) !== -1) {
-          selectedNodes.push(item);
-        }
-      });
-    }
-    const newSt = {
-      event: 'select',
-      node: treeNode,
-      selected,
-      selectedNodes,
-    };
-    if (!('selectedKeys' in this.props)) {
-      this.setState({
-        selectedKeys,
-      });
-    }
-    props.onSelect(selectedKeys, newSt);
-  }
-
-  onMouseEnter(e, treeNode) {
-    this.props.onMouseEnter({ event: e, node: treeNode });
-  }
-
-  onMouseLeave(e, treeNode) {
-    this.props.onMouseLeave({ event: e, node: treeNode });
-  }
-
-  onContextMenu(e, treeNode) {
-    const selectedKeys = [...this.state.selectedKeys];
-    const eventKey = treeNode.props.eventKey;
-    if (this.contextmenuKeys.indexOf(eventKey) === -1) {
-      this.contextmenuKeys.push(eventKey);
-    }
-    this.contextmenuKeys.forEach((key) => {
-      const index = selectedKeys.indexOf(key);
-      if (index !== -1) {
-        selectedKeys.splice(index, 1);
-      }
-    });
-    if (selectedKeys.indexOf(eventKey) === -1) {
-      selectedKeys.push(eventKey);
-    }
-    this.setState({
-      selectedKeys,
-    });
-    this.props.onRightClick({ event: e, node: treeNode });
-  }
-
-  // all keyboard events callbacks run from here at first
-  onKeyDown(e) {
-    e.preventDefault();
-  }
-
-  getFilterExpandedKeys(props, expandKeyProp, expandAll) {
-    const keys = props[expandKeyProp];
-    if (!expandAll && !props.autoExpandParent) {
-      return keys || [];
-    }
-    const expandedPositionArr = [];
-    if (props.autoExpandParent) {
-      loopAllChildren(props.children, (item, index, pos, newKey) => {
-        if (keys.indexOf(newKey) > -1) {
-          expandedPositionArr.push(pos);
-        }
-      });
-    }
-    const filterExpandedKeys = [];
-    loopAllChildren(props.children, (item, index, pos, newKey) => {
-      if (expandAll) {
-        filterExpandedKeys.push(newKey);
-      } else if (props.autoExpandParent) {
-        expandedPositionArr.forEach(p => {
-          if ((p.split('-').length > pos.split('-').length
-            && isInclude(pos.split('-'), p.split('-')) || pos === p)
-            && filterExpandedKeys.indexOf(newKey) === -1) {
-            filterExpandedKeys.push(newKey);
-          }
-        });
-      }
-    });
-    return filterExpandedKeys.length ? filterExpandedKeys : keys;
-  }
-
-  getDefaultExpandedKeys(props, willReceiveProps) {
-    let expandedKeys = willReceiveProps ? undefined :
-      this.getFilterExpandedKeys(props, 'defaultExpandedKeys',
-        props.defaultExpandedKeys.length ? false : props.defaultExpandAll);
-    if ('expandedKeys' in props) {
-      expandedKeys = (props.autoExpandParent ?
-        this.getFilterExpandedKeys(props, 'expandedKeys', false) :
-        props.expandedKeys) || [];
-    }
-    return expandedKeys;
-  }
-
-  getDefaultCheckedKeys(props, willReceiveProps) {
-    let checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
-    if ('checkedKeys' in props) {
-      checkedKeys = props.checkedKeys || [];
-      if (props.checkStrictly) {
-        if (props.checkedKeys.checked) {
-          checkedKeys = props.checkedKeys.checked;
-        } else if (!Array.isArray(props.checkedKeys)) {
-          checkedKeys = [];
-        }
-      }
-    }
-    return checkedKeys;
-  }
-
-  getDefaultSelectedKeys(props, willReceiveProps) {
-    const getKeys = (keys) => {
-      if (props.multiple) {
-        return [...keys];
-      }
-      if (keys.length) {
-        return [keys[0]];
-      }
-      return keys;
-    };
-    let selectedKeys = willReceiveProps ? undefined : getKeys(props.defaultSelectedKeys);
-    if ('selectedKeys' in props) {
-      selectedKeys = getKeys(props.selectedKeys);
-    }
-    return selectedKeys;
-  }
-
-  getRawExpandedKeys() {
-    if (!this._rawExpandedKeys && ('expandedKeys' in this.props)) {
-      this._rawExpandedKeys = [...this.state.expandedKeys];
-    }
-  }
-
-  getOpenTransitionName() {
-    const props = this.props;
-    let transitionName = props.openTransitionName;
-    const animationName = props.openAnimation;
-    if (!transitionName && typeof animationName === 'string') {
-      transitionName = `${props.prefixCls}-open-${animationName}`;
-    }
-    return transitionName;
-  }
-
-  getDragNodes(treeNode) {
-    const dragNodesKeys = [];
-    const tPArr = treeNode.props.pos.split('-');
-    loopAllChildren(this.props.children, (item, index, pos, newKey) => {
-      const pArr = pos.split('-');
-      if (treeNode.props.pos === pos || tPArr.length < pArr.length && isInclude(tPArr, pArr)) {
-        dragNodesKeys.push(newKey);
-      }
-    });
-    return dragNodesKeys;
-  }
-
-  getExpandedKeys(treeNode, expand) {
-    const key = treeNode.props.eventKey;
-    const expandedKeys = this.state.expandedKeys;
-    const expandedIndex = expandedKeys.indexOf(key);
-    let exKeys;
-    if (expandedIndex > -1 && !expand) {
-      exKeys = [...expandedKeys];
-      exKeys.splice(expandedIndex, 1);
-      return exKeys;
-    }
-    if (expand && expandedKeys.indexOf(key) === -1) {
-      return expandedKeys.concat([key]);
-    }
-  }
-
-  filterTreeNode(treeNode) {
-    const filterTreeNode = this.props.filterTreeNode;
-    if (typeof filterTreeNode !== 'function' || treeNode.props.disabled) {
-      return false;
-    }
-    return filterTreeNode.call(this, treeNode);
-  }
-
-  renderTreeNode(child, index, level = 0) {
-    const pos = `${level}-${index}`;
-    const key = child.key || pos;
-    const state = this.state;
-    const props = this.props;
-
-    // prefer to child's own selectable property if passed
-    let selectable = props.selectable;
-    if (child.props.hasOwnProperty('selectable')) {
-      selectable = child.props.selectable;
-    }
-
-    const cloneProps = {
-      ref: `treeNode-${key}`,
-      root: this,
-      eventKey: key,
-      pos,
-      selectable,
-      loadData: props.loadData,
-      onMouseEnter: props.onMouseEnter,
-      onMouseLeave: props.onMouseLeave,
-      onRightClick: props.onRightClick,
-      prefixCls: props.prefixCls,
-      showLine: props.showLine,
-      showIcon: props.showIcon,
-      draggable: props.draggable,
-      dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
-      dragOverGapTop: state.dragOverNodeKey === key && this.dropPosition === -1,
-      dragOverGapBottom: state.dragOverNodeKey === key && this.dropPosition === 1,
-      _dropTrigger: this._dropTrigger,
-      expanded: state.expandedKeys.indexOf(key) !== -1,
-      selected: state.selectedKeys.indexOf(key) !== -1,
-      openTransitionName: this.getOpenTransitionName(),
-      openAnimation: props.openAnimation,
-      filterTreeNode: this.filterTreeNode.bind(this),
-    };
-    if (props.checkable) {
-      cloneProps.checkable = props.checkable;
-      if (props.checkStrictly) {
-        if (state.checkedKeys) {
-          cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
-        }
-        if (props.checkedKeys.halfChecked) {
-          cloneProps.halfChecked = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
-        } else {
-          cloneProps.halfChecked = false;
-        }
-      } else {
-        if (this.checkedKeys) {
-          cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
-        }
-        cloneProps.halfChecked = this.halfCheckedKeys.indexOf(key) !== -1;
-      }
-    }
-    if (this.treeNodesStates && this.treeNodesStates[pos]) {
-      assign(cloneProps, this.treeNodesStates[pos].siblingPosition);
-    }
-    return React.cloneElement(child, cloneProps);
-  }
-
-  render() {
-    const props = this.props;
-    const domProps = {
-      className: classNames(props.className, props.prefixCls),
-      role: 'tree-node',
-    };
-    if (props.focusable) {
-      domProps.tabIndex = '0';
-      domProps.onKeyDown = this.onKeyDown;
-    }
-    const getTreeNodesStates = () => {
-      this.treeNodesStates = {};
-      loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
-        this.treeNodesStates[pos] = {
-          siblingPosition,
-        };
-      });
-    };
-    if (props.showLine && !props.checkable) {
-      getTreeNodesStates();
-    }
-    if (props.checkable && (this.checkedKeysChange || props.loadData)) {
-      if (props.checkStrictly) {
-        getTreeNodesStates();
-      } else if (props._treeNodesStates) {
-        this.treeNodesStates = props._treeNodesStates.treeNodesStates;
-        this.halfCheckedKeys = props._treeNodesStates.halfCheckedKeys;
-        this.checkedKeys = props._treeNodesStates.checkedKeys;
-      } else {
-        const checkedKeys = this.state.checkedKeys;
-        let checkKeys;
-        if (!props.loadData && this.checkKeys && this._checkedKeys &&
-          arraysEqual(this._checkedKeys, checkedKeys)) {
-          // if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
-          checkKeys = this.checkKeys;
-        } else {
-          const checkedPositions = [];
-          this.treeNodesStates = {};
-          loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
-            this.treeNodesStates[pos] = {
-              node: item,
-              key: keyOrPos,
-              checked: false,
-              halfChecked: false,
-              siblingPosition,
-            };
-            if (checkedKeys.indexOf(keyOrPos) !== -1) {
-              this.treeNodesStates[pos].checked = true;
-              checkedPositions.push(pos);
-            }
-          });
-          // if the parent node's key exists, it all children node will be checked
-          handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
-          checkKeys = getCheck(this.treeNodesStates);
-        }
-        this.halfCheckedKeys = checkKeys.halfCheckedKeys;
-        this.checkedKeys = checkKeys.checkedKeys;
-      }
-    }
-
-    return (
-      <ul {...domProps} unselectable ref="tree">
-        {React.Children.map(props.children, this.renderTreeNode, this)}
-      </ul>
-    );
-  }
-}
-
-Tree.propTypes = {
-  prefixCls: PropTypes.string,
-  children: PropTypes.any,
-  showLine: PropTypes.bool,
-  showIcon: PropTypes.bool,
-  selectable: PropTypes.bool,
-  multiple: PropTypes.bool,
-  checkable: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.node,
-  ]),
-  _treeNodesStates: PropTypes.object,
-  checkStrictly: PropTypes.bool,
-  draggable: PropTypes.bool,
-  autoExpandParent: PropTypes.bool,
-  defaultExpandAll: PropTypes.bool,
-  defaultExpandedKeys: PropTypes.arrayOf(PropTypes.string),
-  expandedKeys: PropTypes.arrayOf(PropTypes.string),
-  defaultCheckedKeys: PropTypes.arrayOf(PropTypes.string),
-  checkedKeys: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.object,
-  ]),
-  defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
-  selectedKeys: PropTypes.arrayOf(PropTypes.string),
-  onExpand: PropTypes.func,
-  onCheck: PropTypes.func,
-  onSelect: PropTypes.func,
-  loadData: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onRightClick: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onDragLeave: PropTypes.func,
-  onDrop: PropTypes.func,
-  onDragEnd: PropTypes.func,
-  filterTreeNode: PropTypes.func,
-  openTransitionName: PropTypes.string,
-  openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
-Tree.defaultProps = {
-  prefixCls: 'rc-tree',
-  showLine: false,
-  showIcon: true,
-  selectable: true,
-  multiple: false,
-  checkable: false,
-  checkStrictly: false,
-  draggable: false,
-  autoExpandParent: true,
-  defaultExpandAll: false,
-  defaultExpandedKeys: [],
-  defaultCheckedKeys: [],
-  defaultSelectedKeys: [],
-  onExpand: noop,
-  onCheck: noop,
-  onSelect: noop,
-  onDragStart: noop,
-  onDragEnter: noop,
-  onDragOver: noop,
-  onDragLeave: noop,
-  onDrop: noop,
-  onDragEnd: noop,
-};
-
-export default Tree;

src copy/rcindex.js

@@ -1,5 +0,0 @@
-import Tree from './rcTree';
-import TreeNode from './TreeNode';
-Tree.TreeNode = TreeNode;
-
-export default Tree;

src copy/src/Tree.jsx

@@ -1,641 +0,0 @@
-/* eslint no-console:0 */
-import React, { PropTypes } from 'react';
-import assign from 'object-assign';
-import classNames from 'classnames';
-import {
-  loopAllChildren, isInclude, getOffset,
-  filterParentPosition, handleCheckState, getCheck,
-  getStrictlyValue, arraysEqual,
-} from './util';
-
-function noop() {
-}
-
-class Tree extends React.Component {
-  constructor(props) {
-    super(props);
-    ['onKeyDown', 'onCheck'].forEach((m) => {
-      this[m] = this[m].bind(this);
-    });
-    this.contextmenuKeys = [];
-    this.checkedKeysChange = true;
-
-    this.state = {
-      expandedKeys: this.getDefaultExpandedKeys(props),
-      checkedKeys: this.getDefaultCheckedKeys(props),
-      selectedKeys: this.getDefaultSelectedKeys(props),
-      dragNodesKeys: '',
-      dragOverNodeKey: '',
-      dropNodeKey: '',
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const expandedKeys = this.getDefaultExpandedKeys(nextProps, true);
-    const checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
-    const selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
-    const st = {};
-    if (expandedKeys) {
-      st.expandedKeys = expandedKeys;
-    }
-    if (checkedKeys) {
-      if (nextProps.checkedKeys === this.props.checkedKeys) {
-        this.checkedKeysChange = false;
-      } else {
-        this.checkedKeysChange = true;
-      }
-      st.checkedKeys = checkedKeys;
-    }
-    if (selectedKeys) {
-      st.selectedKeys = selectedKeys;
-    }
-    this.setState(st);
-  }
-
-  onDragStart(e, treeNode) {
-    this.dragNode = treeNode;
-    this.dragNodesKeys = this.getDragNodes(treeNode);
-    const st = {
-      dragNodesKeys: this.dragNodesKeys,
-    };
-    const expandedKeys = this.getExpandedKeys(treeNode, false);
-    if (expandedKeys) {
-      // Controlled expand, save and then reset
-      this.getRawExpandedKeys();
-      st.expandedKeys = expandedKeys;
-    }
-    this.setState(st);
-    this.props.onDragStart({
-      event: e,
-      node: treeNode,
-    });
-    this._dropTrigger = false;
-  }
-
-  onDragEnterGap(e, treeNode) {
-    const offsetTop = (0, getOffset)(treeNode.refs.selectHandle).top;
-    const offsetHeight = treeNode.refs.selectHandle.offsetHeight;
-    const pageY = e.pageY;
-    const gapHeight = 2;
-    if (pageY > offsetTop + offsetHeight - gapHeight) {
-      this.dropPosition = 1;
-      return 1;
-    }
-    if (pageY < offsetTop + gapHeight) {
-      this.dropPosition = -1;
-      return -1;
-    }
-    this.dropPosition = 0;
-    return 0;
-  }
-
-  onDragEnter(e, treeNode) {
-    const enterGap = this.onDragEnterGap(e, treeNode);
-    if (this.dragNode.props.eventKey === treeNode.props.eventKey && enterGap === 0) {
-      this.setState({
-        dragOverNodeKey: '',
-      });
-      return;
-    }
-    const st = {
-      dragOverNodeKey: treeNode.props.eventKey,
-    };
-    const expandedKeys = this.getExpandedKeys(treeNode, true);
-    if (expandedKeys) {
-      this.getRawExpandedKeys();
-      st.expandedKeys = expandedKeys;
-    }
-    this.setState(st);
-    this.props.onDragEnter({
-      event: e,
-      node: treeNode,
-      expandedKeys: expandedKeys && [...expandedKeys] || [...this.state.expandedKeys],
-    });
-  }
-
-  onDragOver(e, treeNode) {
-    this.props.onDragOver({ event: e, node: treeNode });
-  }
-
-  onDragLeave(e, treeNode) {
-    this.props.onDragLeave({ event: e, node: treeNode });
-  }
-
-  onDrop(e, treeNode) {
-    const key = treeNode.props.eventKey;
-    this.setState({
-      dragOverNodeKey: '',
-      dropNodeKey: key,
-    });
-    if (this.dragNodesKeys.indexOf(key) > -1) {
-      if (console.warn) {
-        console.warn('can not drop to dragNode(include it\'s children node)');
-      }
-      return false;
-    }
-
-    const posArr = treeNode.props.pos.split('-');
-    const res = {
-      event: e,
-      node: treeNode,
-      dragNode: this.dragNode,
-      dragNodesKeys: [...this.dragNodesKeys],
-      dropPosition: this.dropPosition + Number(posArr[posArr.length - 1]),
-    };
-    if (this.dropPosition !== 0) {
-      res.dropToGap = true;
-    }
-    if ('expandedKeys' in this.props) {
-      res.rawExpandedKeys = [...this._rawExpandedKeys] || [...this.state.expandedKeys];
-    }
-    this.props.onDrop(res);
-    this._dropTrigger = true;
-  }
-
-  onDragEnd(e, treeNode) {
-    this.setState({
-      dragOverNodeKey: '',
-    });
-    this.props.onDragEnd({ event: e, node: treeNode });
-  }
-
-  onExpand(treeNode) {
-    const expanded = !treeNode.props.expanded;
-    const controlled = 'expandedKeys' in this.props;
-    const expandedKeys = [...this.state.expandedKeys];
-    const index = expandedKeys.indexOf(treeNode.props.eventKey);
-    if (expanded && index === -1) {
-      expandedKeys.push(treeNode.props.eventKey);
-    } else if (!expanded && index > -1) {
-      expandedKeys.splice(index, 1);
-    }
-    if (!controlled) {
-      this.setState({ expandedKeys });
-    }
-    this.props.onExpand(expandedKeys, { node: treeNode, expanded });
-
-    // after data loaded, need set new expandedKeys
-    if (expanded && this.props.loadData) {
-      return this.props.loadData(treeNode).then(() => {
-        if (!controlled) {
-          this.setState({ expandedKeys });
-        }
-      });
-    }
-  }
-
-  onCheck(treeNode) {
-    let checked = !treeNode.props.checked;
-    if (treeNode.props.halfChecked) {
-      checked = true;
-    }
-    const key = treeNode.props.eventKey;
-    let checkedKeys = [...this.state.checkedKeys];
-    const index = checkedKeys.indexOf(key);
-
-    const newSt = {
-      event: 'check',
-      node: treeNode,
-      checked,
-    };
-
-    if (this.props.checkStrictly && ('checkedKeys' in this.props)) {
-      if (checked && index === -1) {
-        checkedKeys.push(key);
-      }
-      if (!checked && index > -1) {
-        checkedKeys.splice(index, 1);
-      }
-      newSt.checkedNodes = [];
-      loopAllChildren(this.props.children, (item, ind, pos, keyOrPos) => {
-        if (checkedKeys.indexOf(keyOrPos) !== -1) {
-          newSt.checkedNodes.push(item);
-        }
-      });
-      this.props.onCheck(getStrictlyValue(checkedKeys, this.props.checkedKeys.halfChecked), newSt);
-    } else {
-      if (checked && index === -1) {
-        this.treeNodesStates[treeNode.props.pos].checked = true;
-        const checkedPositions = [];
-        Object.keys(this.treeNodesStates).forEach(i => {
-          if (this.treeNodesStates[i].checked) {
-            checkedPositions.push(i);
-          }
-        });
-        handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
-      }
-      if (!checked) {
-        this.treeNodesStates[treeNode.props.pos].checked = false;
-        this.treeNodesStates[treeNode.props.pos].halfChecked = false;
-        handleCheckState(this.treeNodesStates, [treeNode.props.pos], false);
-      }
-      const checkKeys = getCheck(this.treeNodesStates);
-      newSt.checkedNodes = checkKeys.checkedNodes;
-      newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
-      newSt.halfCheckedKeys = checkKeys.halfCheckedKeys;
-      this.checkKeys = checkKeys;
-
-      this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
-      if (!('checkedKeys' in this.props)) {
-        this.setState({
-          checkedKeys,
-        });
-      }
-      this.props.onCheck(checkedKeys, newSt);
-    }
-  }
-
-  onSelect(treeNode) {
-    const props = this.props;
-    const selectedKeys = [...this.state.selectedKeys];
-    const eventKey = treeNode.props.eventKey;
-    const index = selectedKeys.indexOf(eventKey);
-    let selected;
-    if (index !== -1) {
-      selected = false;
-      selectedKeys.splice(index, 1);
-    } else {
-      selected = true;
-      if (!props.multiple) {
-        selectedKeys.length = 0;
-      }
-      selectedKeys.push(eventKey);
-    }
-    const selectedNodes = [];
-    if (selectedKeys.length) {
-      loopAllChildren(this.props.children, (item) => {
-        if (selectedKeys.indexOf(item.key) !== -1) {
-          selectedNodes.push(item);
-        }
-      });
-    }
-    const newSt = {
-      event: 'select',
-      node: treeNode,
-      selected,
-      selectedNodes,
-    };
-    if (!('selectedKeys' in this.props)) {
-      this.setState({
-        selectedKeys,
-      });
-    }
-    props.onSelect(selectedKeys, newSt);
-  }
-
-  onMouseEnter(e, treeNode) {
-    this.props.onMouseEnter({ event: e, node: treeNode });
-  }
-
-  onMouseLeave(e, treeNode) {
-    this.props.onMouseLeave({ event: e, node: treeNode });
-  }
-
-  onContextMenu(e, treeNode) {
-    const selectedKeys = [...this.state.selectedKeys];
-    const eventKey = treeNode.props.eventKey;
-    if (this.contextmenuKeys.indexOf(eventKey) === -1) {
-      this.contextmenuKeys.push(eventKey);
-    }
-    this.contextmenuKeys.forEach((key) => {
-      const index = selectedKeys.indexOf(key);
-      if (index !== -1) {
-        selectedKeys.splice(index, 1);
-      }
-    });
-    if (selectedKeys.indexOf(eventKey) === -1) {
-      selectedKeys.push(eventKey);
-    }
-    this.setState({
-      selectedKeys,
-    });
-    this.props.onRightClick({ event: e, node: treeNode });
-  }
-
-  // all keyboard events callbacks run from here at first
-  onKeyDown(e) {
-    e.preventDefault();
-  }
-
-  getFilterExpandedKeys(props, expandKeyProp, expandAll) {
-    const keys = props[expandKeyProp];
-    if (!expandAll && !props.autoExpandParent) {
-      return keys || [];
-    }
-    const expandedPositionArr = [];
-    if (props.autoExpandParent) {
-      loopAllChildren(props.children, (item, index, pos, newKey) => {
-        if (keys.indexOf(newKey) > -1) {
-          expandedPositionArr.push(pos);
-        }
-      });
-    }
-    const filterExpandedKeys = [];
-    loopAllChildren(props.children, (item, index, pos, newKey) => {
-      if (expandAll) {
-        filterExpandedKeys.push(newKey);
-      } else if (props.autoExpandParent) {
-        expandedPositionArr.forEach(p => {
-          if ((p.split('-').length > pos.split('-').length
-            && isInclude(pos.split('-'), p.split('-')) || pos === p)
-            && filterExpandedKeys.indexOf(newKey) === -1) {
-            filterExpandedKeys.push(newKey);
-          }
-        });
-      }
-    });
-    return filterExpandedKeys.length ? filterExpandedKeys : keys;
-  }
-
-  getDefaultExpandedKeys(props, willReceiveProps) {
-    let expandedKeys = willReceiveProps ? undefined :
-      this.getFilterExpandedKeys(props, 'defaultExpandedKeys',
-        props.defaultExpandedKeys.length ? false : props.defaultExpandAll);
-    if ('expandedKeys' in props) {
-      expandedKeys = (props.autoExpandParent ?
-        this.getFilterExpandedKeys(props, 'expandedKeys', false) :
-        props.expandedKeys) || [];
-    }
-    return expandedKeys;
-  }
-
-  getDefaultCheckedKeys(props, willReceiveProps) {
-    let checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
-    if ('checkedKeys' in props) {
-      checkedKeys = props.checkedKeys || [];
-      if (props.checkStrictly) {
-        if (props.checkedKeys.checked) {
-          checkedKeys = props.checkedKeys.checked;
-        } else if (!Array.isArray(props.checkedKeys)) {
-          checkedKeys = [];
-        }
-      }
-    }
-    return checkedKeys;
-  }
-
-  getDefaultSelectedKeys(props, willReceiveProps) {
-    const getKeys = (keys) => {
-      if (props.multiple) {
-        return [...keys];
-      }
-      if (keys.length) {
-        return [keys[0]];
-      }
-      return keys;
-    };
-    let selectedKeys = willReceiveProps ? undefined : getKeys(props.defaultSelectedKeys);
-    if ('selectedKeys' in props) {
-      selectedKeys = getKeys(props.selectedKeys);
-    }
-    return selectedKeys;
-  }
-
-  getRawExpandedKeys() {
-    if (!this._rawExpandedKeys && ('expandedKeys' in this.props)) {
-      this._rawExpandedKeys = [...this.state.expandedKeys];
-    }
-  }
-
-  getOpenTransitionName() {
-    const props = this.props;
-    let transitionName = props.openTransitionName;
-    const animationName = props.openAnimation;
-    if (!transitionName && typeof animationName === 'string') {
-      transitionName = `${props.prefixCls}-open-${animationName}`;
-    }
-    return transitionName;
-  }
-
-  getDragNodes(treeNode) {
-    const dragNodesKeys = [];
-    const tPArr = treeNode.props.pos.split('-');
-    loopAllChildren(this.props.children, (item, index, pos, newKey) => {
-      const pArr = pos.split('-');
-      if (treeNode.props.pos === pos || tPArr.length < pArr.length && isInclude(tPArr, pArr)) {
-        dragNodesKeys.push(newKey);
-      }
-    });
-    return dragNodesKeys;
-  }
-
-  getExpandedKeys(treeNode, expand) {
-    const key = treeNode.props.eventKey;
-    const expandedKeys = this.state.expandedKeys;
-    const expandedIndex = expandedKeys.indexOf(key);
-    let exKeys;
-    if (expandedIndex > -1 && !expand) {
-      exKeys = [...expandedKeys];
-      exKeys.splice(expandedIndex, 1);
-      return exKeys;
-    }
-    if (expand && expandedKeys.indexOf(key) === -1) {
-      return expandedKeys.concat([key]);
-    }
-  }
-
-  filterTreeNode(treeNode) {
-    const filterTreeNode = this.props.filterTreeNode;
-    if (typeof filterTreeNode !== 'function' || treeNode.props.disabled) {
-      return false;
-    }
-    return filterTreeNode.call(this, treeNode);
-  }
-
-  renderTreeNode(child, index, level = 0) {
-    const pos = `${level}-${index}`;
-    const key = child.key || pos;
-    const state = this.state;
-    const props = this.props;
-
-    // prefer to child's own selectable property if passed
-    let selectable = props.selectable;
-    if (child.props.hasOwnProperty('selectable')) {
-      selectable = child.props.selectable;
-    }
-
-    const cloneProps = {
-      ref: `treeNode-${key}`,
-      root: this,
-      eventKey: key,
-      pos,
-      selectable,
-      loadData: props.loadData,
-      onMouseEnter: props.onMouseEnter,
-      onMouseLeave: props.onMouseLeave,
-      onRightClick: props.onRightClick,
-      prefixCls: props.prefixCls,
-      showLine: props.showLine,
-      showIcon: props.showIcon,
-      draggable: props.draggable,
-      dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
-      dragOverGapTop: state.dragOverNodeKey === key && this.dropPosition === -1,
-      dragOverGapBottom: state.dragOverNodeKey === key && this.dropPosition === 1,
-      _dropTrigger: this._dropTrigger,
-      expanded: state.expandedKeys.indexOf(key) !== -1,
-      selected: state.selectedKeys.indexOf(key) !== -1,
-      openTransitionName: this.getOpenTransitionName(),
-      openAnimation: props.openAnimation,
-      filterTreeNode: this.filterTreeNode.bind(this),
-    };
-    if (props.checkable) {
-      cloneProps.checkable = props.checkable;
-      if (props.checkStrictly) {
-        if (state.checkedKeys) {
-          cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
-        }
-        if (props.checkedKeys.halfChecked) {
-          cloneProps.halfChecked = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
-        } else {
-          cloneProps.halfChecked = false;
-        }
-      } else {
-        if (this.checkedKeys) {
-          cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
-        }
-        cloneProps.halfChecked = this.halfCheckedKeys.indexOf(key) !== -1;
-      }
-    }
-    if (this.treeNodesStates && this.treeNodesStates[pos]) {
-      assign(cloneProps, this.treeNodesStates[pos].siblingPosition);
-    }
-    return React.cloneElement(child, cloneProps);
-  }
-
-  render() {
-    const props = this.props;
-    const domProps = {
-      className: classNames(props.className, props.prefixCls),
-      role: 'tree-node',
-    };
-    if (props.focusable) {
-      domProps.tabIndex = '0';
-      domProps.onKeyDown = this.onKeyDown;
-    }
-    const getTreeNodesStates = () => {
-      this.treeNodesStates = {};
-      loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
-        this.treeNodesStates[pos] = {
-          siblingPosition,
-        };
-      });
-    };
-    if (props.showLine && !props.checkable) {
-      getTreeNodesStates();
-    }
-    if (props.checkable && (this.checkedKeysChange || props.loadData)) {
-      if (props.checkStrictly) {
-        getTreeNodesStates();
-      } else if (props._treeNodesStates) {
-        this.treeNodesStates = props._treeNodesStates.treeNodesStates;
-        this.halfCheckedKeys = props._treeNodesStates.halfCheckedKeys;
-        this.checkedKeys = props._treeNodesStates.checkedKeys;
-      } else {
-        const checkedKeys = this.state.checkedKeys;
-        let checkKeys;
-        if (!props.loadData && this.checkKeys && this._checkedKeys &&
-          arraysEqual(this._checkedKeys, checkedKeys)) {
-          // if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
-          checkKeys = this.checkKeys;
-        } else {
-          const checkedPositions = [];
-          this.treeNodesStates = {};
-          loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
-            this.treeNodesStates[pos] = {
-              node: item,
-              key: keyOrPos,
-              checked: false,
-              halfChecked: false,
-              siblingPosition,
-            };
-            if (checkedKeys.indexOf(keyOrPos) !== -1) {
-              this.treeNodesStates[pos].checked = true;
-              checkedPositions.push(pos);
-            }
-          });
-          // if the parent node's key exists, it all children node will be checked
-          handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
-          checkKeys = getCheck(this.treeNodesStates);
-        }
-        this.halfCheckedKeys = checkKeys.halfCheckedKeys;
-        this.checkedKeys = checkKeys.checkedKeys;
-      }
-    }
-
-    return (
-      <ul {...domProps} unselectable ref="tree">
-        {React.Children.map(props.children, this.renderTreeNode, this)}
-      </ul>
-    );
-  }
-}
-
-Tree.propTypes = {
-  prefixCls: PropTypes.string,
-  children: PropTypes.any,
-  showLine: PropTypes.bool,
-  showIcon: PropTypes.bool,
-  selectable: PropTypes.bool,
-  multiple: PropTypes.bool,
-  checkable: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.node,
-  ]),
-  _treeNodesStates: PropTypes.object,
-  checkStrictly: PropTypes.bool,
-  draggable: PropTypes.bool,
-  autoExpandParent: PropTypes.bool,
-  defaultExpandAll: PropTypes.bool,
-  defaultExpandedKeys: PropTypes.arrayOf(PropTypes.string),
-  expandedKeys: PropTypes.arrayOf(PropTypes.string),
-  defaultCheckedKeys: PropTypes.arrayOf(PropTypes.string),
-  checkedKeys: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.object,
-  ]),
-  defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
-  selectedKeys: PropTypes.arrayOf(PropTypes.string),
-  onExpand: PropTypes.func,
-  onCheck: PropTypes.func,
-  onSelect: PropTypes.func,
-  loadData: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onRightClick: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onDragLeave: PropTypes.func,
-  onDrop: PropTypes.func,
-  onDragEnd: PropTypes.func,
-  filterTreeNode: PropTypes.func,
-  openTransitionName: PropTypes.string,
-  openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
-Tree.defaultProps = {
-  prefixCls: 'rc-tree',
-  showLine: false,
-  showIcon: true,
-  selectable: true,
-  multiple: false,
-  checkable: false,
-  checkStrictly: false,
-  draggable: false,
-  autoExpandParent: true,
-  defaultExpandAll: false,
-  defaultExpandedKeys: [],
-  defaultCheckedKeys: [],
-  defaultSelectedKeys: [],
-  onExpand: noop,
-  onCheck: noop,
-  onSelect: noop,
-  onDragStart: noop,
-  onDragEnter: noop,
-  onDragOver: noop,
-  onDragLeave: noop,
-  onDrop: noop,
-  onDragEnd: noop,
-};
-
-export default Tree;

src copy/src/TreeNode.jsx

@@ -1,383 +0,0 @@
-import React, { PropTypes } from 'react';
-import assign from 'object-assign';
-import classNames from 'classnames';
-import Animate from 'rc-animate';
-import { browser } from './util';
-
-const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : '';
-const ieOrEdge = /.*(IE|Edge).+/.test(browserUa);
-// const uaArray = browserUa.split(' ');
-// const gtIE8 = uaArray.length !== 2 || uaArray[0].indexOf('IE') === -1 || Number(uaArray[1]) > 8;
-
-const defaultTitle = '---';
-
-class TreeNode extends React.Component {
-  constructor(props) {
-    super(props);
-    [
-      'onExpand',
-      'onCheck',
-      'onContextMenu',
-      'onMouseEnter',
-      'onMouseLeave',
-      'onDragStart',
-      'onDragEnter',
-      'onDragOver',
-      'onDragLeave',
-      'onDrop',
-      'onDragEnd',
-    ].forEach((m) => {
-      this[m] = this[m].bind(this);
-    });
-    this.state = {
-      dataLoading: false,
-      dragNodeHighlight: false,
-    };
-  }
-
-  componentDidMount() {
-    if (!this.props.root._treeNodeInstances) {
-      this.props.root._treeNodeInstances = [];
-    }
-    this.props.root._treeNodeInstances.push(this);
-  }
-  // shouldComponentUpdate(nextProps) {
-  //   if (!nextProps.expanded) {
-  //     return false;
-  //   }
-  //   return true;
-  // }
-
-  onCheck() {
-    this.props.root.onCheck(this);
-  }
-
-  onSelect() {
-    this.props.root.onSelect(this);
-  }
-
-  onMouseEnter(e) {
-    e.preventDefault();
-    this.props.root.onMouseEnter(e, this);
-  }
-
-  onMouseLeave(e) {
-    e.preventDefault();
-    this.props.root.onMouseLeave(e, this);
-  }
-
-  onContextMenu(e) {
-    e.preventDefault();
-    this.props.root.onContextMenu(e, this);
-  }
-
-  onDragStart(e) {
-    // console.log('dragstart', this.props.eventKey, e);
-    // e.preventDefault();
-    e.stopPropagation();
-    this.setState({
-      dragNodeHighlight: true,
-    });
-    this.props.root.onDragStart(e, this);
-    try {
-      // ie throw error
-      // firefox-need-it
-      e.dataTransfer.setData('text/plain', '');
-    } finally {
-      // empty
-    }
-  }
-
-  onDragEnter(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.props.root.onDragEnter(e, this);
-  }
-
-  onDragOver(e) {
-    // todo disabled
-    e.preventDefault();
-    e.stopPropagation();
-    this.props.root.onDragOver(e, this);
-    return false;
-  }
-
-  onDragLeave(e) {
-    e.stopPropagation();
-    this.props.root.onDragLeave(e, this);
-  }
-
-  onDrop(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.setState({
-      dragNodeHighlight: false,
-    });
-    this.props.root.onDrop(e, this);
-  }
-
-  onDragEnd(e) {
-    e.stopPropagation();
-    this.setState({
-      dragNodeHighlight: false,
-    });
-    this.props.root.onDragEnd(e, this);
-  }
-
-  onExpand() {
-    const callbackPromise = this.props.root.onExpand(this);
-    if (callbackPromise && typeof callbackPromise === 'object') {
-      const setLoading = (dataLoading) => {
-        this.setState({ dataLoading });
-      };
-      setLoading(true);
-      callbackPromise.then(() => {
-        setLoading(false);
-      }, () => {
-        setLoading(false);
-      });
-    }
-  }
-
-  // keyboard event support
-  onKeyDown(e) {
-    e.preventDefault();
-  }
-
-  renderSwitcher(props, expandedState) {
-    const prefixCls = props.prefixCls;
-    const switcherCls = {
-      [`${prefixCls}-switcher`]: true,
-    };
-    if (!props.showLine) {
-      switcherCls[`${prefixCls}-noline_${expandedState}`] = true;
-    } else if (props.pos === '0-0') {
-      switcherCls[`${prefixCls}-roots_${expandedState}`] = true;
-    } else {
-      switcherCls[`${prefixCls}-center_${expandedState}`] = !props.last;
-      switcherCls[`${prefixCls}-bottom_${expandedState}`] = props.last;
-    }
-    if (props.disabled) {
-      switcherCls[`${prefixCls}-switcher-disabled`] = true;
-      return <span className={classNames(switcherCls)}></span>;
-    }
-    return <span className={classNames(switcherCls)} onClick={this.onExpand}></span>;
-  }
-
-  renderCheckbox(props) {
-    const prefixCls = props.prefixCls;
-    const checkboxCls = {
-      [`${prefixCls}-checkbox`]: true,
-    };
-    if (props.checked) {
-      checkboxCls[`${prefixCls}-checkbox-checked`] = true;
-    } else if (props.halfChecked) {
-      checkboxCls[`${prefixCls}-checkbox-indeterminate`] = true;
-    }
-    let customEle = null;
-    if (typeof props.checkable !== 'boolean') {
-      customEle = props.checkable;
-    }
-    if (props.disabled || props.disableCheckbox) {
-      checkboxCls[`${prefixCls}-checkbox-disabled`] = true;
-      return <span ref="checkbox" className={classNames(checkboxCls)}>{customEle}</span>;
-    }
-    return (
-      <span ref="checkbox"
-        className={classNames(checkboxCls) }
-        onClick={this.onCheck}
-      >{customEle}</span>);
-  }
-
-  renderChildren(props) {
-    const renderFirst = this.renderFirst;
-    this.renderFirst = 1;
-    let transitionAppear = true;
-    if (!renderFirst && props.expanded) {
-      transitionAppear = false;
-    }
-    const children = props.children;
-    let newChildren = children;
-    if (children &&
-      (children.type === TreeNode ||
-      Array.isArray(children) &&
-      children.every((item) => {
-        return item.type === TreeNode;
-      }))) {
-      const cls = {
-        [`${props.prefixCls}-child-tree`]: true,
-        [`${props.prefixCls}-child-tree-open`]: props.expanded,
-      };
-      if (props.showLine) {
-        cls[`${props.prefixCls}-line`] = !props.last;
-      }
-      const animProps = {};
-      if (props.openTransitionName) {
-        animProps.transitionName = props.openTransitionName;
-      } else if (typeof props.openAnimation === 'object') {
-        animProps.animation = assign({}, props.openAnimation);
-        if (!transitionAppear) {
-          delete animProps.animation.appear;
-        }
-      }
-      newChildren = (
-        <Animate {...animProps}
-          showProp="data-expanded"
-          transitionAppear={transitionAppear}
-          component=""
-        >
-          {!props.expanded ? null : <ul className={classNames(cls)} data-expanded={props.expanded}>
-            {React.Children.map(children, (item, index) => {
-              return props.root.renderTreeNode(item, index, props.pos);
-            }, props.root)}
-          </ul>}
-        </Animate>
-      );
-    }
-    return newChildren;
-  }
-
-  render() {
-    const props = this.props;
-    const prefixCls = props.prefixCls;
-    const expandedState = props.expanded ? 'open' : 'close';
-    let iconState = expandedState;
-
-    let canRenderSwitcher = true;
-    const content = props.title;
-    let newChildren = this.renderChildren(props);
-    if (!newChildren || newChildren === props.children) {
-      // content = newChildren;
-      newChildren = null;
-      if (!props.loadData || props.isLeaf) {
-        canRenderSwitcher = false;
-        iconState = 'docu';
-      }
-    }
-    // For performance, does't render children into dom when `!props.expanded` (move to Animate)
-    // if (!props.expanded) {
-    //   newChildren = null;
-    // }
-
-    const iconEleCls = {
-      [`${prefixCls}-iconEle`]: true,
-      [`${prefixCls}-icon_loading`]: this.state.dataLoading,
-      [`${prefixCls}-icon__${iconState}`]: true,
-    };
-
-    const selectHandle = () => {
-      const icon = (props.showIcon || props.loadData && this.state.dataLoading) ?
-        <span className={classNames(iconEleCls)}></span> : null;
-      const title = <span className={`${prefixCls}-title`}>{content}</span>;
-      const wrap = `${prefixCls}-node-content-wrapper`;
-      const domProps = {
-        className: `${wrap} ${wrap}-${iconState === expandedState ? iconState : 'normal'}`,
-      };
-      if (!props.disabled) {
-        if (props.selected || !props._dropTrigger && this.state.dragNodeHighlight) {
-          domProps.className += ` ${prefixCls}-node-selected`;
-        }
-        domProps.onClick = (e) => {
-          e.preventDefault();
-          if (props.selectable) {
-            this.onSelect();
-          }
-          // not fire check event
-          // if (props.checkable) {
-          //   this.onCheck();
-          // }
-        };
-        if (props.onRightClick) {
-          domProps.onContextMenu = this.onContextMenu;
-        }
-        if (props.onMouseEnter) {
-          domProps.onMouseEnter = this.onMouseEnter;
-        }
-        if (props.onMouseLeave) {
-          domProps.onMouseLeave = this.onMouseLeave;
-        }
-        if (props.draggable) {
-          domProps.className += ' draggable';
-          if (ieOrEdge) {
-            // ie bug!
-            domProps.href = '#';
-          }
-          domProps.draggable = true;
-          domProps['aria-grabbed'] = true;
-          domProps.onDragStart = this.onDragStart;
-        }
-      }
-      return (
-        <a ref="selectHandle" title={typeof content === 'string' ? content : ''} {...domProps}>
-          {icon}{title}
-        </a>
-      );
-    };
-
-    const liProps = {};
-    if (props.draggable) {
-      liProps.onDragEnter = this.onDragEnter;
-      liProps.onDragOver = this.onDragOver;
-      liProps.onDragLeave = this.onDragLeave;
-      liProps.onDrop = this.onDrop;
-      liProps.onDragEnd = this.onDragEnd;
-    }
-
-    let disabledCls = '';
-    let dragOverCls = '';
-    if (props.disabled) {
-      disabledCls = `${prefixCls}-treenode-disabled`;
-    } else if (props.dragOver) {
-      dragOverCls = 'drag-over';
-    } else if (props.dragOverGapTop) {
-      dragOverCls = 'drag-over-gap-top';
-    } else if (props.dragOverGapBottom) {
-      dragOverCls = 'drag-over-gap-bottom';
-    }
-
-    const filterCls = props.filterTreeNode(this) ? 'filter-node' : '';
-
-    const noopSwitcher = () => {
-      const cls = {
-        [`${prefixCls}-switcher`]: true,
-        [`${prefixCls}-switcher-noop`]: true,
-      };
-      if (props.showLine) {
-        cls[`${prefixCls}-center_docu`] = !props.last;
-        cls[`${prefixCls}-bottom_docu`] = props.last;
-      } else {
-        cls[`${prefixCls}-noline_docu`] = true;
-      }
-      return <span className={classNames(cls)}></span>;
-    };
-
-    return (
-      <li {...liProps} ref="li"
-        className={classNames(props.className, disabledCls, dragOverCls, filterCls) }
-      >
-        {canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher()}
-        {props.checkable ? this.renderCheckbox(props) : null}
-        {selectHandle()}
-        {newChildren}
-      </li>
-    );
-  }
-}
-
-TreeNode.isTreeNode = 1;
-
-TreeNode.propTypes = {
-  prefixCls: PropTypes.string,
-  disabled: PropTypes.bool,
-  disableCheckbox: PropTypes.bool,
-  expanded: PropTypes.bool,
-  isLeaf: PropTypes.bool,
-  root: PropTypes.object,
-  onSelect: PropTypes.func,
-};
-
-TreeNode.defaultProps = {
-  title: defaultTitle,
-};
-
-export default TreeNode;

src copy/src/index.js

@@ -1,5 +0,0 @@
-import Tree from './Tree';
-import TreeNode from './TreeNode';
-Tree.TreeNode = TreeNode;
-
-export default Tree;

src copy/util.js

@@ -1,286 +0,0 @@
-/* eslint no-loop-func: 0*/
-
-import React from 'react';
-
-export function browser(navigator) {
-  let tem;
-  const ua = navigator.userAgent;
-  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
-  if (/trident/i.test(M[1])) {
-    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
-    return `IE ${tem[1] || ''}`;
-  }
-  if (M[1] === 'Chrome') {
-    tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
-    if (tem) return tem.slice(1).join(' ').replace('OPR', 'Opera');
-  }
-  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
-  tem = ua.match(/version\/(\d+)/i);
-  if (tem) {
-    M.splice(1, 1, tem[1]);
-  }
-  return M.join(' ');
-}
-
-// export function getOffset(el) {
-//   const obj = el.getBoundingClientRect();
-//   return {
-//     left: obj.left + document.body.scrollLeft,
-//     top: obj.top + document.body.scrollTop,
-//     width: obj.width,
-//     height: obj.height
-//   };
-// }
-
-// // iscroll offset
-// offset = function (el) {
-//   var left = -el.offsetLeft,
-//     top = -el.offsetTop;
-
-//   // jshint -W084
-//   while (el = el.offsetParent) {
-//     left -= el.offsetLeft;
-//     top -= el.offsetTop;
-//   }
-//   // jshint +W084
-
-//   return {
-//     left: left,
-//     top: top
-//   };
-// }
-
-/* eslint-disable */
-export function getOffset(ele) {
-  let doc, win, docElem, rect;
-
-  if (!ele.getClientRects().length) {
-    return { top: 0, left: 0 };
-  }
-
-  rect = ele.getBoundingClientRect();
-
-  if (rect.width || rect.height) {
-    doc = ele.ownerDocument;
-    win = doc.defaultView;
-    docElem = doc.documentElement;
-
-    return {
-      top: rect.top + win.pageYOffset - docElem.clientTop,
-      left: rect.left + win.pageXOffset - docElem.clientLeft
-    };
-  }
-
-  return rect;
-}
-/* eslint-enable */
-
-function getChildrenlength(children) {
-  let len = 1;
-  if (Array.isArray(children)) {
-    len = children.length;
-  }
-  return len;
-}
-
-function getSiblingPosition(index, len, siblingPosition) {
-  if (len === 1) {
-    siblingPosition.first = true;
-    siblingPosition.last = true;
-  } else {
-    siblingPosition.first = index === 0;
-    siblingPosition.last = index === len - 1;
-  }
-  return siblingPosition;
-}
-
-export function loopAllChildren(childs, callback, parent) {
-  const loop = (children, level, _parent) => {
-    const len = getChildrenlength(children);
-    React.Children.forEach(children, (item, index) => {
-      const pos = `${level}-${index}`;
-      if (item.props.children && item.type && item.type.isTreeNode) {
-        loop(item.props.children, pos, { node: item, pos });
-      }
-      callback(item, index, pos, item.key || pos, getSiblingPosition(index, len, {}), _parent);
-    });
-  };
-  loop(childs, 0, parent);
-}
-
-export function isInclude(smallArray, bigArray) {
-  return smallArray.every((ii, i) => {
-    return ii === bigArray[i];
-  });
-}
-// console.log(isInclude(['0', '1'], ['0', '10', '1']));
-
-
-// arr.length === 628, use time: ~20ms
-export function filterParentPosition(arr) {
-  const levelObj = {};
-  arr.forEach((item) => {
-    const posLen = item.split('-').length;
-    if (!levelObj[posLen]) {
-      levelObj[posLen] = [];
-    }
-    levelObj[posLen].push(item);
-  });
-  const levelArr = Object.keys(levelObj).sort();
-  for (let i = 0; i < levelArr.length; i++) {
-    if (levelArr[i + 1]) {
-      levelObj[levelArr[i]].forEach(ii => {
-        for (let j = i + 1; j < levelArr.length; j++) {
-          levelObj[levelArr[j]].forEach((_i, index) => {
-            if (isInclude(ii.split('-'), _i.split('-'))) {
-              levelObj[levelArr[j]][index] = null;
-            }
-          });
-          levelObj[levelArr[j]] = levelObj[levelArr[j]].filter(p => p);
-        }
-      });
-    }
-  }
-  let nArr = [];
-  levelArr.forEach(i => {
-    nArr = nArr.concat(levelObj[i]);
-  });
-  return nArr;
-}
-// console.log(filterParentPosition(
-//   ['0-2', '0-3-3', '0-10', '0-10-0', '0-0-1', '0-0', '0-1-1', '0-1']
-// ));
-
-
-function stripTail(str) {
-  const arr = str.match(/(.+)(-[^-]+)$/);
-  let st = '';
-  if (arr && arr.length === 3) {
-    st = arr[1];
-  }
-  return st;
-}
-function splitPosition(pos) {
-  return pos.split('-');
-}
-
-export function handleCheckState(obj, checkedPositionArr, checkIt) {
-  // console.log(stripTail('0-101-000'));
-  let objKeys = Object.keys(obj);
-  // let s = Date.now();
-  objKeys.forEach((i, index) => {
-    const iArr = splitPosition(i);
-    let saved = false;
-    checkedPositionArr.forEach((_pos) => {
-      // 设置子节点，全选或全不选
-      const _posArr = splitPosition(_pos);
-      if (iArr.length > _posArr.length && isInclude(_posArr, iArr)) {
-        obj[i].halfChecked = false;
-        obj[i].checked = checkIt;
-        objKeys[index] = null;
-      }
-      if (iArr[0] === _posArr[0] && iArr[1] === _posArr[1]) {
-        // 如果
-        saved = true;
-      }
-    });
-    if (!saved) {
-      objKeys[index] = null;
-    }
-  });
-  // TODO: 循环 2470000 次耗时约 1400 ms。 性能瓶颈！
-  // console.log(Date.now()-s, checkedPositionArr.length * objKeys.length);
-  objKeys = objKeys.filter(i => i); // filter non null;
-
-  for (let pIndex = 0; pIndex < checkedPositionArr.length; pIndex++) {
-    // 循环设置父节点的 选中 或 半选状态
-    const loop = (__pos) => {
-      const _posLen = splitPosition(__pos).length;
-      if (_posLen <= 2) { // e.g. '0-0', '0-1'
-        return;
-      }
-      let sibling = 0;
-      let siblingChecked = 0;
-      const parentPosition = stripTail(__pos);
-      objKeys.forEach((i /* , index*/) => {
-        const iArr = splitPosition(i);
-        if (iArr.length === _posLen && isInclude(splitPosition(parentPosition), iArr)) {
-          sibling++;
-          if (obj[i].checked) {
-            siblingChecked++;
-            const _i = checkedPositionArr.indexOf(i);
-            if (_i > -1) {
-              checkedPositionArr.splice(_i, 1);
-              if (_i <= pIndex) {
-                pIndex--;
-              }
-            }
-          } else if (obj[i].halfChecked) {
-            siblingChecked += 0.5;
-          }
-          // objKeys[index] = null;
-        }
-      });
-      // objKeys = objKeys.filter(i => i); // filter non null;
-      const parent = obj[parentPosition];
-      // sibling 不会等于0
-      // 全不选 - 全选 - 半选
-      if (siblingChecked === 0) {
-        parent.checked = false;
-        parent.halfChecked = false;
-      } else if (siblingChecked === sibling) {
-        parent.checked = true;
-        parent.halfChecked = false;
-      } else {
-        parent.halfChecked = true;
-        parent.checked = false;
-      }
-      loop(parentPosition);
-    };
-    loop(checkedPositionArr[pIndex], pIndex);
-  }
-  // console.log(Date.now()-s, objKeys.length, checkIt);
-}
-
-export function getCheck(treeNodesStates) {
-  const halfCheckedKeys = [];
-  const checkedKeys = [];
-  const checkedNodes = [];
-  const checkedNodesPositions = [];
-  Object.keys(treeNodesStates).forEach((item) => {
-    const itemObj = treeNodesStates[item];
-    if (itemObj.checked) {
-      checkedKeys.push(itemObj.key);
-      checkedNodes.push(itemObj.node);
-      checkedNodesPositions.push({ node: itemObj.node, pos: item });
-    } else if (itemObj.halfChecked) {
-      halfCheckedKeys.push(itemObj.key);
-    }
-  });
-  return {
-    halfCheckedKeys, checkedKeys, checkedNodes, checkedNodesPositions, treeNodesStates,
-  };
-}
-
-export function getStrictlyValue(checkedKeys, halfChecked) {
-  if (halfChecked) {
-    return { checked: checkedKeys, halfChecked };
-  }
-  return checkedKeys;
-}
-
-export function arraysEqual(a, b) {
-  if (a === b) return true;
-  if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') {
-    return false;
-  }
-  if (a.length !== b.length) return false;
-
-  // If you don't care about the order of the elements inside
-  // the array, you should sort both arrays here.
-
-  for (let i = 0; i < a.length; ++i) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}

src/TreeNode.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import assign from 'object-assign';
 import classNames from 'classnames';
-import Animate from 'rc-animate';
+import Animate from 'bee-animate';
 import { browser } from './util';
 
 const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : '';

src/Treecopy.scss

@@ -1,363 +0,0 @@
-
-$treePrefixCls: 'u-tree';
-.#{$treePrefixCls} {
-  margin: 0;
-  padding: 5px;
-  li {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    white-space: nowrap;
-    outline: 0;
-    .draggable {
-      color: #333;
-      -moz-user-select: none;
-      -khtml-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      /* Required to make elements draggable in old WebKit */
-      -khtml-user-drag: element;
-      -webkit-user-drag: element;
-    }
-    &.drag-over {
-      > .draggable {
-        background-color: #316ac5;
-        color: white;
-        border: 1px #316ac5 solid;
-        opacity: 0.8;
-      }
-    }
-    &.drag-over-gap-top {
-      > .draggable {
-        border-top: 2px blue solid;
-      }
-    }
-    &.drag-over-gap-bottom {
-      > .draggable {
-        border-bottom: 2px blue solid;
-      }
-    }
-    &.filter-node {
-      > .#{$treePrefixCls}-node-content-wrapper {
-        color: #a60000!important;
-        font-weight: bold!important;
-      }
-    }
-    ul {
-      margin: 0;
-      padding: 0 0 0 18px;
-      &.#{$treePrefixCls}-line {
-        background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y;
-      }
-    }
-    .#{$treePrefixCls}-node-content-wrapper {
-      display: inline-block;
-      padding: 1px 3px 0 0;
-      margin: 0;
-      cursor: pointer;
-      height: 17px;
-      text-decoration: none;
-      vertical-align: top;
-    }
-    span {
-      &.#{$treePrefixCls}-switcher,
-      &.#{$treePrefixCls}-checkbox,
-      &.#{$treePrefixCls}-iconEle {
-        line-height: 16px;
-        margin-right: 2px;
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        vertical-align: middle;
-        border: 0 none;
-        cursor: pointer;
-        outline: none;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-attachment: scroll;
-        background-image: url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
-      }
-      &.#{$treePrefixCls}-icon_loading {
-        margin-right: 2px;
-        vertical-align: top;
-        background: url(https://t.alipayobjects.com/images/rmsweb/T1YxhiXgJbXXXXXXXX.gif) no-repeat scroll 0 0 transparent;
-      }
-      &.#{$treePrefixCls}-switcher {
-        &.#{$treePrefixCls}-switcher-noop {
-          cursor: auto;
-        }
-        &.#{$treePrefixCls}-roots_open {
-          background-position: -93px -56px;
-        }
-        &.#{$treePrefixCls}-roots_close {
-          background-position: -75px -56px;
-        }
-        &.#{$treePrefixCls}-center_open {
-          background-position: -92px -18px;
-        }
-        &.#{$treePrefixCls}-center_close {
-          background-position: -74px -18px;
-        }
-        &.#{$treePrefixCls}-bottom_open {
-          background-position: -92px -36px;
-        }
-        &.#{$treePrefixCls}-bottom_close {
-          background-position: -74px -36px;
-        }
-        &.#{$treePrefixCls}-noline_open {
-          background-position: -92px -72px;
-        }
-        &.#{$treePrefixCls}-noline_close {
-          background-position: -74px -72px;
-        }
-        &.#{$treePrefixCls}-center_docu {
-          background-position: -56px -18px;
-        }
-        &.#{$treePrefixCls}-bottom_docu {
-          background-position: -56px -36px;
-        }
-        &.#{$treePrefixCls}-noline_docu {
-          background: none;
-        }
-      }
-      &.#{$treePrefixCls}-checkbox {
-        width: 13px;
-        height: 13px;
-        margin: 0 3px;
-        background-position: 0 0;
-        &-checked {
-          background-position: -14px 0;
-        }
-        &-indeterminate {
-          background-position: -14px -28px;
-        }
-        &-disabled {
-          background-position: 0 -56px;
-        }
-        &.#{$treePrefixCls}-checkbox-checked.#{$treePrefixCls}-checkbox-disabled {
-          background-position: -14px -56px;
-        }
-        &.#{$treePrefixCls}-checkbox-indeterminate.#{$treePrefixCls}-checkbox-disabled {
-          position: relative;
-          background: #ccc;
-          border-radius: 3px;
-          &::after {
-            content: ' ';
-            -webkit-transform: scale(1);
-            transform: scale(1);
-            position: absolute;
-            left: 3px;
-            top: 5px;
-            width: 5px;
-            height: 0;
-            border: 2px solid #fff;
-            border-top: 0;
-            border-left: 0;
-          }
-        }
-      }
-    }
-  }
-  &-child-tree {
-    display: none;
-    &-open {
-      display: block;
-    }
-  }
-  &-treenode-disabled {
-    >span,
-    >a,
-    >a span {
-      color: #ccc;
-      cursor: not-allowed;
-    }
-  }
-  &-node-selected {
-    background-color: #ffe6b0;
-    border: 1px #ffb951 solid;
-    opacity: 0.8;
-  }
-  &-icon__open {
-    margin-right: 2px;
-    background-position: -110px -16px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    background-position: -110px 0;
-    vertical-align: top;
-  }
-  &-icon__docu {
-    margin-right: 2px;
-    background-position: -110px -32px;
-    vertical-align: top;
-  }
-}
-
-$tree-prefix-cls: "ant-tree";
-$primary-color: '#108ee9';
-$highlight-color: '#f50';
-$font-size-base: '12px';
-//.antCheckboxFn($checkbox-prefix-cls: "ant-tree-checkbox");
-
-.#{$tree-prefix-cls} {
-  margin: 0;
-  padding: 5px;
-  font-size: $font-size-base;
-  li {
-    padding: 0;
-    margin: 7px 0;
-    list-style: none;
-    white-space: nowrap;
-    outline: 0;
-    a[draggable],
-    a[draggable="true"] {
-      user-select: none;
-      /* Required to make elements draggable in old WebKit */
-      -khtml-user-drag: element;
-      -webkit-user-drag: element;
-    }
-    &.drag-over {
-      > a[draggable] {
-        background-color: $primary-color;
-        color: white;
-        opacity: 0.8;
-      }
-    }
-    &.drag-over-gap-top {
-      > a[draggable] {
-        border-top: 2px $primary-color solid;
-      }
-    }
-    &.drag-over-gap-bottom {
-      > a[draggable] {
-        border-bottom: 2px $primary-color solid;
-      }
-    }
-    &.filter-node {
-      > a {
-        color: $highlight-color!important;
-        font-weight: bold!important;
-      }
-    }
-    ul {
-      margin: 0;
-      padding: 0 0 0 18px;
-    }
-    a {
-      display: inline-block;
-      padding: 1px 5px;
-      border-radius: 2px;
-      margin: 0;
-      cursor: pointer;
-      text-decoration: none;
-      vertical-align: top;
-      color: $text-color;
-      transition: all 0.3s ease;
-      &:hover {
-        background-color: tint($primary-color, 90%);
-      }
-      &.#{$tree-prefix-cls}-node-selected {
-        background-color: tint($primary-color, 80%);
-      }
-    }
-    span {
-      &.#{$tree-prefix-cls}-checkbox {
-        margin: 2px 4px 0 0;
-      }
-      &.#{$tree-prefix-cls}-switcher,
-      &.#{$tree-prefix-cls}-iconEle {
-        margin: 0;
-        width: 16px;
-        height: 16px;
-        line-height: 16px;
-        display: inline-block;
-        vertical-align: middle;
-        border: 0 none;
-        cursor: pointer;
-        outline: none;
-      }
-      &.#{$tree-prefix-cls}-icon_loading {
-        &:after {
-          display: inline-block;
-          animation: loadingCircle 1s infinite linear;
-          color: $primary-color;
-          font-family: 'uf';
-		  	text-rendering: optimizeLegibility;
-		    -webkit-font-smoothing: antialiased;
-		    -moz-osx-font-smoothing: grayscale;
-		    content: "\e6ae";
-        }
-      }
-      &.#{$tree-prefix-cls}-switcher {
-        &.#{$tree-prefix-cls}-switcher-noop {
-          cursor: auto;
-        }
-        &.#{$tree-prefix-cls}-roots_open,
-        &.#{$tree-prefix-cls}-center_open,
-        &.#{$tree-prefix-cls}-bottom_open,
-        &.#{$tree-prefix-cls}-noline_open {
-          //@include antTreeSwitcherIcon;
-        }
-        &.#{$tree-prefix-cls}-roots_close,
-        &.#{$tree-prefix-cls}-center_close,
-        &.#{$tree-prefix-cls}-bottom_close,
-        &.#{$tree-prefix-cls}-noline_close {
-          //@include antTreeSwitcherIcon;
-          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-          &:after {
-            transform: rotate(270deg) scale(0.6);
-          }
-        }
-      }
-    }
-  }
-  &-child-tree {
-    display: none;
-    &-open {
-      display: block;
-    }
-  }
-  &-treenode-disabled {
-    >span,
-    >a,
-    >a span {
-      color: #ccc;
-      cursor: not-allowed;
-    }
-  }
-  &-icon__open {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-  &-icon__close {
-    margin-right: 2px;
-    vertical-align: top;
-  }
-}
-@mixin antTreeSwitcherIcon {
-  position: relative;
-  &:after {
-  	font-size: 12px;
-    -webkit-transform: scale(0.58333333) rotate(0deg);
-    -ms-transform: scale(0.58333333) rotate(0deg);
-    transform: scale(0.58333333) rotate(0deg);
-    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
-    zoom: 1;
-    display: inline-block;
-    font-family: 'anticon';
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    content: "\E606";
-    font-weight: bold;
-    position: absolute;
-    top: 0;
-    right: 4px;
-    color: #666;
-    -webkit-transition: -webkit-transform .3s ease;
-    transition: -webkit-transform .3s ease;
-    transition: transform .3s ease;
-    transition: transform .3s ease, -webkit-transform .3s ease;
-  }
-}

src/openAnimation.js

@@ -1,4 +1,4 @@
-import cssAnimation from 'css-animation';
+import { cssAnimation } from 'tinper-bee-core';
 
 function animate(node, show, done) {
   let height;