fix: checkStrictly为false时动态改变数据源造成的onCheck回调参数错误问题

build/Tree.js

@@ -110,8 +110,8 @@ var Tree = function (_React$Component) {
   };
 
   Tree.prototype.onDragEnterGap = function onDragEnterGap(e, treeNode) {
-    var offsetTop = (0, _util.getOffset)(treeNode.refs.selectHandle).top;
+    var offsetTop = (0, _util.getOffset)(treeNode.selectHandle).top;
-    var offsetHeight = treeNode.refs.selectHandle.offsetHeight;
+    var offsetHeight = treeNode.selectHandle.offsetHeight;
     var pageY = e.pageY;
     var gapHeight = 2;
     if (pageY > offsetTop + offsetHeight - gapHeight) {
@@ -273,6 +273,7 @@ var Tree = function (_React$Component) {
     };
 
     if (this.props.checkStrictly) {
+      var rsCheckedKeys = [];
       if (checked && index === -1) {
         checkedKeys.push(key);
       }
@@ -284,15 +285,16 @@ var Tree = function (_React$Component) {
       (0, _util.loopAllChildren)(this.props.children, function (item, ind, pos, keyOrPos) {
         if (checkedKeys.indexOf(keyOrPos) !== -1) {
           newSt.checkedNodes.push(item);
+          rsCheckedKeys.push(keyOrPos);
         }
       });
       if (!('checkedKeys' in this.props)) {
         this.setState({
-          checkedKeys: checkedKeys
+          checkedKeys: rsCheckedKeys
         });
       }
       var halfChecked = this.props.checkedKeys ? this.props.checkedKeys.halfChecked : [];
-      this.props.onCheck((0, _util.getStrictlyValue)(checkedKeys, halfChecked), newSt);
+      this.props.onCheck((0, _util.getStrictlyValue)(rsCheckedKeys, halfChecked), newSt);
     } else {
       if (checked && index === -1) {
         this.treeNodesStates[treeNode.props.pos].checked = true;
@@ -576,7 +578,7 @@ var Tree = function (_React$Component) {
     var _this4 = this;
 
     var targetDom = e.target;
-    if (this.refs.tree == targetDom && !this.isIn) {
+    if (this.tree == targetDom && !this.isIn) {
       var onFocus = this.props.onFocus;
       var _state$selectedKeys = this.state.selectedKeys,
           selectedKeys = _state$selectedKeys === undefined ? [] : _state$selectedKeys;
@@ -755,7 +757,6 @@ var Tree = function (_React$Component) {
     }
 
     var cloneProps = {
-      ref: 'treeNode-' + key,
       root: this,
       eventKey: key,
       pos: pos,
@@ -850,7 +851,7 @@ var Tree = function (_React$Component) {
       } else {
         var checkedKeys = this.state.checkedKeys;
         var checkKeys = void 0;
-        if (!props.loadData && this.checkKeys && this._checkedKeys && (0, _util.arraysEqual)(this._checkedKeys, checkedKeys)) {
+        if (!props.loadData && this.checkKeys && this._checkedKeys && (0, _util.arraysEqual)(this._checkedKeys, checkedKeys) && !this.dataChange) {
           // if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
           checkKeys = this.checkKeys;
         } else {
@@ -880,7 +881,9 @@ var Tree = function (_React$Component) {
     this.selectKeyDomExist = false;
     return _react2["default"].createElement(
       'ul',
-      _extends({}, domProps, { unselectable: 'true', ref: 'tree', tabIndex: props.focusable && props.tabIndexValue }),
+      _extends({}, domProps, { unselectable: 'true', ref: function ref(el) {
+          _this5.tree = el;
+        }, tabIndex: props.focusable && props.tabIndexValue }),
       _react2["default"].Children.map(props.children, this.renderTreeNode, this)
     );
   };

build/TreeNode.js

@@ -272,13 +272,13 @@ var TreeNode = function (_React$Component) {
       checkboxCls[prefixCls + '-checkbox-disabled'] = true;
       return _react2["default"].createElement(
         'span',
-        { ref: 'checkbox', className: (0, _classnames2["default"])(checkboxCls) },
+        { className: (0, _classnames2["default"])(checkboxCls) },
         customEle
       );
     }
     return _react2["default"].createElement(
       'span',
-      { ref: 'checkbox',
+      {
         className: (0, _classnames2["default"])(checkboxCls),
         onClick: this.onCheck
       },
@@ -486,7 +486,9 @@ var TreeNode = function (_React$Component) {
 
       return _react2["default"].createElement(
         'a',
-        _extends({ ref: 'selectHandle', pos: props.pos, title: typeof content === 'string' ? content : '' }, domProps),
+        _extends({ ref: function ref(el) {
+            _this4.selectHandle = el;
+          }, pos: props.pos, title: typeof content === 'string' ? content : '' }, domProps),
         icon,
         title
       );
@@ -533,7 +535,7 @@ var TreeNode = function (_React$Component) {
     var selectedCls = props.selected ? prefixCls + '-treenode-selected' : '';
     return _react2["default"].createElement(
       'li',
-      _extends({}, liProps, { ref: 'li', style: props.style,
+      _extends({}, liProps, { style: props.style,
         className: (0, _classnames2["default"])(props.className, disabledCls, dragOverCls, filterCls, selectedCls)
       }),
       canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher(),

dist/demo.css

@@ -306,4 +306,11 @@
 .title-con {
   min-width: 150px; }
 
+.demo2.u-tree {
+  height: 300px;
+  overflow: scroll; }
+
+.u-modal {
+  height: 500px; }
+
 /*# sourceMappingURL=demo.css.map */

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-tree",
- "version": "2.0.10-beta.0",
+ "version": "2.0.10-beta.1",
  "description": "Tree ui component for react",
  "keywords": [
   "react",
@@ -37,10 +37,11 @@
   "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
  },
  "dependencies": {
+  "antd": "^3.18.1",
   "babel-runtime": "^6.23.0",
   "bee-animate": "^1.0.0",
   "bee-checkbox": "latest",
-  "bee-modal": "latest",
+  "bee-modal": "^2.0.10",
   "classnames": "^2.2.5",
   "tinper-bee-core": "latest"
  },
@@ -55,7 +56,7 @@
   "bee-drawer": "0.0.2",
   "bee-form-control": "latest",
   "bee-icon": "latest",
-  "bee-layout": "latest",
+  "bee-layout": "^1.2.7",
   "bee-panel": "latest",
   "chai": "^3.5.0",
   "console-polyfill": "~0.2.1",

src/Tree.js

@@ -85,8 +85,8 @@ class Tree extends React.Component {
   }
 
   onDragEnterGap(e, treeNode) {
-    const offsetTop = (0, getOffset)(treeNode.refs.selectHandle).top;
+    const offsetTop = (0, getOffset)(treeNode.selectHandle).top;
-    const offsetHeight = treeNode.refs.selectHandle.offsetHeight;
+    const offsetHeight = treeNode.selectHandle.offsetHeight;
     const pageY = e.pageY;
     const gapHeight = 2;
     if (pageY > offsetTop + offsetHeight - gapHeight) {
@@ -241,7 +241,9 @@ onExpand(treeNode,keyType) {
       checked,
     };
 
+
     if (this.props.checkStrictly) {
+      let rsCheckedKeys = [];
       if (checked && index === -1) {
         checkedKeys.push(key);
       }
@@ -253,15 +255,16 @@ onExpand(treeNode,keyType) {
       loopAllChildren(this.props.children, (item, ind, pos, keyOrPos) => {
         if (checkedKeys.indexOf(keyOrPos) !== -1) {
           newSt.checkedNodes.push(item);
+          rsCheckedKeys.push(keyOrPos);
         }
       });
       if (!('checkedKeys' in this.props)) {
         this.setState({
-          checkedKeys,
+          checkedKeys:rsCheckedKeys
         });
       }
       const halfChecked = this.props.checkedKeys ? this.props.checkedKeys.halfChecked : [];
-      this.props.onCheck(getStrictlyValue(checkedKeys, halfChecked), newSt);
+      this.props.onCheck(getStrictlyValue(rsCheckedKeys, halfChecked), newSt);
     } else {
       if (checked && index === -1) {
         this.treeNodesStates[treeNode.props.pos].checked = true;
@@ -548,7 +551,7 @@ onExpand(treeNode,keyType) {
 
   onUlFocus(e){ 
     const targetDom = e.target;
-    if(this.refs.tree == targetDom && !this.isIn){
+    if(this.tree == targetDom && !this.isIn){
       const {onFocus} = this.props;
       const {selectedKeys=[]} = this.state;
       let tabIndexKey = selectedKeys[0]
@@ -729,7 +732,6 @@ onExpand(treeNode,keyType) {
     }
   
     const cloneProps = {
-      ref: `treeNode-${key}`,
       root: this,
       eventKey: key,
       pos,
@@ -823,7 +825,7 @@ onExpand(treeNode,keyType) {
         const checkedKeys = this.state.checkedKeys;
         let checkKeys;
         if (!props.loadData && this.checkKeys && this._checkedKeys &&
-          arraysEqual(this._checkedKeys, checkedKeys)) {
+          arraysEqual(this._checkedKeys, checkedKeys) && !this.dataChange) {
           // if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
           checkKeys = this.checkKeys;
         } else {
@@ -852,7 +854,7 @@ onExpand(treeNode,keyType) {
     }
     this.selectKeyDomExist = false;
     return (
-      <ul {...domProps} unselectable="true" ref="tree"  tabIndex={props.focusable && props.tabIndexValue}>
+      <ul {...domProps} unselectable="true" ref={(el)=>{this.tree = el}}  tabIndex={props.focusable && props.tabIndexValue}>
         {React.Children.map(props.children, this.renderTreeNode, this)}
       </ul>
     );

src/TreeNode.js

@@ -225,10 +225,10 @@ class TreeNode extends React.Component {
     }
     if (props.disabled || props.disableCheckbox) {
       checkboxCls[`${prefixCls}-checkbox-disabled`] = true;
-      return <span ref="checkbox" className={classNames(checkboxCls)}>{customEle}</span>;
+      return <span  className={classNames(checkboxCls)}>{customEle}</span>;
     }
     return (
-      <span ref="checkbox"
+      <span 
         className={classNames(checkboxCls) }
         onClick={this.onCheck}
       >{customEle}</span>);
@@ -447,7 +447,7 @@ class TreeNode extends React.Component {
 
     
       return (
-        <a ref="selectHandle" pos={props.pos} title={typeof content === 'string' ? content : ''} {...domProps}>
+        <a ref={(el)=>{this.selectHandle=el}} pos={props.pos} title={typeof content === 'string' ? content : ''} {...domProps}>
           {icon}{title}
         </a>
       );
@@ -494,7 +494,7 @@ class TreeNode extends React.Component {
     };
     const selectedCls =  props.selected?`${prefixCls}-treenode-selected`:'';
     return (
-      <li {...liProps} ref="li" style={props.style}
+      <li {...liProps}  style={props.style}
         className={classNames(props.className, disabledCls, dragOverCls, filterCls,selectedCls) }
       >
         {canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher()}