innov
/
bee-tree
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

增加renderTreeNodes函数

This commit is contained in:
yangchch6 2019-08-15 19:11:31 +08:00
parent f1e4303399
commit d91db60e51
10 changed files with 295 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
build/Tree.js
View File

@ -36,6 +36,8 @@ var _config2 = _interopRequireDefault(_config);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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; }
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; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@ -57,85 +59,7 @@ var Tree = function (_React$Component) {
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.handleTreeListChange = function (treeList, startIndex, endIndex) {
// 属性配置设置
var attr = {
id: 'key',
parendId: 'parentKey',
name: 'title',
rootId: null,
isLeaf: 'isLeaf'
};
var treeData = (0, _util.convertListToTree)(treeList, attr, _this.flatTreeKeysMap);
_this.startIndex = typeof startIndex !== "undefined" ? startIndex : _this.startIndex;
_this.endIndex = typeof endIndex !== "undefined" ? endIndex : _this.endIndex;
_this.setState({
treeData: treeData
});
};
_this.deepTraversal = function (treeData) {
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var isShown = arguments[2];
var expandedKeys = _this.state.expandedKeys,
flatTreeData = [],
flatTreeKeysMap = _this.flatTreeKeysMap,
dataCopy = JSON.parse(JSON.stringify(treeData));
if (Array.isArray(dataCopy)) {
for (var i = 0, l = dataCopy.length; i < l; i++) {
var key = dataCopy[i].hasOwnProperty('key') && dataCopy[i].key,
isLeaf = dataCopy[i].hasOwnProperty('children') ? false : true,
isExpanded = _this.cacheExpandedKeys ? _this.cacheExpandedKeys.indexOf(key) !== -1 : expandedKeys.indexOf(key) !== -1;
dataCopy[i].isExpanded = isExpanded;
dataCopy[i].parentKey = parentKey || null;
dataCopy[i].isShown = isShown;
dataCopy[i].isLeaf = isLeaf;
//该节点的父节点是展开状态 或 该节点是根节点
if (isShown || parentKey === null) {
flatTreeData.push(dataCopy[i]); // 取每项数据放入一个新数组
flatTreeKeysMap[key] = dataCopy[i];
}
if (Array.isArray(dataCopy[i]["children"]) && dataCopy[i]["children"].length > 0) {
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
flatTreeData = flatTreeData.concat(_this.deepTraversal(dataCopy[i]["children"], key, isExpanded));
delete dataCopy[i]["children"];
}
}
} else {
flatTreeData.push(dataCopy); // 取每项数据放入一个新数组
}
return flatTreeData;
};
_this.renderTreefromData = function (data) {
var renderTitle = _this.props.renderTitle;
var loop = function loop(data) {
return data.map(function (item) {
if (item.children) {
return _react2["default"].createElement(
_TreeNode2["default"],
{ key: item.key, title: renderTitle ? renderTitle(item) : item.key, isLeaf: item.isLeaf },
loop(item.children)
);
}
return _react2["default"].createElement(_TreeNode2["default"], { key: item.key, title: renderTitle ? renderTitle(item) : item.key, isLeaf: true });
});
};
return loop(data);
};
_this.getSumHeight = function (start, end) {
var sumHeight = 0;
var span = Math.abs(end - start);
if (span) {
sumHeight = span * _config2["default"].defaultHeight;
}
return sumHeight;
};
_initialiseProps.call(_this);
['onKeyDown', 'onCheck', "onUlFocus", "_focusDom", "onUlMouseEnter", "onUlMouseLeave"].forEach(function (m) {
_this[m] = _this[m].bind(_this);
@ -944,7 +868,6 @@ var Tree = function (_React$Component) {
Tree.prototype.renderTreeNode = function renderTreeNode(child, index) {
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
console.log('child', child.props);
var pos = level + '-' + index;
var key = child.key || pos;
@ -1162,6 +1085,100 @@ var Tree = function (_React$Component) {
return Tree;
}(_react2["default"].Component);
var _initialiseProps = function _initialiseProps() {
var _this7 = this;
this.handleTreeListChange = function (treeList, startIndex, endIndex) {
// 属性配置设置
var attr = {
id: 'key',
parendId: 'parentKey',
name: 'title',
rootId: null,
isLeaf: 'isLeaf'
};
var treeData = (0, _util.convertListToTree)(treeList, attr, _this7.flatTreeKeysMap);
_this7.startIndex = typeof startIndex !== "undefined" ? startIndex : _this7.startIndex;
_this7.endIndex = typeof endIndex !== "undefined" ? endIndex : _this7.endIndex;
_this7.setState({
treeData: treeData
});
};
this.deepTraversal = function (treeData) {
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var isShown = arguments[2];
var expandedKeys = _this7.state.expandedKeys,
flatTreeData = [],
flatTreeKeysMap = _this7.flatTreeKeysMap,
dataCopy = JSON.parse(JSON.stringify(treeData));
if (Array.isArray(dataCopy)) {
for (var i = 0, l = dataCopy.length; i < l; i++) {
var _dataCopy$i = dataCopy[i],
key = _dataCopy$i.key,
title = _dataCopy$i.title,
children = _dataCopy$i.children,
props = _objectWithoutProperties(_dataCopy$i, ['key', 'title', 'children']);
var isLeaf = children ? false : true,
isExpanded = _this7.cacheExpandedKeys ? _this7.cacheExpandedKeys.indexOf(key) !== -1 : expandedKeys.indexOf(key) !== -1;
dataCopy[i].isExpanded = isExpanded;
dataCopy[i].parentKey = parentKey || null;
dataCopy[i].isShown = isShown;
dataCopy[i].isLeaf = isLeaf;
//该节点的父节点是展开状态 或 该节点是根节点
if (isShown || parentKey === null) {
flatTreeData.push(_extends(dataCopy[i], _extends({}, props))); // 取每项数据放入一个新数组
flatTreeKeysMap[key] = dataCopy[i];
}
if (Array.isArray(dataCopy[i]["children"]) && dataCopy[i]["children"].length > 0) {
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
flatTreeData = flatTreeData.concat(_this7.deepTraversal(dataCopy[i]["children"], key, isExpanded));
delete dataCopy[i]["children"];
}
}
} else {
flatTreeData.push(dataCopy); // 取每项数据放入一个新数组
}
return flatTreeData;
};
this.renderTreefromData = function (data) {
var _props4 = _this7.props,
renderTitle = _props4.renderTitle,
renderTreeNodes = _props4.renderTreeNodes;
if (renderTreeNodes) {
return renderTreeNodes(data);
}
var loop = function loop(data) {
return data.map(function (item) {
if (item.children) {
return _react2["default"].createElement(
_TreeNode2["default"],
{ key: item.key, title: renderTitle ? renderTitle(item) : item.key, isLeaf: item.isLeaf },
loop(item.children)
);
}
return _react2["default"].createElement(_TreeNode2["default"], { key: item.key, title: renderTitle ? renderTitle(item) : item.key, isLeaf: true });
});
};
return loop(data);
};
this.getSumHeight = function (start, end) {
var sumHeight = 0;
var span = Math.abs(end - start);
if (span) {
sumHeight = span * _config2["default"].defaultHeight;
}
return sumHeight;
};
};
Tree.propTypes = {
prefixCls: _propTypes2["default"].string,
children: _propTypes2["default"].any,
@ -1198,7 +1215,9 @@ Tree.propTypes = {
openTransitionName: _propTypes2["default"].string,
focusable: _propTypes2["default"].bool,
openAnimation: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
lazyLoad: _propTypes2["default"].bool
lazyLoad: _propTypes2["default"].bool,
treeData: _propTypes2["default"].array,
renderTreeNode: _propTypes2["default"].func
};
Tree.defaultProps = {

22
build/util.js
View File

@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /* eslint no-loop-func: 0*/
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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.browser = browser;
exports.getOffset = getOffset;
@ -30,6 +32,8 @@ var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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; } /* eslint no-loop-func: 0*/
function browser(navigator) {
var tem = void 0;
var ua = navigator.userAgent;
@ -402,13 +406,19 @@ function convertListToTree(treeData, attr, flatTreeKeysMap) {
for (var i = 0; i < resData.length; i++) {
if (resData[i].parentKey === attr.rootId) {
var _resData$i = resData[i],
key = _resData$i.key,
title = _resData$i.title,
children = _resData$i.children,
otherProps = _objectWithoutProperties(_resData$i, ['key', 'title', 'children']);
var obj = {
key: resData[i][attr.id],
title: resData[i][attr.name],
isLeaf: resData[i][attr.isLeaf],
children: []
};
tree.push(obj);
tree.push(_extends(obj, _extends({}, otherProps)));
resData.splice(i, 1);
i--;
} else {
@ -426,13 +436,19 @@ function convertListToTree(treeData, attr, flatTreeKeysMap) {
for (var _i2 = 0; _i2 < treeArrs.length; _i2++) {
for (var j = 0; j < resData.length; j++) {
if (treeArrs[_i2].key === resData[j][attr.parendId]) {
var _resData$j = resData[j],
_key = _resData$j.key,
_title = _resData$j.title,
_children = _resData$j.children,
_otherProps = _objectWithoutProperties(_resData$j, ['key', 'title', 'children']);
var _obj = {
key: resData[j][attr.id],
title: resData[j][attr.name],
isLeaf: resData[j][attr.isLeaf],
children: []
};
treeArrs[_i2].children.push(_obj);
treeArrs[_i2].children.push(_extends(_obj, _extends({}, _otherProps)));
resData.splice(j, 1);
j--;
}

21
demo/demolist/Demo13.js
View File

@ -7,6 +7,8 @@
import React, { Component } from 'react';
import Tree from '../../src';
const {TreeNode} = Tree;
const x = 1000;
const y = 1;
const z = 1;
@ -72,9 +74,20 @@ class Demo13 extends Component{
return false;
}
//自定义树节点内容
renderTitle = item => {
return item.key
//使用 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() {
@ -85,7 +98,7 @@ class Demo13 extends Component{
focusable
treeData={gData}
lazyLoad={true}
renderTitle={this.renderTitle}
renderTreeNodes={this.renderTreeNodes}
onExpand={this.onExpand}
defaultExpandAll={true}
expandedKeys={this.state.expandedKeys}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

231
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

@ -58,6 +58,7 @@ import 'bee-tree/build/Tree.css';
|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)|-
### TreeNode

2
package.json
View File

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

16
src/Tree.js
View File

@ -828,8 +828,8 @@ onExpand(treeNode,keyType) {
dataCopy = JSON.parse(JSON.stringify(treeData));
if(Array.isArray(dataCopy)){
for (let i=0, l=dataCopy.length; i<l; i++) {
let key = dataCopy[i].hasOwnProperty('key') && dataCopy[i].key,
isLeaf = dataCopy[i].hasOwnProperty('children') ? false : true,
let { key, title, children, ...props } = dataCopy[i];
let isLeaf = children ? false : true,
isExpanded = this.cacheExpandedKeys ? this.cacheExpandedKeys.indexOf(key) !== -1 : expandedKeys.indexOf(key) !== -1;
dataCopy[i].isExpanded = isExpanded;
dataCopy[i].parentKey = parentKey || null;
@ -837,7 +837,7 @@ onExpand(treeNode,keyType) {
dataCopy[i].isLeaf = isLeaf;
//该节点的父节点是展开状态 或 该节点是根节点
if(isShown || parentKey === null){
flatTreeData.push(dataCopy[i]); // 取每项数据放入一个新数组
flatTreeData.push(Object.assign(dataCopy[i], {...props})); // 取每项数据放入一个新数组
flatTreeKeysMap[key] = dataCopy[i];
}
if (Array.isArray(dataCopy[i]["children"]) && dataCopy[i]["children"].length > 0){
@ -859,7 +859,10 @@ onExpand(treeNode,keyType) {
* @param sufHeight 后置占位高度
*/
renderTreefromData = (data) => {
let {renderTitle} = this.props;
let {renderTitle,renderTreeNodes} = this.props;
if(renderTreeNodes) {
return renderTreeNodes(data);
}
const loop = data => data.map((item) => {
if (item.children) {
return (
@ -889,7 +892,6 @@ onExpand(treeNode,keyType) {
}
renderTreeNode(child, index, level = 0) {
console.log('child',child.props)
const pos = `${level}-${index}`;
const key = child.key || pos;
@ -1124,7 +1126,9 @@ Tree.propTypes = {
openTransitionName: PropTypes.string,
focusable: PropTypes.bool,
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
lazyLoad: PropTypes.bool
lazyLoad: PropTypes.bool,
treeData: PropTypes.array,
renderTreeNode: PropTypes.func
};
Tree.defaultProps = {

6
src/util.js
View File

@ -353,13 +353,14 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
for (let i = 0; i < resData.length; i++) {
if (resData[i].parentKey === attr.rootId) {
let { key, title, children, ...otherProps } = resData[i];
let obj = {
key: resData[i][attr.id],
title: resData[i][attr.name],
isLeaf: resData[i][attr.isLeaf],
children: []
};
tree.push(obj);
tree.push(Object.assign(obj, {...otherProps}));
resData.splice(i, 1);
i--;
}else {
@ -377,13 +378,14 @@ export function convertListToTree(treeData, attr, flatTreeKeysMap) {
for (let i = 0; i < treeArrs.length; i++) {
for (let j = 0; j < resData.length; j++) {
if (treeArrs[i].key === resData[j][attr.parendId]) {
let { key, title, children, ...otherProps } = resData[j];
let obj = {
key: resData[j][attr.id],
title: resData[j][attr.name],
isLeaf: resData[j][attr.isLeaf],
children: []
};
treeArrs[i].children.push(obj);
treeArrs[i].children.push(Object.assign(obj, {...otherProps}));
resData.splice(j, 1);
j--;
}