判断是否为叶子节点的优先级改成isLeaf>props.children
This commit is contained in:
parent
2f0e5e0356
commit
9d5125aeef
|
@ -59,6 +59,21 @@ var TreeNode = function (_React$Component) {
|
|||
|
||||
var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
||||
|
||||
_this2.getNodeChildren = function () {
|
||||
var children = _this2.props.children;
|
||||
|
||||
var originList = (0, _util.toArray)(children).filter(function (node) {
|
||||
return node;
|
||||
});
|
||||
var targetList = (0, _util.getNodeChildren)(originList);
|
||||
|
||||
if (originList.length !== targetList.length) {
|
||||
(0, _util.warnOnlyTreeNode)();
|
||||
}
|
||||
|
||||
return targetList;
|
||||
};
|
||||
|
||||
['onExpand', 'onCheck', 'onContextMenu', 'onMouseEnter', 'onMouseLeave', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop', 'onDragEnd', 'onDoubleClick', 'onKeyDown'].forEach(function (m) {
|
||||
_this2[m] = _this2[m].bind(_this2);
|
||||
});
|
||||
|
@ -330,6 +345,27 @@ var TreeNode = function (_React$Component) {
|
|||
return newChildren;
|
||||
};
|
||||
|
||||
/**
|
||||
*判断是否为叶子节点,isLeaf的优先级>props.children。如果是异步加载是根据isLeaf的值进行判断的
|
||||
*
|
||||
* @returns
|
||||
* @memberof TreeNode
|
||||
*/
|
||||
TreeNode.prototype.checkIsLeaf = function checkIsLeaf() {
|
||||
var _props = this.props,
|
||||
isLeaf = _props.isLeaf,
|
||||
loadData = _props.loadData;
|
||||
|
||||
|
||||
var hasChildren = this.getNodeChildren().length !== 0;
|
||||
|
||||
if (isLeaf === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isLeaf || !loadData && !hasChildren;
|
||||
};
|
||||
|
||||
TreeNode.prototype.render = function render() {
|
||||
var _iconEleCls,
|
||||
_this4 = this;
|
||||
|
@ -350,13 +386,17 @@ var TreeNode = function (_React$Component) {
|
|||
var delay = 500;
|
||||
var prevent = false;
|
||||
|
||||
if (!newChildren || newChildren === props.children) {
|
||||
// content = newChildren;
|
||||
newChildren = null;
|
||||
if (!props.loadData || props.isLeaf) {
|
||||
canRenderSwitcher = false;
|
||||
iconState = 'docu';
|
||||
}
|
||||
// if (!newChildren || newChildren === props.children) {
|
||||
// // content = newChildren;
|
||||
// newChildren = null;
|
||||
// if (!props.loadData || props.isLeaf) {
|
||||
// canRenderSwitcher = false;
|
||||
// iconState = 'docu';
|
||||
// }
|
||||
// }
|
||||
if (this.checkIsLeaf()) {
|
||||
canRenderSwitcher = false;
|
||||
iconState = 'docu';
|
||||
}
|
||||
// For performance, does't render children into dom when `!props.expanded` (move to Animate)
|
||||
// if (!props.expanded) {
|
||||
|
|
|
@ -13,6 +13,10 @@ exports.getCheck = getCheck;
|
|||
exports.getStrictlyValue = getStrictlyValue;
|
||||
exports.arraysEqual = arraysEqual;
|
||||
exports.closest = closest;
|
||||
exports.isTreeNode = isTreeNode;
|
||||
exports.toArray = toArray;
|
||||
exports.getNodeChildren = getNodeChildren;
|
||||
exports.warnOnlyTreeNode = warnOnlyTreeNode;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
|
@ -338,4 +342,29 @@ function closest(el, selector) {
|
|||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function isTreeNode(node) {
|
||||
return node && node.type && node.type.isTreeNode;
|
||||
}
|
||||
|
||||
function toArray(children) {
|
||||
var ret = [];
|
||||
_react2["default"].Children.forEach(children, function (c) {
|
||||
ret.push(c);
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getNodeChildren(children) {
|
||||
return toArray(children).filter(isTreeNode);
|
||||
}
|
||||
|
||||
var onlyTreeNodeWarned = false;
|
||||
|
||||
function warnOnlyTreeNode() {
|
||||
if (onlyTreeNodeWarned) return;
|
||||
|
||||
onlyTreeNodeWarned = true;
|
||||
warning(false, 'Tree only accept TreeNode as children.');
|
||||
}
|
|
@ -8740,7 +8740,6 @@
|
|||
// 如果是多选tree则进行选中或者反选该节点
|
||||
this.onCheck(treeNode);
|
||||
} else if (e.keyCode == _tinperBeeCore.KeyCode.ENTER) {
|
||||
console.log('keyCode***' + e.keyCode);
|
||||
this.onDoubleClick(treeNode);
|
||||
}
|
||||
// e.preventDefault();
|
||||
|
@ -9100,6 +9099,10 @@
|
|||
exports.getStrictlyValue = getStrictlyValue;
|
||||
exports.arraysEqual = arraysEqual;
|
||||
exports.closest = closest;
|
||||
exports.isTreeNode = isTreeNode;
|
||||
exports.toArray = toArray;
|
||||
exports.getNodeChildren = getNodeChildren;
|
||||
exports.warnOnlyTreeNode = warnOnlyTreeNode;
|
||||
|
||||
var _react = __webpack_require__(4);
|
||||
|
||||
|
@ -9426,6 +9429,31 @@
|
|||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function isTreeNode(node) {
|
||||
return node && node.type && node.type.isTreeNode;
|
||||
}
|
||||
|
||||
function toArray(children) {
|
||||
var ret = [];
|
||||
_react2['default'].Children.forEach(children, function (c) {
|
||||
ret.push(c);
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getNodeChildren(children) {
|
||||
return toArray(children).filter(isTreeNode);
|
||||
}
|
||||
|
||||
var onlyTreeNodeWarned = false;
|
||||
|
||||
function warnOnlyTreeNode() {
|
||||
if (onlyTreeNodeWarned) return;
|
||||
|
||||
onlyTreeNodeWarned = true;
|
||||
warning(false, 'Tree only accept TreeNode as children.');
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
/* 88 */
|
||||
|
@ -9492,6 +9520,21 @@
|
|||
|
||||
var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
||||
|
||||
_this2.getNodeChildren = function () {
|
||||
var children = _this2.props.children;
|
||||
|
||||
var originList = (0, _util.toArray)(children).filter(function (node) {
|
||||
return node;
|
||||
});
|
||||
var targetList = (0, _util.getNodeChildren)(originList);
|
||||
|
||||
if (originList.length !== targetList.length) {
|
||||
(0, _util.warnOnlyTreeNode)();
|
||||
}
|
||||
|
||||
return targetList;
|
||||
};
|
||||
|
||||
['onExpand', 'onCheck', 'onContextMenu', 'onMouseEnter', 'onMouseLeave', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop', 'onDragEnd', 'onDoubleClick', 'onKeyDown'].forEach(function (m) {
|
||||
_this2[m] = _this2[m].bind(_this2);
|
||||
});
|
||||
|
@ -9763,6 +9806,27 @@
|
|||
return newChildren;
|
||||
};
|
||||
|
||||
/**
|
||||
*判断是否为叶子节点,isLeaf的优先级>props.children。如果是异步加载是根据isLeaf的值进行判断的
|
||||
*
|
||||
* @returns
|
||||
* @memberof TreeNode
|
||||
*/
|
||||
TreeNode.prototype.checkIsLeaf = function checkIsLeaf() {
|
||||
var _props = this.props,
|
||||
isLeaf = _props.isLeaf,
|
||||
loadData = _props.loadData;
|
||||
|
||||
|
||||
var hasChildren = this.getNodeChildren().length !== 0;
|
||||
|
||||
if (isLeaf === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return isLeaf || !loadData && !hasChildren;
|
||||
};
|
||||
|
||||
TreeNode.prototype.render = function render() {
|
||||
var _iconEleCls,
|
||||
_this4 = this;
|
||||
|
@ -9783,13 +9847,17 @@
|
|||
var delay = 500;
|
||||
var prevent = false;
|
||||
|
||||
if (!newChildren || newChildren === props.children) {
|
||||
// content = newChildren;
|
||||
newChildren = null;
|
||||
if (!props.loadData || props.isLeaf) {
|
||||
canRenderSwitcher = false;
|
||||
iconState = 'docu';
|
||||
}
|
||||
// if (!newChildren || newChildren === props.children) {
|
||||
// // content = newChildren;
|
||||
// newChildren = null;
|
||||
// if (!props.loadData || props.isLeaf) {
|
||||
// canRenderSwitcher = false;
|
||||
// iconState = 'docu';
|
||||
// }
|
||||
// }
|
||||
if (this.checkIsLeaf()) {
|
||||
canRenderSwitcher = false;
|
||||
iconState = 'docu';
|
||||
}
|
||||
// For performance, does't render children into dom when `!props.expanded` (move to Animate)
|
||||
// if (!props.expanded) {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,10 @@ import ReactDOM from 'react-dom'
|
|||
import classNames from 'classnames';
|
||||
import Animate from 'bee-animate';
|
||||
import {
|
||||
browser
|
||||
browser,
|
||||
getNodeChildren,
|
||||
toArray,
|
||||
warnOnlyTreeNode
|
||||
} from './util';
|
||||
import PropTypes from 'prop-types';
|
||||
import { KeyCode } from 'tinper-bee-core';
|
||||
|
@ -251,6 +254,7 @@ class TreeNode extends React.Component {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}else if(children && children.type && children.type.isTreeNode == 1){
|
||||
allTreeNode = true;
|
||||
}
|
||||
|
@ -289,6 +293,36 @@ class TreeNode extends React.Component {
|
|||
return newChildren;
|
||||
}
|
||||
|
||||
getNodeChildren = () => {
|
||||
const { children } = this.props;
|
||||
const originList = toArray(children).filter(node => node);
|
||||
const targetList = getNodeChildren(originList);
|
||||
|
||||
if (originList.length !== targetList.length) {
|
||||
warnOnlyTreeNode();
|
||||
}
|
||||
|
||||
return targetList;
|
||||
};
|
||||
/**
|
||||
*判断是否为叶子节点,isLeaf的优先级>props.children。如果是异步加载是根据isLeaf的值进行判断的
|
||||
*
|
||||
* @returns
|
||||
* @memberof TreeNode
|
||||
*/
|
||||
checkIsLeaf(){
|
||||
const { isLeaf, loadData } = this.props;
|
||||
|
||||
const hasChildren = this.getNodeChildren().length !== 0;
|
||||
|
||||
if (isLeaf === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
isLeaf || (!loadData && !hasChildren)
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const props = this.props;
|
||||
const prefixCls = props.prefixCls;
|
||||
|
@ -306,13 +340,17 @@ class TreeNode extends React.Component {
|
|||
let delay = 500;
|
||||
let prevent = false;
|
||||
|
||||
if (!newChildren || newChildren === props.children) {
|
||||
// content = newChildren;
|
||||
newChildren = null;
|
||||
if (!props.loadData || props.isLeaf) {
|
||||
canRenderSwitcher = false;
|
||||
iconState = 'docu';
|
||||
}
|
||||
// if (!newChildren || newChildren === props.children) {
|
||||
// // content = newChildren;
|
||||
// newChildren = null;
|
||||
// if (!props.loadData || props.isLeaf) {
|
||||
// canRenderSwitcher = false;
|
||||
// iconState = 'docu';
|
||||
// }
|
||||
// }
|
||||
if(this.checkIsLeaf()){
|
||||
canRenderSwitcher = false;
|
||||
iconState = 'docu';
|
||||
}
|
||||
// For performance, does't render children into dom when `!props.expanded` (move to Animate)
|
||||
// if (!props.expanded) {
|
||||
|
|
28
src/util.js
28
src/util.js
|
@ -297,4 +297,30 @@ export function closest(el, selector) {
|
|||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function isTreeNode(node) {
|
||||
return node && node.type && node.type.isTreeNode;
|
||||
}
|
||||
|
||||
export function toArray(children) {
|
||||
const ret = [];
|
||||
React.Children.forEach(children, (c) => {
|
||||
ret.push(c);
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function getNodeChildren(children) {
|
||||
return toArray(children).filter(isTreeNode);
|
||||
}
|
||||
|
||||
let onlyTreeNodeWarned = false;
|
||||
|
||||
export function warnOnlyTreeNode() {
|
||||
if (onlyTreeNodeWarned) return;
|
||||
|
||||
onlyTreeNodeWarned = true;
|
||||
warning(false, 'Tree only accept TreeNode as children.');
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue