2019-01-07 14:57:58 +08:00
"use strict" ;
2018-12-17 11:12:10 +08:00
Object . defineProperty ( exports , "__esModule" , {
value : true
} ) ;
var _extends = Object . assign || function ( target ) { for ( var i = 1 ; i < arguments . length ; i ++ ) { var source = arguments [ i ] ; for ( var key in source ) { if ( Object . prototype . hasOwnProperty . call ( source , key ) ) { target [ key ] = source [ key ] ; } } } return target ; } ;
exports [ "default" ] = bigData ;
2019-01-07 14:57:58 +08:00
var _react = require ( "react" ) ;
2018-12-17 11:12:10 +08:00
var _react2 = _interopRequireDefault ( _react ) ;
2019-01-07 14:57:58 +08:00
var _propTypes = require ( "prop-types" ) ;
2018-12-17 11:12:10 +08:00
var _propTypes2 = _interopRequireDefault ( _propTypes ) ;
2019-08-31 11:32:29 +08:00
var _utils = require ( "./utils" ) ;
2018-12-17 11:12:10 +08:00
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 ; }
2019-08-31 11:32:29 +08:00
function _objectWithoutProperties ( obj , keys ) { var target = { } ; for ( var i in obj ) { if ( keys . indexOf ( i ) >= 0 ) continue ; if ( ! Object . prototype . hasOwnProperty . call ( obj , i ) ) continue ; target [ i ] = obj [ i ] ; } return target ; }
2018-12-17 11:12:10 +08:00
function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
function _possibleConstructorReturn ( self , call ) { if ( ! self ) { throw new ReferenceError ( "this hasn't been initialised - super() hasn't been called" ) ; } return call && ( typeof call === "object" || typeof call === "function" ) ? call : self ; }
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 ) ; }
2019-01-25 11:26:06 +08:00
var defaultHeight = 30 ;
2019-07-02 17:11:40 +08:00
var rowDiff = 2 ; //行差值
2019-01-07 14:57:58 +08:00
var treeTypeIndex = 0 ;
2018-12-17 11:12:10 +08:00
function bigData ( Table ) {
2018-12-20 09:41:51 +08:00
var _class , _temp , _initialiseProps ;
return _temp = _class = function ( _Component ) {
2018-12-17 11:12:10 +08:00
_inherits ( BigData , _Component ) ;
function BigData ( props ) {
_classCallCheck ( this , BigData ) ;
2018-12-20 18:07:30 +08:00
var _this2 = _possibleConstructorReturn ( this , _Component . call ( this , props ) ) ;
2018-12-17 11:12:10 +08:00
2018-12-20 18:07:30 +08:00
_initialiseProps . call ( _this2 ) ;
_this2 . state = {
2018-12-17 11:12:10 +08:00
scrollLeft : 0 ,
scrollTop : 0
} ;
2018-12-20 18:07:30 +08:00
var rowHeight = _this2 . props . height ? _this2 . props . height : defaultHeight ;
2018-12-20 09:41:51 +08:00
//默认显示25条, rowsInView根据定高算的。在非固定高下, 这个只是一个大概的值。
2018-12-26 10:23:51 +08:00
var scrollY = _this2 . props . scroll . y ? parseInt ( _this2 . props . scroll . y ) : 0 ;
2019-02-20 13:27:33 +08:00
_this2 . rowsInView = scrollY ? Math . floor ( scrollY / rowHeight ) : 20 ;
2018-12-20 18:07:30 +08:00
_this2 . currentIndex = 0 ;
2018-12-21 15:26:33 +08:00
_this2 . loadCount = props . loadBuffer ? _this2 . rowsInView + props . loadBuffer * 2 : 26 ; //一次加载多少数据
_this2 . cachedRowHeight = [ ] ; //缓存每行的高度
2019-01-07 14:57:58 +08:00
_this2 . cachedRowParentIndex = [ ] ;
_this2 . expandChildRowKeys = [ ] ;
_this2 . firstLevelKey = [ ] ;
_this2 . keys = [ ] ;
2018-12-20 18:07:30 +08:00
_this2 . lastScrollTop = 0 ;
2018-12-21 15:26:33 +08:00
_this2 . currentScrollTop = 0 ;
_this2 . startIndex = _this2 . currentIndex ; //数据开始位置
2019-01-07 14:57:58 +08:00
_this2 . endIndex = _this2 . currentIndex + _this2 . loadCount ; //数据结束位置
2018-12-20 18:07:30 +08:00
_this2 . setRowHeight = _this2 . setRowHeight . bind ( _this2 ) ;
2019-01-07 14:57:58 +08:00
_this2 . setRowParentIndex = _this2 . setRowParentIndex . bind ( _this2 ) ;
2019-11-06 15:03:26 +08:00
_this2 . expandedRowKeys = props . expandedRowKeys || [ ] ;
2019-08-31 11:32:29 +08:00
_this2 . flatTreeKeysMap = { } ; //树表,扁平结构数据的 Map 映射,方便获取各节点信息
_this2 . flatTreeData = [ ] ; //深度遍历处理后的data数组
_this2 . treeData = [ ] ; //树表的data数据
2018-12-20 18:07:30 +08:00
return _this2 ;
2018-12-17 11:12:10 +08:00
}
2019-01-07 14:57:58 +08:00
BigData . prototype . componentWillReceiveProps = function componentWillReceiveProps ( nextProps ) {
2019-01-10 19:42:30 +08:00
var props = this . props ;
2019-01-22 11:03:53 +08:00
var currentIndex = nextProps . currentIndex ,
2019-12-26 18:28:11 +08:00
newData = nextProps . data ,
2019-11-06 15:03:26 +08:00
newExpandedKeys = nextProps . expandedRowKeys ;
2019-01-22 11:03:53 +08:00
var _this = this ,
2019-12-26 18:28:11 +08:00
dataLen = newData . length ;
2019-01-10 19:42:30 +08:00
if ( nextProps . scroll . y !== props . scroll . y ) {
var rowHeight = nextProps . height ? nextProps . height : defaultHeight ;
2019-01-07 14:57:58 +08:00
var scrollY = nextProps . scroll . y ? parseInt ( nextProps . scroll . y ) : 0 ;
2019-02-20 13:27:33 +08:00
_this . rowsInView = scrollY ? Math . floor ( scrollY / rowHeight ) : 20 ;
2019-01-22 11:03:53 +08:00
_this . loadCount = props . loadBuffer ? _this . rowsInView + props . loadBuffer * 2 : 26 ; //一次加载多少数据
_this . currentIndex = 0 ;
_this . startIndex = _this . currentIndex ; //数据开始位置
_this . endIndex = _this . currentIndex + _this . loadCount ; //数据结束位置
2019-01-07 14:57:58 +08:00
}
2019-12-05 10:04:21 +08:00
if ( 'data' in nextProps ) {
2019-12-26 18:28:11 +08:00
var isTreeType = nextProps . isTree ? true : _this . checkIsTreeType ( newData ) ;
2019-09-11 21:08:18 +08:00
_this . treeType = isTreeType ;
2019-08-23 15:51:32 +08:00
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
2019-12-26 18:28:11 +08:00
if ( newData . toString ( ) !== props . data . toString ( ) ) {
2019-12-05 10:04:21 +08:00
_this . cachedRowHeight = [ ] ; //缓存每行的高度
_this . cachedRowParentIndex = [ ] ;
2019-12-26 18:28:11 +08:00
_this . computeCachedRowParentIndex ( newData ) ;
2020-04-10 12:54:37 +08:00
// fix: 切换数据源, startIndex、endIndex错误
2020-10-14 15:25:17 +08:00
if ( _this . scrollTop <= 0 ) {
// 增加scrollTop 判断, ncc场景下滚动条不在最上层, 会出现空白, 因为重置了currentIndex没有重置滚动条
_this . currentIndex = 0 ;
_this . startIndex = _this . currentIndex ; //数据开始位置
_this . endIndex = _this . currentIndex + _this . loadCount ;
}
2019-12-05 10:04:21 +08:00
}
2019-09-11 21:08:18 +08:00
_this . treeData = [ ] ;
_this . flatTreeData = [ ] ;
2019-12-26 18:28:11 +08:00
if ( newData . length > 0 ) {
2019-02-20 09:36:26 +08:00
_this . endIndex = _this . currentIndex - nextProps . loadBuffer + _this . loadCount ; //数据结束位置
2019-02-19 09:30:18 +08:00
}
2019-09-11 21:08:18 +08:00
if ( isTreeType ) {
2019-12-26 18:28:11 +08:00
_this . getTreeData ( newExpandedKeys , newData ) ;
2019-09-11 21:08:18 +08:00
}
2019-01-22 11:03:53 +08:00
}
//如果传currentIndex, 会判断该条数据是否在可视区域, 如果没有的话, 则重新计算startIndex和endIndex
2020-11-24 17:05:55 +08:00
if ( currentIndex != - 1 && currentIndex !== this . currentIndex ) {
2019-01-22 11:03:53 +08:00
_this . setStartAndEndIndex ( currentIndex , dataLen ) ;
2019-01-16 13:57:31 +08:00
}
2019-01-07 14:57:58 +08:00
} ;
2019-08-31 11:32:29 +08:00
BigData . prototype . componentWillMount = function componentWillMount ( ) {
var _props = this . props ,
data = _props . data ,
isTree = _props . isTree ;
2019-01-07 14:57:58 +08:00
2019-08-31 11:32:29 +08:00
var isTreeType = isTree ? true : this . checkIsTreeType ( ) ;
//设置data中每个元素的parentIndex
2019-01-16 13:57:31 +08:00
this . computeCachedRowParentIndex ( data ) ;
2019-08-31 11:32:29 +08:00
//如果是树表, 递归data
if ( isTreeType ) {
this . treeType = isTreeType ;
2019-09-11 21:08:18 +08:00
this . getTreeData ( ) ;
2019-08-31 11:32:29 +08:00
}
2019-01-07 14:57:58 +08:00
} ;
2019-09-11 21:08:18 +08:00
/ * *
* 如果是树形表 , 需要对传入的 data 进行处理
2019-12-26 18:28:11 +08:00
* @ param expandedKeys : nextProps 中传入的新 expandedRowKeys 属性值
* @ param newData : nextProps 中传入的新 data 属性值
2019-09-11 21:08:18 +08:00
* /
2019-08-31 11:32:29 +08:00
/ * *
* 深度遍历树形 data , 把数据拍平 , 变为一维数组
* @ param { * } data
* @ param { * } parentKey 标识父节点
* /
/ * *
* 将截取后的 List 数组转换为 Tree 结构 , 并更新 state
* /
2019-01-16 13:57:31 +08:00
/ * *
* 设置data中每个元素的parentIndex
*
* /
2019-01-22 11:03:53 +08:00
BigData . prototype . setStartAndEndIndex = function setStartAndEndIndex ( currentIndex , dataLen ) {
var _this = this ;
2019-02-13 17:11:07 +08:00
if ( currentIndex > _this . currentIndex + _this . rowsInView ) {
2019-01-22 11:03:53 +08:00
_this . currentIndex = currentIndex ;
_this . endIndex = _this . currentIndex ; //数据开始位置
_this . startIndex = _this . currentIndex - _this . loadCount ; //数据结束位置
if ( _this . endIndex > dataLen ) {
_this . endIndex = dataLen ;
}
if ( _this . startIndex < 0 ) {
_this . startIndex = 0 ;
}
2019-01-25 11:26:06 +08:00
//重新设定scrollTop值
_this . scrollTop = _this . getSumHeight ( 0 , _this . endIndex - _this . rowsInView + 2 ) ;
} else if ( currentIndex < _this . currentIndex ) {
2019-01-22 11:03:53 +08:00
_this . currentIndex = currentIndex ;
_this . startIndex = currentIndex ;
_this . endIndex = currentIndex + _this . loadCount ;
if ( _this . endIndex > dataLen ) {
_this . endIndex = dataLen ;
}
if ( _this . startIndex < 0 ) {
_this . startIndex = 0 ;
}
2019-01-25 11:26:06 +08:00
//重新设定scrollTop值
_this . scrollTop = _this . getSumHeight ( 0 , _this . startIndex ) ;
2019-01-22 11:03:53 +08:00
}
} ;
2019-01-07 14:57:58 +08:00
BigData . prototype . getRowKey = function getRowKey ( record , index ) {
var rowKey = this . props . rowKey ;
2019-01-16 13:57:31 +08:00
var key = typeof rowKey === "function" ? rowKey ( record , index ) : record [ rowKey ] ;
2019-01-10 16:07:41 +08:00
2019-01-07 14:57:58 +08:00
return key ;
} ;
/ * *
* 判断是否是树形结构
*
* /
2019-09-11 21:08:18 +08:00
BigData . prototype . checkIsTreeType = function checkIsTreeType ( newData ) {
var data = newData ? newData : this . props . data ;
2019-01-07 14:57:58 +08:00
var rs = false ;
var len = data . length > 30 ? 30 : data . length ;
//取前三十个看看是否有children属性, 有则为树形结构
for ( var i = 0 ; i < len ; i ++ ) {
if ( data [ i ] . children ) {
rs = true ;
break ;
}
}
return rs ;
} ;
BigData . prototype . getData = function getData ( data , parentIndex ) {
2019-01-16 13:57:31 +08:00
var _this3 = this ;
2019-01-07 14:57:58 +08:00
data . forEach ( function ( subItem , subIndex ) {
2019-01-16 13:57:31 +08:00
_this3 . cachedRowParentIndex [ treeTypeIndex ] = parentIndex ;
_this3 . keys [ treeTypeIndex ] = _this3 . getRowKey ( subItem , subIndex ) ;
2019-01-07 14:57:58 +08:00
treeTypeIndex ++ ;
if ( subItem . children ) {
2019-01-16 13:57:31 +08:00
_this3 . getData ( subItem . children , parentIndex ) ;
2019-01-07 14:57:58 +08:00
}
} ) ;
} ;
BigData . prototype . componentWillUnmount = function componentWillUnmount ( ) {
this . cachedRowHeight = [ ] ;
this . cachedRowParentIndex = [ ] ;
} ;
2018-12-17 11:12:10 +08:00
/ * *
2018-12-20 09:41:51 +08:00
* 获取数据区高度
*
*
* * /
2018-12-17 11:12:10 +08:00
BigData . prototype . getContentHeight = function getContentHeight ( ) {
if ( ! this . props . data ) return 0 ;
return this . getSumHeight ( 0 , this . props . data . length ) ;
} ;
BigData . prototype . getSumHeight = function getSumHeight ( start , end ) {
2018-12-20 09:41:51 +08:00
var height = this . props . height ;
2018-12-17 11:12:10 +08:00
2018-12-20 09:41:51 +08:00
var rowHeight = height ? height : defaultHeight ;
2019-01-07 14:57:58 +08:00
var sumHeight = 0 ,
currentKey = void 0 ,
currentRowHeight = rowHeight ;
2018-12-17 11:12:10 +08:00
for ( var i = start ; i < end ; i ++ ) {
2019-01-07 14:57:58 +08:00
if ( this . cachedRowHeight [ i ] == undefined ) {
if ( this . treeType ) {
2019-08-31 11:32:29 +08:00
// currentKey = this.keys[i];
2020-11-24 17:05:55 +08:00
currentKey = this . flatTreeData [ i ] && this . flatTreeData [ i ] . key ;
2019-01-07 14:57:58 +08:00
currentRowHeight = 0 ;
2019-08-31 11:32:29 +08:00
if ( this . flatTreeKeysMap . hasOwnProperty ( currentKey ) ) {
2019-01-07 14:57:58 +08:00
currentRowHeight = rowHeight ;
}
}
sumHeight += currentRowHeight ;
} else {
sumHeight += this . cachedRowHeight [ i ] ;
}
2018-12-17 11:12:10 +08:00
}
2018-12-20 09:41:51 +08:00
return sumHeight ;
2018-12-17 11:12:10 +08:00
} ;
2019-01-07 14:57:58 +08:00
2018-12-21 15:26:33 +08:00
/ * *
* @ description 根据返回的scrollTop计算当前的索引 。 此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex 。 另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
* @ param 最新一次滚动的scrollTop
2019-01-07 14:57:58 +08:00
* @ param treeType是否是树状表
2019-08-27 11:10:47 +08:00
* @ param callback表体滚动过程中触发的回调
2018-12-21 15:26:33 +08:00
* /
2018-12-20 09:41:51 +08:00
BigData . prototype . setRowHeight = function setRowHeight ( height , index ) {
this . cachedRowHeight [ index ] = height ;
} ;
2018-12-17 11:12:10 +08:00
2019-01-07 14:57:58 +08:00
BigData . prototype . setRowParentIndex = function setRowParentIndex ( parentIndex , index ) { }
2019-01-16 13:57:31 +08:00
// this.cachedRowParentIndex[index] = parentIndex;
2019-01-07 14:57:58 +08:00
/ * *
*
* 根据当前行号获取该行的父节点行号
* @ param { * } currentIndex 当前行号
* /
;
BigData . prototype . getParentIndex = function getParentIndex ( targetIndex ) {
var data = this . props . data ;
var parentIndex = - 1 ;
parentIndex = this . getIndex ( data , - 1 , targetIndex ) ;
if ( parentIndex < 0 ) {
//小于0说明没有展开的子节点
parentIndex = targetIndex ;
}
return parentIndex ;
} ;
BigData . prototype . getIndex = function getIndex ( data , index , targetIndex ) {
var parentIndex = index ;
for ( var i = 0 ; i < data . length ; i ++ ) {
index ++ ;
if ( targetIndex <= index ) {
break ;
}
if ( data [ i ] . children ) {
this . getIndex ( data [ i ] . children , index , targetIndex ) ;
}
}
return parentIndex ;
} ;
2018-12-17 11:12:10 +08:00
BigData . prototype . render = function render ( ) {
2018-12-20 09:41:51 +08:00
var data = this . props . data ;
2018-12-21 15:26:33 +08:00
var scrollTop = this . scrollTop ;
var endIndex = this . endIndex ,
2019-08-31 11:32:29 +08:00
startIndex = this . startIndex ,
treeData = this . treeData ,
treeType = this . treeType ,
flatTreeData = this . flatTreeData ;
2018-12-20 09:41:51 +08:00
2019-02-25 14:40:28 +08:00
var expandedRowKeys = this . props . expandedRowKeys ? this . props . expandedRowKeys : this . expandedRowKeys ;
2019-02-19 16:08:44 +08:00
if ( startIndex < 0 ) {
startIndex = 0 ;
}
if ( endIndex < 0 ) {
endIndex = 0 ;
}
2019-08-31 11:32:29 +08:00
if ( treeType && endIndex > flatTreeData . length || ! treeType && endIndex > data . length ) {
endIndex = treeType ? flatTreeData . length : data . length ;
2019-02-19 16:08:44 +08:00
}
2018-12-20 09:41:51 +08:00
var lazyLoad = {
2019-01-07 14:57:58 +08:00
startIndex : startIndex ,
2019-07-02 17:11:40 +08:00
endIndex : endIndex ,
2019-01-07 14:57:58 +08:00
startParentIndex : startIndex //为树状节点做准备
2018-12-20 09:41:51 +08:00
} ;
2019-08-31 11:32:29 +08:00
if ( treeType ) {
lazyLoad . preHeight = this . getSumHeight ( 0 , startIndex ) ;
lazyLoad . sufHeight = this . getSumHeight ( endIndex , flatTreeData . length ) ;
2019-01-07 14:57:58 +08:00
} else {
lazyLoad . preHeight = this . getSumHeight ( 0 , startIndex ) ;
lazyLoad . sufHeight = this . getSumHeight ( endIndex , data . length ) ;
}
2019-02-25 14:40:28 +08:00
// console.log('*******expandedRowKeys*****'+expandedRowKeys);
2019-09-11 21:08:18 +08:00
var dataSource = treeType && Array . isArray ( treeData ) && treeData . length > 0 ? treeData : data . slice ( startIndex , endIndex ) ;
2018-12-20 09:41:51 +08:00
return _react2 [ "default" ] . createElement ( Table , _extends ( { } , this . props , {
2019-09-11 21:08:18 +08:00
data : dataSource ,
2018-12-20 09:41:51 +08:00
lazyLoad : lazyLoad ,
2019-01-10 19:42:30 +08:00
handleScrollY : this . handleScrollY ,
2018-12-20 09:41:51 +08:00
scrollTop : scrollTop ,
2019-01-07 14:57:58 +08:00
setRowHeight : this . setRowHeight ,
setRowParentIndex : this . setRowParentIndex ,
onExpand : this . onExpand ,
2019-11-06 15:03:26 +08:00
onExpandedRowsChange : this . props . onExpandedRowsChange ,
2019-02-25 14:40:28 +08:00
expandedRowKeys : expandedRowKeys
2018-12-20 09:41:51 +08:00
// className={'lazy-table'}
} ) ) ;
2018-12-17 11:12:10 +08:00
} ;
return BigData ;
2018-12-20 09:41:51 +08:00
} ( _react . Component ) , _class . defaultProps = {
2018-12-21 15:26:33 +08:00
data : [ ] ,
2019-01-07 14:57:58 +08:00
loadBuffer : 5 ,
2019-01-16 13:57:31 +08:00
rowKey : "key" ,
2019-01-10 19:42:30 +08:00
onExpand : function onExpand ( ) { } ,
2019-01-22 11:03:53 +08:00
scroll : { } ,
2019-01-25 11:17:52 +08:00
currentIndex : - 1 ,
isTree : false
2018-12-21 15:26:33 +08:00
} , _class . propTypes = {
loadBuffer : _propTypes2 [ "default" ] . number
2018-12-20 09:41:51 +08:00
} , _initialiseProps = function _initialiseProps ( ) {
2019-01-16 13:57:31 +08:00
var _this4 = this ;
2019-12-26 18:28:11 +08:00
this . getTreeData = function ( expandedKeys , newData ) {
2019-09-11 21:08:18 +08:00
var startIndex = _this4 . startIndex ,
2019-12-05 16:27:38 +08:00
endIndex = _this4 . endIndex ;
2019-09-11 21:08:18 +08:00
2019-12-26 18:28:11 +08:00
var data = newData ? newData : _this4 . props . data ;
2019-12-05 16:27:38 +08:00
_this4 . cacheExpandedKeys = expandedKeys && new Set ( expandedKeys ) ;
2019-12-05 10:04:21 +08:00
// 深递归 data, 截取可视区 data 数组,再将扁平结构转换成嵌套结构
2019-09-11 21:08:18 +08:00
var sliceTreeList = [ ] ;
var flatTreeData = _this4 . deepTraversal ( data ) ;
_this4 . flatTreeData = flatTreeData ;
2019-12-05 10:04:21 +08:00
sliceTreeList = flatTreeData . slice ( startIndex , endIndex ) ;
2019-09-11 21:08:18 +08:00
_this4 . handleTreeListChange ( sliceTreeList ) ;
2019-12-05 10:04:21 +08:00
2019-12-05 16:27:38 +08:00
_this4 . cacheExpandedKeys = expandedKeys && null ;
2019-09-11 21:08:18 +08:00
} ;
2019-08-31 11:32:29 +08:00
this . deepTraversal = function ( treeData ) {
var parentKey = arguments . length > 1 && arguments [ 1 ] !== undefined ? arguments [ 1 ] : null ;
var _this = _this4 ;
var cacheExpandedKeys = _this . cacheExpandedKeys ,
_this$expandedRowKeys = _this . expandedRowKeys ,
expandedRowKeys = _this$expandedRowKeys === undefined ? [ ] : _this$expandedRowKeys ,
flatTreeKeysMap = _this . flatTreeKeysMap ,
2019-11-30 14:16:43 +08:00
expandedKeysSet = cacheExpandedKeys ? cacheExpandedKeys : new Set ( expandedRowKeys ) ,
2019-08-31 11:32:29 +08:00
flatTreeData = [ ] ,
dataCopy = treeData ;
if ( Array . isArray ( dataCopy ) ) {
for ( var i = 0 , l = dataCopy . length ; i < l ; i ++ ) {
var _dataCopy$i = dataCopy [ i ] ,
children = _dataCopy$i . children ,
2020-04-01 14:54:41 +08:00
props = _objectWithoutProperties ( _dataCopy$i , [ "children" ] ) ,
key = _this4 . getRowKey ( dataCopy [ i ] , i ) ,
2019-11-30 14:16:43 +08:00
dataCopyI = new Object ( ) ,
2020-03-11 13:52:12 +08:00
_isLeaf = children && children . length > 0 ? false : true ,
2019-11-30 14:16:43 +08:00
isExpanded = parentKey === null || expandedKeysSet . has ( parentKey ) ? expandedKeysSet . has ( key ) : false ;
2019-08-31 11:32:29 +08:00
dataCopyI = _extends ( dataCopyI , {
key : key ,
isExpanded : isExpanded ,
parentKey : parentKey ,
2020-03-11 13:52:12 +08:00
_isLeaf : _isLeaf ,
2019-08-31 11:32:29 +08:00
index : flatTreeData . length
} , _extends ( { } , props ) ) ;
2019-12-05 10:04:21 +08:00
flatTreeData . push ( dataCopyI ) ; // 取每项数据放入一个新数组
flatTreeKeysMap [ key ] = dataCopyI ;
// 优化递归逻辑,如果当前节点是收起状态,则不遍历其子节点
if ( Array . isArray ( children ) && children . length > 0 && isExpanded ) {
flatTreeData = flatTreeData . concat ( _this4 . deepTraversal ( children , key ) ) ;
2019-08-31 11:32:29 +08:00
}
}
}
return flatTreeData ;
} ;
this . handleTreeListChange = function ( treeList , startIndex , endIndex ) {
// 属性配置设置
var attr = {
id : 'key' ,
parendId : 'parentKey' ,
rootId : null ,
2020-03-11 13:52:12 +08:00
_isLeaf : '_isLeaf'
2019-08-31 11:32:29 +08:00
} ;
var treeData = ( 0 , _utils . convertListToTree ) ( treeList , attr , _this4 . flatTreeKeysMap ) ;
_this4 . startIndex = typeof startIndex !== "undefined" ? startIndex : _this4 . startIndex ;
_this4 . endIndex = typeof endIndex !== "undefined" ? endIndex : _this4 . endIndex ;
_this4 . treeData = treeData ;
} ;
2019-01-16 13:57:31 +08:00
this . computeCachedRowParentIndex = function ( data ) {
2019-01-25 11:17:52 +08:00
var isTree = _this4 . props . isTree ;
var isTreeType = isTree ? true : _this4 . checkIsTreeType ( ) ;
2019-06-19 18:01:30 +08:00
treeTypeIndex = 0 ;
2019-01-16 13:57:31 +08:00
if ( isTreeType ) {
data . forEach ( function ( item , index ) {
_this4 . firstLevelKey [ index ] = _this4 . getRowKey ( item , index ) ;
_this4 . cachedRowParentIndex [ treeTypeIndex ] = index ;
//保存所有的keys跟小标对应起来
_this4 . keys [ treeTypeIndex ] = _this4 . getRowKey ( item , index ) ;
treeTypeIndex ++ ;
if ( item . children ) {
_this4 . getData ( item . children , index ) ;
}
} ) ;
}
} ;
2019-01-07 14:57:58 +08:00
2019-08-27 11:10:47 +08:00
this . handleScrollY = function ( nextScrollTop , treeType , callback ) {
2019-01-07 14:57:58 +08:00
//树表逻辑
// 关键点是动态的获取startIndex和endIndex
// 法子一: 子节点也看成普通tr, 最开始需要设置一共有多少行, 哪行显示哪行不显示如何确定
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值,
2019-01-16 13:57:31 +08:00
var _this = _this4 ;
2018-12-21 15:26:33 +08:00
var _this$props = _this . props ,
data = _this$props . data ,
height = _this$props . height ,
_this$props$scroll = _this$props . scroll ,
2018-12-26 14:26:42 +08:00
scroll = _this$props$scroll === undefined ? { } : _this$props$scroll ,
loadBuffer = _this$props . loadBuffer ;
2018-12-20 18:07:30 +08:00
2018-12-21 15:26:33 +08:00
var rowHeight = height ? height : defaultHeight ;
2018-12-20 18:07:30 +08:00
var _this$currentIndex = _this . currentIndex ,
currentIndex = _this$currentIndex === undefined ? 0 : _this$currentIndex ,
loadCount = _this . loadCount ,
2018-12-21 15:26:33 +08:00
scrollTop = _this . scrollTop ,
2019-08-31 11:32:29 +08:00
currentScrollTop = _this . currentScrollTop ,
flatTreeData = _this . flatTreeData ;
2018-12-20 18:07:30 +08:00
var endIndex = _this . endIndex ,
startIndex = _this . startIndex ;
var needRender = _this . state . needRender ;
2019-01-09 12:34:45 +08:00
_this . scrollTop = nextScrollTop ;
2018-12-20 18:07:30 +08:00
var viewHeight = parseInt ( scroll . y ) ;
2019-01-07 14:57:58 +08:00
_this . treeType = treeType ;
2018-12-26 10:23:51 +08:00
var index = 0 ;
var temp = nextScrollTop ;
2019-01-07 14:57:58 +08:00
var currentKey = void 0 ;
2018-12-26 10:23:51 +08:00
while ( temp > 0 ) {
2019-01-16 13:57:31 +08:00
var currentRowHeight = _this4 . cachedRowHeight [ index ] ;
2019-01-07 14:57:58 +08:00
if ( currentRowHeight === undefined ) {
2019-01-16 13:57:31 +08:00
if ( _this4 . treeType ) {
2019-08-31 11:32:29 +08:00
// currentKey = this.keys[index];
currentKey = _this4 . flatTreeData [ index ] . key ;
2019-01-07 14:57:58 +08:00
currentRowHeight = 0 ;
2019-08-31 11:32:29 +08:00
if ( _this4 . flatTreeKeysMap . hasOwnProperty ( currentKey ) ) {
2019-01-07 14:57:58 +08:00
currentRowHeight = rowHeight ;
}
} else {
currentRowHeight = rowHeight ;
}
}
temp -= currentRowHeight ;
2018-12-26 10:23:51 +08:00
if ( temp > 0 ) {
index += 1 ;
2018-12-20 09:41:51 +08:00
}
}
2019-01-07 15:01:11 +08:00
// console.log('currentIndex****',index);
2018-12-26 10:23:51 +08:00
var isOrder = index - currentIndex > 0 ? true : false ;
2018-12-20 09:41:51 +08:00
if ( index < 0 ) index = 0 ;
2018-12-21 15:26:33 +08:00
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
2018-12-20 09:41:51 +08:00
if ( currentIndex !== index ) {
2018-12-20 18:07:30 +08:00
_this . currentIndex = index ;
2018-12-21 15:26:33 +08:00
var rowsInView = 0 ; //可视区域显示多少行
var rowsHeight = 0 ; //可视区域内容高度
2019-01-07 14:57:58 +08:00
var tempIndex = index ;
2018-12-21 15:26:33 +08:00
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
2018-12-20 18:07:30 +08:00
if ( viewHeight ) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
2019-01-07 14:57:58 +08:00
2019-01-16 13:57:31 +08:00
while ( rowsHeight < viewHeight && tempIndex < _this4 . cachedRowHeight . length ) {
if ( _this4 . cachedRowHeight [ tempIndex ] ) {
rowsHeight += _this4 . cachedRowHeight [ tempIndex ] ;
2019-08-31 11:32:29 +08:00
// if (
// (treeType &&
// _this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
// !treeType
// ) {
rowsInView ++ ;
// }
2019-01-07 14:57:58 +08:00
}
tempIndex ++ ;
2018-12-20 18:07:30 +08:00
}
2019-08-31 11:32:29 +08:00
// if (treeType) {
// const treeIndex = index;
// index = _this.cachedRowParentIndex[treeIndex];
// if (index === undefined) {
// // console.log('index is undefined********'+treeIndex);
// index = this.getParentIndex(treeIndex);
// // console.log("getParentIndex****"+index);
// }
// }
2019-01-07 15:01:11 +08:00
// console.log('parentIndex*********',index);
2019-01-07 14:57:58 +08:00
// 如果rowsInView 小于 缓存的数据则重新render
2018-12-21 15:26:33 +08:00
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
if ( rowsInView + index > endIndex - rowDiff && isOrder ) {
2019-01-07 14:57:58 +08:00
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0 ;
2019-07-02 17:11:40 +08:00
// endIndex = startIndex + rowsInView + loadBuffer*2;
2019-01-07 14:57:58 +08:00
endIndex = startIndex + loadCount ;
2019-08-31 11:32:29 +08:00
if ( treeType && endIndex > flatTreeData . length || ! treeType && endIndex > data . length ) {
endIndex = treeType ? flatTreeData . length : data . length ;
2018-12-20 18:07:30 +08:00
}
2019-07-02 17:11:40 +08:00
if ( endIndex > _this4 . endIndex ) {
2019-01-16 13:57:31 +08:00
_this4 . startIndex = startIndex ;
_this4 . endIndex = endIndex ;
2019-08-31 11:32:29 +08:00
if ( treeType ) {
_this4 . handleTreeListChange ( flatTreeData . slice ( startIndex , endIndex ) , startIndex , endIndex ) ;
}
2019-01-16 13:57:31 +08:00
_this4 . setState ( { needRender : ! needRender } ) ;
2019-08-27 11:10:47 +08:00
callback ( parseInt ( currentIndex + rowsInView ) ) ;
2019-01-07 14:57:58 +08:00
}
2018-12-20 18:07:30 +08:00
}
2018-12-21 15:26:33 +08:00
// 向上滚动, 当前的index是否已经加载( currentIndex) , 若干上临界值小于startIndex则重新渲染
if ( ! isOrder && index < startIndex + rowDiff ) {
2018-12-26 14:26:42 +08:00
startIndex = index - loadBuffer ;
2018-12-20 18:07:30 +08:00
if ( startIndex < 0 ) {
startIndex = 0 ;
}
2019-07-02 17:11:40 +08:00
if ( startIndex < _this4 . startIndex ) {
2019-01-16 13:57:31 +08:00
_this4 . startIndex = startIndex ;
_this4 . endIndex = _this4 . startIndex + loadCount ;
2019-08-31 11:32:29 +08:00
if ( treeType ) {
_this4 . handleTreeListChange ( flatTreeData . slice ( startIndex , _this4 . endIndex ) , startIndex , _this4 . endIndex ) ;
}
2019-01-16 13:57:31 +08:00
_this4 . setState ( { needRender : ! needRender } ) ;
2019-08-27 11:10:47 +08:00
callback ( parseInt ( currentIndex + rowsInView ) ) ;
2019-01-07 14:57:58 +08:00
}
2019-01-07 15:01:11 +08:00
// console.log(
// "**index**" + index,
// "**startIndex**" + this.startIndex,
// "**endIndex**" + this.endIndex
// );
2018-12-20 18:07:30 +08:00
}
}
2019-01-07 14:57:58 +08:00
}
} ;
2019-02-25 14:40:28 +08:00
this . onExpand = function ( expandState , record , index ) {
2019-01-16 13:57:31 +08:00
var _this = _this4 ;
2019-08-31 11:32:29 +08:00
var _this$expandedRowKeys2 = _this . expandedRowKeys ,
expandedRowKeys = _this$expandedRowKeys2 === undefined ? [ ] : _this$expandedRowKeys2 ;
2019-02-25 14:40:28 +08:00
var needRender = _this . state . needRender ;
2019-08-31 11:32:29 +08:00
var data = _this . props . data ;
2019-02-25 14:40:28 +08:00
var rowKey = _this . getRowKey ( record , index ) ;
// 记录展开子表行的key
2019-01-07 14:57:58 +08:00
// 展开
2019-02-25 14:40:28 +08:00
if ( record . children ) {
if ( expandState ) {
record . children . forEach ( function ( item , index ) {
_this . expandChildRowKeys . push ( rowKey ) ;
} ) ;
} else {
// 收起
record . children . forEach ( function ( item , index ) {
_this . expandChildRowKeys . splice ( _this . expandChildRowKeys . findIndex ( function ( fitem ) {
return fitem . key === item . key ;
} ) , 1 ) ;
} ) ;
}
}
//滚动加载expandedRowKeys自己维护, 否则有展开不全的问题
if ( ! _this . props . expandedRowKeys ) {
if ( expandState ) {
expandedRowKeys . push ( rowKey ) ;
2019-04-17 15:47:46 +08:00
_this4 . setState ( { needRender : ! needRender } ) ;
2019-02-25 14:40:28 +08:00
} else {
var _index = - 1 ;
expandedRowKeys . forEach ( function ( r , i ) {
if ( r === rowKey ) {
_index = i ;
}
} ) ;
if ( _index !== - 1 ) {
expandedRowKeys . splice ( _index , 1 ) ;
_this4 . setState ( { needRender : ! needRender } ) ;
}
}
2019-08-31 11:32:29 +08:00
}
2019-02-25 14:40:28 +08:00
// expandState为true时, 记录下
2019-01-10 19:42:30 +08:00
_this . props . onExpand ( expandState , record ) ;
2019-11-30 14:16:43 +08:00
if ( _this4 . treeType ) {
//收起和展开时,缓存 expandedKeys
_this . cacheExpandedKeys = new Set ( expandedRowKeys ) ;
//重新递归数据
var flatTreeData = _this . deepTraversal ( data ) ;
var sliceTreeList = flatTreeData . slice ( _this . startIndex , _this . endIndex ) ;
_this . flatTreeData = flatTreeData ;
_this . handleTreeListChange ( sliceTreeList ) ;
_this . cacheExpandedKeys = null ;
}
2018-12-20 09:41:51 +08:00
} ;
} , _temp ;
2018-12-17 11:12:10 +08:00
}
2019-01-07 14:57:58 +08:00
module . exports = exports [ "default" ] ;