增加 getScrollContainer 属性，自定义滚动事件监听的容器

build/Tree.js

@@ -971,7 +971,7 @@ var Tree = function (_React$Component) {
         checkStrictly = _props3.checkStrictly,
         tabIndexValue = _props3.tabIndexValue,
         lazyLoad = _props3.lazyLoad,
-        offsetHeight = _props3.offsetHeight;
+        getScrollContainer = _props3.getScrollContainer;
     var _state = this.state,
         treeData = _state.treeData,
         flatTreeData = _state.flatTreeData;
@@ -1066,7 +1066,7 @@ var Tree = function (_React$Component) {
         className: 'u-tree-infinite-scroll',
         treeList: flatTreeData,
         handleTreeListChange: this.handleTreeListChange,
-        offsetHeight: offsetHeight
+        getScrollParent: getScrollContainer
       },
       _react2["default"].createElement(
         'ul',
@@ -1222,7 +1222,8 @@ Tree.propTypes = {
   lazyLoad: _propTypes2["default"].bool,
   treeData: _propTypes2["default"].array,
   renderTreeNodes: _propTypes2["default"].func,
-  autoSelectWhenFocus: _propTypes2["default"].bool
+  autoSelectWhenFocus: _propTypes2["default"].bool,
+  getScrollContainer: _propTypes2["default"].func
 };
 
 Tree.defaultProps = {
@@ -1250,7 +1251,8 @@ Tree.defaultProps = {
   onDragEnd: noop,
   tabIndexValue: 0,
   lazyLoad: false,
-  autoSelectWhenFocus: false
+  autoSelectWhenFocus: false,
+  getScrollContainer: noop
 };
 
 exports["default"] = Tree;

build/util.js

@@ -393,14 +393,15 @@ function convertListToTree(treeData, attr, flatTreeKeysMap) {
   var findParentNode = function findParentNode(node) {
     var parentKey = node[attr.parendId];
     if (!resKeysMap.hasOwnProperty(parentKey)) {
-      var key = node.key,
-          title = node.title,
-          children = node.children,
-          otherProps = _objectWithoutProperties(node, ['key', 'title', 'children']);
+      var _flatTreeKeysMap$pare = flatTreeKeysMap[parentKey],
+          key = _flatTreeKeysMap$pare.key,
+          title = _flatTreeKeysMap$pare.title,
+          children = _flatTreeKeysMap$pare.children,
+          otherProps = _objectWithoutProperties(_flatTreeKeysMap$pare, ['key', 'title', 'children']);
 
       var obj = {
-        key: flatTreeKeysMap[parentKey][attr.id],
-        title: flatTreeKeysMap[parentKey][attr.name],
+        key: key,
+        title: title,
         children: []
       };
       tree.push(_extends(obj, _extends({}, otherProps)));

demo/demolist/Demo13.js

@@ -92,7 +92,7 @@ class Demo13 extends Component{
 
   render() {
     return (
-      <div style={{height:'300px', border:'1px solid', overflow:'auto'}}>
+      <div style={{height:'300px', overflow:'auto'}}>
         <Tree
           checkable
           focusable

demo/demolist/Demo14.js

@@ -0,0 +1,122 @@
+/**
+*
+* @title 自定义滚动容器
+* @description 使用 getScrollParent 设置需要监听滚动事件的容器。
+*/
+
+import React, { Component } from 'react';
+import Tree from '../../src';
+
+const {TreeNode} = Tree;
+
+const x = 1000;
+const y = 1;
+const z = 1;
+const gData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+    const preKey = _preKey || '0';
+    const tns = _tns || gData;
+
+    const children = [];
+    for (let i = 0; i < x; i++) {
+        const key = `${preKey}-${i}`;
+        tns.push({ title: key, key });
+        if (i < y) {
+            children.push(key);
+        }
+    }
+    if (_level < 0) {
+        return tns;
+    }
+    const level = _level - 1;
+    children.forEach((key, index) => {
+        tns[index].children = [];
+        return generateData(level, key, tns[index].children);
+    });
+};
+generateData(z);
+
+class Demo14 extends Component{
+  constructor(props) {
+  	super(props);
+    this.state = {
+      expandedKeys: ['0-0','0-1','0-2','0-3', '0-4','0-5','0-6','0-0-0','0-0-1'],
+      autoExpandParent: true,
+      checkedKeys: ['0-0-0'],
+      selectedKeys: [],
+    };
+    this.onExpand = this.onExpand.bind(this);
+    this.onCheck = this.onCheck.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+  }
+  onExpand(expandedKeys,nodeInfo) {
+    // console.log('onExpand---显示ext数据', nodeInfo.node.props.ext.data);
+
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false,
+    });
+  }
+  onCheck(checkedKeys) {
+    this.setState({
+      checkedKeys,
+      selectedKeys: ['0-3', '0-4'],
+    });
+  }
+  onSelect(selectedKeys, info) {
+    console.log('onSelect', info);
+    this.setState({ selectedKeys });
+  }
+  // keydown的钩子事件
+  onKeyDown = (e,treeNode)=>{
+    console.log('***',e);
+    return false;
+  }
+
+  //使用 treeData 渲染树节点时，可使用该函数自定义节点显示内容（非必须）
+  //注意：isLeaf 属性是必传的，否则节点层级和展示会有问题
+  renderTreeNodes = (data) => {
+    const loop = data => data.map((item) => {
+      if (item.children) {
+        return (
+          <TreeNode key={item.key} title={item.key} isLeaf={item.isLeaf}>
+            {loop(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode key={item.key} title={item.key} isLeaf={true}/>;
+    });
+    return loop(data);
+  }
+
+  render() {
+    return (
+        <div className="container" style={{height:'300px', overflow:'auto'}}>
+            <div>
+                <Tree
+                checkable
+                focusable
+                treeData={gData}
+                lazyLoad={true}
+                renderTreeNodes={this.renderTreeNodes}
+                onExpand={this.onExpand}
+                defaultExpandAll={true} 
+                expandedKeys={this.state.expandedKeys}
+                autoExpandParent={this.state.autoExpandParent}
+                onCheck={this.onCheck} 
+                onSelect={this.onSelect} 
+                keyFun={this.onKeyDown}
+                getScrollContainer={() => {
+                    return document.querySelector('.container')
+                }}
+                >
+                </Tree>
+            </div>
+        </div>
+    );
+  }
+};
+
+
+export default Demo14;

docs/api.md

@@ -55,11 +55,12 @@ import 'bee-tree/build/Tree.css';
 |tabIndexValue|节点获取焦点时，自定义tabIndex的值|Number|0
 |Children|必填，TreeNode组件|node|-
 |mustExpandable|支持disabled的节点可以自定义展开收起，默认disabled的节点不可以展开收起|bool|false
+|autoSelectWhenFocus|使用“↑、↓”快捷键切换焦点时，是否自动选中树节点|bool|false
 |treeData|treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）|array\<{key, title, children, [disabled, selectable]}>|-
 |lazyLoad|是否使用懒加载（适用于大数据场景），[如何使用](http://bee.tinper.org/tinper-bee/bee-tree#%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD%E6%A0%91%E8%8A%82%E7%82%B9)|bool|false
 |renderTitle|使用 treeData 渲染树时使用，可通过此函数自定义树节点内容|Function(item)|-
 |renderTreeNodes|使用 treeData 渲染树节点时，可使用该函数自定义节点显示内容（非必须）|Function(data)|-
-|autoSelectWhenFocus|使用“↑、↓”快捷键切换焦点时，是否自动选中树节点|bool|false
+|getScrollContainer|用于滚动加载场景，自定义滚动事件监听的容器|Function(data)|-
 
 
 ### TreeNode

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-tree",
- "version": "2.1.0",
+ "version": "2.1.1-beta.0",
  "description": "Tree ui component for react",
  "keywords": [
   "react",

src/Tree.js

@@ -981,7 +981,7 @@ onExpand(treeNode,keyType) {
 
   render() {
     const props = this.props;
-    const { showLine, prefixCls, className, focusable, checkable, loadData, checkStrictly, tabIndexValue, lazyLoad, offsetHeight } = this.props;
+    const { showLine, prefixCls, className, focusable, checkable, loadData, checkStrictly, tabIndexValue, lazyLoad, getScrollContainer } = this.props;
     const { treeData,flatTreeData } = this.state;
     let { startIndex, endIndex } = this, //数据截取的开始位置和结束位置
         preHeight = 0, //前置占位高度
@@ -1072,7 +1072,7 @@ onExpand(treeNode,keyType) {
           className="u-tree-infinite-scroll"
           treeList={flatTreeData}
           handleTreeListChange={this.handleTreeListChange}
-          offsetHeight={offsetHeight}
+          getScrollParent={getScrollContainer}
         >
           <ul {...domProps} unselectable="true" ref={(el)=>{this.tree = el}}  tabIndex={focusable && tabIndexValue}>
               <li style={{height : preHeight}} className='u-treenode-start' key={'tree_node_start'}></li>
@@ -1133,7 +1133,8 @@ Tree.propTypes = {
   lazyLoad: PropTypes.bool,
   treeData: PropTypes.array,
   renderTreeNodes: PropTypes.func,
-  autoSelectWhenFocus: PropTypes.bool
+  autoSelectWhenFocus: PropTypes.bool,
+  getScrollContainer: PropTypes.func
 };
 
 Tree.defaultProps = {
@@ -1161,7 +1162,8 @@ Tree.defaultProps = {
   onDragEnd: noop,
   tabIndexValue:0,
   lazyLoad: false,
-  autoSelectWhenFocus: false
+  autoSelectWhenFocus: false,
+  getScrollContainer: noop
 };
 
 export default Tree;

src/util.js

@@ -340,10 +340,10 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
     let findParentNode = (node) => {
       let parentKey = node[attr.parendId];
       if (!resKeysMap.hasOwnProperty(parentKey) ) {
-        let { key, title, children, ...otherProps } = node;
+        let { key, title, children, ...otherProps } = flatTreeKeysMap[parentKey];
         let obj = {
-          key: flatTreeKeysMap[parentKey][attr.id],
-          title: flatTreeKeysMap[parentKey][attr.name],
+          key: key,
+          title: title,
           children: []
         };
         tree.push(Object.assign(obj, {...otherProps}));