fix: 懒加载滚动后,复选框不能勾选[IFNC-1116]
This commit is contained in:
parent
1ce47cd5ae
commit
4554f26ff7
|
@ -101,15 +101,8 @@ var Tree = function (_React$Component) {
|
|||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在 lazyload 情况下,需要获取树节点的真实高度
|
||||
*/
|
||||
|
||||
|
||||
Tree.prototype.componentDidMount = function componentDidMount() {
|
||||
var lazyLoad = this.props.lazyLoad;
|
||||
// 此处为了区分数据是不是异步渲染的,prevProps 作为标识
|
||||
|
||||
if (this.hasTreeNode()) {
|
||||
this.setState({
|
||||
prevProps: this.props
|
||||
|
@ -119,14 +112,7 @@ var Tree = function (_React$Component) {
|
|||
if (this.props._getTreeObj) {
|
||||
this.props._getTreeObj(this);
|
||||
}
|
||||
// 启用懒加载,计算树节点真实高度
|
||||
if (!lazyLoad) return;
|
||||
var treenodes = this.tree.querySelectorAll('.u-tree-treenode-close')[0];
|
||||
if (!treenodes) return;
|
||||
var rowHeight = treenodes.getBoundingClientRect().height;
|
||||
this.store.setState({
|
||||
rowHeight: rowHeight
|
||||
});
|
||||
this.calculateRowHeight();
|
||||
};
|
||||
|
||||
// 判断初始化挂载时,有没有渲染树节点
|
||||
|
@ -230,6 +216,12 @@ var Tree = function (_React$Component) {
|
|||
this.setState(st);
|
||||
};
|
||||
|
||||
Tree.prototype.componentDidUpdate = function componentDidUpdate() {
|
||||
if (!this.hasCalculateRowHeight) {
|
||||
this.calculateRowHeight();
|
||||
}
|
||||
};
|
||||
|
||||
Tree.prototype.onDragStart = function onDragStart(e, treeNode) {
|
||||
this.dragNode = treeNode;
|
||||
this.dragNodesKeys = this.getDragNodes(treeNode);
|
||||
|
@ -431,7 +423,7 @@ var Tree = function (_React$Component) {
|
|||
var rsCheckedKeys = [];
|
||||
if (checked && index === -1) {
|
||||
checkedKeys.push(key);
|
||||
rsCheckedKeys.push(key);
|
||||
// rsCheckedKeys.push(key);//onCheck第一个参数的key不对
|
||||
}
|
||||
if (!checked && index > -1) {
|
||||
checkedKeys.splice(index, 1);
|
||||
|
@ -963,7 +955,9 @@ var Tree = function (_React$Component) {
|
|||
Tree.prototype.renderTreeNode = function renderTreeNode(child, index) {
|
||||
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
||||
|
||||
var pos = level + '-' + index;
|
||||
// fix: 懒加载场景,index 计算错误
|
||||
var actualIndex = index + parseInt(this.startIndex);
|
||||
var pos = level + '-' + actualIndex;
|
||||
var key = child.key || pos;
|
||||
|
||||
var state = this.state;
|
||||
|
@ -1117,7 +1111,7 @@ var Tree = function (_React$Component) {
|
|||
_this6.treeNodesStates[pos] = {
|
||||
siblingPosition: siblingPosition
|
||||
};
|
||||
});
|
||||
}, undefined, startIndex);
|
||||
};
|
||||
if (showLine && !checkable) {
|
||||
getTreeNodesStates();
|
||||
|
@ -1150,7 +1144,7 @@ var Tree = function (_React$Component) {
|
|||
_this6.treeNodesStates[pos].checked = true;
|
||||
checkedPositions.push(pos);
|
||||
}
|
||||
});
|
||||
}, undefined, startIndex);
|
||||
// if the parent node's key exists, it all children node will be checked
|
||||
(0, _util.handleCheckState)(this.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
|
||||
checkKeys = (0, _util.getCheck)(this.treeNodesStates);
|
||||
|
@ -1202,6 +1196,20 @@ var _initialiseProps = function _initialiseProps() {
|
|||
return !noTreeNode;
|
||||
};
|
||||
|
||||
this.calculateRowHeight = function () {
|
||||
var lazyLoad = _this7.props.lazyLoad;
|
||||
// 启用懒加载,计算树节点真实高度
|
||||
|
||||
if (!lazyLoad) return;
|
||||
var treenodes = _this7.tree.querySelectorAll('.u-tree-treenode-close')[0];
|
||||
if (!treenodes) return;
|
||||
_this7.hasCalculateRowHeight = true;
|
||||
var rowHeight = treenodes.getBoundingClientRect().height;
|
||||
_this7.store.setState({
|
||||
rowHeight: rowHeight
|
||||
});
|
||||
};
|
||||
|
||||
this.handleTreeListChange = function (treeList, startIndex, endIndex) {
|
||||
// 属性配置设置
|
||||
var attr = {
|
||||
|
@ -1218,6 +1226,7 @@ var _initialiseProps = function _initialiseProps() {
|
|||
_this7.setState({
|
||||
treeData: treeData
|
||||
});
|
||||
_this7.dataChange = true;
|
||||
};
|
||||
|
||||
this.deepTraversal = function (treeData) {
|
||||
|
|
|
@ -9,8 +9,8 @@ Object.defineProperty(exports, "__esModule", {
|
|||
|
||||
// 树懒加载功能,需要用到的变量
|
||||
exports["default"] = {
|
||||
loadBuffer: 5, //懒加载时缓冲区数据量
|
||||
loadBuffer: 20, //懒加载时缓冲区数据量
|
||||
defaultRowsInView: 20, //可视区数据量
|
||||
rowDiff: 3 //行差值,需要重新截取数据的阈值
|
||||
rowDiff: 10 //行差值,需要重新截取数据的阈值
|
||||
};
|
||||
module.exports = exports["default"];
|
|
@ -64,11 +64,9 @@ var InfiniteScroll = function (_Component) {
|
|||
|
||||
_this.scrollListener = function () {
|
||||
var el = _this.scrollComponent;
|
||||
|
||||
var parentNode = _this.getParentElement(el);
|
||||
|
||||
_this.scrollTop = parentNode.scrollTop;
|
||||
(0, _util.throttle)(_this.handleScrollY, 500)();
|
||||
_this.handleScrollY();
|
||||
};
|
||||
|
||||
_this.handleScrollY = function () {
|
||||
|
@ -130,12 +128,7 @@ var InfiniteScroll = function (_Component) {
|
|||
|
||||
_this.sliceTreeList = function (startIndex, endIndex) {
|
||||
var newTreeList = []; //存储截取后的新数据
|
||||
// console.log(
|
||||
// "**startIndex**" + startIndex,
|
||||
// "**endIndex**" + endIndex
|
||||
// );
|
||||
newTreeList = _this.treeList.slice(startIndex, endIndex);
|
||||
// console.log(JSON.stringify(newTreeList))
|
||||
_this.props.handleTreeListChange && _this.props.handleTreeListChange(newTreeList, startIndex, endIndex);
|
||||
};
|
||||
|
||||
|
@ -166,6 +159,12 @@ var InfiniteScroll = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
// componentDidUpdate() {
|
||||
// const el = this.scrollComponent;
|
||||
// const parentNode = this.getParentElement(el);
|
||||
// parentNode.scrollTop = this.scrollTop;
|
||||
// };
|
||||
|
||||
InfiniteScroll.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
this.detachScrollListener();
|
||||
this.detachMousewheelListener();
|
||||
|
@ -247,11 +246,11 @@ var InfiniteScroll = function (_Component) {
|
|||
var scrollY = scrollEl && scrollEl.clientHeight;
|
||||
|
||||
var rowHeight = store.getState().rowHeight;
|
||||
//默认显示20条,rowsInView根据定高算的。在非固定高下,这个只是一个大概的值。
|
||||
//默认显示20条,rowsInView根据定高算的。
|
||||
this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : _config2["default"].defaultRowsInView;
|
||||
|
||||
scrollEl.addEventListener('scroll', this.scrollListener, this.options ? this.options : this.props.useCapture);
|
||||
scrollEl.addEventListener('resize', this.scrollListener, this.options ? this.options : this.props.useCapture);
|
||||
scrollEl.addEventListener('scroll', (0, _util.throttle)(this.scrollListener, 150), this.options ? this.options : this.props.useCapture);
|
||||
scrollEl.addEventListener('resize', (0, _util.throttle)(this.scrollListener, 150), this.options ? this.options : this.props.useCapture);
|
||||
};
|
||||
/**
|
||||
* 滚动事件监听
|
||||
|
|
|
@ -23,7 +23,6 @@ exports.toArray = toArray;
|
|||
exports.getNodeChildren = getNodeChildren;
|
||||
exports.warnOnlyTreeNode = warnOnlyTreeNode;
|
||||
exports.convertListToTree = convertListToTree;
|
||||
exports.debounce = debounce;
|
||||
exports.throttle = throttle;
|
||||
|
||||
var _react = require('react');
|
||||
|
@ -130,10 +129,12 @@ function getSiblingPosition(index, len, siblingPosition) {
|
|||
}
|
||||
|
||||
function loopAllChildren(childs, callback, parent) {
|
||||
var baseNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
||||
|
||||
var loop = function loop(children, level, _parent) {
|
||||
var len = getChildrenlength(children);
|
||||
_react2["default"].Children.forEach(children, function (item, index) {
|
||||
var pos = level + '-' + index;
|
||||
var pos = level + '-' + (index + parseInt(baseNum));
|
||||
if (item.props.children && item.type && item.type.isTreeNode) {
|
||||
loop(item.props.children, pos, { node: item, pos: pos });
|
||||
}
|
||||
|
@ -485,57 +486,24 @@ function isObject(value) {
|
|||
return value != null && (type == 'object' || type == 'function');
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数防抖
|
||||
* @param {*} func
|
||||
* @param {*} wait
|
||||
* @param {*} immediate
|
||||
*/
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout = void 0;
|
||||
return function debounceFunc() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
// https://fb.me/react-event-pooling
|
||||
if (args[0] && args[0].persist) {
|
||||
args[0].persist();
|
||||
}
|
||||
var later = function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数节流
|
||||
* @param {*} func 延时调用函数
|
||||
* @param {*} wait 延迟多长时间
|
||||
* @param {*} options 至少多长时间触发一次
|
||||
* @return Function 延迟执行的方法
|
||||
*/
|
||||
function throttle(func, wait, options) {
|
||||
var leading = true;
|
||||
var trailing = true;
|
||||
|
||||
if (typeof func !== 'function') {
|
||||
throw new TypeError('Expected a function');
|
||||
function throttle(fn, wait) {
|
||||
var last = void 0;
|
||||
return function () {
|
||||
var now = Date.now();
|
||||
if (!last) {
|
||||
fn.apply(this, arguments);
|
||||
last = now;
|
||||
return;
|
||||
}
|
||||
if (isObject(options)) {
|
||||
leading = 'leading' in options ? !!options.leading : leading;
|
||||
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
||||
if (now - last >= wait) {
|
||||
fn.apply(this, arguments);
|
||||
last = now;
|
||||
}
|
||||
return debounce(func, wait, {
|
||||
leading: leading,
|
||||
trailing: trailing,
|
||||
'maxWait': wait
|
||||
});
|
||||
};
|
||||
}
|
|
@ -34383,15 +34383,8 @@
|
|||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在 lazyload 情况下,需要获取树节点的真实高度
|
||||
*/
|
||||
|
||||
|
||||
Tree.prototype.componentDidMount = function componentDidMount() {
|
||||
var lazyLoad = this.props.lazyLoad;
|
||||
// 此处为了区分数据是不是异步渲染的,prevProps 作为标识
|
||||
|
||||
if (this.hasTreeNode()) {
|
||||
this.setState({
|
||||
prevProps: this.props
|
||||
|
@ -34401,14 +34394,7 @@
|
|||
if (this.props._getTreeObj) {
|
||||
this.props._getTreeObj(this);
|
||||
}
|
||||
// 启用懒加载,计算树节点真实高度
|
||||
if (!lazyLoad) return;
|
||||
var treenodes = this.tree.querySelectorAll('.u-tree-treenode-close')[0];
|
||||
if (!treenodes) return;
|
||||
var rowHeight = treenodes.getBoundingClientRect().height;
|
||||
this.store.setState({
|
||||
rowHeight: rowHeight
|
||||
});
|
||||
this.calculateRowHeight();
|
||||
};
|
||||
|
||||
// 判断初始化挂载时,有没有渲染树节点
|
||||
|
@ -34512,6 +34498,12 @@
|
|||
this.setState(st);
|
||||
};
|
||||
|
||||
Tree.prototype.componentDidUpdate = function componentDidUpdate() {
|
||||
if (!this.hasCalculateRowHeight) {
|
||||
this.calculateRowHeight();
|
||||
}
|
||||
};
|
||||
|
||||
Tree.prototype.onDragStart = function onDragStart(e, treeNode) {
|
||||
this.dragNode = treeNode;
|
||||
this.dragNodesKeys = this.getDragNodes(treeNode);
|
||||
|
@ -34713,6 +34705,7 @@
|
|||
var rsCheckedKeys = [];
|
||||
if (checked && index === -1) {
|
||||
checkedKeys.push(key);
|
||||
// rsCheckedKeys.push(key);//onCheck第一个参数的key不对
|
||||
}
|
||||
if (!checked && index > -1) {
|
||||
checkedKeys.splice(index, 1);
|
||||
|
@ -35244,7 +35237,9 @@
|
|||
Tree.prototype.renderTreeNode = function renderTreeNode(child, index) {
|
||||
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
||||
|
||||
var pos = level + '-' + index;
|
||||
// fix: 懒加载场景,index 计算错误
|
||||
var actualIndex = index + parseInt(this.startIndex);
|
||||
var pos = level + '-' + actualIndex;
|
||||
var key = child.key || pos;
|
||||
|
||||
var state = this.state;
|
||||
|
@ -35398,7 +35393,7 @@
|
|||
_this6.treeNodesStates[pos] = {
|
||||
siblingPosition: siblingPosition
|
||||
};
|
||||
});
|
||||
}, undefined, startIndex);
|
||||
};
|
||||
if (showLine && !checkable) {
|
||||
getTreeNodesStates();
|
||||
|
@ -35431,7 +35426,7 @@
|
|||
_this6.treeNodesStates[pos].checked = true;
|
||||
checkedPositions.push(pos);
|
||||
}
|
||||
});
|
||||
}, undefined, startIndex);
|
||||
// if the parent node's key exists, it all children node will be checked
|
||||
(0, _util.handleCheckState)(this.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
|
||||
checkKeys = (0, _util.getCheck)(this.treeNodesStates);
|
||||
|
@ -35483,6 +35478,20 @@
|
|||
return !noTreeNode;
|
||||
};
|
||||
|
||||
this.calculateRowHeight = function () {
|
||||
var lazyLoad = _this7.props.lazyLoad;
|
||||
// 启用懒加载,计算树节点真实高度
|
||||
|
||||
if (!lazyLoad) return;
|
||||
var treenodes = _this7.tree.querySelectorAll('.u-tree-treenode-close')[0];
|
||||
if (!treenodes) return;
|
||||
_this7.hasCalculateRowHeight = true;
|
||||
var rowHeight = treenodes.getBoundingClientRect().height;
|
||||
_this7.store.setState({
|
||||
rowHeight: rowHeight
|
||||
});
|
||||
};
|
||||
|
||||
this.handleTreeListChange = function (treeList, startIndex, endIndex) {
|
||||
// 属性配置设置
|
||||
var attr = {
|
||||
|
@ -35499,6 +35508,7 @@
|
|||
_this7.setState({
|
||||
treeData: treeData
|
||||
});
|
||||
_this7.dataChange = true;
|
||||
};
|
||||
|
||||
this.deepTraversal = function (treeData) {
|
||||
|
@ -36271,7 +36281,6 @@
|
|||
exports.getNodeChildren = getNodeChildren;
|
||||
exports.warnOnlyTreeNode = warnOnlyTreeNode;
|
||||
exports.convertListToTree = convertListToTree;
|
||||
exports.debounce = debounce;
|
||||
exports.throttle = throttle;
|
||||
|
||||
var _react = __webpack_require__(1);
|
||||
|
@ -36378,10 +36387,12 @@
|
|||
}
|
||||
|
||||
function loopAllChildren(childs, callback, parent) {
|
||||
var baseNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
||||
|
||||
var loop = function loop(children, level, _parent) {
|
||||
var len = getChildrenlength(children);
|
||||
_react2['default'].Children.forEach(children, function (item, index) {
|
||||
var pos = level + '-' + index;
|
||||
var pos = level + '-' + (index + parseInt(baseNum));
|
||||
if (item.props.children && item.type && item.type.isTreeNode) {
|
||||
loop(item.props.children, pos, { node: item, pos: pos });
|
||||
}
|
||||
|
@ -36733,59 +36744,26 @@
|
|||
return value != null && (type == 'object' || type == 'function');
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数防抖
|
||||
* @param {*} func
|
||||
* @param {*} wait
|
||||
* @param {*} immediate
|
||||
*/
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout = void 0;
|
||||
return function debounceFunc() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
// https://fb.me/react-event-pooling
|
||||
if (args[0] && args[0].persist) {
|
||||
args[0].persist();
|
||||
}
|
||||
var later = function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数节流
|
||||
* @param {*} func 延时调用函数
|
||||
* @param {*} wait 延迟多长时间
|
||||
* @param {*} options 至少多长时间触发一次
|
||||
* @return Function 延迟执行的方法
|
||||
*/
|
||||
function throttle(func, wait, options) {
|
||||
var leading = true;
|
||||
var trailing = true;
|
||||
|
||||
if (typeof func !== 'function') {
|
||||
throw new TypeError('Expected a function');
|
||||
function throttle(fn, wait) {
|
||||
var last = void 0;
|
||||
return function () {
|
||||
var now = Date.now();
|
||||
if (!last) {
|
||||
fn.apply(this, arguments);
|
||||
last = now;
|
||||
return;
|
||||
}
|
||||
if (isObject(options)) {
|
||||
leading = 'leading' in options ? !!options.leading : leading;
|
||||
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
||||
if (now - last >= wait) {
|
||||
fn.apply(this, arguments);
|
||||
last = now;
|
||||
}
|
||||
return debounce(func, wait, {
|
||||
leading: leading,
|
||||
trailing: trailing,
|
||||
'maxWait': wait
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
|
@ -36858,11 +36836,9 @@
|
|||
|
||||
_this.scrollListener = function () {
|
||||
var el = _this.scrollComponent;
|
||||
|
||||
var parentNode = _this.getParentElement(el);
|
||||
|
||||
_this.scrollTop = parentNode.scrollTop;
|
||||
(0, _util.throttle)(_this.handleScrollY, 500)();
|
||||
_this.handleScrollY();
|
||||
};
|
||||
|
||||
_this.handleScrollY = function () {
|
||||
|
@ -36924,12 +36900,7 @@
|
|||
|
||||
_this.sliceTreeList = function (startIndex, endIndex) {
|
||||
var newTreeList = []; //存储截取后的新数据
|
||||
// console.log(
|
||||
// "**startIndex**" + startIndex,
|
||||
// "**endIndex**" + endIndex
|
||||
// );
|
||||
newTreeList = _this.treeList.slice(startIndex, endIndex);
|
||||
// console.log(JSON.stringify(newTreeList))
|
||||
_this.props.handleTreeListChange && _this.props.handleTreeListChange(newTreeList, startIndex, endIndex);
|
||||
};
|
||||
|
||||
|
@ -36960,6 +36931,12 @@
|
|||
}
|
||||
};
|
||||
|
||||
// componentDidUpdate() {
|
||||
// const el = this.scrollComponent;
|
||||
// const parentNode = this.getParentElement(el);
|
||||
// parentNode.scrollTop = this.scrollTop;
|
||||
// };
|
||||
|
||||
InfiniteScroll.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
this.detachScrollListener();
|
||||
this.detachMousewheelListener();
|
||||
|
@ -37041,11 +37018,11 @@
|
|||
var scrollY = scrollEl && scrollEl.clientHeight;
|
||||
|
||||
var rowHeight = store.getState().rowHeight;
|
||||
//默认显示20条,rowsInView根据定高算的。在非固定高下,这个只是一个大概的值。
|
||||
//默认显示20条,rowsInView根据定高算的。
|
||||
this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : _config2['default'].defaultRowsInView;
|
||||
|
||||
scrollEl.addEventListener('scroll', this.scrollListener, this.options ? this.options : this.props.useCapture);
|
||||
scrollEl.addEventListener('resize', this.scrollListener, this.options ? this.options : this.props.useCapture);
|
||||
scrollEl.addEventListener('scroll', (0, _util.throttle)(this.scrollListener, 150), this.options ? this.options : this.props.useCapture);
|
||||
scrollEl.addEventListener('resize', (0, _util.throttle)(this.scrollListener, 150), this.options ? this.options : this.props.useCapture);
|
||||
};
|
||||
/**
|
||||
* 滚动事件监听
|
||||
|
@ -37125,9 +37102,9 @@
|
|||
|
||||
// 树懒加载功能,需要用到的变量
|
||||
exports["default"] = {
|
||||
loadBuffer: 5, //懒加载时缓冲区数据量
|
||||
loadBuffer: 20, //懒加载时缓冲区数据量
|
||||
defaultRowsInView: 20, //可视区数据量
|
||||
rowDiff: 3 //行差值,需要重新截取数据的阈值
|
||||
rowDiff: 10 //行差值,需要重新截取数据的阈值
|
||||
};
|
||||
module.exports = exports["default"];
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
43
src/Tree.js
43
src/Tree.js
|
@ -55,11 +55,7 @@ class Tree extends React.Component {
|
|||
this.store = createStore({ rowHeight: 24 }); //rowHeight 树节点的高度,此变量在滚动加载场景很关键
|
||||
}
|
||||
|
||||
/**
|
||||
* 在 lazyload 情况下,需要获取树节点的真实高度
|
||||
*/
|
||||
componentDidMount() {
|
||||
const { lazyLoad } = this.props;
|
||||
// 此处为了区分数据是不是异步渲染的,prevProps 作为标识
|
||||
if(this.hasTreeNode()){
|
||||
this.setState({
|
||||
|
@ -70,14 +66,7 @@ class Tree extends React.Component {
|
|||
if(this.props._getTreeObj){
|
||||
this.props._getTreeObj(this);
|
||||
}
|
||||
// 启用懒加载,计算树节点真实高度
|
||||
if(!lazyLoad) return;
|
||||
const treenodes = this.tree.querySelectorAll('.u-tree-treenode-close')[0];
|
||||
if(!treenodes) return;
|
||||
let rowHeight = treenodes.getBoundingClientRect().height;
|
||||
this.store.setState({
|
||||
rowHeight: rowHeight
|
||||
});
|
||||
this.calculateRowHeight();
|
||||
}
|
||||
|
||||
// 判断初始化挂载时,有没有渲染树节点
|
||||
|
@ -176,6 +165,25 @@ class Tree extends React.Component {
|
|||
this.setState(st);
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
if(!this.hasCalculateRowHeight) {
|
||||
this.calculateRowHeight();
|
||||
}
|
||||
}
|
||||
|
||||
calculateRowHeight = () => {
|
||||
const { lazyLoad } = this.props;
|
||||
// 启用懒加载,计算树节点真实高度
|
||||
if(!lazyLoad) return;
|
||||
const treenodes = this.tree.querySelectorAll('.u-tree-treenode-close')[0];
|
||||
if(!treenodes) return;
|
||||
this.hasCalculateRowHeight = true;
|
||||
let rowHeight = treenodes.getBoundingClientRect().height;
|
||||
this.store.setState({
|
||||
rowHeight: rowHeight
|
||||
});
|
||||
}
|
||||
|
||||
onDragStart(e, treeNode) {
|
||||
this.dragNode = treeNode;
|
||||
this.dragNodesKeys = this.getDragNodes(treeNode);
|
||||
|
@ -369,7 +377,7 @@ onExpand(treeNode,keyType) {
|
|||
let rsCheckedKeys = [];
|
||||
if (checked && index === -1) {
|
||||
checkedKeys.push(key);
|
||||
rsCheckedKeys.push(key);//onCheck第一个参数的key不对
|
||||
// rsCheckedKeys.push(key);//onCheck第一个参数的key不对
|
||||
}
|
||||
if (!checked && index > -1) {
|
||||
checkedKeys.splice(index, 1);
|
||||
|
@ -890,6 +898,7 @@ onExpand(treeNode,keyType) {
|
|||
this.setState({
|
||||
treeData : treeData
|
||||
})
|
||||
this.dataChange = true;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -976,7 +985,9 @@ onExpand(treeNode,keyType) {
|
|||
}
|
||||
|
||||
renderTreeNode(child, index, level = 0) {
|
||||
const pos = `${level}-${index}`;
|
||||
// fix: 懒加载场景,index 计算错误
|
||||
const actualIndex = index + parseInt(this.startIndex);
|
||||
const pos = `${level}-${actualIndex}`;
|
||||
const key = child.key || pos;
|
||||
|
||||
const state = this.state;
|
||||
|
@ -1129,7 +1140,7 @@ onExpand(treeNode,keyType) {
|
|||
this.treeNodesStates[pos] = {
|
||||
siblingPosition,
|
||||
};
|
||||
});
|
||||
}, undefined, startIndex);
|
||||
};
|
||||
if (showLine && !checkable ) {
|
||||
getTreeNodesStates();
|
||||
|
@ -1163,7 +1174,7 @@ onExpand(treeNode,keyType) {
|
|||
this.treeNodesStates[pos].checked = true;
|
||||
checkedPositions.push(pos);
|
||||
}
|
||||
});
|
||||
}, undefined, startIndex);
|
||||
// if the parent node's key exists, it all children node will be checked
|
||||
handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
|
||||
checkKeys = getCheck(this.treeNodesStates);
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// 树懒加载功能,需要用到的变量
|
||||
export default {
|
||||
loadBuffer: 5, //懒加载时缓冲区数据量
|
||||
loadBuffer: 20, //懒加载时缓冲区数据量
|
||||
defaultRowsInView: 20, //可视区数据量
|
||||
rowDiff: 3, //行差值,需要重新截取数据的阈值
|
||||
rowDiff: 10, //行差值,需要重新截取数据的阈值
|
||||
};
|
|
@ -53,6 +53,12 @@ export default class InfiniteScroll extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
// componentDidUpdate() {
|
||||
// const el = this.scrollComponent;
|
||||
// const parentNode = this.getParentElement(el);
|
||||
// parentNode.scrollTop = this.scrollTop;
|
||||
// };
|
||||
|
||||
componentWillUnmount() {
|
||||
this.detachScrollListener();
|
||||
this.detachMousewheelListener();
|
||||
|
@ -152,17 +158,17 @@ export default class InfiniteScroll extends Component {
|
|||
let scrollY = scrollEl && scrollEl.clientHeight;
|
||||
|
||||
let rowHeight = store.getState().rowHeight;
|
||||
//默认显示20条,rowsInView根据定高算的。在非固定高下,这个只是一个大概的值。
|
||||
//默认显示20条,rowsInView根据定高算的。
|
||||
this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : CONFIG.defaultRowsInView;
|
||||
|
||||
scrollEl.addEventListener(
|
||||
'scroll',
|
||||
this.scrollListener,
|
||||
throttle(this.scrollListener, 150),
|
||||
this.options ? this.options : this.props.useCapture
|
||||
);
|
||||
scrollEl.addEventListener(
|
||||
'resize',
|
||||
this.scrollListener,
|
||||
throttle(this.scrollListener, 150),
|
||||
this.options ? this.options : this.props.useCapture
|
||||
);
|
||||
}
|
||||
|
@ -179,11 +185,9 @@ export default class InfiniteScroll extends Component {
|
|||
*/
|
||||
scrollListener = () => {
|
||||
const el = this.scrollComponent;
|
||||
|
||||
const parentNode = this.getParentElement(el);
|
||||
|
||||
this.scrollTop = parentNode.scrollTop;
|
||||
throttle(this.handleScrollY, 500)();
|
||||
this.handleScrollY()
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -253,12 +257,7 @@ export default class InfiniteScroll extends Component {
|
|||
*/
|
||||
sliceTreeList = (startIndex, endIndex) => {
|
||||
let newTreeList = []; //存储截取后的新数据
|
||||
// console.log(
|
||||
// "**startIndex**" + startIndex,
|
||||
// "**endIndex**" + endIndex
|
||||
// );
|
||||
newTreeList = this.treeList.slice(startIndex,endIndex);
|
||||
// console.log(JSON.stringify(newTreeList))
|
||||
this.props.handleTreeListChange && this.props.handleTreeListChange(newTreeList, startIndex, endIndex);
|
||||
}
|
||||
|
||||
|
|
61
src/util.js
61
src/util.js
|
@ -94,11 +94,11 @@ function getSiblingPosition(index, len, siblingPosition) {
|
|||
return siblingPosition;
|
||||
}
|
||||
|
||||
export function loopAllChildren(childs, callback, parent) {
|
||||
export function loopAllChildren(childs, callback, parent, baseNum=0) {
|
||||
const loop = (children, level, _parent) => {
|
||||
const len = getChildrenlength(children);
|
||||
React.Children.forEach(children, (item, index) => {
|
||||
const pos = `${level}-${index}`;
|
||||
const pos = `${level}-${index+parseInt(baseNum)}`;
|
||||
if (item.props.children && item.type && item.type.isTreeNode) {
|
||||
loop(item.props.children, pos, { node: item, pos });
|
||||
}
|
||||
|
@ -414,57 +414,24 @@ function isObject(value) {
|
|||
return value != null && (type == 'object' || type == 'function')
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数防抖
|
||||
* @param {*} func
|
||||
* @param {*} wait
|
||||
* @param {*} immediate
|
||||
*/
|
||||
export function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
return function debounceFunc() {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
// https://fb.me/react-event-pooling
|
||||
if (args[0] && args[0].persist) {
|
||||
args[0].persist();
|
||||
}
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
const callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 函数节流
|
||||
* @param {*} func 延时调用函数
|
||||
* @param {*} wait 延迟多长时间
|
||||
* @param {*} options 至少多长时间触发一次
|
||||
* @return Function 延迟执行的方法
|
||||
*/
|
||||
export function throttle(func, wait, options) {
|
||||
let leading = true
|
||||
let trailing = true
|
||||
|
||||
if (typeof func !== 'function') {
|
||||
throw new TypeError('Expected a function')
|
||||
export function throttle(fn, wait){
|
||||
let last;
|
||||
return function() {
|
||||
let now = Date.now();
|
||||
if (!last) {
|
||||
fn.apply(this, arguments);
|
||||
last = now;
|
||||
return;
|
||||
}
|
||||
if(now - last >= wait) {
|
||||
fn.apply(this, arguments);
|
||||
last = now;
|
||||
}
|
||||
if (isObject(options)) {
|
||||
leading = 'leading' in options ? !!options.leading : leading
|
||||
trailing = 'trailing' in options ? !!options.trailing : trailing
|
||||
}
|
||||
return debounce(func, wait, {
|
||||
leading,
|
||||
trailing,
|
||||
'maxWait': wait,
|
||||
})
|
||||
}
|
Loading…
Reference in New Issue