支持自定义属性、展开节点自动收起问题

build/Tree.js

@@ -38,6 +38,10 @@ var _createStore = require('./createStore');
 
 var _createStore2 = _interopRequireDefault(_createStore);
 
+var _omit = require('omit.js');
+
+var _omit2 = _interopRequireDefault(_omit);
+
 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; }
@@ -140,7 +144,8 @@ var Tree = function (_React$Component) {
     var startIndex = this.startIndex,
         endIndex = this.endIndex;
 
-    var expandedKeys = this.getDefaultExpandedKeys(nextProps);
+    var expandAll = nextProps.defaultExpandAll;
+    var expandedKeys = this.getDefaultExpandedKeys(nextProps, !expandAll);
     var checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
     var selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
     var st = {};
@@ -177,6 +182,8 @@ var Tree = function (_React$Component) {
         st.flatTreeData = _flatTreeData;
         var _newTreeList = _flatTreeData.slice(startIndex, endIndex);
         this.handleTreeListChange(_newTreeList, startIndex, endIndex);
+      } else {
+        st.treeData = nextProps.treeData;
       }
     }
     if (nextProps.children !== this.props.children) {
@@ -544,6 +551,7 @@ var Tree = function (_React$Component) {
 
   Tree.prototype.goDown = function goDown(currentPos, currentIndex, e, treeNode) {
     var props = this.props;
+    var state = this.state;
     var treeChildren = props.children ? props.children : this.cacheTreeNodes; //最终渲染在 Tree 标签中的子节点
     var nextIndex = parseInt(currentIndex) + 1;
 
@@ -555,7 +563,7 @@ var Tree = function (_React$Component) {
         backNextTreeNodeArr = [],
         tempBackNextPosArr = [];
     //是否为展开的节点，如果展开获取第一个子节点的信息，如果没有取相邻节点，若也没有相邻节点则获取父节点的下一个节点
-    if (props.expandedKeys.indexOf(treeNode.props.eventKey) > -1) {
+    if (state.expandedKeys.indexOf(treeNode.props.eventKey) > -1) {
       nextPos = currentPos + '-0';
     } else {
       nextPos = currentPos.substr(0, currentPos.lastIndexOf('-') + 1) + nextIndex;
@@ -612,6 +620,7 @@ var Tree = function (_React$Component) {
 
   Tree.prototype.goUp = function goUp(currentPos, currentIndex, e, treeNode) {
     var props = this.props;
+    var state = this.state;
     if (currentIndex == 0 && currentPos.length === 3) {
       return;
     }
@@ -636,7 +645,7 @@ var Tree = function (_React$Component) {
     if (prevTreeNode) {
       if (preIndex >= 0) {
         //如果上面的节点展开则默认选择最后一个子节点
-        if (props.expandedKeys.indexOf(prevTreeNode.key) > -1) {
+        if (state.expandedKeys.indexOf(prevTreeNode.key) > -1) {
           var preElementArr = e.target.parentElement.previousElementSibling.querySelectorAll('a');
           preElement = preElementArr[preElementArr.length - 1];
           prePos = preElement.getAttribute('pos');
@@ -1009,6 +1018,7 @@ var Tree = function (_React$Component) {
         draggable = _props3.draggable,
         others = _objectWithoutProperties(_props3, ['showLine', 'prefixCls', 'className', 'focusable', 'checkable', 'loadData', 'checkStrictly', 'tabIndexValue', 'lazyLoad', 'getScrollContainer', 'defaultExpandedKeys', 'defaultSelectedKeys', 'defaultCheckedKeys', 'openAnimation', 'draggable']);
 
+    var customProps = _extends({}, (0, _omit2["default"])(others, ['showIcon', 'cancelUnSelect', 'onCheck', 'selectable', 'autoExpandParent', 'defaultExpandAll', 'onExpand', 'autoSelectWhenFocus', 'expandWhenDoubleClick', 'expandedKeys', 'keyFun', 'openIcon', 'closeIcon', 'treeData', 'checkedKeys', 'selectedKeys', 'renderTreeNodes', 'mustExpandable', 'onMouseEnter', 'onMouseLeave']));
     var _state = this.state,
         treeData = _state.treeData,
         flatTreeData = _state.flatTreeData;
@@ -1110,7 +1120,7 @@ var Tree = function (_React$Component) {
         'ul',
         _extends({}, domProps, { unselectable: 'true', ref: function ref(el) {
             _this6.tree = el;
-          }, tabIndex: focusable && tabIndexValue }, others),
+          }, tabIndex: focusable && tabIndexValue }, customProps),
         _react2["default"].createElement('li', { style: { height: preHeight }, className: 'u-treenode-start', key: 'tree_node_start' }),
         _react2["default"].Children.map(treeChildren, this.renderTreeNode, this),
         _react2["default"].createElement('li', { style: { height: sufHeight }, className: 'u-treenode-end', key: 'tree_node_end' })
@@ -1119,7 +1129,7 @@ var Tree = function (_React$Component) {
       'ul',
       _extends({}, domProps, { unselectable: 'true', ref: function ref(el) {
           _this6.tree = el;
-        }, tabIndex: focusable && tabIndexValue }, others),
+        }, tabIndex: focusable && tabIndexValue }, customProps),
       _react2["default"].Children.map(treeChildren, this.renderTreeNode, this)
     );
   };

build/infiniteScroll.js

@@ -279,7 +279,9 @@ var InfiniteScroll = function (_Component) {
         ref = _props.ref,
         getScrollParent = _props.getScrollParent,
         treeList = _props.treeList,
-        props = _objectWithoutProperties(_props, ['children', 'element', 'ref', 'getScrollParent', 'treeList']);
+        handleTreeListChange = _props.handleTreeListChange,
+        store = _props.store,
+        props = _objectWithoutProperties(_props, ['children', 'element', 'ref', 'getScrollParent', 'treeList', 'handleTreeListChange', 'store']);
 
     props.ref = function (node) {
       _this2.scrollComponent = node;

package.json

@@ -42,6 +42,7 @@
   "bee-checkbox": "latest",
   "bee-modal": "^2.0.13",
   "classnames": "^2.2.5",
+  "omit.js": "^1.0.2",
   "tinper-bee-core": "latest"
  },
  "peerDependencies": {
@@ -66,4 +67,4 @@
   "react-addons-test-utils": "15.6.2",
   "react-dom": "16.8.3"
  }
-}
+}

src/Tree.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import { KeyCode } from 'tinper-bee-core';
 import CONFIG from './config';
 import createStore from './createStore';
+import omit from 'omit.js';
 
 function noop() {}
 
@@ -89,7 +90,8 @@ class Tree extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     const {startIndex,endIndex} = this;
-    const expandedKeys = this.getDefaultExpandedKeys(nextProps);
+    let expandAll = nextProps.defaultExpandAll;
+    const expandedKeys = this.getDefaultExpandedKeys(nextProps, !expandAll);
     const checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
     const selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
     const st = {};
@@ -126,6 +128,8 @@ class Tree extends React.Component {
         st.flatTreeData = flatTreeData;
         let newTreeList = flatTreeData.slice(startIndex,endIndex);
         this.handleTreeListChange(newTreeList, startIndex, endIndex);
+      } else {
+        st.treeData = nextProps.treeData;
       }
     }
     if(nextProps.children !== this.props.children){
@@ -489,6 +493,7 @@ onExpand(treeNode,keyType) {
 
   goDown(currentPos,currentIndex,e,treeNode){
     const props = this.props;
+    const state = this.state;
     let treeChildren = props.children ? props.children : this.cacheTreeNodes; //最终渲染在 Tree 标签中的子节点
     const nextIndex =  parseInt(currentIndex) + 1;
       
@@ -496,7 +501,7 @@ onExpand(treeNode,keyType) {
     let nextTreeNode,backNextTreeNode;
     const backNextPosArr=[],backNextTreeNodeArr = [],tempBackNextPosArr=[];
     //是否为展开的节点，如果展开获取第一个子节点的信息，如果没有取相邻节点，若也没有相邻节点则获取父节点的下一个节点
-    if(props.expandedKeys.indexOf(treeNode.props.eventKey)>-1){
+    if(state.expandedKeys.indexOf(treeNode.props.eventKey)>-1){
       nextPos = currentPos + '-0';
     }else{
       nextPos = currentPos.substr(0,currentPos.lastIndexOf('-')+1)+nextIndex;
@@ -558,6 +563,7 @@ onExpand(treeNode,keyType) {
 
   goUp(currentPos,currentIndex,e,treeNode){
     const props = this.props;
+    const state = this.state;
     if(currentIndex == 0 && currentPos.length === 3){
       return
     }
@@ -581,7 +587,7 @@ onExpand(treeNode,keyType) {
     if(prevTreeNode){
       if(preIndex >=0){
         //如果上面的节点展开则默认选择最后一个子节点
-        if(props.expandedKeys.indexOf(prevTreeNode.key)>-1){
+        if(state.expandedKeys.indexOf(prevTreeNode.key)>-1){
           const preElementArr =  e.target.parentElement.previousElementSibling.querySelectorAll('a');
           preElement = preElementArr[preElementArr.length-1];
           prePos = preElement.getAttribute('pos');
@@ -1013,6 +1019,28 @@ onExpand(treeNode,keyType) {
       defaultExpandedKeys, defaultSelectedKeys, defaultCheckedKeys, openAnimation, draggable,
       ...others 
     } = this.props;
+    const customProps = {...omit(others, [
+      'showIcon',
+      'cancelUnSelect',
+      'onCheck',
+      'selectable',
+      'autoExpandParent',
+      'defaultExpandAll',
+      'onExpand',
+      'autoSelectWhenFocus',
+      'expandWhenDoubleClick',
+      'expandedKeys',
+      'keyFun',
+      'openIcon',
+      'closeIcon',
+      'treeData',
+      'checkedKeys',
+      'selectedKeys',
+      'renderTreeNodes',
+      'mustExpandable',
+      'onMouseEnter',
+      'onMouseLeave'
+    ])}
     const { treeData,flatTreeData } = this.state;
     let { startIndex, endIndex } = this, //数据截取的开始位置和结束位置
         preHeight = 0, //前置占位高度
@@ -1106,14 +1134,14 @@ onExpand(treeNode,keyType) {
           getScrollParent={getScrollContainer}
           store={this.store}
         >
-          <ul {...domProps} unselectable="true" ref={(el)=>{this.tree = el}}  tabIndex={focusable && tabIndexValue} {...others}>
+          <ul {...domProps} unselectable="true" ref={(el)=>{this.tree = el}}  tabIndex={focusable && tabIndexValue} {...customProps}>
               <li style={{height : preHeight}} className='u-treenode-start' key={'tree_node_start'}></li>
               { React.Children.map(treeChildren, this.renderTreeNode, this) }
               <li style={{height : sufHeight}} className='u-treenode-end' key={'tree_node_end'}></li>
           </ul>
         </InfiniteScroll>
         :
-        <ul {...domProps} unselectable="true" ref={(el)=>{this.tree = el}}  tabIndex={focusable && tabIndexValue} {...others}>
+        <ul {...domProps} unselectable="true" ref={(el)=>{this.tree = el}}  tabIndex={focusable && tabIndexValue} {...customProps}>
             { React.Children.map(treeChildren, this.renderTreeNode, this) }
         </ul>
     );

src/infiniteScroll.js

@@ -269,6 +269,8 @@ export default class InfiniteScroll extends Component {
       ref,
       getScrollParent,
       treeList,
+      handleTreeListChange,
+      store,
       ...props
     } = this.props;