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

ver. 1.0.1

This commit is contained in:
wh 2017-11-03 14:37:54 +08:00
parent dc5a252480
commit 53d883b0d0
15 changed files with 495 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
build/Tree.css
View File

File diff suppressed because one or more lines are too long

9
build/Tree.js
View File

@ -569,10 +569,15 @@ var Tree = function (_React$Component) {
var _this4 = this;
var props = this.props;
var showLineCls = "";
if (props.showLine) {
showLineCls = props.prefixCls + '-show-line';
}
var domProps = {
className: (0, _classnames2["default"])(props.className, props.prefixCls),
className: (0, _classnames2["default"])(props.className, props.prefixCls, showLineCls),
role: 'tree-node'
};
if (props.focusable) {
domProps.tabIndex = '0';
domProps.onKeyDown = this.onKeyDown;
@ -628,7 +633,7 @@ var Tree = function (_React$Component) {
return _react2["default"].createElement(
'ul',
_extends({}, domProps, { unselectable: true, ref: 'tree' }),
_extends({}, domProps, { unselectable: 'true', ref: 'tree' }),
_react2["default"].Children.map(props.children, this.renderTreeNode, this)
);
};

63
build/TreeNode.js
View File

@ -55,16 +55,16 @@ var TreeNode = function (_React$Component) {
function TreeNode(props) {
_classCallCheck(this, TreeNode);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props));
['onExpand', 'onCheck', 'onContextMenu', 'onMouseEnter', 'onMouseLeave', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDragLeave', 'onDrop', 'onDragEnd'].forEach(function (m) {
_this[m] = _this[m].bind(_this);
_this2[m] = _this2[m].bind(_this2);
});
_this.state = {
_this2.state = {
dataLoading: false,
dragNodeHighlight: false
};
return _this;
return _this2;
}
TreeNode.prototype.componentDidMount = function componentDidMount() {
@ -157,12 +157,12 @@ var TreeNode = function (_React$Component) {
};
TreeNode.prototype.onExpand = function onExpand() {
var _this2 = this;
var _this3 = this;
var callbackPromise = this.props.root.onExpand(this);
if (callbackPromise && (typeof callbackPromise === 'undefined' ? 'undefined' : _typeof(callbackPromise)) === 'object') {
var setLoading = function setLoading(dataLoading) {
_this2.setState({
_this3.setState({
dataLoading: dataLoading
});
};
@ -196,18 +196,28 @@ var TreeNode = function (_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 _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls) });
return _react2["default"].createElement(
'span',
{ className: (0, _classnames2["default"])(switcherCls) },
stateIcon
);
}
return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls), onClick: this.onExpand });
return _react2["default"].createElement(
'span',
{ className: (0, _classnames2["default"])(switcherCls), onClick: this.onExpand },
stateIcon
);
};
TreeNode.prototype.renderCheckbox = function renderCheckbox(props) {
@ -288,7 +298,7 @@ var TreeNode = function (_React$Component) {
TreeNode.prototype.render = function render() {
var _iconEleCls,
_this3 = this;
_this4 = this;
var props = this.props;
var prefixCls = props.prefixCls;
@ -300,6 +310,12 @@ var TreeNode = function (_React$Component) {
var newChildren = this.renderChildren(props);
var openIconCls = false,
closeIconCls = false;
//以下变量控制是否鼠标单机双击方法中的变量
var timer = 0;
var delay = 500;
var prevent = false;
if (!newChildren || newChildren === props.children) {
// content = newChildren;
newChildren = null;
@ -315,7 +331,7 @@ var TreeNode = function (_React$Component) {
var iconEleCls = (_iconEleCls = {}, _defineProperty(_iconEleCls, prefixCls + '-iconEle', true), _defineProperty(_iconEleCls, prefixCls + '-icon_loading', this.state.dataLoading), _defineProperty(_iconEleCls, prefixCls + '-icon__' + iconState, true), _iconEleCls);
var selectHandle = function selectHandle() {
var icon = props.showIcon || props.loadData && _this3.state.dataLoading ? _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }) : null;
var icon = props.showIcon || props.loadData && _this4.state.dataLoading ? _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }) : null;
var title = _react2["default"].createElement(
'span',
{ className: prefixCls + '-title' },
@ -326,28 +342,32 @@ var TreeNode = function (_React$Component) {
className: wrap + ' ' + wrap + '-' + (iconState === expandedState ? iconState : 'normal')
};
if (!props.disabled) {
if (props.selected || !props._dropTrigger && _this3.state.dragNodeHighlight) {
if (props.selected || !props._dropTrigger && _this4.state.dragNodeHighlight) {
domProps.className += ' ' + prefixCls + '-node-selected';
}
domProps.onClick = function (e) {
var _this = _this4;
e.preventDefault();
if (props.selectable) {
_this3.onSelect();
_this.onSelect();
}
// not fire check event
// if (props.checkable) {
// this.onCheck();
// }
};
if (props.onRightClick) {
domProps.onContextMenu = _this3.onContextMenu;
domProps.onContextMenu = _this4.onContextMenu;
}
if (props.onMouseEnter) {
domProps.onMouseEnter = _this3.onMouseEnter;
domProps.onMouseEnter = _this4.onMouseEnter;
}
if (props.onMouseLeave) {
domProps.onMouseLeave = _this3.onMouseLeave;
domProps.onMouseLeave = _this4.onMouseLeave;
}
if (props.draggable) {
domProps.className += ' draggable';
if (ieOrEdge) {
@ -356,7 +376,7 @@ var TreeNode = function (_React$Component) {
}
domProps.draggable = true;
domProps['aria-grabbed'] = true;
domProps.onDragStart = _this3.onDragStart;
domProps.onDragStart = _this4.onDragStart;
}
}
return _react2["default"].createElement(
@ -395,6 +415,7 @@ var TreeNode = function (_React$Component) {
var cls = (_cls2 = {}, _defineProperty(_cls2, prefixCls + '-switcher', true), _defineProperty(_cls2, prefixCls + '-switcher-noop', true), _cls2);
if (props.showLine) {
console.log('line---------');
cls[prefixCls + '-center_docu'] = !props.last;
cls[prefixCls + '-bottom_docu'] = props.last;
} else {
@ -428,8 +449,8 @@ TreeNode.propTypes = {
isLeaf: _propTypes2["default"].bool,
root: _propTypes2["default"].object,
onSelect: _propTypes2["default"].func,
openIcon: _propTypes2["default"].string,
closeIcon: _propTypes2["default"].string
openIcon: _propTypes2["default"].element,
closeIcon: _propTypes2["default"].element
};
TreeNode.defaultProps = {

61
demo/Demo1.js Normal file
View File

@ -0,0 +1,61 @@
/**
*
* @title Tree基本使用事例
* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。
*
*/
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,
};
}
onSelect(info) {
console.log('selected', info);
}
onCheck(info) {
console.log('onCheck', info);
}
render() {
return (
<Tree className="myCls" showLine checkable
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;

160
demo/Demo4.js Normal file
View File

@ -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 value = e.target.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;

36
demo/demolist/Demo1.js
View File

@ -1,12 +1,14 @@
/**
*
* @title Tree基本使用事例
* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。
*
*/
*
* @title Tree基本使用事例
* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。
*
*/
import React, { Component } from 'react';
import React, {
Component
} from 'react';
import Tree from '../../src';
const TreeNode = Tree.TreeNode;
@ -18,22 +20,22 @@ console.log(Tree);
class Demo1 extends Component {
constructor(props) {
super(props);
const keys = this.props.keys;
this.state = {
defaultExpandedKeys: keys,
defaultSelectedKeys: keys,
defaultCheckedKeys: keys,
};
const keys = this.props.keys;
this.state = {
defaultExpandedKeys: keys,
defaultSelectedKeys: keys,
defaultCheckedKeys: keys,
};
}
onSelect(info) {
console.log('selected', info);
console.log('selected', info);
}
onCheck(info) {
console.log('onCheck', info);
console.log('onCheck', info);
}
render() {
return (
<Tree className="myCls" showLine checkable
return (
<Tree className="myCls" showLine checkable
defaultExpandedKeys={this.state.defaultExpandedKeys}
defaultSelectedKeys={this.state.defaultSelectedKeys}
defaultCheckedKeys={this.state.defaultCheckedKeys}
@ -49,7 +51,7 @@ class Demo1 extends Component {
</TreeNode>
</TreeNode>
</Tree>
);
);
}
}

2
demo/demolist/Demo4.js
View File

@ -93,7 +93,7 @@ class Demo4 extends Component {
});
}
onChange = (value) => {
// const value = e.target.value;
const expandedKeys = [];
dataList.forEach((item) => {
if (item.key.indexOf(value) > -1) {

80
demo/demolist/Demo5.js
View File

@ -1,12 +1,14 @@
/**
*
* @title Tree异步数据加载
* @description 当点击展开，异步获取子节点数据
*
*/
*
* @title Tree异步数据加载
* @description 当点击展开，异步获取子节点数据
*
*/
import React, { Component } from 'react';
import React, {
Component
} from 'react';
import Tree from '../../src';
const x = 3;
@ -15,25 +17,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);
@ -43,7 +48,10 @@ 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}` });
arr.push({
name: `leaf ${key}-${i}`,
key: `${key}-${i}`
});
}
return arr;
}
@ -83,7 +91,7 @@ function getNewTreeData(treeData, curKey, child, level) {
setLeaf(treeData, curKey, level);
}
class Demo5 extends Component{
class Demo5 extends Component {
constructor(props) {
super(props);
this.state = {
@ -95,11 +103,17 @@ class Demo5 extends Component{
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 },
],
treeData: [{
name: 'pNode 01',
key: '0-0'
}, {
name: 'pNode 02',
key: '0-1'
}, {
name: 'pNode 03',
key: '0-2',
isLeaf: true
}, ],
});
}, 100);
}
@ -111,7 +125,9 @@ class Demo5 extends Component{
setTimeout(() => {
const treeData = [...this.state.treeData];
getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);
this.setState({ treeData });
this.setState({
treeData
});
resolve();
}, 1000);
});
@ -125,7 +141,7 @@ class Demo5 extends Component{
});
const treeNodes = loop(this.state.treeData);
return (
<Tree onSelect={this.onSelect} loadData={this.onLoadData}>
<Tree onSelect={this.onSelect} loadData={this.onLoadData} >
{treeNodes}
</Tree>
);

42
demo/demolist/Demo9.js Normal file
View File

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

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

@ -18,6 +18,7 @@
|checkStrictly|精细的检查每个节点|bool|false
|defaultSelectedKeys|指定选中的节点key|String[]|[]
|selectedKeys|指定选中的节点keys(controlled)|String[]|-
|showLine|是否显示连接线|bool|false
|openIcon|自定义展开节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|-
|closeIcon|自定义关闭节点图标的名称[参考这里](http://bee.tinper.org/bee-icon)String[]|-
|onExpand|当打开或关闭树节点触发的方法|function(expandedKeys, {expanded: bool, node})|-

122
package.json
View File

@ -1,62 +1,62 @@
{
"name": "bee-tree",
"version": "1.0.0",
"description": "Tree ui component for react",
"keywords": [
"react",
"react-component",
"bee-tree",
"iuap-design",
"tinper-bee",
"Tree"
],
"engines": {
"node": ">=4.0.0"
},
"homepage": "https://github.com/tinper-bee/bee-tree.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-tree",
"bugs": "https://github.com/tinper-bee/bee-tree.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "bee-tools run test",
"chrome": "bee-tools run chrome",
"coveralls": "bee-tools run coverage",
"browsers": "bee-tools run browsers",
"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",
"tinper-bee-core": "latest"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "15.6.0"
},
"devDependencies": {
"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"
}
}
"name": "bee-tree",
"version": "1.0.1",
"description": "Tree ui component for react",
"keywords": [
"react",
"react-component",
"bee-tree",
"iuap-design",
"tinper-bee",
"Tree"
],
"engines": {
"node": ">=4.0.0"
},
"homepage": "https://github.com/tinper-bee/bee-tree.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-tree",
"bugs": "https://github.com/tinper-bee/bee-tree.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "bee-tools run test",
"chrome": "bee-tools run chrome",
"coveralls": "bee-tools run coverage",
"browsers": "bee-tools run browsers",
"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",
"tinper-bee-core": "latest"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "15.6.0"
},
"devDependencies": {
"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"
}
}

7
src/Tree.js
View File

@ -535,10 +535,15 @@ class Tree extends React.Component {
render() {
const props = this.props;
let showLineCls = "";
if (props.showLine) {
showLineCls = `${props.prefixCls}-show-line`;
}
const domProps = {
className: classNames(props.className, props.prefixCls),
className: classNames(props.className, props.prefixCls, showLineCls),
role: 'tree-node',
};
if (props.focusable) {
domProps.tabIndex = '0';
domProps.onKeyDown = this.onKeyDown;

29
src/Tree.scss
View File

File diff suppressed because one or more lines are too long

1
src/TreeNode.js
View File

@ -371,6 +371,7 @@ class TreeNode extends React.Component {
[`${prefixCls}-switcher-noop`]: true,
};
if (props.showLine) {
console.log('line---------');
cls[`${prefixCls}-center_docu`] = !props.last;
cls[`${prefixCls}-bottom_docu`] = props.last;
} else {