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

changelog

This commit is contained in:
jonymrshi 2017-11-02 10:45:08 +08:00
parent 39483f0fdc dc5a252480
commit f3a8c2cedc
11 changed files with 395 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -4,6 +4,7 @@
### build
* **changelog集成:** changelog集成 ([39483f0](https://github.com/tinper-bee/bee-tree/commit/39483f0))
* **组件依赖清理:** 组件依赖清理 ([0871a43](https://github.com/tinper-bee/bee-tree/commit/0871a43))
@ -14,6 +15,7 @@
### BREAKING CHANGES
* **changelog集成:** changelog集成完毕，具体使用方式参考文档。
* **文档补充:** 文档补充
* **组件依赖清理:** 组件依赖清理

12
demo/TreeDemo.scss
View File

@ -8,4 +8,16 @@
.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;
}

66
demo/demolist/Demo4.js
View File

@ -1,12 +1,14 @@
/**
*
* @title Tree可搜索事例
* @description
*
*/
*
* @title Tree可搜索事例
* @description
*
*/
import React, { Component } from 'react';
import React, {
Component
} from 'react';
import FormControl from 'bee-form-control';
import Tree from '../../src';
@ -16,25 +18,28 @@ const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0';
const tns = _tns || gData;
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);
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);
@ -45,7 +50,10 @@ const generateList = (data) => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
dataList.push({ key, title: key });
dataList.push({
key,
title: key
});
if (node.children) {
generateList(node.children, node.key);
}
@ -84,8 +92,8 @@ class Demo4 extends Component {
autoExpandParent: false,
});
}
onChange = (e) => {
const value = e.target.value;
onChange = (value) => {
// const value = e.target.value;
const expandedKeys = [];
dataList.forEach((item) => {
if (item.key.indexOf(value) > -1) {
@ -105,7 +113,11 @@ class Demo4 extends Component {
});
}
render() {
const { searchValue, expandedKeys, autoExpandParent } = this.state;
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);

4
demo/demolist/Demo6.js
View File

@ -10,7 +10,7 @@ import React, {
Component
} from 'react';
import Tree from '../../src';
import Icon from 'bee-icon';
const TreeNode = Tree.TreeNode;
const defaultProps = {
@ -36,7 +36,7 @@ class Demo1 extends Component {
render() {
return (
<Tree className="myCls" checkable openIcon="uf-minus" closeIcon="uf-plus"
<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}

153
demo/demolist/Demo7.js Normal file
View File

@ -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

127
demo/demolist/Demo8.js Normal file
View File

@ -0,0 +1,127 @@
/**
*
* @title Tree 节点可编辑
* @description 双击节点可编辑
*
*/
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.pos
})
}
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;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

30
package.json
View File

@ -20,10 +20,14 @@
"license": "MIT",
"main": "./build/index.js",
"config": {
<<<<<<< HEAD
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
=======
"port": 3000
>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
},
"scripts": {
"dev": "bee-tools run start",
@ -33,6 +37,7 @@
"chrome": "bee-tools run chrome",
"coveralls": "bee-tools run coverage",
"browsers": "bee-tools run browsers",
<<<<<<< HEAD
"pub": "bee-tools run pub",
"changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
@ -42,6 +47,18 @@
"classnames": "^2.2.5",
"object-assign": "latest",
"babel-runtime": "^6.23.0",
=======
"pub": "bee-tools run pub"
},
"dependencies": {
"babel-runtime": "^6.23.0",
"bee-animate": "latest",
"bee-checkbox": "latest",
"bee-form-control": "latest",
"bee-icon": "^1.0.0",
"classnames": "^2.2.5",
"object-assign": "latest",
>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
"tinper-bee-core": "latest"
},
"peerDependencies": {
@ -50,6 +67,7 @@
"prop-types": "15.6.0"
},
"devDependencies": {
<<<<<<< HEAD
"bee-form-control": "latest",
"bee-button": "latest",
"bee-layout": "latest",
@ -62,5 +80,17 @@
"react": "15.3.2",
"react-addons-test-utils": "15.3.2",
"react-dom": "15.3.2"
=======
"chai": "^3.5.0",
"enzyme": "^2.4.1",
"react": "15.3.2",
"react-addons-test-utils": "15.3.2",
"react-dom": "15.3.2",
"console-polyfill": "~0.2.1",
"es5-shim": "~4.1.10",
"bee-panel": "latest",
"bee-layout": "latest",
"bee-button": "latest"
>>>>>>> dc5a25248043f0a122cad2ee3e207014a44a2e5a
}
}

2
src/Tree.js
View File

@ -594,7 +594,7 @@ class Tree extends React.Component {
}
return (
<ul {...domProps} unselectable ref="tree">
<ul {...domProps} unselectable="true" ref="tree">
{React.Children.map(props.children, this.renderTreeNode, this)}
</ul>
);

11
src/Tree.scss
View File

@ -323,9 +323,14 @@
* 自定义switcher图标
*/
.u-tree li span.u-tree-switcher.uf {
font-size: 14px;
.u-tree li span.u-tree-switcher.icon-none {
&:after{
content:"";
}
}
.uf {
padding: 0px;
font-size: 14px;
}
}

28
src/TreeNode.js
View File

@ -165,18 +165,20 @@ class TreeNode extends React.Component {
}
if (expandedState === 'open' && props.openIcon) {
stateIcon = `uf ${props.openIcon}`;
stateIcon = props.openIcon;
switcherCls['icon-none'] = true;
}
if (expandedState === 'close' && props.closeIcon) {
stateIcon = [`uf ${props.closeIcon}`];
stateIcon = props.closeIcon;
switcherCls['icon-none'] = true;
}
switcherCls[stateIcon] = stateIcon;
//switcherCls[stateIcon] = stateIcon;
if (props.disabled) {
switcherCls[`${prefixCls}-switcher-disabled`] = true;
return <span className={classNames(switcherCls)}></span>;
return <span className={classNames(switcherCls)}>{stateIcon}</span>;
}
return <span className={classNames(switcherCls)} onClick={this.onExpand}></span>;
return <span className={classNames(switcherCls)} onClick={this.onExpand}>{stateIcon}</span>;
}
renderCheckbox(props) {
@ -263,6 +265,12 @@ class TreeNode extends React.Component {
let newChildren = this.renderChildren(props);
let openIconCls = false,
closeIconCls = false;
//以下变量控制是否鼠标单机双击方法中的变量
let timer = 0;
let delay = 500;
let prevent = false;
if (!newChildren || newChildren === props.children) {
// content = newChildren;
newChildren = null;
@ -294,15 +302,18 @@ class TreeNode extends React.Component {
domProps.className += ` ${prefixCls}-node-selected`;
}
domProps.onClick = (e) => {
var _this = this;
e.preventDefault();
if (props.selectable) {
this.onSelect();
_this.onSelect();
}
// not fire check event
// if (props.checkable) {
// this.onCheck();
// }
};
if (props.onRightClick) {
domProps.onContextMenu = this.onContextMenu;
}
@ -312,6 +323,7 @@ class TreeNode extends React.Component {
if (props.onMouseLeave) {
domProps.onMouseLeave = this.onMouseLeave;
}
if (props.draggable) {
domProps.className += ' draggable';
if (ieOrEdge) {
@ -390,8 +402,8 @@ TreeNode.propTypes = {
isLeaf: PropTypes.bool,
root: PropTypes.object,
onSelect: PropTypes.func,
openIcon: PropTypes.string,
closeIcon: PropTypes.string
openIcon: PropTypes.element,
closeIcon: PropTypes.element
};
TreeNode.defaultProps = {