merge

2017-10-19 13:46:45 +08:00 · 2017-10-19 13:46:45 +08:00 · 3541510576
parent d8b263e562 17a8e458bd
commit 3541510576
10 changed files with 189 additions and 116 deletions
--- a/build/Tree.css
+++ b/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;
-    cursor: pointer; }
+    position: absolute;
+    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: rgb(30,136,229); }
+    color: #a9a9a9; }
    .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: ""; }
--- a/build/Tree.js
+++ b/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,
-  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])
+  prefixCls: _propTypes2["default"].string,
+  children: _propTypes2["default"].any,
+  showLine: _propTypes2["default"].bool,
+  showIcon: _propTypes2["default"].bool,
+  selectable: _propTypes2["default"].bool,
+  multiple: _propTypes2["default"].bool,
+  checkable: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].node]),
+  _treeNodesStates: _propTypes2["default"].object,
+  checkStrictly: _propTypes2["default"].bool,
+  draggable: _propTypes2["default"].bool,
+  autoExpandParent: _propTypes2["default"].bool,
+  defaultExpandAll: _propTypes2["default"].bool,
+  defaultExpandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+  expandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+  defaultCheckedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+  checkedKeys: _propTypes2["default"].oneOfType([_propTypes2["default"].arrayOf(_propTypes2["default"].string), _propTypes2["default"].object]),
+  defaultSelectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+  selectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
+  onExpand: _propTypes2["default"].func,
+  onCheck: _propTypes2["default"].func,
+  onSelect: _propTypes2["default"].func,
+  loadData: _propTypes2["default"].func,
+  onMouseEnter: _propTypes2["default"].func,
+  onMouseLeave: _propTypes2["default"].func,
+  onRightClick: _propTypes2["default"].func,
+  onDragStart: _propTypes2["default"].func,
+  onDragEnter: _propTypes2["default"].func,
+  onDragOver: _propTypes2["default"].func,
+  onDragLeave: _propTypes2["default"].func,
+  onDrop: _propTypes2["default"].func,
+  onDragEnd: _propTypes2["default"].func,
+  filterTreeNode: _propTypes2["default"].func,
+  openTransitionName: _propTypes2["default"].string,
+  openAnimation: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
 };

 Tree.defaultProps = {
--- a/build/TreeNode.js
+++ b/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,
-  disabled: _react.PropTypes.bool,
-  disableCheckbox: _react.PropTypes.bool,
-  expanded: _react.PropTypes.bool,
-  isLeaf: _react.PropTypes.bool,
-  root: _react.PropTypes.object,
-  onSelect: _react.PropTypes.func
+  prefixCls: _propTypes2["default"].string,
+  disabled: _propTypes2["default"].bool,
+  disableCheckbox: _propTypes2["default"].bool,
+  expanded: _propTypes2["default"].bool,
+  isLeaf: _propTypes2["default"].bool,
+  root: _propTypes2["default"].object,
+  onSelect: _propTypes2["default"].func,
+  openIcon: _propTypes2["default"].string,
+  closeIcon: _propTypes2["default"].string
 };

 TreeNode.defaultProps = {
--- a/build/index.js
+++ b/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,
-  className: _react.PropTypes.string,
+  showLine: _propTypes2["default"].bool,
+  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,
-  filterTreeNode: _react.PropTypes.func
+  prefixCls: _propTypes2["default"].string,
+  filterTreeNode: _propTypes2["default"].func
 };

 var defaultProps = {
--- a/demo/index.js
+++ b/demo/index.js
--- a/index.html
+++ b/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="./node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.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>
--- a/package.json
+++ b/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",
--- a/src/Tree.js
+++ b/src/Tree.js
@ -1,7 +1,5 @@
 /* eslint no-console:0 */
-import React, {
-  PropTypes
-} from 'react';
+import React 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() {}

--- a/src/TreeNode.js
+++ b/src/TreeNode.js
@ -1,12 +1,11 @@
-import React, {
-  PropTypes
-} from 'react';
+import React 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);
--- a/src/index.js
+++ b/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,