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

2019-05-16 07:52:10 +08:00 · 2019-05-16 07:52:10 +08:00 · 958083564c
parent c7c1cf82fe
commit 958083564c
11 changed files with 2533 additions and 746 deletions
--- a/build/Tree.js
+++ b/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 offsetHeight = treeNode.refs.selectHandle.offsetHeight;
+    var offsetTop = (0, _util.getOffset)(treeNode.selectHandle).top;
+    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)
    );
  };
--- a/build/TreeNode.js
+++ b/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(),
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/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 */
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/src/Tree.js
+++ b/src/Tree.js
@ -85,8 +85,8 @@ class Tree extends React.Component {
  }

  onDragEnterGap(e, treeNode) {
-    const offsetTop = (0, getOffset)(treeNode.refs.selectHandle).top;
-    const offsetHeight = treeNode.refs.selectHandle.offsetHeight;
+    const offsetTop = (0, getOffset)(treeNode.selectHandle).top;
+    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>
    );
--- a/src/TreeNode.js
+++ b/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()}