feat(子节节点children为空数组时，不显示扩展图图标): 子节点children属性为空数组时，不显示扩展图标
This commit is contained in:
wh
parent
5481ec6457
commit
3536f71bef
|
|
@ -280,14 +280,11 @@
|
|||
|
||||
.u-tree li span.u-tree-icon_loading:after {
|
||||
display: inline-block;
|
||||
font-family: 'uf';
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\E6AE";
|
||||
-webkit-animation: loadingCircle 1s infinite linear;
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
color: #108ee9; }
|
||||
vertical-align: middle;
|
||||
background: url("data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7") no-repeat scroll 0 0 transparent;
|
||||
content: "";
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
|
||||
.u-tree li span.u-tree-switcher.u-tree-switcher-noop {
|
||||
cursor: auto; }
|
||||
|
|
|
|||
|
|
@ -255,7 +255,8 @@ var TreeNode = function (_React$Component) {
|
|||
}
|
||||
var children = props.children;
|
||||
var newChildren = children;
|
||||
if (children && (children.type === TreeNode || Array.isArray(children) && children.every(function (item) {
|
||||
//如果props.children的长度大于0才可以生成子对象
|
||||
if (children && children.length > 0 && (children.type === TreeNode || Array.isArray(children) && children.every(function (item) {
|
||||
return item.type === TreeNode;
|
||||
}))) {
|
||||
var _cls;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree基本使用事例
|
||||
* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。checkStrictly为true时，子节点与父节点的选择情况都不会影响到对方
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
const defaultProps = {
|
||||
keys: ['0-0-0', '0-0-1']
|
||||
}
|
||||
console.log(Tree);
|
||||
class Demo1 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const keys = this.props.keys;
|
||||
this.state = {
|
||||
defaultExpandedKeys: keys,
|
||||
defaultSelectedKeys: keys,
|
||||
defaultCheckedKeys:keys
|
||||
// checkedKeys: {checked:keys},
|
||||
};
|
||||
}
|
||||
onSelect(info) {
|
||||
console.log('selected', info);
|
||||
}
|
||||
onCheck = (checkedKeys) => {
|
||||
let self = this;
|
||||
console.log('onCheck', checkedKeys);
|
||||
const cks = {
|
||||
checked: checkedKeys.checked || checkedKeys,
|
||||
};
|
||||
// this.setState({checkedKeys:cks});
|
||||
}
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Tree className="myCls" showLine checkable
|
||||
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
||||
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
||||
defaultCheckedKeys = {this.state.defaultCheckedKeys}
|
||||
checkStrictly
|
||||
onSelect={this.onSelect} onCheck={this.onCheck}
|
||||
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
||||
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Demo1.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree 拖拽使用事例
|
||||
* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Tree from '../../src';
|
||||
|
||||
const x = 3;
|
||||
const y = 2;
|
||||
const z = 1;
|
||||
const gData = [];
|
||||
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || gData;
|
||||
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({ title: key, key });
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
class Demo3 extends Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
gData,
|
||||
expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
|
||||
};
|
||||
this.onDragEnter = this.onDragEnter.bind(this);
|
||||
this.onDrop = this.onDrop.bind(this);
|
||||
}
|
||||
onDragEnter(info) {
|
||||
console.log(info);
|
||||
// expandedKeys 需要受控时设置
|
||||
// this.setState({
|
||||
// expandedKeys: info.expandedKeys,
|
||||
// });
|
||||
}
|
||||
onDrop(info) {
|
||||
console.log(info);
|
||||
const dropKey = info.node.props.eventKey;
|
||||
const dragKey = info.dragNode.props.eventKey;
|
||||
// const dragNodesKeys = info.dragNodesKeys;
|
||||
const loop = (data, key, callback) => {
|
||||
data.forEach((item, index, arr) => {
|
||||
if (item.key === key) {
|
||||
return callback(item, index, arr);
|
||||
}
|
||||
if (item.children) {
|
||||
return loop(item.children, key, callback);
|
||||
}
|
||||
});
|
||||
};
|
||||
const data = [...this.state.gData];
|
||||
let dragObj;
|
||||
loop(data, dragKey, (item, index, arr) => {
|
||||
arr.splice(index, 1);
|
||||
dragObj = item;
|
||||
});
|
||||
if (info.dropToGap) {
|
||||
let ar;
|
||||
let i;
|
||||
loop(data, dropKey, (item, index, arr) => {
|
||||
ar = arr;
|
||||
i = index;
|
||||
});
|
||||
ar.splice(i, 0, dragObj);
|
||||
} else {
|
||||
loop(data, dropKey, (item) => {
|
||||
item.children = item.children || [];
|
||||
// where to insert 示例添加到尾部，可以是随意位置
|
||||
item.children.push(dragObj);
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
gData: data,
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const loop = data => data.map((item) => {
|
||||
if (item.children && item.children.length) {
|
||||
return <TreeNode key={item.key} title={item.key}>{loop(item.children)}</TreeNode>;
|
||||
}
|
||||
return <TreeNode key={item.key} title={item.key} />;
|
||||
});
|
||||
return (
|
||||
<Tree
|
||||
defaultExpandedKeys={this.state.expandedKeys}
|
||||
draggable
|
||||
onDragEnter={this.onDragEnter}
|
||||
onDrop={this.onDrop}
|
||||
>
|
||||
{loop(this.state.gData)}
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Demo3;
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree可搜索事例
|
||||
* @description
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import FormControl from 'bee-form-control';
|
||||
import Tree from '../../src';
|
||||
|
||||
const x = 3;
|
||||
const y = 2;
|
||||
const z = 1;
|
||||
const gData = [];
|
||||
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || gData;
|
||||
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({
|
||||
title: key,
|
||||
key
|
||||
});
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
const dataList = [];
|
||||
const generateList = (data) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const node = data[i];
|
||||
const key = node.key;
|
||||
dataList.push({
|
||||
key,
|
||||
title: key
|
||||
});
|
||||
if (node.children) {
|
||||
generateList(node.children, node.key);
|
||||
}
|
||||
}
|
||||
};
|
||||
generateList(gData);
|
||||
|
||||
const getParentKey = (key, tree) => {
|
||||
let parentKey;
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
if (node.children) {
|
||||
if (node.children.some(item => item.key === key)) {
|
||||
parentKey = node.key;
|
||||
} else if (getParentKey(key, node.children)) {
|
||||
parentKey = getParentKey(key, node.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey;
|
||||
};
|
||||
|
||||
|
||||
class Demo4 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expandedKeys: [],
|
||||
searchValue: '',
|
||||
autoExpandParent: true,
|
||||
}
|
||||
}
|
||||
onExpand = (expandedKeys) => {
|
||||
this.setState({
|
||||
expandedKeys,
|
||||
autoExpandParent: false,
|
||||
});
|
||||
}
|
||||
onChange = (value) => {
|
||||
|
||||
const expandedKeys = [];
|
||||
dataList.forEach((item) => {
|
||||
if (item.key.indexOf(value) > -1) {
|
||||
expandedKeys.push(getParentKey(item.key, gData));
|
||||
}
|
||||
});
|
||||
const uniqueExpandedKeys = [];
|
||||
expandedKeys.forEach((item) => {
|
||||
if (item && uniqueExpandedKeys.indexOf(item) === -1) {
|
||||
uniqueExpandedKeys.push(item);
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
expandedKeys: uniqueExpandedKeys,
|
||||
searchValue: value,
|
||||
autoExpandParent: true,
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
searchValue,
|
||||
expandedKeys,
|
||||
autoExpandParent
|
||||
} = this.state;
|
||||
const loop = data => data.map((item) => {
|
||||
const index = item.key.search(searchValue);
|
||||
const beforeStr = item.key.substr(0, index);
|
||||
const afterStr = item.key.substr(index + searchValue.length);
|
||||
const title = index > -1 ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
<span className="u-tree-searchable-filter">{searchValue}</span>
|
||||
{afterStr}
|
||||
</span>
|
||||
) : <span>{item.key}</span>;
|
||||
if (item.children) {
|
||||
return (
|
||||
<TreeNode key={item.key} title={title}>
|
||||
{loop(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
return <TreeNode key={item.key} title={title} />;
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<FormControl
|
||||
style={{ width: 200 }}
|
||||
placeholder="Search"
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<Tree
|
||||
onExpand={this.onExpand}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
>
|
||||
{loop(gData)}
|
||||
</Tree>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo4;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.u-tree-searchable-filter {
|
||||
color: #f50;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree异步数据加载
|
||||
* @description 当点击展开，异步获取子节点数据
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
|
||||
const x = 3;
|
||||
const y = 2;
|
||||
const z = 1;
|
||||
const gData = [];
|
||||
|
||||
const generateData = (_level, _preKey, _tns) => {
|
||||
const preKey = _preKey || '0';
|
||||
const tns = _tns || gData;
|
||||
|
||||
const children = [];
|
||||
for (let i = 0; i < x; i++) {
|
||||
const key = `${preKey}-${i}`;
|
||||
tns.push({
|
||||
title: key,
|
||||
key
|
||||
});
|
||||
if (i < y) {
|
||||
children.push(key);
|
||||
}
|
||||
}
|
||||
if (_level < 0) {
|
||||
return tns;
|
||||
}
|
||||
const level = _level - 1;
|
||||
children.forEach((key, index) => {
|
||||
tns[index].children = [];
|
||||
return generateData(level, key, tns[index].children);
|
||||
});
|
||||
};
|
||||
generateData(z);
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
function generateTreeNodes(treeNode) {
|
||||
const arr = [];
|
||||
const key = treeNode.props.eventKey;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
arr.push({
|
||||
name: `leaf ${key}-${i}`,
|
||||
key: `${key}-${i}`
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
function setLeaf(treeData, curKey, level) {
|
||||
const loopLeaf = (data, lev) => {
|
||||
const l = lev - 1;
|
||||
data.forEach((item) => {
|
||||
if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :
|
||||
curKey.indexOf(item.key) !== 0) {
|
||||
return;
|
||||
}
|
||||
if (item.children) {
|
||||
loopLeaf(item.children, l);
|
||||
} else if (l < 1) {
|
||||
item.isLeaf = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
loopLeaf(treeData, level + 1);
|
||||
}
|
||||
|
||||
function getNewTreeData(treeData, curKey, child, level) {
|
||||
const loop = (data) => {
|
||||
if (level < 1 || curKey.length - 3 > level * 2) return;
|
||||
data.forEach((item) => {
|
||||
if (curKey.indexOf(item.key) === 0) {
|
||||
if (item.children) {
|
||||
loop(item.children);
|
||||
} else {
|
||||
item.children = child;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
loop(treeData);
|
||||
setLeaf(treeData, curKey, level);
|
||||
}
|
||||
|
||||
class Demo5 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
treeData: [],
|
||||
};
|
||||
this.onSelect = this.onSelect.bind(this);
|
||||
this.onLoadData = this.onLoadData.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
treeData: [{
|
||||
name: 'pNode 01',
|
||||
key: '0-0'
|
||||
}, {
|
||||
name: 'pNode 02',
|
||||
key: '0-1'
|
||||
}, {
|
||||
name: 'pNode 03',
|
||||
key: '0-2',
|
||||
isLeaf: true
|
||||
}, ],
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
onSelect(info) {
|
||||
console.log('selected', info);
|
||||
}
|
||||
onLoadData(treeNode) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const treeData = [...this.state.treeData];
|
||||
getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
|
||||
this.setState({
|
||||
treeData
|
||||
});
|
||||
resolve();
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const loop = data => data.map((item) => {
|
||||
if (item.children) {
|
||||
return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
|
||||
}
|
||||
return <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'} />;
|
||||
});
|
||||
const treeNodes = loop(this.state.treeData);
|
||||
return (
|
||||
<Tree onSelect={this.onSelect} loadData={this.onLoadData} >
|
||||
{treeNodes}
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Demo5
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree基本使用事例自定义图标
|
||||
* @description 添加openIcon、closeIcon属性
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
const defaultProps = {
|
||||
keys: ['0-0-0', '0-0-1']
|
||||
}
|
||||
console.log(Tree);
|
||||
class Demo1 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const keys = this.props.keys;
|
||||
this.state = {
|
||||
defaultExpandedKeys: keys,
|
||||
defaultSelectedKeys: keys,
|
||||
defaultCheckedKeys: keys,
|
||||
};
|
||||
}
|
||||
onSelect(info) {
|
||||
console.log('selected', info);
|
||||
}
|
||||
onCheck(info) {
|
||||
console.log('onCheck', info);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
|
||||
<Tree className="myCls" checkable openIcon={<Icon type="uf-minus" />} closeIcon={<Icon type="uf-plus" />}
|
||||
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
||||
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
||||
defaultCheckedKeys={this.state.defaultCheckedKeys}
|
||||
onSelect={this.onSelect} onCheck={this.onCheck}
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
||||
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Demo1.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree增加节点
|
||||
* @description
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
import Button from 'bee-button';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
|
||||
class Demo7 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
treeData: [],
|
||||
defaultExpandedKeys: ['0-0', '0-1', '0-2'],
|
||||
parentNode: {}
|
||||
};
|
||||
this.onSelect = this.onSelect.bind(this);
|
||||
this.addNode = this.addNode.bind(this);
|
||||
this.clickFun = this.clickFun.bind(this);
|
||||
this.getNodeByKey = this.getNodeByKey.bind(this);
|
||||
this.parentNode = null
|
||||
}
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
treeData: [{
|
||||
name: 'pNode 01',
|
||||
key: '0-0',
|
||||
children: [{
|
||||
name: 'leaf 0-0-0',
|
||||
key: '0-0-0'
|
||||
}, {
|
||||
name: 'leaf 0-0-1',
|
||||
key: '0-0-1'
|
||||
}]
|
||||
}, {
|
||||
name: 'pNode 02',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
name: 'leaf 0-1-0',
|
||||
key: '0-1-0'
|
||||
}, {
|
||||
name: 'leaf 0-1-1',
|
||||
key: '0-1-1'
|
||||
}]
|
||||
}, {
|
||||
name: 'pNode 03',
|
||||
key: '0-2',
|
||||
isLeaf: true
|
||||
}, ],
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
/**
|
||||
* 增加节点
|
||||
* @param string prKey [父节点key]
|
||||
* @param object nodeItem [子节点信息]
|
||||
*/
|
||||
addNode(prKey, nodeItem) {
|
||||
const data = this.state.treeData;
|
||||
let parNode;
|
||||
if (prKey) {
|
||||
// 如果prKey存在则搜索父节点进行添加
|
||||
parNode = this.getNodeByKey(data, prKey);
|
||||
//如果父节点存在的话，添加到父节点上
|
||||
if (parNode) {
|
||||
if (!parNode.children) {
|
||||
parNode.children = [];
|
||||
}
|
||||
// 如果key不存在就动态生成一个
|
||||
if (!nodeItem.key) {
|
||||
nodeItem.key = prKey + parNode.children.length + 1;
|
||||
}
|
||||
parNode.children.push(nodeItem);
|
||||
}
|
||||
} else {
|
||||
// 没有穿prKey添加到根下成为一级节点
|
||||
if (!nodeItem.key) {
|
||||
nodeItem.key = "0-" + data.length + 1;
|
||||
}
|
||||
data.push(nodeItem);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
getNodeByKey(data, key) {
|
||||
if (!this.parentNode) {
|
||||
data.find(item => {
|
||||
if (item.key === key) {
|
||||
console.log('item.name---' + item.name)
|
||||
this.parentNode = item;
|
||||
return (true);
|
||||
} else if (item.children) {
|
||||
return this.getNodeByKey(item.children, key);
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
return this.parentNode;
|
||||
}
|
||||
|
||||
|
||||
|
||||
onSelect(info) {
|
||||
console.log('selected', info);
|
||||
}
|
||||
/**
|
||||
* 点击button事件
|
||||
*/
|
||||
clickFun() {
|
||||
let prKey, nodeItem;
|
||||
prKey = '0-1';
|
||||
nodeItem = {
|
||||
name: 'leaf 0-0-4'
|
||||
}
|
||||
this.addNode(prKey, nodeItem);
|
||||
}
|
||||
|
||||
render() {
|
||||
const loop = data => data.map((item) => {
|
||||
if (item.children) {
|
||||
return <TreeNode title={item.name} key={item.key}>{loop(item.children)}</TreeNode>;
|
||||
}
|
||||
return <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'} />;
|
||||
});
|
||||
const treeNodes = loop(this.state.treeData);
|
||||
console.log('defaultKeys--' + this.state.defaultExpandedKeys);
|
||||
return (
|
||||
<div>
|
||||
<Tree onSelect={this.onSelect} defaultExpandedKeys={this.state.defaultExpandedKeys}>
|
||||
{treeNodes}
|
||||
</Tree>
|
||||
<Button colors="success" onClick={this.clickFun}>
|
||||
增加节点
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Demo7
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
/**
|
||||
*
|
||||
* @title Tree 节点可编辑
|
||||
* @description 鼠标移动到节点上点击编辑图标进行编辑。e.node.props.eventKey代表当前节点key值。editKey指当前操作的节点key
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
import Button from 'bee-button';
|
||||
import Icon from 'bee-icon';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
let timer = 0;
|
||||
let delay = 200;
|
||||
let prevent = false;
|
||||
|
||||
|
||||
|
||||
class Demo8 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
treeData: [],
|
||||
isHover: "",
|
||||
editKey: ""
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
onMouseEnter = (e) => {
|
||||
this.setState({
|
||||
isHover: e.node.props.eventKey
|
||||
})
|
||||
}
|
||||
onMouseLeave = (e, treenode) => {
|
||||
this.setState({
|
||||
isHover: "",
|
||||
editKey: ""
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
editRender = (item) => {
|
||||
this.setState({
|
||||
editKey: item.key
|
||||
});
|
||||
}
|
||||
nodechange = (item, value) => {
|
||||
item.name = value;
|
||||
}
|
||||
renderTreeTitle = (item) => {
|
||||
let titleIcon, titleInfo;
|
||||
//编辑时input框
|
||||
if (this.state.editKey == item.key) {
|
||||
titleInfo = <input type="text" id="itemKey" defaultValue={item.name} onChange={(e) => this.nodechange(item, e.target.value)} />
|
||||
} else {
|
||||
titleInfo = <span className="title-middle">{item.name}</span>
|
||||
}
|
||||
//编辑图标
|
||||
if (this.state.isHover == item.key) {
|
||||
titleIcon = <Icon className="title-middle edit-icon" type="uf-pencil" onClick={(e) => this.editRender(item)}></Icon>;
|
||||
}
|
||||
return (<div className="title-con">
|
||||
|
||||
{titleInfo}
|
||||
{titleIcon}
|
||||
</div>);
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
treeData: [{
|
||||
name: 'pNode 01',
|
||||
key: '0-0',
|
||||
children: [{
|
||||
name: 'leaf 0-0-0',
|
||||
key: '0-0-0'
|
||||
}, {
|
||||
name: 'leaf 0-0-1',
|
||||
key: '0-0-1'
|
||||
}]
|
||||
}, {
|
||||
name: 'pNode 02',
|
||||
key: '0-1',
|
||||
children: [{
|
||||
name: 'leaf 0-1-0',
|
||||
key: '0-1-0'
|
||||
}, {
|
||||
name: 'leaf 0-1-1',
|
||||
key: '0-1-1'
|
||||
}]
|
||||
}, {
|
||||
name: 'pNode 03',
|
||||
key: '0-2',
|
||||
isLeaf: true
|
||||
}, ],
|
||||
});
|
||||
|
||||
}, 100);
|
||||
}
|
||||
render() {
|
||||
const loop = data => data.map((item) => {
|
||||
if (item.children) {
|
||||
return <TreeNode title={this.renderTreeTitle(item)} key={item.key}>{loop(item.children)}</TreeNode>;
|
||||
}
|
||||
return <TreeNode title={this.renderTreeTitle(item)} key={item.key} isLeaf={item.isLeaf} disabled={item.key === '0-0-0'} />;
|
||||
});
|
||||
const treeNodes = loop(this.state.treeData);
|
||||
return (
|
||||
<Tree onMouseLeave={this.onMouseLeave} onMouseEnter={this.onMouseEnter}>
|
||||
{treeNodes}
|
||||
</Tree>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default Demo8;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.title-middle {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.edit-icon {
|
||||
float:right;
|
||||
font-size: 14px;
|
||||
}
|
||||
.title-con {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
*
|
||||
* @title 连接线Tree
|
||||
* @description
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {
|
||||
Component
|
||||
} from 'react';
|
||||
import Tree from '../../src';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
class Demo9 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const keys = this.props.keys;
|
||||
this.state = {
|
||||
defaultExpandedKeys: keys
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Tree className="myCls" showLine checkable defaultExpandAll={true}>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0" >
|
||||
<TreeNode title="leaf" key="0-0-0-0" />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo9;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -5455,13 +5455,11 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
|
||||
.u-tree li span.u-tree-icon_loading:after {
|
||||
display: inline-block;
|
||||
font-family: 'uf';
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\E6AE";
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
color: #108ee9; }
|
||||
vertical-align: middle;
|
||||
background: url("data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7") no-repeat scroll 0 0 transparent;
|
||||
content: "";
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
|
||||
.u-tree li span.u-tree-switcher.u-tree-switcher-noop {
|
||||
cursor: auto; }
|
||||
|
|
@ -6676,4 +6674,19 @@ input.u-button[type="submit"] {
|
|||
right: 7px;
|
||||
color: rgba(0, 0, 0, 0.65); }
|
||||
|
||||
.u-tree-searchable-filter {
|
||||
color: #f50;
|
||||
transition: all .3s ease; }
|
||||
|
||||
.title-middle {
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
|
||||
.edit-icon {
|
||||
float: right;
|
||||
font-size: 14px; }
|
||||
|
||||
.title-con {
|
||||
min-width: 150px; }
|
||||
|
||||
/*# sourceMappingURL=demo.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-tree",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"description": "Tree ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
||||
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
||||
@import "../node_modules/bee-checkbox/src/Checkbox";
|
||||
// $loading: url('./assets/img/tree-loading.gif');
|
||||
$loading:url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7');
|
||||
|
||||
$treePrefixCls : "u-tree";
|
||||
|
||||
|
|
@ -177,14 +179,17 @@ $treePrefixCls : "u-tree";
|
|||
}
|
||||
.u-tree li span.u-tree-icon_loading:after {
|
||||
display: inline-block;
|
||||
font-family: 'uf';
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\E6AE";
|
||||
-webkit-animation: loadingCircle 1s infinite linear;
|
||||
animation: loadingCircle 1s infinite linear;
|
||||
color: #108ee9;
|
||||
// margin-right: 2px;
|
||||
vertical-align: middle;
|
||||
background: $loading no-repeat scroll 0 0 transparent;
|
||||
// text-rendering: optimizeLegibility;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
content: "";
|
||||
// -webkit-animation: loadingCircle 1s infinite linear;
|
||||
// animation: loadingCircle 1s infinite linear;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.u-tree li span.u-tree-switcher.u-tree-switcher-noop {
|
||||
cursor: auto;
|
||||
|
|
|
|||
Loading…
Reference in New Issue