react 16 升级

build/Tree.css

@@ -1,16 +1,23 @@
+@charset "UTF-8";
 /* FormGroup */
 /*  Navlayout  */
 /* FormGroup */
 /*  Navlayout  */
 .u-checkbox {
-  width: 18px;
+  display: inline-block;
-  display: inline-block; }
+  position: relative; }
   .u-checkbox.disabled .u-checkbox-label {
     cursor: not-allowed;
     opacity: 0.5; }
   .u-checkbox input[type='checkbox'] {
-    display: none;
+    position: absolute;
-    cursor: pointer; }
+    left: 0;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    top: 2px;
+    height: 18px;
+    width: 18px; }
   .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);
@@ -26,14 +33,13 @@
     display: inline-block;
     position: relative;
     padding-left: 25px;
-    margin-right: 10px;
+    color: #a9a9a9; }
-    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;
+      background-color: #fff;
       -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
       -webkit-transition: all 0.3s ease-in-out;
@@ -44,7 +50,7 @@
       width: 18px;
       height: 18px;
       left: 0;
-      bottom: 0;
+      top: -13px;
       text-align: center;
       position: absolute; }
     .u-checkbox .u-checkbox-label:after {
@@ -54,55 +60,54 @@
       width: 18px;
       height: 18px;
       left: 0;
-      bottom: 0;
+      top: -13px;
       text-align: center;
       position: absolute; }
 
+.u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label {
+  background-color: #108ee9;
+  border-color: #108ee9; }
+
+.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
+  color: #fff;
+  content: "\e6ce";
+  line-height: 18px;
+  font-size: 14px; }
+
+.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
+  box-shadow: inset 0 0 0 10px #1e88e5;
+  border-color: #1e88e5; }
+
 .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; }
 
@@ -416,3 +421,11 @@
 .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); }
+
+/**
+ * 自定义switcher图标
+ */
+.u-tree li span.u-tree-switcher.uf {
+  font-size: 14px; }
+  .u-tree li span.u-tree-switcher.uf:after {
+    content: ""; }

build/Tree.js

@@ -20,6 +20,10 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 var _util = require('./util');
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 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; }
@@ -144,11 +148,17 @@ var Tree = function (_React$Component) {
   };
 
   Tree.prototype.onDragOver = function onDragOver(e, treeNode) {
-    this.props.onDragOver({ event: e, node: treeNode });
+    this.props.onDragOver({
+      event: e,
+      node: treeNode
+    });
   };
 
   Tree.prototype.onDragLeave = function onDragLeave(e, treeNode) {
-    this.props.onDragLeave({ event: e, node: treeNode });
+    this.props.onDragLeave({
+      event: e,
+      node: treeNode
+    });
   };
 
   Tree.prototype.onDrop = function onDrop(e, treeNode) {
@@ -186,7 +196,10 @@ var Tree = function (_React$Component) {
     this.setState({
       dragOverNodeKey: ''
     });
-    this.props.onDragEnd({ event: e, node: treeNode });
+    this.props.onDragEnd({
+      event: e,
+      node: treeNode
+    });
   };
 
   Tree.prototype.onExpand = function onExpand(treeNode) {
@@ -202,15 +215,22 @@ var Tree = function (_React$Component) {
       expandedKeys.splice(index, 1);
     }
     if (!controlled) {
-      this.setState({ expandedKeys: expandedKeys });
+      this.setState({
+        expandedKeys: expandedKeys
+      });
     }
-    this.props.onExpand(expandedKeys, { node: treeNode, expanded: expanded });
+    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 });
+          _this2.setState({
+            expandedKeys: expandedKeys
+          });
         }
       });
     }
@@ -318,11 +338,17 @@ var Tree = function (_React$Component) {
   };
 
   Tree.prototype.onMouseEnter = function onMouseEnter(e, treeNode) {
-    this.props.onMouseEnter({ event: e, node: treeNode });
+    this.props.onMouseEnter({
+      event: e,
+      node: treeNode
+    });
   };
 
   Tree.prototype.onMouseLeave = function onMouseLeave(e, treeNode) {
-    this.props.onMouseLeave({ event: e, node: treeNode });
+    this.props.onMouseLeave({
+      event: e,
+      node: treeNode
+    });
   };
 
   Tree.prototype.onContextMenu = function onContextMenu(e, treeNode) {
@@ -343,7 +369,10 @@ var Tree = function (_React$Component) {
     this.setState({
       selectedKeys: selectedKeys
     });
-    this.props.onRightClick({ event: e, node: treeNode });
+    this.props.onRightClick({
+      event: e,
+      node: treeNode
+    });
   };
 
   // all keyboard events callbacks run from here at first
@@ -508,7 +537,9 @@ var Tree = function (_React$Component) {
       selected: state.selectedKeys.indexOf(key) !== -1,
       openTransitionName: this.getOpenTransitionName(),
       openAnimation: props.openAnimation,
-      filterTreeNode: this.filterTreeNode.bind(this)
+      filterTreeNode: this.filterTreeNode.bind(this),
+      openIcon: props.openIcon,
+      closeIcon: props.closeIcon
     };
     if (props.checkable) {
       cloneProps.checkable = props.checkable;
@@ -606,40 +637,40 @@ var Tree = function (_React$Component) {
 }(_react2["default"].Component);
 
 Tree.propTypes = {
-  prefixCls: _react.PropTypes.string,
+  prefixCls: _propTypes2["default"].string,
-  children: _react.PropTypes.any,
+  children: _propTypes2["default"].any,
-  showLine: _react.PropTypes.bool,
+  showLine: _propTypes2["default"].bool,
-  showIcon: _react.PropTypes.bool,
+  showIcon: _propTypes2["default"].bool,
-  selectable: _react.PropTypes.bool,
+  selectable: _propTypes2["default"].bool,
-  multiple: _react.PropTypes.bool,
+  multiple: _propTypes2["default"].bool,
-  checkable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.node]),
+  checkable: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].node]),
-  _treeNodesStates: _react.PropTypes.object,
+  _treeNodesStates: _propTypes2["default"].object,
-  checkStrictly: _react.PropTypes.bool,
+  checkStrictly: _propTypes2["default"].bool,
-  draggable: _react.PropTypes.bool,
+  draggable: _propTypes2["default"].bool,
-  autoExpandParent: _react.PropTypes.bool,
+  autoExpandParent: _propTypes2["default"].bool,
-  defaultExpandAll: _react.PropTypes.bool,
+  defaultExpandAll: _propTypes2["default"].bool,
-  defaultExpandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  defaultExpandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
-  expandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  expandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
-  defaultCheckedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  defaultCheckedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
-  checkedKeys: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.string), _react.PropTypes.object]),
+  checkedKeys: _propTypes2["default"].oneOfType([_propTypes2["default"].arrayOf(_propTypes2["default"].string), _propTypes2["default"].object]),
-  defaultSelectedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  defaultSelectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
-  selectedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string),
+  selectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
-  onExpand: _react.PropTypes.func,
+  onExpand: _propTypes2["default"].func,
-  onCheck: _react.PropTypes.func,
+  onCheck: _propTypes2["default"].func,
-  onSelect: _react.PropTypes.func,
+  onSelect: _propTypes2["default"].func,
-  loadData: _react.PropTypes.func,
+  loadData: _propTypes2["default"].func,
-  onMouseEnter: _react.PropTypes.func,
+  onMouseEnter: _propTypes2["default"].func,
-  onMouseLeave: _react.PropTypes.func,
+  onMouseLeave: _propTypes2["default"].func,
-  onRightClick: _react.PropTypes.func,
+  onRightClick: _propTypes2["default"].func,
-  onDragStart: _react.PropTypes.func,
+  onDragStart: _propTypes2["default"].func,
-  onDragEnter: _react.PropTypes.func,
+  onDragEnter: _propTypes2["default"].func,
-  onDragOver: _react.PropTypes.func,
+  onDragOver: _propTypes2["default"].func,
-  onDragLeave: _react.PropTypes.func,
+  onDragLeave: _propTypes2["default"].func,
-  onDrop: _react.PropTypes.func,
+  onDrop: _propTypes2["default"].func,
-  onDragEnd: _react.PropTypes.func,
+  onDragEnd: _propTypes2["default"].func,
-  filterTreeNode: _react.PropTypes.func,
+  filterTreeNode: _propTypes2["default"].func,
-  openTransitionName: _react.PropTypes.string,
+  openTransitionName: _propTypes2["default"].string,
-  openAnimation: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object])
+  openAnimation: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
 };
 
 Tree.defaultProps = {

build/TreeNode.js

@@ -26,6 +26,10 @@ var _beeAnimate2 = _interopRequireDefault(_beeAnimate);
 
 var _util = require('./util');
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 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; }
@@ -158,7 +162,9 @@ var TreeNode = function (_React$Component) {
     var callbackPromise = this.props.root.onExpand(this);
     if (callbackPromise && (typeof callbackPromise === 'undefined' ? 'undefined' : _typeof(callbackPromise)) === 'object') {
       var setLoading = function setLoading(dataLoading) {
-        _this2.setState({ dataLoading: dataLoading });
+        _this2.setState({
+          dataLoading: dataLoading
+        });
       };
       setLoading(true);
       callbackPromise.then(function () {
@@ -177,6 +183,7 @@ var TreeNode = function (_React$Component) {
   };
 
   TreeNode.prototype.renderSwitcher = function renderSwitcher(props, expandedState) {
+    var stateIcon = void 0;
     var prefixCls = props.prefixCls;
     var switcherCls = _defineProperty({}, prefixCls + '-switcher', true);
     if (!props.showLine) {
@@ -187,6 +194,15 @@ var TreeNode = function (_React$Component) {
       switcherCls[prefixCls + '-center_' + expandedState] = !props.last;
       switcherCls[prefixCls + '-bottom_' + expandedState] = props.last;
     }
+
+    if (expandedState === 'open' && props.openIcon) {
+      stateIcon = 'uf ' + props.openIcon;
+    }
+    if (expandedState === 'close' && props.closeIcon) {
+      stateIcon = ['uf ' + props.closeIcon];
+    }
+    switcherCls[stateIcon] = stateIcon;
+
     if (props.disabled) {
       switcherCls[prefixCls + '-switcher-disabled'] = true;
       return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls) });
@@ -282,6 +298,8 @@ var TreeNode = function (_React$Component) {
     var canRenderSwitcher = true;
     var content = props.title;
     var newChildren = this.renderChildren(props);
+    var openIconCls = false,
+        closeIconCls = false;
     if (!newChildren || newChildren === props.children) {
       // content = newChildren;
       newChildren = null;
@@ -296,7 +314,6 @@ var TreeNode = function (_React$Component) {
     // }
 
     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(
@@ -404,13 +421,15 @@ var TreeNode = function (_React$Component) {
 TreeNode.isTreeNode = 1;
 
 TreeNode.propTypes = {
-  prefixCls: _react.PropTypes.string,
+  prefixCls: _propTypes2["default"].string,
-  disabled: _react.PropTypes.bool,
+  disabled: _propTypes2["default"].bool,
-  disableCheckbox: _react.PropTypes.bool,
+  disableCheckbox: _propTypes2["default"].bool,
-  expanded: _react.PropTypes.bool,
+  expanded: _propTypes2["default"].bool,
-  isLeaf: _react.PropTypes.bool,
+  isLeaf: _propTypes2["default"].bool,
-  root: _react.PropTypes.object,
+  root: _propTypes2["default"].object,
-  onSelect: _react.PropTypes.func
+  onSelect: _propTypes2["default"].func,
+  openIcon: _propTypes2["default"].string,
+  closeIcon: _propTypes2["default"].string
 };
 
 TreeNode.defaultProps = {

build/index.js

@@ -22,6 +22,10 @@ var _openAnimation = require('./openAnimation');
 
 var _openAnimation2 = _interopRequireDefault(_openAnimation);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 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; }
@@ -33,57 +37,57 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 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 TreeProps = {
-  showLine: _react.PropTypes.bool,
+  showLine: _propTypes2["default"].bool,
-  className: _react.PropTypes.string,
+  className: _propTypes2["default"].string,
   /** 是否支持多选 */
-  multiple: _react.PropTypes.bool,
+  multiple: _propTypes2["default"].bool,
   /** 是否自动展开父节点 */
-  autoExpandParent: _react.PropTypes.bool,
+  autoExpandParent: _propTypes2["default"].bool,
   /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
-  checkStrictly: _react.PropTypes.bool,
+  checkStrictly: _propTypes2["default"].bool,
   /** 是否支持选中 */
-  checkable: _react.PropTypes.bool,
+  checkable: _propTypes2["default"].bool,
   /** 默认展开所有树节点 */
-  defaultExpandAll: _react.PropTypes.bool,
+  defaultExpandAll: _propTypes2["default"].bool,
   /** 默认展开指定的树节点 */
-  defaultExpandedKeys: _react.PropTypes.array,
+  defaultExpandedKeys: _propTypes2["default"].array,
   /** （受控）展开指定的树节点 */
-  expandedKeys: _react.PropTypes.array,
+  expandedKeys: _propTypes2["default"].array,
   /** （受控）选中复选框的树节点 */
-  checkedKeys: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object]),
+  checkedKeys: _propTypes2["default"].oneOfType([_propTypes2["default"].array, _propTypes2["default"].object]),
   /** 默认选中复选框的树节点 */
-  defaultCheckedKeys: _react.PropTypes.array,
+  defaultCheckedKeys: _propTypes2["default"].array,
   /** （受控）设置选中的树节点 */
-  selectedKeys: _react.PropTypes.array,
+  selectedKeys: _propTypes2["default"].array,
   /** 默认选中的树节点 */
-  defaultSelectedKeys: _react.PropTypes.array,
+  defaultSelectedKeys: _propTypes2["default"].array,
   /** 展开/收起节点时触发 */
-  onExpand: _react.PropTypes.func,
+  onExpand: _propTypes2["default"].func,
   /** 点击复选框触发 */
-  onCheck: _react.PropTypes.func,
+  onCheck: _propTypes2["default"].func,
   /** 点击树节点触发 */
-  onSelect: _react.PropTypes.func,
+  onSelect: _propTypes2["default"].func,
   /** filter some AntTreeNodes as you need. it should return true */
-  filterAntTreeNode: _react.PropTypes.func,
+  filterAntTreeNode: _propTypes2["default"].func,
   /** 异步加载数据 */
-  loadData: _react.PropTypes.func,
+  loadData: _propTypes2["default"].func,
   /** 响应右键点击 */
-  onRightClick: _react.PropTypes.func,
+  onRightClick: _propTypes2["default"].func,
   /** 设置节点可拖拽（IE>8）*/
-  draggable: _react.PropTypes.bool,
+  draggable: _propTypes2["default"].bool,
   /** 开始拖拽时调用 */
-  onDragStart: _react.PropTypes.func,
+  onDragStart: _propTypes2["default"].func,
   /** dragenter 触发时调用 */
-  onDragEnter: _react.PropTypes.func,
+  onDragEnter: _propTypes2["default"].func,
   /** dragover 触发时调用 */
-  onDragOver: _react.PropTypes.func,
+  onDragOver: _propTypes2["default"].func,
   /** dragleave 触发时调用 */
-  onDragLeave: _react.PropTypes.func,
+  onDragLeave: _propTypes2["default"].func,
   /** drop 触发时调用 */
-  onDrop: _react.PropTypes.func,
+  onDrop: _propTypes2["default"].func,
   style: _react2["default"].CSSProperties,
-  prefixCls: _react.PropTypes.string,
+  prefixCls: _propTypes2["default"].string,
-  filterTreeNode: _react.PropTypes.func
+  filterTreeNode: _propTypes2["default"].func
 };
 
 var defaultProps = {

index.html

@@ -15,8 +15,9 @@
     <script src="./node_modules/console-polyfill/index.js"></script>
     <script src="./node_modules/es5-shim/es5-shim.min.js"></script>
     <script src="./node_modules/es5-shim/es5-sham.min.js"></script>
-    <script src="./node_modules/react/dist/react-with-addons.js"></script>
+    <script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.js"></script>
-    <script src="./node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react-dom.development.js"></script>
+    <script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
     <script src="./dist/demo.js"></script>
 </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-tree",
- "version": "0.1.4",
+ "version": "1.0.0",
  "description": "Tree ui component for react",
  "keywords": [
   "react",
@@ -35,12 +35,17 @@
  "dependencies": {
   "bee-animate": "latest",
   "bee-checkbox": "latest",
-  "bee-form-control": "^0.1.5",
+  "bee-form-control": "latest",
   "classnames": "^2.2.5",
   "object-assign": "latest",
   "babel-runtime": "^6.23.0",
   "tinper-bee-core": "latest"
  },
+ "peerDependencies": {
+  "react": "^15.3.0 || ^16.0",
+  "react-dom": "^15.3.0 || ^16.0",
+  "prop-types": "15.6.0"
+ },
  "devDependencies": {
   "chai": "^3.5.0",
   "enzyme": "^2.4.1",

src/Tree.js

@@ -1,7 +1,5 @@
 /* eslint no-console:0 */
-import React, {
+import React from 'react';
-  PropTypes
-} from 'react';
 import assign from 'object-assign';
 import classNames from 'classnames';
 import {
@@ -14,6 +12,8 @@ import {
   getStrictlyValue,
   arraysEqual,
 } from './util';
+import PropTypes from 'prop-types';
+
 
 function noop() {}
 

src/TreeNode.js

@@ -1,12 +1,11 @@
-import React, {
+import React from 'react';
-  PropTypes
-} from 'react';
 import assign from 'object-assign';
 import classNames from 'classnames';
 import Animate from 'bee-animate';
 import {
   browser
 } from './util';
+import PropTypes from 'prop-types';
 
 const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : '';
 const ieOrEdge = /.*(IE|Edge).+/.test(browserUa);

src/index.js

@@ -1,7 +1,8 @@
-import React,{PropTypes,Component} from 'react';
+import React,{Component} from 'react';
 import RcTree from './Tree';
 import TreeNode  from './TreeNode';
 import animation from './openAnimation';
+import PropTypes from 'prop-types';
 
 const TreeProps ={
   showLine: PropTypes.bool,