bee-tree
This commit is contained in:
ahua52
commit
d53c451d4d
|
|
@ -0,0 +1,38 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
jspm_packages
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
dist
|
||||||
|
coverage
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
bower_components/
|
||||||
|
*.cfg
|
||||||
|
node_modules/
|
||||||
|
nohup.out
|
||||||
|
*.iml
|
||||||
|
.idea/
|
||||||
|
.ipr
|
||||||
|
.iws
|
||||||
|
*~
|
||||||
|
~*
|
||||||
|
*.diff
|
||||||
|
*.log
|
||||||
|
*.patch
|
||||||
|
*.bak
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
.project
|
||||||
|
.*proj
|
||||||
|
.svn/
|
||||||
|
*.swp
|
||||||
|
out/
|
||||||
|
.build
|
||||||
|
node_modules
|
||||||
|
_site
|
||||||
|
sea-modules
|
||||||
|
spm_modules
|
||||||
|
.cache
|
||||||
|
coverage
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
sudo: false
|
||||||
|
|
||||||
|
language: node_js
|
||||||
|
|
||||||
|
node_js:
|
||||||
|
- "6"
|
||||||
|
|
||||||
|
service_name: travis-ci
|
||||||
|
repo_token: add
|
||||||
|
|
||||||
|
env:
|
||||||
|
global:
|
||||||
|
- NODE_ENV=travisci
|
||||||
|
- NPM_CONFIG_PROGRESS="false"
|
||||||
|
|
||||||
|
before_install:
|
||||||
|
- npm install -g bee-tools
|
||||||
|
|
||||||
|
script: npm test
|
||||||
|
|
||||||
|
after_script:
|
||||||
|
- npm run coveralls
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
# bee-tree
|
||||||
|
|
||||||
|
[](https://www.npmjs.com/package/bee-tree)
|
||||||
|
[](https://travis-ci.org/tinper-bee/bee-tree)
|
||||||
|
[](https://coveralls.io/github/tinper-bee/bee-tree?branch=master)
|
||||||
|
[](https://david-dm.org/tinper-bee/bee-tree#info=devDependencies)
|
||||||
|
[](https://npmjs.org/package/bee-tree)
|
||||||
|
[](http://isitmaintained.com/project/tinper-bee/bee-tree "Average time to resolve an issue")
|
||||||
|
[](http://isitmaintained.com/project/tinper-bee/bee-tree "Percentage of issues still open")
|
||||||
|
|
||||||
|
## Browser Support
|
||||||
|
|
||||||
|
| |  |  |  | |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
||||||
|
|
||||||
|
|
||||||
|
react bee-tree component for tinper-bee
|
||||||
|
|
||||||
|
some description...
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
|参数|说明|类型|默认值|
|
||||||
|
|:--|:---:|:--:|---:|
|
||||||
|
|
||||||
|
#### 开发调试
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ npm install -g bee-tools
|
||||||
|
$ git clone https://github.com/tinper-bee/bee-tree
|
||||||
|
$ cd bee-tree
|
||||||
|
$ npm install
|
||||||
|
$ npm run dev
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
# bee-dropdown
|
||||||
|
|
||||||
|
[](https://www.npmjs.com/package/bee-dropdown)
|
||||||
|
[](https://travis-ci.org/tinper-bee/bee-dropdown)
|
||||||
|
[](https://coveralls.io/github/tinper-bee/bee-dropdown?branch=master)
|
||||||
|
[](https://david-dm.org/tinper-bee/bee-dropdown#info=devDependencies)
|
||||||
|
[](https://npmjs.org/package/<%= packageName%>)
|
||||||
|
[](http://isitmaintained.com/project/tinper-bee/<%= packageName%> "Average time to resolve an issue")
|
||||||
|
[](http://isitmaintained.com/project/tinper-bee/<%= packageName%> "Percentage of issues still open")
|
||||||
|
|
||||||
|
## Browser Support
|
||||||
|
|
||||||
|
| |  |  |  | |
|
||||||
|
| --- | --- | --- | --- | --- |
|
||||||
|
| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
||||||
|
|
||||||
|
|
||||||
|
react bee-dropdown component for tinper-bee
|
||||||
|
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
|参数|说明|类型|默认值|
|
||||||
|
|:--|:---:|:--:|---:|
|
||||||
|
|
||||||
|
#### develop
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ npm install -g bee-tools
|
||||||
|
$ git clone https://github.com/tinper-bee/bee-dropdown
|
||||||
|
$ cd bee-dropdown
|
||||||
|
$ npm install
|
||||||
|
$ npm run dev
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import Tree from '../src/index';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
class Demo extends Component {render(){return( <Tree/> )}}
|
||||||
|
export default Demo;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
@import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||||
|
@import "../src/Tree.scss";
|
||||||
|
@import "../node_modules/bee-panel/src/Panel.scss";
|
||||||
|
@import "../node_modules/bee-layout/src/Layout.scss";
|
||||||
|
@import "../node_modules/bee-button/src/Button.scss";
|
||||||
|
@import "../node_modules/bee-transition/src/Transition.scss";
|
||||||
|
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||||
|
.ant-tree-searchable-filter {
|
||||||
|
color: #f50;
|
||||||
|
transition: all .3s ease;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
/*
|
||||||
|
|
||||||
|
Atom One Dark by Daniel Gamage
|
||||||
|
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
|
||||||
|
|
||||||
|
base: #282c34
|
||||||
|
mono-1: #abb2bf
|
||||||
|
mono-2: #818896
|
||||||
|
mono-3: #5c6370
|
||||||
|
hue-1: #56b6c2
|
||||||
|
hue-2: #61aeee
|
||||||
|
hue-3: #c678dd
|
||||||
|
hue-4: #98c379
|
||||||
|
hue-5: #e06c75
|
||||||
|
hue-5-2: #be5046
|
||||||
|
hue-6: #d19a66
|
||||||
|
hue-6-2: #e6c07b
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #abb2bf;
|
||||||
|
background: #282c34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #5c6370;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-formula {
|
||||||
|
color: #c678dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-deletion,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #e06c75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal {
|
||||||
|
color: #56b6c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-addition,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-meta-string {
|
||||||
|
color: #98c379;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-class .hljs-title {
|
||||||
|
color: #e6c07b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-number {
|
||||||
|
color: #d19a66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-title {
|
||||||
|
color: #61aeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title Tree基本使用事例
|
||||||
|
* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
const defaultProps = {
|
||||||
|
keys: ['0-0-0', '0-0-1']
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title Tree数据可控事例
|
||||||
|
* @description
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
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);
|
||||||
|
*/
|
||||||
|
class Demo2 extends Component{
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
expandedKeys: ['0-0-0', '0-0-1'],
|
||||||
|
autoExpandParent: true,
|
||||||
|
checkedKeys: ['0-0-0'],
|
||||||
|
selectedKeys: [],
|
||||||
|
};
|
||||||
|
this.onExpand = this.onExpand.bind(this);
|
||||||
|
this.onCheck = this.onCheck.bind(this);
|
||||||
|
this.onSelect = this.onSelect.bind(this);
|
||||||
|
}
|
||||||
|
onExpand(expandedKeys) {
|
||||||
|
console.log('onExpand', arguments);
|
||||||
|
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
||||||
|
// or, you can remove all expanded children keys.
|
||||||
|
this.setState({
|
||||||
|
expandedKeys,
|
||||||
|
autoExpandParent: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onCheck(checkedKeys) {
|
||||||
|
this.setState({
|
||||||
|
checkedKeys,
|
||||||
|
selectedKeys: ['0-3', '0-4'],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onSelect(selectedKeys, info) {
|
||||||
|
console.log('onSelect', info);
|
||||||
|
this.setState({ selectedKeys });
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const loop = data => data.map((item) => {
|
||||||
|
if (item.children) {
|
||||||
|
return (
|
||||||
|
<TreeNode key={item.key} title={item.key} disableCheckbox={item.key === '0-0-0'}>
|
||||||
|
{loop(item.children)}
|
||||||
|
</TreeNode>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <TreeNode key={item.key} title={item.key} />;
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<Tree
|
||||||
|
checkable
|
||||||
|
onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}
|
||||||
|
autoExpandParent={this.state.autoExpandParent}
|
||||||
|
onCheck={this.onCheck} checkedKeys={this.state.checkedKeys}
|
||||||
|
onSelect={this.onSelect} selectedKeys={this.state.selectedKeys}
|
||||||
|
>
|
||||||
|
{loop(gData)}
|
||||||
|
</Tree>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title Tree 拖拽使用事例
|
||||||
|
* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title Tree可搜索事例
|
||||||
|
* @description
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
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 = (e) => {
|
||||||
|
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="ant-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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title Tree异步数据加载
|
||||||
|
* @description 当点击展开，异步获取子节点数据
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
|
||||||
|
import { Con, Row, Col } from 'bee-layout';
|
||||||
|
import { Panel } from 'bee-panel';
|
||||||
|
import Button from 'bee-button';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
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 CARET = <i className="uf uf-arrow-down"></i>;
|
||||||
|
|
||||||
|
const CARETUP = <i className="uf uf-arrow-up"></i>;
|
||||||
|
|
||||||
|
|
||||||
|
{demolist}
|
||||||
|
|
||||||
|
class Demo extends Component {
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
open: false
|
||||||
|
}
|
||||||
|
this.handleClick = this.handleClick.bind(this);
|
||||||
|
}
|
||||||
|
handleClick() {
|
||||||
|
this.setState({ open: !this.state.open })
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { title, example, code, desc } = this.props;
|
||||||
|
let caret = this.state.open ? CARETUP : CARET;
|
||||||
|
let text = this.state.open ? "隐藏代码" : "查看代码";
|
||||||
|
|
||||||
|
const footer = (
|
||||||
|
<Button shape="block" onClick={ this.handleClick }>
|
||||||
|
{ caret }
|
||||||
|
{ text }
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
const header = (
|
||||||
|
<Row>
|
||||||
|
<Col md={11}>
|
||||||
|
{ example }
|
||||||
|
</Col>
|
||||||
|
<Col md={1}>
|
||||||
|
<Button shape="icon" onClick={ this.handleClick }>
|
||||||
|
{ caret }
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<Col md={12} >
|
||||||
|
<h3>{ title }</h3>
|
||||||
|
<p>{ desc }</p>
|
||||||
|
<Panel collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footer={footer} footerStyle = {{padding: 0}}>
|
||||||
|
<pre><code className="hljs javascript">{ code }</code></pre>
|
||||||
|
</Panel>
|
||||||
|
</Col>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class DemoGroup extends Component {
|
||||||
|
constructor(props){
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<Row>
|
||||||
|
{DemoArray.map((child,index) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Demo example= {child.example} title= {child.title} code= {child.code} desc= {child.desc} key= {index}/>
|
||||||
|
)
|
||||||
|
|
||||||
|
})}
|
||||||
|
</Row>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,42 @@
|
||||||
|
# Tree
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
## Tree
|
||||||
|
|参数|说明|类型|默认值|
|
||||||
|
|:---|:-----|:----|:------|
|
||||||
|
multiple|是否允许选择多个树节点|bool|false
|
||||||
|
checkable|是否支持添加在树节点前添加Checkbox|bool|false
|
||||||
|
defaultExpandAll|默认是否展开所有节点|bool|false
|
||||||
|
defaultExpandedKeys|默认展开指定的节点|String[]|[]
|
||||||
|
expandedKeys|指定展开的节点(controlled)String[]|[]
|
||||||
|
autoExpandParent|是否自定展开父节点|bool|true
|
||||||
|
defaultCheckedKeys|指定默认被选中的节点key|String[]|[]
|
||||||
|
checkedKeys|指定被选中的节点(controlled)（PS：当指定的是父节点，所有的子节点也会被指定；当指定的是子节点，父节点也会被选中。当checkable和checkStrictly都为true,子节点与父节点的选择情况都不会影响到对方|String[]/{checked:Array,halfChecked:Array}|[]
|
||||||
|
checkStrictly|精细的检查每个节点|bool|false
|
||||||
|
defaultSelectedKeys|指定选中的节点key|String[]|[]
|
||||||
|
selectedKeys|指定选中的节点keys(controlled)|String[]|-
|
||||||
|
onExpand|当打开或关闭树节点触发的方法|function(expandedKeys, {expanded: bool, node})|-
|
||||||
|
onCheck|当选择事件发生触发的方法|function(checkedKeys, e:{checked: bool, checkedNodes, node, event})|-
|
||||||
|
onSelect|当用户选择树节点触发的回调函数|function(selectedKeys, e:{selected: bool, selectedNodes, node, event})|-
|
||||||
|
filterTreeNode|过滤树节点的方法（highlight）,当返回true,相关联的节点会高亮|function(node)|-
|
||||||
|
loadData|异步加载数据|function(node)|-
|
||||||
|
onRightClick|当用户点击右键触发的回调函数|function({event,node})|-
|
||||||
|
draggable|树是否可拖拽（IE>8| bool|false
|
||||||
|
onDragStart|当树节点刚开始拖拽所触发的放方法|function({event,node})|-
|
||||||
|
onDragEnter|当拖拽进入触发的方法|function({event,node,expandedKeys})|-
|
||||||
|
onDragOver|当拖拽经过触发的方法|function({event,node})|-
|
||||||
|
onDragLeave|当拖拽离开触发的方法|function({event,node})|-
|
||||||
|
onDragEnd当拖拽结束触发的方法|function({event,node})|-
|
||||||
|
onDrop|当节点放下触发方法function({event, node, dragNode, dragNodesKeys})|-
|
||||||
|
|
||||||
|
## TreeNode
|
||||||
|
|参数|说明|类型|默认值|
|
||||||
|
|:---|:-----|:----|:------|
|
||||||
|
disabled|节点是否不可用|bool|false
|
||||||
|
disableCheckbox|节点的checkbox是否不可用|bool|false
|
||||||
|
title|名称标题|String/element |--
|
||||||
|
key|节点key,和(default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys一起用，必须是唯一的|String|-
|
||||||
|
isLeaf|是否是叶子节点|bool|false
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
## Tree
|
||||||
|
## Code display
|
||||||
|
## API
|
||||||
|
|Property|Description|Type|Default|
|
||||||
|
|:---|:-----|:----|:------|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
<title>tinper-bee demo</title>
|
||||||
|
<link rel="stylesheet" href="./dist/demo.css">
|
||||||
|
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||||
|
</head>
|
||||||
|
<body style="background: #eceff1">
|
||||||
|
<div id="tinperBeeDemo"></div>
|
||||||
|
<script src="//cdn.jsdelivr.net/highlight.js/9.8.0/highlight.min.js"></script>
|
||||||
|
<script>
|
||||||
|
hljs.initHighlightingOnLoad();
|
||||||
|
</script>
|
||||||
|
<script src="./node_modules/console-polyfill/index.js"></script>
|
||||||
|
<script src="./node_modules/es5-shim/es5-shim.min.js"></script>
|
||||||
|
<script src="./node_modules/es5-shim/es5-sham.min.js"></script>
|
||||||
|
<script src="./node_modules/react/dist/react-with-addons.js"></script>
|
||||||
|
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
|
||||||
|
<script src="./dist/demo.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
{
|
||||||
|
"name": "bee-tree",
|
||||||
|
"version": "0.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": {
|
||||||
|
"bee-animate": "latest",
|
||||||
|
"bee-checkbox": "^0.1.4",
|
||||||
|
"bee-form-control": "^0.1.5",
|
||||||
|
"classnames": "^2.2.5",
|
||||||
|
"object-assign": "latest",
|
||||||
|
"tinper-bee-core": "latest"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"chai": "^3.5.0",
|
||||||
|
"enzyme": "^2.4.1",
|
||||||
|
"react": "~0.14.0",
|
||||||
|
"react-addons-test-utils": "15.3.2",
|
||||||
|
"react-dom": "~0.14.0",
|
||||||
|
"console-polyfill": "~0.2.1",
|
||||||
|
"es5-shim": "~4.1.10",
|
||||||
|
"bee-panel": "latest",
|
||||||
|
"bee-layout": "latest",
|
||||||
|
"bee-button": "latest"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
import React from 'react';
|
||||||
|
import RcTree, { TreeNode } from './src/index';
|
||||||
|
import animation from './openAnimation';
|
||||||
|
|
||||||
|
export interface AntTreeNodeProps {
|
||||||
|
disabled?: boolean;
|
||||||
|
disableCheckbox?: boolean;
|
||||||
|
title?: string | React.ReactNode;
|
||||||
|
key?: string;
|
||||||
|
isLeaf?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class AntTreeNode extends React.Component<AntTreeNodeProps, {}> {
|
||||||
|
render() {
|
||||||
|
return <AntTreeNode {...this.props} />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AntTreeNodeEvent {
|
||||||
|
event: 'check' | 'select';
|
||||||
|
node: AntTreeNode;
|
||||||
|
checked?: boolean;
|
||||||
|
checkedNodes?: Array<AntTreeNode>;
|
||||||
|
selected?: boolean;
|
||||||
|
selectedNodes?: Array<AntTreeNode>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AntTreeNodeMouseEvent {
|
||||||
|
node: AntTreeNode;
|
||||||
|
event: React.MouseEventHandler<any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TreeProps {
|
||||||
|
showLine?: boolean;
|
||||||
|
className?: string;
|
||||||
|
/** 是否支持多选 */
|
||||||
|
multiple?: boolean;
|
||||||
|
/** 是否自动展开父节点 */
|
||||||
|
autoExpandParent?: boolean;
|
||||||
|
/** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
|
||||||
|
checkStrictly?: boolean;
|
||||||
|
/** 是否支持选中 */
|
||||||
|
checkable?: boolean;
|
||||||
|
/** 默认展开所有树节点 */
|
||||||
|
defaultExpandAll?: boolean;
|
||||||
|
/** 默认展开指定的树节点 */
|
||||||
|
defaultExpandedKeys?: Array<string>;
|
||||||
|
/** （受控）展开指定的树节点 */
|
||||||
|
expandedKeys?: Array<string>;
|
||||||
|
/** （受控）选中复选框的树节点 */
|
||||||
|
checkedKeys?: Array<string> | { checked: Array<string>, halfChecked: Array<string> };
|
||||||
|
/** 默认选中复选框的树节点 */
|
||||||
|
defaultCheckedKeys?: Array<string>;
|
||||||
|
/** （受控）设置选中的树节点 */
|
||||||
|
selectedKeys?: Array<string>;
|
||||||
|
/** 默认选中的树节点 */
|
||||||
|
defaultSelectedKeys?: Array<string>;
|
||||||
|
/** 展开/收起节点时触发 */
|
||||||
|
onExpand?: (expandedKeys: Array<string>, info: { node: AntTreeNode, expanded: boolean }) => void | PromiseLike<any>;
|
||||||
|
/** 点击复选框触发 */
|
||||||
|
onCheck?: (checkedKeys: Array<string>, e: AntTreeNodeEvent) => void;
|
||||||
|
/** 点击树节点触发 */
|
||||||
|
onSelect?: (selectedKeys: Array<string>, e: AntTreeNodeEvent) => void;
|
||||||
|
/** filter some AntTreeNodes as you need. it should return true */
|
||||||
|
filterAntTreeNode?: (node: AntTreeNode) => boolean;
|
||||||
|
/** 异步加载数据 */
|
||||||
|
loadData?: (node: AntTreeNode) => PromiseLike<any>;
|
||||||
|
/** 响应右键点击 */
|
||||||
|
onRightClick?: (options: AntTreeNodeMouseEvent) => void;
|
||||||
|
/** 设置节点可拖拽（IE>8）*/
|
||||||
|
draggable?: boolean;
|
||||||
|
/** 开始拖拽时调用 */
|
||||||
|
onDragStart?: (options: AntTreeNodeMouseEvent) => void;
|
||||||
|
/** dragenter 触发时调用 */
|
||||||
|
onDragEnter?: (options: AntTreeNodeMouseEvent) => void;
|
||||||
|
/** dragover 触发时调用 */
|
||||||
|
onDragOver?: (options: AntTreeNodeMouseEvent) => void;
|
||||||
|
/** dragleave 触发时调用 */
|
||||||
|
onDragLeave?: (options: AntTreeNodeMouseEvent) => void;
|
||||||
|
/** drop 触发时调用 */
|
||||||
|
onDrop?: (options: AntTreeNodeMouseEvent) => void;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
prefixCls?: string;
|
||||||
|
filterTreeNode?: (node: AntTreeNode) => boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Tree extends React.Component<TreeProps, any> {
|
||||||
|
static TreeNode = TreeNode;
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
prefixCls: 'ant-tree',
|
||||||
|
checkable: false,
|
||||||
|
showIcon: false,
|
||||||
|
openAnimation: animation,
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
let checkable = props.checkable;
|
||||||
|
return (
|
||||||
|
<RcTree
|
||||||
|
{...props}
|
||||||
|
checkable={checkable ? (<span className={`${props.prefixCls}-checkbox-inner`} />) : checkable }
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</RcTree>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,313 @@
|
||||||
|
@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";
|
||||||
|
|
||||||
|
|
||||||
|
//css 分割线
|
||||||
|
.ant-tree li span.ant-tree-checkbox {
|
||||||
|
margin: 2px 4px 0 0;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox {
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-checked .ant-tree-checkbox-inner, .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
|
||||||
|
background-color: #108ee9;
|
||||||
|
border-color: #108ee9;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-inner {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #fff;
|
||||||
|
-webkit-transition: all .3s;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-checked .ant-tree-checkbox-inner, .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
|
||||||
|
background-color: #108ee9;
|
||||||
|
border-color: #108ee9;
|
||||||
|
}
|
||||||
|
ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
|
||||||
|
border-color: #d9d9d9 !important;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner:after {
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
top: 5px;
|
||||||
|
width: 8px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-disabled .ant-tree-checkbox-inner {
|
||||||
|
border-color: #d9d9d9 !important;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
|
||||||
|
-webkit-animation-name: none;
|
||||||
|
animation-name: none;
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-disabled .ant-tree-checkbox-inner:after {
|
||||||
|
-webkit-animation-name: none;
|
||||||
|
animation-name: none;
|
||||||
|
border-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-checked .ant-tree-checkbox-inner:after {
|
||||||
|
-webkit-transform: rotate(45deg) scale(1);
|
||||||
|
-ms-transform: rotate(45deg) scale(1);
|
||||||
|
transform: rotate(45deg) scale(1);
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 1px;
|
||||||
|
display: table;
|
||||||
|
width: 5px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
||||||
|
transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
||||||
|
}
|
||||||
|
.ant-tree-checkbox-inner:after {
|
||||||
|
-webkit-transform: rotate(45deg) scale(0);
|
||||||
|
-ms-transform: rotate(45deg) scale(0);
|
||||||
|
transform: rotate(45deg) scale(0);
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 1px;
|
||||||
|
display: table;
|
||||||
|
width: 5px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
||||||
|
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
||||||
|
}
|
||||||
|
.ant-tree {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.ant-tree li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 7px 0;
|
||||||
|
list-style: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.ant-tree li a[draggable],
|
||||||
|
.ant-tree li a[draggable="true"] {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
/* Required to make elements draggable in old WebKit */
|
||||||
|
-khtml-user-drag: element;
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
.ant-tree li.drag-over > a[draggable] {
|
||||||
|
background-color: #108ee9;
|
||||||
|
color: white;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.ant-tree li.drag-over-gap-top > a[draggable] {
|
||||||
|
border-top: 2px #108ee9 solid;
|
||||||
|
}
|
||||||
|
.ant-tree li.drag-over-gap-bottom > a[draggable] {
|
||||||
|
border-bottom: 2px #108ee9 solid;
|
||||||
|
}
|
||||||
|
.ant-tree li.filter-node > a {
|
||||||
|
color: #f50 !important;
|
||||||
|
font-weight: bold!important;
|
||||||
|
}
|
||||||
|
.ant-tree li ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 18px;
|
||||||
|
}
|
||||||
|
.ant-tree li a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: top;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.ant-tree li a:hover {
|
||||||
|
background-color: #e7f4fd;
|
||||||
|
}
|
||||||
|
.ant-tree li a.ant-tree-node-selected {
|
||||||
|
background-color: #cfe8fb;
|
||||||
|
}
|
||||||
|
.ant-tree li span.u-checkbox {
|
||||||
|
margin: 2px 4px 0 0;
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-tree-switcher,
|
||||||
|
.ant-tree li span.ant-tree-iconEle {
|
||||||
|
margin: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-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;
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-roots_open,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-center_open,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-bottom_open,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-noline_open {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-roots_open:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-center_open:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-bottom_open:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-noline_open:after {
|
||||||
|
font-size: 12px;
|
||||||
|
font-size: 7px \9;
|
||||||
|
-webkit-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
transform: scale(0.58333333) rotate(0deg);
|
||||||
|
/* IE6-IE8 */
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||||
|
zoom: 1;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'uf';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\e639";
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 4px;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: -webkit-transform .3s ease;
|
||||||
|
transition: -webkit-transform .3s ease;
|
||||||
|
transition: transform .3s ease;
|
||||||
|
transition: transform .3s ease, -webkit-transform .3s ease;
|
||||||
|
}
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_open:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-center_open:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_open:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_open:after {
|
||||||
|
-webkit-filter: none;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_open:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-center_open:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_open:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_open:after {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-roots_close,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-center_close,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-bottom_close,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-noline_close {
|
||||||
|
position: relative;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
|
||||||
|
font-size: 12px;
|
||||||
|
font-size: 7px \9;
|
||||||
|
-webkit-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
transform: scale(0.58333333) rotate(0deg);
|
||||||
|
/* IE6-IE8 */
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||||
|
zoom: 1;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'uf';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\e639";
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 4px;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: -webkit-transform .3s ease;
|
||||||
|
transition: -webkit-transform .3s ease;
|
||||||
|
transition: transform .3s ease;
|
||||||
|
transition: transform .3s ease, -webkit-transform .3s ease;
|
||||||
|
}
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
|
||||||
|
-webkit-filter: none;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
|
||||||
|
:root .ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-roots_close:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-center_close:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-bottom_close:after,
|
||||||
|
.ant-tree li span.ant-tree-switcher.ant-tree-noline_close:after {
|
||||||
|
-webkit-transform: rotate(270deg) scale(0.6);
|
||||||
|
-ms-transform: rotate(270deg) scale(0.6);
|
||||||
|
transform: rotate(270deg) scale(0.6);
|
||||||
|
}
|
||||||
|
.ant-tree-child-tree {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ant-tree-child-tree-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.ant-tree-treenode-disabled > span,
|
||||||
|
.ant-tree-treenode-disabled > a,
|
||||||
|
.ant-tree-treenode-disabled > a span {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.ant-tree-icon__open {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.ant-tree-icon__close {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,389 @@
|
||||||
|
import React, { PropTypes } from 'react';
|
||||||
|
import assign from 'object-assign';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import Animate from 'rc-animate';
|
||||||
|
import Checkbox from 'bee-checkbox';
|
||||||
|
import { browser } from './util';
|
||||||
|
|
||||||
|
const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : '';
|
||||||
|
const ieOrEdge = /.*(IE|Edge).+/.test(browserUa);
|
||||||
|
// const uaArray = browserUa.split(' ');
|
||||||
|
// const gtIE8 = uaArray.length !== 2 || uaArray[0].indexOf('IE') === -1 || Number(uaArray[1]) > 8;
|
||||||
|
|
||||||
|
const defaultTitle = '---';
|
||||||
|
|
||||||
|
class TreeNode extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
[
|
||||||
|
'onExpand',
|
||||||
|
'onCheck',
|
||||||
|
'onContextMenu',
|
||||||
|
'onMouseEnter',
|
||||||
|
'onMouseLeave',
|
||||||
|
'onDragStart',
|
||||||
|
'onDragEnter',
|
||||||
|
'onDragOver',
|
||||||
|
'onDragLeave',
|
||||||
|
'onDrop',
|
||||||
|
'onDragEnd',
|
||||||
|
].forEach((m) => {
|
||||||
|
this[m] = this[m].bind(this);
|
||||||
|
});
|
||||||
|
this.state = {
|
||||||
|
dataLoading: false,
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if (!this.props.root._treeNodeInstances) {
|
||||||
|
this.props.root._treeNodeInstances = [];
|
||||||
|
}
|
||||||
|
this.props.root._treeNodeInstances.push(this);
|
||||||
|
}
|
||||||
|
// shouldComponentUpdate(nextProps) {
|
||||||
|
// if (!nextProps.expanded) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
|
||||||
|
onCheck() {
|
||||||
|
this.props.root.onCheck(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect() {
|
||||||
|
this.props.root.onSelect(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onMouseEnter(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onMouseLeave(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onContextMenu(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onContextMenu(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragStart(e) {
|
||||||
|
// console.log('dragstart', this.props.eventKey, e);
|
||||||
|
// e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: true,
|
||||||
|
});
|
||||||
|
this.props.root.onDragStart(e, this);
|
||||||
|
try {
|
||||||
|
// ie throw error
|
||||||
|
// firefox-need-it
|
||||||
|
e.dataTransfer.setData('text/plain', '');
|
||||||
|
} finally {
|
||||||
|
// empty
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnter(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragEnter(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragOver(e) {
|
||||||
|
// todo disabled
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragOver(e, this);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragLeave(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragLeave(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDrop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
});
|
||||||
|
this.props.root.onDrop(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnd(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
});
|
||||||
|
this.props.root.onDragEnd(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onExpand() {
|
||||||
|
const callbackPromise = this.props.root.onExpand(this);
|
||||||
|
if (callbackPromise && typeof callbackPromise === 'object') {
|
||||||
|
const setLoading = (dataLoading) => {
|
||||||
|
this.setState({ dataLoading });
|
||||||
|
};
|
||||||
|
setLoading(true);
|
||||||
|
callbackPromise.then(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, () => {
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// keyboard event support
|
||||||
|
onKeyDown(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSwitcher(props, expandedState) {
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const switcherCls = {
|
||||||
|
[`${prefixCls}-switcher`]: true,
|
||||||
|
};
|
||||||
|
if (!props.showLine) {
|
||||||
|
switcherCls[`${prefixCls}-noline_${expandedState}`] = true;
|
||||||
|
} else if (props.pos === '0-0') {
|
||||||
|
switcherCls[`${prefixCls}-roots_${expandedState}`] = true;
|
||||||
|
} else {
|
||||||
|
switcherCls[`${prefixCls}-center_${expandedState}`] = !props.last;
|
||||||
|
switcherCls[`${prefixCls}-bottom_${expandedState}`] = props.last;
|
||||||
|
}
|
||||||
|
if (props.disabled) {
|
||||||
|
switcherCls[`${prefixCls}-switcher-disabled`] = true;
|
||||||
|
return <span className={classNames(switcherCls)}></span>;
|
||||||
|
}
|
||||||
|
return <span className={classNames(switcherCls)} onClick={this.onExpand}></span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCheckbox(props) {
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const checkboxCls = {
|
||||||
|
[`${prefixCls}-checkbox`]: true,
|
||||||
|
};
|
||||||
|
if (props.checked) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-checked`] = true;
|
||||||
|
} else if (props.halfChecked) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-indeterminate`] = true;
|
||||||
|
}
|
||||||
|
let customEle = null;
|
||||||
|
if (typeof props.checkable !== 'boolean') {
|
||||||
|
customEle = props.checkable;
|
||||||
|
}
|
||||||
|
if (props.disabled || props.disableCheckbox) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-disabled`] = true;
|
||||||
|
return <span ref="checkbox" className={classNames(checkboxCls)}>{customEle}</span>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span ref="checkbox"
|
||||||
|
className={classNames(checkboxCls) }
|
||||||
|
onClick={this.onCheck}
|
||||||
|
>{customEle}</span>
|
||||||
|
|
||||||
|
);
|
||||||
|
/*return (
|
||||||
|
<Checkbox className={classNames(checkboxCls) } checked={props.checked} halfChecked={props.halfChecked} disabled={props.disabled || props.disableCheckbox} onClick={this.onCheck}></Checkbox>
|
||||||
|
)*/
|
||||||
|
}
|
||||||
|
|
||||||
|
renderChildren(props) {
|
||||||
|
const renderFirst = this.renderFirst;
|
||||||
|
this.renderFirst = 1;
|
||||||
|
let transitionAppear = true;
|
||||||
|
if (!renderFirst && props.expanded) {
|
||||||
|
transitionAppear = false;
|
||||||
|
}
|
||||||
|
const children = props.children;
|
||||||
|
let newChildren = children;
|
||||||
|
if (children &&
|
||||||
|
(children.type === TreeNode ||
|
||||||
|
Array.isArray(children) &&
|
||||||
|
children.every((item) => {
|
||||||
|
return item.type === TreeNode;
|
||||||
|
}))) {
|
||||||
|
const cls = {
|
||||||
|
[`${props.prefixCls}-child-tree`]: true,
|
||||||
|
[`${props.prefixCls}-child-tree-open`]: props.expanded,
|
||||||
|
};
|
||||||
|
if (props.showLine) {
|
||||||
|
cls[`${props.prefixCls}-line`] = !props.last;
|
||||||
|
}
|
||||||
|
const animProps = {};
|
||||||
|
if (props.openTransitionName) {
|
||||||
|
animProps.transitionName = props.openTransitionName;
|
||||||
|
} else if (typeof props.openAnimation === 'object') {
|
||||||
|
animProps.animation = assign({}, props.openAnimation);
|
||||||
|
if (!transitionAppear) {
|
||||||
|
delete animProps.animation.appear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
newChildren = (
|
||||||
|
<Animate {...animProps}
|
||||||
|
showProp="data-expanded"
|
||||||
|
transitionAppear={transitionAppear}
|
||||||
|
component=""
|
||||||
|
>
|
||||||
|
{!props.expanded ? null : <ul className={classNames(cls)} data-expanded={props.expanded}>
|
||||||
|
{React.Children.map(children, (item, index) => {
|
||||||
|
return props.root.renderTreeNode(item, index, props.pos);
|
||||||
|
}, props.root)}
|
||||||
|
</ul>}
|
||||||
|
</Animate>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return newChildren;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const expandedState = props.expanded ? 'open' : 'close';
|
||||||
|
let iconState = expandedState;
|
||||||
|
|
||||||
|
let canRenderSwitcher = true;
|
||||||
|
const content = props.title;
|
||||||
|
let newChildren = this.renderChildren(props);
|
||||||
|
if (!newChildren || newChildren === props.children) {
|
||||||
|
// content = newChildren;
|
||||||
|
newChildren = null;
|
||||||
|
if (!props.loadData || props.isLeaf) {
|
||||||
|
canRenderSwitcher = false;
|
||||||
|
iconState = 'docu';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// For performance, does't render children into dom when `!props.expanded` (move to Animate)
|
||||||
|
// if (!props.expanded) {
|
||||||
|
// newChildren = null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
const iconEleCls = {
|
||||||
|
[`${prefixCls}-iconEle`]: true,
|
||||||
|
[`${prefixCls}-icon_loading`]: this.state.dataLoading,
|
||||||
|
[`${prefixCls}-icon__${iconState}`]: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectHandle = () => {
|
||||||
|
const icon = (props.showIcon || props.loadData && this.state.dataLoading) ?
|
||||||
|
<span className={classNames(iconEleCls)}></span> : null;
|
||||||
|
const title = <span className={`${prefixCls}-title`}>{content}</span>;
|
||||||
|
const wrap = `${prefixCls}-node-content-wrapper`;
|
||||||
|
const domProps = {
|
||||||
|
className: `${wrap} ${wrap}-${iconState === expandedState ? iconState : 'normal'}`,
|
||||||
|
};
|
||||||
|
if (!props.disabled) {
|
||||||
|
if (props.selected || !props._dropTrigger && this.state.dragNodeHighlight) {
|
||||||
|
domProps.className += ` ${prefixCls}-node-selected`;
|
||||||
|
}
|
||||||
|
domProps.onClick = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (props.selectable) {
|
||||||
|
this.onSelect();
|
||||||
|
}
|
||||||
|
// not fire check event
|
||||||
|
// if (props.checkable) {
|
||||||
|
// this.onCheck();
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
if (props.onRightClick) {
|
||||||
|
domProps.onContextMenu = this.onContextMenu;
|
||||||
|
}
|
||||||
|
if (props.onMouseEnter) {
|
||||||
|
domProps.onMouseEnter = this.onMouseEnter;
|
||||||
|
}
|
||||||
|
if (props.onMouseLeave) {
|
||||||
|
domProps.onMouseLeave = this.onMouseLeave;
|
||||||
|
}
|
||||||
|
if (props.draggable) {
|
||||||
|
domProps.className += ' draggable';
|
||||||
|
if (ieOrEdge) {
|
||||||
|
// ie bug!
|
||||||
|
domProps.href = '#';
|
||||||
|
}
|
||||||
|
domProps.draggable = true;
|
||||||
|
domProps['aria-grabbed'] = true;
|
||||||
|
domProps.onDragStart = this.onDragStart;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<a ref="selectHandle" title={typeof content === 'string' ? content : ''} {...domProps}>
|
||||||
|
{icon}{title}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const liProps = {};
|
||||||
|
if (props.draggable) {
|
||||||
|
liProps.onDragEnter = this.onDragEnter;
|
||||||
|
liProps.onDragOver = this.onDragOver;
|
||||||
|
liProps.onDragLeave = this.onDragLeave;
|
||||||
|
liProps.onDrop = this.onDrop;
|
||||||
|
liProps.onDragEnd = this.onDragEnd;
|
||||||
|
}
|
||||||
|
|
||||||
|
let disabledCls = '';
|
||||||
|
let dragOverCls = '';
|
||||||
|
if (props.disabled) {
|
||||||
|
disabledCls = `${prefixCls}-treenode-disabled`;
|
||||||
|
} else if (props.dragOver) {
|
||||||
|
dragOverCls = 'drag-over';
|
||||||
|
} else if (props.dragOverGapTop) {
|
||||||
|
dragOverCls = 'drag-over-gap-top';
|
||||||
|
} else if (props.dragOverGapBottom) {
|
||||||
|
dragOverCls = 'drag-over-gap-bottom';
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterCls = props.filterTreeNode(this) ? 'filter-node' : '';
|
||||||
|
|
||||||
|
const noopSwitcher = () => {
|
||||||
|
const cls = {
|
||||||
|
[`${prefixCls}-switcher`]: true,
|
||||||
|
[`${prefixCls}-switcher-noop`]: true,
|
||||||
|
};
|
||||||
|
if (props.showLine) {
|
||||||
|
cls[`${prefixCls}-center_docu`] = !props.last;
|
||||||
|
cls[`${prefixCls}-bottom_docu`] = props.last;
|
||||||
|
} else {
|
||||||
|
cls[`${prefixCls}-noline_docu`] = true;
|
||||||
|
}
|
||||||
|
return <span className={classNames(cls)}></span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li {...liProps} ref="li"
|
||||||
|
className={classNames(props.className, disabledCls, dragOverCls, filterCls) }
|
||||||
|
>
|
||||||
|
{canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher()}
|
||||||
|
{props.checkable ? this.renderCheckbox(props) : null}
|
||||||
|
{selectHandle()}
|
||||||
|
{newChildren}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TreeNode.isTreeNode = 1;
|
||||||
|
|
||||||
|
TreeNode.propTypes = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
disableCheckbox: PropTypes.bool,
|
||||||
|
expanded: PropTypes.bool,
|
||||||
|
isLeaf: PropTypes.bool,
|
||||||
|
root: PropTypes.object,
|
||||||
|
onSelect: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
TreeNode.defaultProps = {
|
||||||
|
title: defaultTitle,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TreeNode;
|
||||||
|
|
@ -0,0 +1,363 @@
|
||||||
|
|
||||||
|
$treePrefixCls: 'ant-tree';
|
||||||
|
.#{$treePrefixCls} {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: 0;
|
||||||
|
.draggable {
|
||||||
|
color: #333;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
/* Required to make elements draggable in old WebKit */
|
||||||
|
-khtml-user-drag: element;
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
&.drag-over {
|
||||||
|
> .draggable {
|
||||||
|
background-color: #316ac5;
|
||||||
|
color: white;
|
||||||
|
border: 1px #316ac5 solid;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-top {
|
||||||
|
> .draggable {
|
||||||
|
border-top: 2px blue solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-bottom {
|
||||||
|
> .draggable {
|
||||||
|
border-bottom: 2px blue solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-node {
|
||||||
|
> .#{$treePrefixCls}-node-content-wrapper {
|
||||||
|
color: #a60000!important;
|
||||||
|
font-weight: bold!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 18px;
|
||||||
|
&.#{$treePrefixCls}-line {
|
||||||
|
background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.#{$treePrefixCls}-node-content-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 3px 0 0;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 17px;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
&.#{$treePrefixCls}-switcher,
|
||||||
|
&.#{$treePrefixCls}-checkbox,
|
||||||
|
&.#{$treePrefixCls}-iconEle {
|
||||||
|
line-height: 16px;
|
||||||
|
margin-right: 2px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: scroll;
|
||||||
|
background-image: url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-icon_loading {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
background: url(https://t.alipayobjects.com/images/rmsweb/T1YxhiXgJbXXXXXXXX.gif) no-repeat scroll 0 0 transparent;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-switcher {
|
||||||
|
&.#{$treePrefixCls}-switcher-noop {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-roots_open {
|
||||||
|
background-position: -93px -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-roots_close {
|
||||||
|
background-position: -75px -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-center_open {
|
||||||
|
background-position: -92px -18px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-center_close {
|
||||||
|
background-position: -74px -18px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-bottom_open {
|
||||||
|
background-position: -92px -36px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-bottom_close {
|
||||||
|
background-position: -74px -36px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-noline_open {
|
||||||
|
background-position: -92px -72px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-noline_close {
|
||||||
|
background-position: -74px -72px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-center_docu {
|
||||||
|
background-position: -56px -18px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-bottom_docu {
|
||||||
|
background-position: -56px -36px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-noline_docu {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-checkbox {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
margin: 0 3px;
|
||||||
|
background-position: 0 0;
|
||||||
|
&-checked {
|
||||||
|
background-position: -14px 0;
|
||||||
|
}
|
||||||
|
&-indeterminate {
|
||||||
|
background-position: -14px -28px;
|
||||||
|
}
|
||||||
|
&-disabled {
|
||||||
|
background-position: 0 -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-checkbox-checked.#{$treePrefixCls}-checkbox-disabled {
|
||||||
|
background-position: -14px -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-checkbox-indeterminate.#{$treePrefixCls}-checkbox-disabled {
|
||||||
|
position: relative;
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 3px;
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
position: absolute;
|
||||||
|
left: 3px;
|
||||||
|
top: 5px;
|
||||||
|
width: 5px;
|
||||||
|
height: 0;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-child-tree {
|
||||||
|
display: none;
|
||||||
|
&-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-treenode-disabled {
|
||||||
|
>span,
|
||||||
|
>a,
|
||||||
|
>a span {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-node-selected {
|
||||||
|
background-color: #ffe6b0;
|
||||||
|
border: 1px #ffb951 solid;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&-icon__open {
|
||||||
|
margin-right: 2px;
|
||||||
|
background-position: -110px -16px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
&-icon__close {
|
||||||
|
margin-right: 2px;
|
||||||
|
background-position: -110px 0;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
&-icon__docu {
|
||||||
|
margin-right: 2px;
|
||||||
|
background-position: -110px -32px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$tree-prefix-cls: "ant-tree";
|
||||||
|
$primary-color: '#108ee9';
|
||||||
|
$highlight-color: '#f50';
|
||||||
|
$font-size-base: '12px';
|
||||||
|
//.antCheckboxFn($checkbox-prefix-cls: "ant-tree-checkbox");
|
||||||
|
|
||||||
|
.#{$tree-prefix-cls} {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 7px 0;
|
||||||
|
list-style: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: 0;
|
||||||
|
a[draggable],
|
||||||
|
a[draggable="true"] {
|
||||||
|
user-select: none;
|
||||||
|
/* Required to make elements draggable in old WebKit */
|
||||||
|
-khtml-user-drag: element;
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
&.drag-over {
|
||||||
|
> a[draggable] {
|
||||||
|
background-color: $primary-color;
|
||||||
|
color: white;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-top {
|
||||||
|
> a[draggable] {
|
||||||
|
border-top: 2px $primary-color solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-bottom {
|
||||||
|
> a[draggable] {
|
||||||
|
border-bottom: 2px $primary-color solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-node {
|
||||||
|
> a {
|
||||||
|
color: $highlight-color!important;
|
||||||
|
font-weight: bold!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 18px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: top;
|
||||||
|
color: $text-color;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
&:hover {
|
||||||
|
background-color: tint($primary-color, 90%);
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-node-selected {
|
||||||
|
background-color: tint($primary-color, 80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
&.#{$tree-prefix-cls}-checkbox {
|
||||||
|
margin: 2px 4px 0 0;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-switcher,
|
||||||
|
&.#{$tree-prefix-cls}-iconEle {
|
||||||
|
margin: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-icon_loading {
|
||||||
|
&:after {
|
||||||
|
display: inline-block;
|
||||||
|
animation: loadingCircle 1s infinite linear;
|
||||||
|
color: $primary-color;
|
||||||
|
font-family: 'uf';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\e6ae";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-switcher {
|
||||||
|
&.#{$tree-prefix-cls}-switcher-noop {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-roots_open,
|
||||||
|
&.#{$tree-prefix-cls}-center_open,
|
||||||
|
&.#{$tree-prefix-cls}-bottom_open,
|
||||||
|
&.#{$tree-prefix-cls}-noline_open {
|
||||||
|
//@include antTreeSwitcherIcon;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-roots_close,
|
||||||
|
&.#{$tree-prefix-cls}-center_close,
|
||||||
|
&.#{$tree-prefix-cls}-bottom_close,
|
||||||
|
&.#{$tree-prefix-cls}-noline_close {
|
||||||
|
//@include antTreeSwitcherIcon;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
||||||
|
&:after {
|
||||||
|
transform: rotate(270deg) scale(0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-child-tree {
|
||||||
|
display: none;
|
||||||
|
&-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-treenode-disabled {
|
||||||
|
>span,
|
||||||
|
>a,
|
||||||
|
>a span {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-icon__open {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
&-icon__close {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin antTreeSwitcherIcon {
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
font-size: 12px;
|
||||||
|
-webkit-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||||
|
zoom: 1;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'anticon';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\E606";
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 4px;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: -webkit-transform .3s ease;
|
||||||
|
transition: -webkit-transform .3s ease;
|
||||||
|
transition: transform .3s ease;
|
||||||
|
transition: transform .3s ease, -webkit-transform .3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import Tree from './Tree';
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import cssAnimation from 'rc-animate';
|
||||||
|
|
||||||
|
function animate(node, show, done) {
|
||||||
|
let height;
|
||||||
|
return cssAnimation(node, 'ant-motion-collapse', {
|
||||||
|
start() {
|
||||||
|
if (!show) {
|
||||||
|
node.style.height = `${node.offsetHeight}px`;
|
||||||
|
} else {
|
||||||
|
height = node.offsetHeight;
|
||||||
|
node.style.height = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
active() {
|
||||||
|
node.style.height = `${show ? height : 0}px`;
|
||||||
|
},
|
||||||
|
end() {
|
||||||
|
node.style.height = '';
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const animation = {
|
||||||
|
enter(node, done) {
|
||||||
|
return animate(node, true, done);
|
||||||
|
},
|
||||||
|
leave(node, done) {
|
||||||
|
return animate(node, false, done);
|
||||||
|
},
|
||||||
|
appear(node, done) {
|
||||||
|
return animate(node, true, done);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default animation;
|
||||||
|
|
@ -0,0 +1,641 @@
|
||||||
|
/* eslint no-console:0 */
|
||||||
|
import React, { PropTypes } from 'react';
|
||||||
|
import assign from 'object-assign';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import {
|
||||||
|
loopAllChildren, isInclude, getOffset,
|
||||||
|
filterParentPosition, handleCheckState, getCheck,
|
||||||
|
getStrictlyValue, arraysEqual,
|
||||||
|
} from './util';
|
||||||
|
|
||||||
|
function noop() {
|
||||||
|
}
|
||||||
|
|
||||||
|
class Tree extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
['onKeyDown', 'onCheck'].forEach((m) => {
|
||||||
|
this[m] = this[m].bind(this);
|
||||||
|
});
|
||||||
|
this.contextmenuKeys = [];
|
||||||
|
this.checkedKeysChange = true;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
expandedKeys: this.getDefaultExpandedKeys(props),
|
||||||
|
checkedKeys: this.getDefaultCheckedKeys(props),
|
||||||
|
selectedKeys: this.getDefaultSelectedKeys(props),
|
||||||
|
dragNodesKeys: '',
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
dropNodeKey: '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
const expandedKeys = this.getDefaultExpandedKeys(nextProps, true);
|
||||||
|
const checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
|
||||||
|
const selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
|
||||||
|
const st = {};
|
||||||
|
if (expandedKeys) {
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
if (checkedKeys) {
|
||||||
|
if (nextProps.checkedKeys === this.props.checkedKeys) {
|
||||||
|
this.checkedKeysChange = false;
|
||||||
|
} else {
|
||||||
|
this.checkedKeysChange = true;
|
||||||
|
}
|
||||||
|
st.checkedKeys = checkedKeys;
|
||||||
|
}
|
||||||
|
if (selectedKeys) {
|
||||||
|
st.selectedKeys = selectedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragStart(e, treeNode) {
|
||||||
|
this.dragNode = treeNode;
|
||||||
|
this.dragNodesKeys = this.getDragNodes(treeNode);
|
||||||
|
const st = {
|
||||||
|
dragNodesKeys: this.dragNodesKeys,
|
||||||
|
};
|
||||||
|
const expandedKeys = this.getExpandedKeys(treeNode, false);
|
||||||
|
if (expandedKeys) {
|
||||||
|
// Controlled expand, save and then reset
|
||||||
|
this.getRawExpandedKeys();
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
this.props.onDragStart({
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
});
|
||||||
|
this._dropTrigger = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnterGap(e, treeNode) {
|
||||||
|
const offsetTop = (0, getOffset)(treeNode.refs.selectHandle).top;
|
||||||
|
const offsetHeight = treeNode.refs.selectHandle.offsetHeight;
|
||||||
|
const pageY = e.pageY;
|
||||||
|
const gapHeight = 2;
|
||||||
|
if (pageY > offsetTop + offsetHeight - gapHeight) {
|
||||||
|
this.dropPosition = 1;
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (pageY < offsetTop + gapHeight) {
|
||||||
|
this.dropPosition = -1;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
this.dropPosition = 0;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnter(e, treeNode) {
|
||||||
|
const enterGap = this.onDragEnterGap(e, treeNode);
|
||||||
|
if (this.dragNode.props.eventKey === treeNode.props.eventKey && enterGap === 0) {
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const st = {
|
||||||
|
dragOverNodeKey: treeNode.props.eventKey,
|
||||||
|
};
|
||||||
|
const expandedKeys = this.getExpandedKeys(treeNode, true);
|
||||||
|
if (expandedKeys) {
|
||||||
|
this.getRawExpandedKeys();
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
this.props.onDragEnter({
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
expandedKeys: expandedKeys && [...expandedKeys] || [...this.state.expandedKeys],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragOver(e, treeNode) {
|
||||||
|
this.props.onDragOver({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragLeave(e, treeNode) {
|
||||||
|
this.props.onDragLeave({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onDrop(e, treeNode) {
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
dropNodeKey: key,
|
||||||
|
});
|
||||||
|
if (this.dragNodesKeys.indexOf(key) > -1) {
|
||||||
|
if (console.warn) {
|
||||||
|
console.warn('can not drop to dragNode(include it\'s children node)');
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const posArr = treeNode.props.pos.split('-');
|
||||||
|
const res = {
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
dragNode: this.dragNode,
|
||||||
|
dragNodesKeys: [...this.dragNodesKeys],
|
||||||
|
dropPosition: this.dropPosition + Number(posArr[posArr.length - 1]),
|
||||||
|
};
|
||||||
|
if (this.dropPosition !== 0) {
|
||||||
|
res.dropToGap = true;
|
||||||
|
}
|
||||||
|
if ('expandedKeys' in this.props) {
|
||||||
|
res.rawExpandedKeys = [...this._rawExpandedKeys] || [...this.state.expandedKeys];
|
||||||
|
}
|
||||||
|
this.props.onDrop(res);
|
||||||
|
this._dropTrigger = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnd(e, treeNode) {
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
});
|
||||||
|
this.props.onDragEnd({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExpand(treeNode) {
|
||||||
|
const expanded = !treeNode.props.expanded;
|
||||||
|
const controlled = 'expandedKeys' in this.props;
|
||||||
|
const expandedKeys = [...this.state.expandedKeys];
|
||||||
|
const index = expandedKeys.indexOf(treeNode.props.eventKey);
|
||||||
|
if (expanded && index === -1) {
|
||||||
|
expandedKeys.push(treeNode.props.eventKey);
|
||||||
|
} else if (!expanded && index > -1) {
|
||||||
|
expandedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
if (!controlled) {
|
||||||
|
this.setState({ expandedKeys });
|
||||||
|
}
|
||||||
|
this.props.onExpand(expandedKeys, { node: treeNode, expanded });
|
||||||
|
|
||||||
|
// after data loaded, need set new expandedKeys
|
||||||
|
if (expanded && this.props.loadData) {
|
||||||
|
return this.props.loadData(treeNode).then(() => {
|
||||||
|
if (!controlled) {
|
||||||
|
this.setState({ expandedKeys });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onCheck(treeNode) {
|
||||||
|
let checked = !treeNode.props.checked;
|
||||||
|
if (treeNode.props.halfChecked) {
|
||||||
|
checked = true;
|
||||||
|
}
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
let checkedKeys = [...this.state.checkedKeys];
|
||||||
|
const index = checkedKeys.indexOf(key);
|
||||||
|
|
||||||
|
const newSt = {
|
||||||
|
event: 'check',
|
||||||
|
node: treeNode,
|
||||||
|
checked,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.props.checkStrictly && ('checkedKeys' in this.props)) {
|
||||||
|
if (checked && index === -1) {
|
||||||
|
checkedKeys.push(key);
|
||||||
|
}
|
||||||
|
if (!checked && index > -1) {
|
||||||
|
checkedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
newSt.checkedNodes = [];
|
||||||
|
loopAllChildren(this.props.children, (item, ind, pos, keyOrPos) => {
|
||||||
|
if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
||||||
|
newSt.checkedNodes.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.props.onCheck(getStrictlyValue(checkedKeys, this.props.checkedKeys.halfChecked), newSt);
|
||||||
|
} else {
|
||||||
|
if (checked && index === -1) {
|
||||||
|
this.treeNodesStates[treeNode.props.pos].checked = true;
|
||||||
|
const checkedPositions = [];
|
||||||
|
Object.keys(this.treeNodesStates).forEach(i => {
|
||||||
|
if (this.treeNodesStates[i].checked) {
|
||||||
|
checkedPositions.push(i);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
|
||||||
|
}
|
||||||
|
if (!checked) {
|
||||||
|
this.treeNodesStates[treeNode.props.pos].checked = false;
|
||||||
|
this.treeNodesStates[treeNode.props.pos].halfChecked = false;
|
||||||
|
handleCheckState(this.treeNodesStates, [treeNode.props.pos], false);
|
||||||
|
}
|
||||||
|
const checkKeys = getCheck(this.treeNodesStates);
|
||||||
|
newSt.checkedNodes = checkKeys.checkedNodes;
|
||||||
|
newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
|
||||||
|
newSt.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
||||||
|
this.checkKeys = checkKeys;
|
||||||
|
|
||||||
|
this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
|
||||||
|
if (!('checkedKeys' in this.props)) {
|
||||||
|
this.setState({
|
||||||
|
checkedKeys,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.props.onCheck(checkedKeys, newSt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect(treeNode) {
|
||||||
|
const props = this.props;
|
||||||
|
const selectedKeys = [...this.state.selectedKeys];
|
||||||
|
const eventKey = treeNode.props.eventKey;
|
||||||
|
const index = selectedKeys.indexOf(eventKey);
|
||||||
|
let selected;
|
||||||
|
if (index !== -1) {
|
||||||
|
selected = false;
|
||||||
|
selectedKeys.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
selected = true;
|
||||||
|
if (!props.multiple) {
|
||||||
|
selectedKeys.length = 0;
|
||||||
|
}
|
||||||
|
selectedKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
const selectedNodes = [];
|
||||||
|
if (selectedKeys.length) {
|
||||||
|
loopAllChildren(this.props.children, (item) => {
|
||||||
|
if (selectedKeys.indexOf(item.key) !== -1) {
|
||||||
|
selectedNodes.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const newSt = {
|
||||||
|
event: 'select',
|
||||||
|
node: treeNode,
|
||||||
|
selected,
|
||||||
|
selectedNodes,
|
||||||
|
};
|
||||||
|
if (!('selectedKeys' in this.props)) {
|
||||||
|
this.setState({
|
||||||
|
selectedKeys,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
props.onSelect(selectedKeys, newSt);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter(e, treeNode) {
|
||||||
|
this.props.onMouseEnter({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(e, treeNode) {
|
||||||
|
this.props.onMouseLeave({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onContextMenu(e, treeNode) {
|
||||||
|
const selectedKeys = [...this.state.selectedKeys];
|
||||||
|
const eventKey = treeNode.props.eventKey;
|
||||||
|
if (this.contextmenuKeys.indexOf(eventKey) === -1) {
|
||||||
|
this.contextmenuKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
this.contextmenuKeys.forEach((key) => {
|
||||||
|
const index = selectedKeys.indexOf(key);
|
||||||
|
if (index !== -1) {
|
||||||
|
selectedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (selectedKeys.indexOf(eventKey) === -1) {
|
||||||
|
selectedKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
selectedKeys,
|
||||||
|
});
|
||||||
|
this.props.onRightClick({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
// all keyboard events callbacks run from here at first
|
||||||
|
onKeyDown(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
getFilterExpandedKeys(props, expandKeyProp, expandAll) {
|
||||||
|
const keys = props[expandKeyProp];
|
||||||
|
if (!expandAll && !props.autoExpandParent) {
|
||||||
|
return keys || [];
|
||||||
|
}
|
||||||
|
const expandedPositionArr = [];
|
||||||
|
if (props.autoExpandParent) {
|
||||||
|
loopAllChildren(props.children, (item, index, pos, newKey) => {
|
||||||
|
if (keys.indexOf(newKey) > -1) {
|
||||||
|
expandedPositionArr.push(pos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const filterExpandedKeys = [];
|
||||||
|
loopAllChildren(props.children, (item, index, pos, newKey) => {
|
||||||
|
if (expandAll) {
|
||||||
|
filterExpandedKeys.push(newKey);
|
||||||
|
} else if (props.autoExpandParent) {
|
||||||
|
expandedPositionArr.forEach(p => {
|
||||||
|
if ((p.split('-').length > pos.split('-').length
|
||||||
|
&& isInclude(pos.split('-'), p.split('-')) || pos === p)
|
||||||
|
&& filterExpandedKeys.indexOf(newKey) === -1) {
|
||||||
|
filterExpandedKeys.push(newKey);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return filterExpandedKeys.length ? filterExpandedKeys : keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultExpandedKeys(props, willReceiveProps) {
|
||||||
|
let expandedKeys = willReceiveProps ? undefined :
|
||||||
|
this.getFilterExpandedKeys(props, 'defaultExpandedKeys',
|
||||||
|
props.defaultExpandedKeys.length ? false : props.defaultExpandAll);
|
||||||
|
if ('expandedKeys' in props) {
|
||||||
|
expandedKeys = (props.autoExpandParent ?
|
||||||
|
this.getFilterExpandedKeys(props, 'expandedKeys', false) :
|
||||||
|
props.expandedKeys) || [];
|
||||||
|
}
|
||||||
|
return expandedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultCheckedKeys(props, willReceiveProps) {
|
||||||
|
let checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
|
||||||
|
if ('checkedKeys' in props) {
|
||||||
|
checkedKeys = props.checkedKeys || [];
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
if (props.checkedKeys.checked) {
|
||||||
|
checkedKeys = props.checkedKeys.checked;
|
||||||
|
} else if (!Array.isArray(props.checkedKeys)) {
|
||||||
|
checkedKeys = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return checkedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultSelectedKeys(props, willReceiveProps) {
|
||||||
|
const getKeys = (keys) => {
|
||||||
|
if (props.multiple) {
|
||||||
|
return [...keys];
|
||||||
|
}
|
||||||
|
if (keys.length) {
|
||||||
|
return [keys[0]];
|
||||||
|
}
|
||||||
|
return keys;
|
||||||
|
};
|
||||||
|
let selectedKeys = willReceiveProps ? undefined : getKeys(props.defaultSelectedKeys);
|
||||||
|
if ('selectedKeys' in props) {
|
||||||
|
selectedKeys = getKeys(props.selectedKeys);
|
||||||
|
}
|
||||||
|
return selectedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getRawExpandedKeys() {
|
||||||
|
if (!this._rawExpandedKeys && ('expandedKeys' in this.props)) {
|
||||||
|
this._rawExpandedKeys = [...this.state.expandedKeys];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getOpenTransitionName() {
|
||||||
|
const props = this.props;
|
||||||
|
let transitionName = props.openTransitionName;
|
||||||
|
const animationName = props.openAnimation;
|
||||||
|
if (!transitionName && typeof animationName === 'string') {
|
||||||
|
transitionName = `${props.prefixCls}-open-${animationName}`;
|
||||||
|
}
|
||||||
|
return transitionName;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDragNodes(treeNode) {
|
||||||
|
const dragNodesKeys = [];
|
||||||
|
const tPArr = treeNode.props.pos.split('-');
|
||||||
|
loopAllChildren(this.props.children, (item, index, pos, newKey) => {
|
||||||
|
const pArr = pos.split('-');
|
||||||
|
if (treeNode.props.pos === pos || tPArr.length < pArr.length && isInclude(tPArr, pArr)) {
|
||||||
|
dragNodesKeys.push(newKey);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return dragNodesKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getExpandedKeys(treeNode, expand) {
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
const expandedKeys = this.state.expandedKeys;
|
||||||
|
const expandedIndex = expandedKeys.indexOf(key);
|
||||||
|
let exKeys;
|
||||||
|
if (expandedIndex > -1 && !expand) {
|
||||||
|
exKeys = [...expandedKeys];
|
||||||
|
exKeys.splice(expandedIndex, 1);
|
||||||
|
return exKeys;
|
||||||
|
}
|
||||||
|
if (expand && expandedKeys.indexOf(key) === -1) {
|
||||||
|
return expandedKeys.concat([key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
filterTreeNode(treeNode) {
|
||||||
|
const filterTreeNode = this.props.filterTreeNode;
|
||||||
|
if (typeof filterTreeNode !== 'function' || treeNode.props.disabled) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return filterTreeNode.call(this, treeNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTreeNode(child, index, level = 0) {
|
||||||
|
const pos = `${level}-${index}`;
|
||||||
|
const key = child.key || pos;
|
||||||
|
const state = this.state;
|
||||||
|
const props = this.props;
|
||||||
|
|
||||||
|
// prefer to child's own selectable property if passed
|
||||||
|
let selectable = props.selectable;
|
||||||
|
if (child.props.hasOwnProperty('selectable')) {
|
||||||
|
selectable = child.props.selectable;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cloneProps = {
|
||||||
|
ref: `treeNode-${key}`,
|
||||||
|
root: this,
|
||||||
|
eventKey: key,
|
||||||
|
pos,
|
||||||
|
selectable,
|
||||||
|
loadData: props.loadData,
|
||||||
|
onMouseEnter: props.onMouseEnter,
|
||||||
|
onMouseLeave: props.onMouseLeave,
|
||||||
|
onRightClick: props.onRightClick,
|
||||||
|
prefixCls: props.prefixCls,
|
||||||
|
showLine: props.showLine,
|
||||||
|
showIcon: props.showIcon,
|
||||||
|
draggable: props.draggable,
|
||||||
|
dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
|
||||||
|
dragOverGapTop: state.dragOverNodeKey === key && this.dropPosition === -1,
|
||||||
|
dragOverGapBottom: state.dragOverNodeKey === key && this.dropPosition === 1,
|
||||||
|
_dropTrigger: this._dropTrigger,
|
||||||
|
expanded: state.expandedKeys.indexOf(key) !== -1,
|
||||||
|
selected: state.selectedKeys.indexOf(key) !== -1,
|
||||||
|
openTransitionName: this.getOpenTransitionName(),
|
||||||
|
openAnimation: props.openAnimation,
|
||||||
|
filterTreeNode: this.filterTreeNode.bind(this),
|
||||||
|
};
|
||||||
|
if (props.checkable) {
|
||||||
|
cloneProps.checkable = props.checkable;
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
if (state.checkedKeys) {
|
||||||
|
cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
|
||||||
|
}
|
||||||
|
if (props.checkedKeys.halfChecked) {
|
||||||
|
cloneProps.halfChecked = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
|
||||||
|
} else {
|
||||||
|
cloneProps.halfChecked = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.checkedKeys) {
|
||||||
|
cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
|
||||||
|
}
|
||||||
|
cloneProps.halfChecked = this.halfCheckedKeys.indexOf(key) !== -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.treeNodesStates && this.treeNodesStates[pos]) {
|
||||||
|
assign(cloneProps, this.treeNodesStates[pos].siblingPosition);
|
||||||
|
}
|
||||||
|
return React.cloneElement(child, cloneProps);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
const domProps = {
|
||||||
|
className: classNames(props.className, props.prefixCls),
|
||||||
|
role: 'tree-node',
|
||||||
|
};
|
||||||
|
if (props.focusable) {
|
||||||
|
domProps.tabIndex = '0';
|
||||||
|
domProps.onKeyDown = this.onKeyDown;
|
||||||
|
}
|
||||||
|
const getTreeNodesStates = () => {
|
||||||
|
this.treeNodesStates = {};
|
||||||
|
loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
|
||||||
|
this.treeNodesStates[pos] = {
|
||||||
|
siblingPosition,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
if (props.showLine && !props.checkable) {
|
||||||
|
getTreeNodesStates();
|
||||||
|
}
|
||||||
|
if (props.checkable && (this.checkedKeysChange || props.loadData)) {
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
getTreeNodesStates();
|
||||||
|
} else if (props._treeNodesStates) {
|
||||||
|
this.treeNodesStates = props._treeNodesStates.treeNodesStates;
|
||||||
|
this.halfCheckedKeys = props._treeNodesStates.halfCheckedKeys;
|
||||||
|
this.checkedKeys = props._treeNodesStates.checkedKeys;
|
||||||
|
} else {
|
||||||
|
const checkedKeys = this.state.checkedKeys;
|
||||||
|
let checkKeys;
|
||||||
|
if (!props.loadData && this.checkKeys && this._checkedKeys &&
|
||||||
|
arraysEqual(this._checkedKeys, checkedKeys)) {
|
||||||
|
// if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
|
||||||
|
checkKeys = this.checkKeys;
|
||||||
|
} else {
|
||||||
|
const checkedPositions = [];
|
||||||
|
this.treeNodesStates = {};
|
||||||
|
loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
|
||||||
|
this.treeNodesStates[pos] = {
|
||||||
|
node: item,
|
||||||
|
key: keyOrPos,
|
||||||
|
checked: false,
|
||||||
|
halfChecked: false,
|
||||||
|
siblingPosition,
|
||||||
|
};
|
||||||
|
if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
||||||
|
this.treeNodesStates[pos].checked = true;
|
||||||
|
checkedPositions.push(pos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// if the parent node's key exists, it all children node will be checked
|
||||||
|
handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
|
||||||
|
checkKeys = getCheck(this.treeNodesStates);
|
||||||
|
}
|
||||||
|
this.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
||||||
|
this.checkedKeys = checkKeys.checkedKeys;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul {...domProps} unselectable ref="tree">
|
||||||
|
{React.Children.map(props.children, this.renderTreeNode, this)}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Tree.propTypes = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
children: PropTypes.any,
|
||||||
|
showLine: PropTypes.bool,
|
||||||
|
showIcon: PropTypes.bool,
|
||||||
|
selectable: PropTypes.bool,
|
||||||
|
multiple: PropTypes.bool,
|
||||||
|
checkable: PropTypes.oneOfType([
|
||||||
|
PropTypes.bool,
|
||||||
|
PropTypes.node,
|
||||||
|
]),
|
||||||
|
_treeNodesStates: PropTypes.object,
|
||||||
|
checkStrictly: PropTypes.bool,
|
||||||
|
draggable: PropTypes.bool,
|
||||||
|
autoExpandParent: PropTypes.bool,
|
||||||
|
defaultExpandAll: PropTypes.bool,
|
||||||
|
defaultExpandedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
expandedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
defaultCheckedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
checkedKeys: PropTypes.oneOfType([
|
||||||
|
PropTypes.arrayOf(PropTypes.string),
|
||||||
|
PropTypes.object,
|
||||||
|
]),
|
||||||
|
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
selectedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
onExpand: PropTypes.func,
|
||||||
|
onCheck: PropTypes.func,
|
||||||
|
onSelect: PropTypes.func,
|
||||||
|
loadData: PropTypes.func,
|
||||||
|
onMouseEnter: PropTypes.func,
|
||||||
|
onMouseLeave: PropTypes.func,
|
||||||
|
onRightClick: PropTypes.func,
|
||||||
|
onDragStart: PropTypes.func,
|
||||||
|
onDragEnter: PropTypes.func,
|
||||||
|
onDragOver: PropTypes.func,
|
||||||
|
onDragLeave: PropTypes.func,
|
||||||
|
onDrop: PropTypes.func,
|
||||||
|
onDragEnd: PropTypes.func,
|
||||||
|
filterTreeNode: PropTypes.func,
|
||||||
|
openTransitionName: PropTypes.string,
|
||||||
|
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
};
|
||||||
|
|
||||||
|
Tree.defaultProps = {
|
||||||
|
prefixCls: 'rc-tree',
|
||||||
|
showLine: false,
|
||||||
|
showIcon: true,
|
||||||
|
selectable: true,
|
||||||
|
multiple: false,
|
||||||
|
checkable: false,
|
||||||
|
checkStrictly: false,
|
||||||
|
draggable: false,
|
||||||
|
autoExpandParent: true,
|
||||||
|
defaultExpandAll: false,
|
||||||
|
defaultExpandedKeys: [],
|
||||||
|
defaultCheckedKeys: [],
|
||||||
|
defaultSelectedKeys: [],
|
||||||
|
onExpand: noop,
|
||||||
|
onCheck: noop,
|
||||||
|
onSelect: noop,
|
||||||
|
onDragStart: noop,
|
||||||
|
onDragEnter: noop,
|
||||||
|
onDragOver: noop,
|
||||||
|
onDragLeave: noop,
|
||||||
|
onDrop: noop,
|
||||||
|
onDragEnd: noop,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import Tree from './rcTree';
|
||||||
|
import TreeNode from './TreeNode';
|
||||||
|
Tree.TreeNode = TreeNode;
|
||||||
|
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,641 @@
|
||||||
|
/* eslint no-console:0 */
|
||||||
|
import React, { PropTypes } from 'react';
|
||||||
|
import assign from 'object-assign';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import {
|
||||||
|
loopAllChildren, isInclude, getOffset,
|
||||||
|
filterParentPosition, handleCheckState, getCheck,
|
||||||
|
getStrictlyValue, arraysEqual,
|
||||||
|
} from './util';
|
||||||
|
|
||||||
|
function noop() {
|
||||||
|
}
|
||||||
|
|
||||||
|
class Tree extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
['onKeyDown', 'onCheck'].forEach((m) => {
|
||||||
|
this[m] = this[m].bind(this);
|
||||||
|
});
|
||||||
|
this.contextmenuKeys = [];
|
||||||
|
this.checkedKeysChange = true;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
expandedKeys: this.getDefaultExpandedKeys(props),
|
||||||
|
checkedKeys: this.getDefaultCheckedKeys(props),
|
||||||
|
selectedKeys: this.getDefaultSelectedKeys(props),
|
||||||
|
dragNodesKeys: '',
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
dropNodeKey: '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
const expandedKeys = this.getDefaultExpandedKeys(nextProps, true);
|
||||||
|
const checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
|
||||||
|
const selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
|
||||||
|
const st = {};
|
||||||
|
if (expandedKeys) {
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
if (checkedKeys) {
|
||||||
|
if (nextProps.checkedKeys === this.props.checkedKeys) {
|
||||||
|
this.checkedKeysChange = false;
|
||||||
|
} else {
|
||||||
|
this.checkedKeysChange = true;
|
||||||
|
}
|
||||||
|
st.checkedKeys = checkedKeys;
|
||||||
|
}
|
||||||
|
if (selectedKeys) {
|
||||||
|
st.selectedKeys = selectedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragStart(e, treeNode) {
|
||||||
|
this.dragNode = treeNode;
|
||||||
|
this.dragNodesKeys = this.getDragNodes(treeNode);
|
||||||
|
const st = {
|
||||||
|
dragNodesKeys: this.dragNodesKeys,
|
||||||
|
};
|
||||||
|
const expandedKeys = this.getExpandedKeys(treeNode, false);
|
||||||
|
if (expandedKeys) {
|
||||||
|
// Controlled expand, save and then reset
|
||||||
|
this.getRawExpandedKeys();
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
this.props.onDragStart({
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
});
|
||||||
|
this._dropTrigger = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnterGap(e, treeNode) {
|
||||||
|
const offsetTop = (0, getOffset)(treeNode.refs.selectHandle).top;
|
||||||
|
const offsetHeight = treeNode.refs.selectHandle.offsetHeight;
|
||||||
|
const pageY = e.pageY;
|
||||||
|
const gapHeight = 2;
|
||||||
|
if (pageY > offsetTop + offsetHeight - gapHeight) {
|
||||||
|
this.dropPosition = 1;
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (pageY < offsetTop + gapHeight) {
|
||||||
|
this.dropPosition = -1;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
this.dropPosition = 0;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnter(e, treeNode) {
|
||||||
|
const enterGap = this.onDragEnterGap(e, treeNode);
|
||||||
|
if (this.dragNode.props.eventKey === treeNode.props.eventKey && enterGap === 0) {
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const st = {
|
||||||
|
dragOverNodeKey: treeNode.props.eventKey,
|
||||||
|
};
|
||||||
|
const expandedKeys = this.getExpandedKeys(treeNode, true);
|
||||||
|
if (expandedKeys) {
|
||||||
|
this.getRawExpandedKeys();
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
this.props.onDragEnter({
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
expandedKeys: expandedKeys && [...expandedKeys] || [...this.state.expandedKeys],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragOver(e, treeNode) {
|
||||||
|
this.props.onDragOver({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragLeave(e, treeNode) {
|
||||||
|
this.props.onDragLeave({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onDrop(e, treeNode) {
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
dropNodeKey: key,
|
||||||
|
});
|
||||||
|
if (this.dragNodesKeys.indexOf(key) > -1) {
|
||||||
|
if (console.warn) {
|
||||||
|
console.warn('can not drop to dragNode(include it\'s children node)');
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const posArr = treeNode.props.pos.split('-');
|
||||||
|
const res = {
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
dragNode: this.dragNode,
|
||||||
|
dragNodesKeys: [...this.dragNodesKeys],
|
||||||
|
dropPosition: this.dropPosition + Number(posArr[posArr.length - 1]),
|
||||||
|
};
|
||||||
|
if (this.dropPosition !== 0) {
|
||||||
|
res.dropToGap = true;
|
||||||
|
}
|
||||||
|
if ('expandedKeys' in this.props) {
|
||||||
|
res.rawExpandedKeys = [...this._rawExpandedKeys] || [...this.state.expandedKeys];
|
||||||
|
}
|
||||||
|
this.props.onDrop(res);
|
||||||
|
this._dropTrigger = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnd(e, treeNode) {
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
});
|
||||||
|
this.props.onDragEnd({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExpand(treeNode) {
|
||||||
|
const expanded = !treeNode.props.expanded;
|
||||||
|
const controlled = 'expandedKeys' in this.props;
|
||||||
|
const expandedKeys = [...this.state.expandedKeys];
|
||||||
|
const index = expandedKeys.indexOf(treeNode.props.eventKey);
|
||||||
|
if (expanded && index === -1) {
|
||||||
|
expandedKeys.push(treeNode.props.eventKey);
|
||||||
|
} else if (!expanded && index > -1) {
|
||||||
|
expandedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
if (!controlled) {
|
||||||
|
this.setState({ expandedKeys });
|
||||||
|
}
|
||||||
|
this.props.onExpand(expandedKeys, { node: treeNode, expanded });
|
||||||
|
|
||||||
|
// after data loaded, need set new expandedKeys
|
||||||
|
if (expanded && this.props.loadData) {
|
||||||
|
return this.props.loadData(treeNode).then(() => {
|
||||||
|
if (!controlled) {
|
||||||
|
this.setState({ expandedKeys });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onCheck(treeNode) {
|
||||||
|
let checked = !treeNode.props.checked;
|
||||||
|
if (treeNode.props.halfChecked) {
|
||||||
|
checked = true;
|
||||||
|
}
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
let checkedKeys = [...this.state.checkedKeys];
|
||||||
|
const index = checkedKeys.indexOf(key);
|
||||||
|
|
||||||
|
const newSt = {
|
||||||
|
event: 'check',
|
||||||
|
node: treeNode,
|
||||||
|
checked,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.props.checkStrictly && ('checkedKeys' in this.props)) {
|
||||||
|
if (checked && index === -1) {
|
||||||
|
checkedKeys.push(key);
|
||||||
|
}
|
||||||
|
if (!checked && index > -1) {
|
||||||
|
checkedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
newSt.checkedNodes = [];
|
||||||
|
loopAllChildren(this.props.children, (item, ind, pos, keyOrPos) => {
|
||||||
|
if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
||||||
|
newSt.checkedNodes.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.props.onCheck(getStrictlyValue(checkedKeys, this.props.checkedKeys.halfChecked), newSt);
|
||||||
|
} else {
|
||||||
|
if (checked && index === -1) {
|
||||||
|
this.treeNodesStates[treeNode.props.pos].checked = true;
|
||||||
|
const checkedPositions = [];
|
||||||
|
Object.keys(this.treeNodesStates).forEach(i => {
|
||||||
|
if (this.treeNodesStates[i].checked) {
|
||||||
|
checkedPositions.push(i);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
|
||||||
|
}
|
||||||
|
if (!checked) {
|
||||||
|
this.treeNodesStates[treeNode.props.pos].checked = false;
|
||||||
|
this.treeNodesStates[treeNode.props.pos].halfChecked = false;
|
||||||
|
handleCheckState(this.treeNodesStates, [treeNode.props.pos], false);
|
||||||
|
}
|
||||||
|
const checkKeys = getCheck(this.treeNodesStates);
|
||||||
|
newSt.checkedNodes = checkKeys.checkedNodes;
|
||||||
|
newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
|
||||||
|
newSt.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
||||||
|
this.checkKeys = checkKeys;
|
||||||
|
|
||||||
|
this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
|
||||||
|
if (!('checkedKeys' in this.props)) {
|
||||||
|
this.setState({
|
||||||
|
checkedKeys,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.props.onCheck(checkedKeys, newSt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect(treeNode) {
|
||||||
|
const props = this.props;
|
||||||
|
const selectedKeys = [...this.state.selectedKeys];
|
||||||
|
const eventKey = treeNode.props.eventKey;
|
||||||
|
const index = selectedKeys.indexOf(eventKey);
|
||||||
|
let selected;
|
||||||
|
if (index !== -1) {
|
||||||
|
selected = false;
|
||||||
|
selectedKeys.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
selected = true;
|
||||||
|
if (!props.multiple) {
|
||||||
|
selectedKeys.length = 0;
|
||||||
|
}
|
||||||
|
selectedKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
const selectedNodes = [];
|
||||||
|
if (selectedKeys.length) {
|
||||||
|
loopAllChildren(this.props.children, (item) => {
|
||||||
|
if (selectedKeys.indexOf(item.key) !== -1) {
|
||||||
|
selectedNodes.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const newSt = {
|
||||||
|
event: 'select',
|
||||||
|
node: treeNode,
|
||||||
|
selected,
|
||||||
|
selectedNodes,
|
||||||
|
};
|
||||||
|
if (!('selectedKeys' in this.props)) {
|
||||||
|
this.setState({
|
||||||
|
selectedKeys,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
props.onSelect(selectedKeys, newSt);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter(e, treeNode) {
|
||||||
|
this.props.onMouseEnter({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(e, treeNode) {
|
||||||
|
this.props.onMouseLeave({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onContextMenu(e, treeNode) {
|
||||||
|
const selectedKeys = [...this.state.selectedKeys];
|
||||||
|
const eventKey = treeNode.props.eventKey;
|
||||||
|
if (this.contextmenuKeys.indexOf(eventKey) === -1) {
|
||||||
|
this.contextmenuKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
this.contextmenuKeys.forEach((key) => {
|
||||||
|
const index = selectedKeys.indexOf(key);
|
||||||
|
if (index !== -1) {
|
||||||
|
selectedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (selectedKeys.indexOf(eventKey) === -1) {
|
||||||
|
selectedKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
selectedKeys,
|
||||||
|
});
|
||||||
|
this.props.onRightClick({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
// all keyboard events callbacks run from here at first
|
||||||
|
onKeyDown(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
getFilterExpandedKeys(props, expandKeyProp, expandAll) {
|
||||||
|
const keys = props[expandKeyProp];
|
||||||
|
if (!expandAll && !props.autoExpandParent) {
|
||||||
|
return keys || [];
|
||||||
|
}
|
||||||
|
const expandedPositionArr = [];
|
||||||
|
if (props.autoExpandParent) {
|
||||||
|
loopAllChildren(props.children, (item, index, pos, newKey) => {
|
||||||
|
if (keys.indexOf(newKey) > -1) {
|
||||||
|
expandedPositionArr.push(pos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const filterExpandedKeys = [];
|
||||||
|
loopAllChildren(props.children, (item, index, pos, newKey) => {
|
||||||
|
if (expandAll) {
|
||||||
|
filterExpandedKeys.push(newKey);
|
||||||
|
} else if (props.autoExpandParent) {
|
||||||
|
expandedPositionArr.forEach(p => {
|
||||||
|
if ((p.split('-').length > pos.split('-').length
|
||||||
|
&& isInclude(pos.split('-'), p.split('-')) || pos === p)
|
||||||
|
&& filterExpandedKeys.indexOf(newKey) === -1) {
|
||||||
|
filterExpandedKeys.push(newKey);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return filterExpandedKeys.length ? filterExpandedKeys : keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultExpandedKeys(props, willReceiveProps) {
|
||||||
|
let expandedKeys = willReceiveProps ? undefined :
|
||||||
|
this.getFilterExpandedKeys(props, 'defaultExpandedKeys',
|
||||||
|
props.defaultExpandedKeys.length ? false : props.defaultExpandAll);
|
||||||
|
if ('expandedKeys' in props) {
|
||||||
|
expandedKeys = (props.autoExpandParent ?
|
||||||
|
this.getFilterExpandedKeys(props, 'expandedKeys', false) :
|
||||||
|
props.expandedKeys) || [];
|
||||||
|
}
|
||||||
|
return expandedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultCheckedKeys(props, willReceiveProps) {
|
||||||
|
let checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
|
||||||
|
if ('checkedKeys' in props) {
|
||||||
|
checkedKeys = props.checkedKeys || [];
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
if (props.checkedKeys.checked) {
|
||||||
|
checkedKeys = props.checkedKeys.checked;
|
||||||
|
} else if (!Array.isArray(props.checkedKeys)) {
|
||||||
|
checkedKeys = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return checkedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultSelectedKeys(props, willReceiveProps) {
|
||||||
|
const getKeys = (keys) => {
|
||||||
|
if (props.multiple) {
|
||||||
|
return [...keys];
|
||||||
|
}
|
||||||
|
if (keys.length) {
|
||||||
|
return [keys[0]];
|
||||||
|
}
|
||||||
|
return keys;
|
||||||
|
};
|
||||||
|
let selectedKeys = willReceiveProps ? undefined : getKeys(props.defaultSelectedKeys);
|
||||||
|
if ('selectedKeys' in props) {
|
||||||
|
selectedKeys = getKeys(props.selectedKeys);
|
||||||
|
}
|
||||||
|
return selectedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getRawExpandedKeys() {
|
||||||
|
if (!this._rawExpandedKeys && ('expandedKeys' in this.props)) {
|
||||||
|
this._rawExpandedKeys = [...this.state.expandedKeys];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getOpenTransitionName() {
|
||||||
|
const props = this.props;
|
||||||
|
let transitionName = props.openTransitionName;
|
||||||
|
const animationName = props.openAnimation;
|
||||||
|
if (!transitionName && typeof animationName === 'string') {
|
||||||
|
transitionName = `${props.prefixCls}-open-${animationName}`;
|
||||||
|
}
|
||||||
|
return transitionName;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDragNodes(treeNode) {
|
||||||
|
const dragNodesKeys = [];
|
||||||
|
const tPArr = treeNode.props.pos.split('-');
|
||||||
|
loopAllChildren(this.props.children, (item, index, pos, newKey) => {
|
||||||
|
const pArr = pos.split('-');
|
||||||
|
if (treeNode.props.pos === pos || tPArr.length < pArr.length && isInclude(tPArr, pArr)) {
|
||||||
|
dragNodesKeys.push(newKey);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return dragNodesKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getExpandedKeys(treeNode, expand) {
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
const expandedKeys = this.state.expandedKeys;
|
||||||
|
const expandedIndex = expandedKeys.indexOf(key);
|
||||||
|
let exKeys;
|
||||||
|
if (expandedIndex > -1 && !expand) {
|
||||||
|
exKeys = [...expandedKeys];
|
||||||
|
exKeys.splice(expandedIndex, 1);
|
||||||
|
return exKeys;
|
||||||
|
}
|
||||||
|
if (expand && expandedKeys.indexOf(key) === -1) {
|
||||||
|
return expandedKeys.concat([key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
filterTreeNode(treeNode) {
|
||||||
|
const filterTreeNode = this.props.filterTreeNode;
|
||||||
|
if (typeof filterTreeNode !== 'function' || treeNode.props.disabled) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return filterTreeNode.call(this, treeNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTreeNode(child, index, level = 0) {
|
||||||
|
const pos = `${level}-${index}`;
|
||||||
|
const key = child.key || pos;
|
||||||
|
const state = this.state;
|
||||||
|
const props = this.props;
|
||||||
|
|
||||||
|
// prefer to child's own selectable property if passed
|
||||||
|
let selectable = props.selectable;
|
||||||
|
if (child.props.hasOwnProperty('selectable')) {
|
||||||
|
selectable = child.props.selectable;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cloneProps = {
|
||||||
|
ref: `treeNode-${key}`,
|
||||||
|
root: this,
|
||||||
|
eventKey: key,
|
||||||
|
pos,
|
||||||
|
selectable,
|
||||||
|
loadData: props.loadData,
|
||||||
|
onMouseEnter: props.onMouseEnter,
|
||||||
|
onMouseLeave: props.onMouseLeave,
|
||||||
|
onRightClick: props.onRightClick,
|
||||||
|
prefixCls: props.prefixCls,
|
||||||
|
showLine: props.showLine,
|
||||||
|
showIcon: props.showIcon,
|
||||||
|
draggable: props.draggable,
|
||||||
|
dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
|
||||||
|
dragOverGapTop: state.dragOverNodeKey === key && this.dropPosition === -1,
|
||||||
|
dragOverGapBottom: state.dragOverNodeKey === key && this.dropPosition === 1,
|
||||||
|
_dropTrigger: this._dropTrigger,
|
||||||
|
expanded: state.expandedKeys.indexOf(key) !== -1,
|
||||||
|
selected: state.selectedKeys.indexOf(key) !== -1,
|
||||||
|
openTransitionName: this.getOpenTransitionName(),
|
||||||
|
openAnimation: props.openAnimation,
|
||||||
|
filterTreeNode: this.filterTreeNode.bind(this),
|
||||||
|
};
|
||||||
|
if (props.checkable) {
|
||||||
|
cloneProps.checkable = props.checkable;
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
if (state.checkedKeys) {
|
||||||
|
cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
|
||||||
|
}
|
||||||
|
if (props.checkedKeys.halfChecked) {
|
||||||
|
cloneProps.halfChecked = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
|
||||||
|
} else {
|
||||||
|
cloneProps.halfChecked = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.checkedKeys) {
|
||||||
|
cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
|
||||||
|
}
|
||||||
|
cloneProps.halfChecked = this.halfCheckedKeys.indexOf(key) !== -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.treeNodesStates && this.treeNodesStates[pos]) {
|
||||||
|
assign(cloneProps, this.treeNodesStates[pos].siblingPosition);
|
||||||
|
}
|
||||||
|
return React.cloneElement(child, cloneProps);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
const domProps = {
|
||||||
|
className: classNames(props.className, props.prefixCls),
|
||||||
|
role: 'tree-node',
|
||||||
|
};
|
||||||
|
if (props.focusable) {
|
||||||
|
domProps.tabIndex = '0';
|
||||||
|
domProps.onKeyDown = this.onKeyDown;
|
||||||
|
}
|
||||||
|
const getTreeNodesStates = () => {
|
||||||
|
this.treeNodesStates = {};
|
||||||
|
loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
|
||||||
|
this.treeNodesStates[pos] = {
|
||||||
|
siblingPosition,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
if (props.showLine && !props.checkable) {
|
||||||
|
getTreeNodesStates();
|
||||||
|
}
|
||||||
|
if (props.checkable && (this.checkedKeysChange || props.loadData)) {
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
getTreeNodesStates();
|
||||||
|
} else if (props._treeNodesStates) {
|
||||||
|
this.treeNodesStates = props._treeNodesStates.treeNodesStates;
|
||||||
|
this.halfCheckedKeys = props._treeNodesStates.halfCheckedKeys;
|
||||||
|
this.checkedKeys = props._treeNodesStates.checkedKeys;
|
||||||
|
} else {
|
||||||
|
const checkedKeys = this.state.checkedKeys;
|
||||||
|
let checkKeys;
|
||||||
|
if (!props.loadData && this.checkKeys && this._checkedKeys &&
|
||||||
|
arraysEqual(this._checkedKeys, checkedKeys)) {
|
||||||
|
// if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
|
||||||
|
checkKeys = this.checkKeys;
|
||||||
|
} else {
|
||||||
|
const checkedPositions = [];
|
||||||
|
this.treeNodesStates = {};
|
||||||
|
loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
|
||||||
|
this.treeNodesStates[pos] = {
|
||||||
|
node: item,
|
||||||
|
key: keyOrPos,
|
||||||
|
checked: false,
|
||||||
|
halfChecked: false,
|
||||||
|
siblingPosition,
|
||||||
|
};
|
||||||
|
if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
||||||
|
this.treeNodesStates[pos].checked = true;
|
||||||
|
checkedPositions.push(pos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// if the parent node's key exists, it all children node will be checked
|
||||||
|
handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
|
||||||
|
checkKeys = getCheck(this.treeNodesStates);
|
||||||
|
}
|
||||||
|
this.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
||||||
|
this.checkedKeys = checkKeys.checkedKeys;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul {...domProps} unselectable ref="tree">
|
||||||
|
{React.Children.map(props.children, this.renderTreeNode, this)}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Tree.propTypes = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
children: PropTypes.any,
|
||||||
|
showLine: PropTypes.bool,
|
||||||
|
showIcon: PropTypes.bool,
|
||||||
|
selectable: PropTypes.bool,
|
||||||
|
multiple: PropTypes.bool,
|
||||||
|
checkable: PropTypes.oneOfType([
|
||||||
|
PropTypes.bool,
|
||||||
|
PropTypes.node,
|
||||||
|
]),
|
||||||
|
_treeNodesStates: PropTypes.object,
|
||||||
|
checkStrictly: PropTypes.bool,
|
||||||
|
draggable: PropTypes.bool,
|
||||||
|
autoExpandParent: PropTypes.bool,
|
||||||
|
defaultExpandAll: PropTypes.bool,
|
||||||
|
defaultExpandedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
expandedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
defaultCheckedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
checkedKeys: PropTypes.oneOfType([
|
||||||
|
PropTypes.arrayOf(PropTypes.string),
|
||||||
|
PropTypes.object,
|
||||||
|
]),
|
||||||
|
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
selectedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
onExpand: PropTypes.func,
|
||||||
|
onCheck: PropTypes.func,
|
||||||
|
onSelect: PropTypes.func,
|
||||||
|
loadData: PropTypes.func,
|
||||||
|
onMouseEnter: PropTypes.func,
|
||||||
|
onMouseLeave: PropTypes.func,
|
||||||
|
onRightClick: PropTypes.func,
|
||||||
|
onDragStart: PropTypes.func,
|
||||||
|
onDragEnter: PropTypes.func,
|
||||||
|
onDragOver: PropTypes.func,
|
||||||
|
onDragLeave: PropTypes.func,
|
||||||
|
onDrop: PropTypes.func,
|
||||||
|
onDragEnd: PropTypes.func,
|
||||||
|
filterTreeNode: PropTypes.func,
|
||||||
|
openTransitionName: PropTypes.string,
|
||||||
|
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
};
|
||||||
|
|
||||||
|
Tree.defaultProps = {
|
||||||
|
prefixCls: 'rc-tree',
|
||||||
|
showLine: false,
|
||||||
|
showIcon: true,
|
||||||
|
selectable: true,
|
||||||
|
multiple: false,
|
||||||
|
checkable: false,
|
||||||
|
checkStrictly: false,
|
||||||
|
draggable: false,
|
||||||
|
autoExpandParent: true,
|
||||||
|
defaultExpandAll: false,
|
||||||
|
defaultExpandedKeys: [],
|
||||||
|
defaultCheckedKeys: [],
|
||||||
|
defaultSelectedKeys: [],
|
||||||
|
onExpand: noop,
|
||||||
|
onCheck: noop,
|
||||||
|
onSelect: noop,
|
||||||
|
onDragStart: noop,
|
||||||
|
onDragEnter: noop,
|
||||||
|
onDragOver: noop,
|
||||||
|
onDragLeave: noop,
|
||||||
|
onDrop: noop,
|
||||||
|
onDragEnd: noop,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,383 @@
|
||||||
|
import React, { PropTypes } from 'react';
|
||||||
|
import assign from 'object-assign';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import Animate from 'rc-animate';
|
||||||
|
import { browser } from './util';
|
||||||
|
|
||||||
|
const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : '';
|
||||||
|
const ieOrEdge = /.*(IE|Edge).+/.test(browserUa);
|
||||||
|
// const uaArray = browserUa.split(' ');
|
||||||
|
// const gtIE8 = uaArray.length !== 2 || uaArray[0].indexOf('IE') === -1 || Number(uaArray[1]) > 8;
|
||||||
|
|
||||||
|
const defaultTitle = '---';
|
||||||
|
|
||||||
|
class TreeNode extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
[
|
||||||
|
'onExpand',
|
||||||
|
'onCheck',
|
||||||
|
'onContextMenu',
|
||||||
|
'onMouseEnter',
|
||||||
|
'onMouseLeave',
|
||||||
|
'onDragStart',
|
||||||
|
'onDragEnter',
|
||||||
|
'onDragOver',
|
||||||
|
'onDragLeave',
|
||||||
|
'onDrop',
|
||||||
|
'onDragEnd',
|
||||||
|
].forEach((m) => {
|
||||||
|
this[m] = this[m].bind(this);
|
||||||
|
});
|
||||||
|
this.state = {
|
||||||
|
dataLoading: false,
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if (!this.props.root._treeNodeInstances) {
|
||||||
|
this.props.root._treeNodeInstances = [];
|
||||||
|
}
|
||||||
|
this.props.root._treeNodeInstances.push(this);
|
||||||
|
}
|
||||||
|
// shouldComponentUpdate(nextProps) {
|
||||||
|
// if (!nextProps.expanded) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
|
||||||
|
onCheck() {
|
||||||
|
this.props.root.onCheck(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect() {
|
||||||
|
this.props.root.onSelect(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onMouseEnter(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onMouseLeave(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onContextMenu(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onContextMenu(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragStart(e) {
|
||||||
|
// console.log('dragstart', this.props.eventKey, e);
|
||||||
|
// e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: true,
|
||||||
|
});
|
||||||
|
this.props.root.onDragStart(e, this);
|
||||||
|
try {
|
||||||
|
// ie throw error
|
||||||
|
// firefox-need-it
|
||||||
|
e.dataTransfer.setData('text/plain', '');
|
||||||
|
} finally {
|
||||||
|
// empty
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnter(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragEnter(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragOver(e) {
|
||||||
|
// todo disabled
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragOver(e, this);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragLeave(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragLeave(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDrop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
});
|
||||||
|
this.props.root.onDrop(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnd(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
});
|
||||||
|
this.props.root.onDragEnd(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onExpand() {
|
||||||
|
const callbackPromise = this.props.root.onExpand(this);
|
||||||
|
if (callbackPromise && typeof callbackPromise === 'object') {
|
||||||
|
const setLoading = (dataLoading) => {
|
||||||
|
this.setState({ dataLoading });
|
||||||
|
};
|
||||||
|
setLoading(true);
|
||||||
|
callbackPromise.then(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, () => {
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// keyboard event support
|
||||||
|
onKeyDown(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSwitcher(props, expandedState) {
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const switcherCls = {
|
||||||
|
[`${prefixCls}-switcher`]: true,
|
||||||
|
};
|
||||||
|
if (!props.showLine) {
|
||||||
|
switcherCls[`${prefixCls}-noline_${expandedState}`] = true;
|
||||||
|
} else if (props.pos === '0-0') {
|
||||||
|
switcherCls[`${prefixCls}-roots_${expandedState}`] = true;
|
||||||
|
} else {
|
||||||
|
switcherCls[`${prefixCls}-center_${expandedState}`] = !props.last;
|
||||||
|
switcherCls[`${prefixCls}-bottom_${expandedState}`] = props.last;
|
||||||
|
}
|
||||||
|
if (props.disabled) {
|
||||||
|
switcherCls[`${prefixCls}-switcher-disabled`] = true;
|
||||||
|
return <span className={classNames(switcherCls)}></span>;
|
||||||
|
}
|
||||||
|
return <span className={classNames(switcherCls)} onClick={this.onExpand}></span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCheckbox(props) {
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const checkboxCls = {
|
||||||
|
[`${prefixCls}-checkbox`]: true,
|
||||||
|
};
|
||||||
|
if (props.checked) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-checked`] = true;
|
||||||
|
} else if (props.halfChecked) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-indeterminate`] = true;
|
||||||
|
}
|
||||||
|
let customEle = null;
|
||||||
|
if (typeof props.checkable !== 'boolean') {
|
||||||
|
customEle = props.checkable;
|
||||||
|
}
|
||||||
|
if (props.disabled || props.disableCheckbox) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-disabled`] = true;
|
||||||
|
return <span ref="checkbox" className={classNames(checkboxCls)}>{customEle}</span>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span ref="checkbox"
|
||||||
|
className={classNames(checkboxCls) }
|
||||||
|
onClick={this.onCheck}
|
||||||
|
>{customEle}</span>);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderChildren(props) {
|
||||||
|
const renderFirst = this.renderFirst;
|
||||||
|
this.renderFirst = 1;
|
||||||
|
let transitionAppear = true;
|
||||||
|
if (!renderFirst && props.expanded) {
|
||||||
|
transitionAppear = false;
|
||||||
|
}
|
||||||
|
const children = props.children;
|
||||||
|
let newChildren = children;
|
||||||
|
if (children &&
|
||||||
|
(children.type === TreeNode ||
|
||||||
|
Array.isArray(children) &&
|
||||||
|
children.every((item) => {
|
||||||
|
return item.type === TreeNode;
|
||||||
|
}))) {
|
||||||
|
const cls = {
|
||||||
|
[`${props.prefixCls}-child-tree`]: true,
|
||||||
|
[`${props.prefixCls}-child-tree-open`]: props.expanded,
|
||||||
|
};
|
||||||
|
if (props.showLine) {
|
||||||
|
cls[`${props.prefixCls}-line`] = !props.last;
|
||||||
|
}
|
||||||
|
const animProps = {};
|
||||||
|
if (props.openTransitionName) {
|
||||||
|
animProps.transitionName = props.openTransitionName;
|
||||||
|
} else if (typeof props.openAnimation === 'object') {
|
||||||
|
animProps.animation = assign({}, props.openAnimation);
|
||||||
|
if (!transitionAppear) {
|
||||||
|
delete animProps.animation.appear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
newChildren = (
|
||||||
|
<Animate {...animProps}
|
||||||
|
showProp="data-expanded"
|
||||||
|
transitionAppear={transitionAppear}
|
||||||
|
component=""
|
||||||
|
>
|
||||||
|
{!props.expanded ? null : <ul className={classNames(cls)} data-expanded={props.expanded}>
|
||||||
|
{React.Children.map(children, (item, index) => {
|
||||||
|
return props.root.renderTreeNode(item, index, props.pos);
|
||||||
|
}, props.root)}
|
||||||
|
</ul>}
|
||||||
|
</Animate>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return newChildren;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const expandedState = props.expanded ? 'open' : 'close';
|
||||||
|
let iconState = expandedState;
|
||||||
|
|
||||||
|
let canRenderSwitcher = true;
|
||||||
|
const content = props.title;
|
||||||
|
let newChildren = this.renderChildren(props);
|
||||||
|
if (!newChildren || newChildren === props.children) {
|
||||||
|
// content = newChildren;
|
||||||
|
newChildren = null;
|
||||||
|
if (!props.loadData || props.isLeaf) {
|
||||||
|
canRenderSwitcher = false;
|
||||||
|
iconState = 'docu';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// For performance, does't render children into dom when `!props.expanded` (move to Animate)
|
||||||
|
// if (!props.expanded) {
|
||||||
|
// newChildren = null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
const iconEleCls = {
|
||||||
|
[`${prefixCls}-iconEle`]: true,
|
||||||
|
[`${prefixCls}-icon_loading`]: this.state.dataLoading,
|
||||||
|
[`${prefixCls}-icon__${iconState}`]: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectHandle = () => {
|
||||||
|
const icon = (props.showIcon || props.loadData && this.state.dataLoading) ?
|
||||||
|
<span className={classNames(iconEleCls)}></span> : null;
|
||||||
|
const title = <span className={`${prefixCls}-title`}>{content}</span>;
|
||||||
|
const wrap = `${prefixCls}-node-content-wrapper`;
|
||||||
|
const domProps = {
|
||||||
|
className: `${wrap} ${wrap}-${iconState === expandedState ? iconState : 'normal'}`,
|
||||||
|
};
|
||||||
|
if (!props.disabled) {
|
||||||
|
if (props.selected || !props._dropTrigger && this.state.dragNodeHighlight) {
|
||||||
|
domProps.className += ` ${prefixCls}-node-selected`;
|
||||||
|
}
|
||||||
|
domProps.onClick = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (props.selectable) {
|
||||||
|
this.onSelect();
|
||||||
|
}
|
||||||
|
// not fire check event
|
||||||
|
// if (props.checkable) {
|
||||||
|
// this.onCheck();
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
if (props.onRightClick) {
|
||||||
|
domProps.onContextMenu = this.onContextMenu;
|
||||||
|
}
|
||||||
|
if (props.onMouseEnter) {
|
||||||
|
domProps.onMouseEnter = this.onMouseEnter;
|
||||||
|
}
|
||||||
|
if (props.onMouseLeave) {
|
||||||
|
domProps.onMouseLeave = this.onMouseLeave;
|
||||||
|
}
|
||||||
|
if (props.draggable) {
|
||||||
|
domProps.className += ' draggable';
|
||||||
|
if (ieOrEdge) {
|
||||||
|
// ie bug!
|
||||||
|
domProps.href = '#';
|
||||||
|
}
|
||||||
|
domProps.draggable = true;
|
||||||
|
domProps['aria-grabbed'] = true;
|
||||||
|
domProps.onDragStart = this.onDragStart;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<a ref="selectHandle" title={typeof content === 'string' ? content : ''} {...domProps}>
|
||||||
|
{icon}{title}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const liProps = {};
|
||||||
|
if (props.draggable) {
|
||||||
|
liProps.onDragEnter = this.onDragEnter;
|
||||||
|
liProps.onDragOver = this.onDragOver;
|
||||||
|
liProps.onDragLeave = this.onDragLeave;
|
||||||
|
liProps.onDrop = this.onDrop;
|
||||||
|
liProps.onDragEnd = this.onDragEnd;
|
||||||
|
}
|
||||||
|
|
||||||
|
let disabledCls = '';
|
||||||
|
let dragOverCls = '';
|
||||||
|
if (props.disabled) {
|
||||||
|
disabledCls = `${prefixCls}-treenode-disabled`;
|
||||||
|
} else if (props.dragOver) {
|
||||||
|
dragOverCls = 'drag-over';
|
||||||
|
} else if (props.dragOverGapTop) {
|
||||||
|
dragOverCls = 'drag-over-gap-top';
|
||||||
|
} else if (props.dragOverGapBottom) {
|
||||||
|
dragOverCls = 'drag-over-gap-bottom';
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterCls = props.filterTreeNode(this) ? 'filter-node' : '';
|
||||||
|
|
||||||
|
const noopSwitcher = () => {
|
||||||
|
const cls = {
|
||||||
|
[`${prefixCls}-switcher`]: true,
|
||||||
|
[`${prefixCls}-switcher-noop`]: true,
|
||||||
|
};
|
||||||
|
if (props.showLine) {
|
||||||
|
cls[`${prefixCls}-center_docu`] = !props.last;
|
||||||
|
cls[`${prefixCls}-bottom_docu`] = props.last;
|
||||||
|
} else {
|
||||||
|
cls[`${prefixCls}-noline_docu`] = true;
|
||||||
|
}
|
||||||
|
return <span className={classNames(cls)}></span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li {...liProps} ref="li"
|
||||||
|
className={classNames(props.className, disabledCls, dragOverCls, filterCls) }
|
||||||
|
>
|
||||||
|
{canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher()}
|
||||||
|
{props.checkable ? this.renderCheckbox(props) : null}
|
||||||
|
{selectHandle()}
|
||||||
|
{newChildren}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TreeNode.isTreeNode = 1;
|
||||||
|
|
||||||
|
TreeNode.propTypes = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
disableCheckbox: PropTypes.bool,
|
||||||
|
expanded: PropTypes.bool,
|
||||||
|
isLeaf: PropTypes.bool,
|
||||||
|
root: PropTypes.object,
|
||||||
|
onSelect: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
TreeNode.defaultProps = {
|
||||||
|
title: defaultTitle,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TreeNode;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import Tree from './Tree';
|
||||||
|
import TreeNode from './TreeNode';
|
||||||
|
Tree.TreeNode = TreeNode;
|
||||||
|
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,286 @@
|
||||||
|
/* eslint no-loop-func: 0*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export function browser(navigator) {
|
||||||
|
let tem;
|
||||||
|
const ua = navigator.userAgent;
|
||||||
|
let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
|
||||||
|
if (/trident/i.test(M[1])) {
|
||||||
|
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
|
||||||
|
return `IE ${tem[1] || ''}`;
|
||||||
|
}
|
||||||
|
if (M[1] === 'Chrome') {
|
||||||
|
tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
|
||||||
|
if (tem) return tem.slice(1).join(' ').replace('OPR', 'Opera');
|
||||||
|
}
|
||||||
|
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
|
||||||
|
tem = ua.match(/version\/(\d+)/i);
|
||||||
|
if (tem) {
|
||||||
|
M.splice(1, 1, tem[1]);
|
||||||
|
}
|
||||||
|
return M.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
// export function getOffset(el) {
|
||||||
|
// const obj = el.getBoundingClientRect();
|
||||||
|
// return {
|
||||||
|
// left: obj.left + document.body.scrollLeft,
|
||||||
|
// top: obj.top + document.body.scrollTop,
|
||||||
|
// width: obj.width,
|
||||||
|
// height: obj.height
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // iscroll offset
|
||||||
|
// offset = function (el) {
|
||||||
|
// var left = -el.offsetLeft,
|
||||||
|
// top = -el.offsetTop;
|
||||||
|
|
||||||
|
// // jshint -W084
|
||||||
|
// while (el = el.offsetParent) {
|
||||||
|
// left -= el.offsetLeft;
|
||||||
|
// top -= el.offsetTop;
|
||||||
|
// }
|
||||||
|
// // jshint +W084
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// left: left,
|
||||||
|
// top: top
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
/* eslint-disable */
|
||||||
|
export function getOffset(ele) {
|
||||||
|
let doc, win, docElem, rect;
|
||||||
|
|
||||||
|
if (!ele.getClientRects().length) {
|
||||||
|
return { top: 0, left: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
rect = ele.getBoundingClientRect();
|
||||||
|
|
||||||
|
if (rect.width || rect.height) {
|
||||||
|
doc = ele.ownerDocument;
|
||||||
|
win = doc.defaultView;
|
||||||
|
docElem = doc.documentElement;
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: rect.top + win.pageYOffset - docElem.clientTop,
|
||||||
|
left: rect.left + win.pageXOffset - docElem.clientLeft
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return rect;
|
||||||
|
}
|
||||||
|
/* eslint-enable */
|
||||||
|
|
||||||
|
function getChildrenlength(children) {
|
||||||
|
let len = 1;
|
||||||
|
if (Array.isArray(children)) {
|
||||||
|
len = children.length;
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSiblingPosition(index, len, siblingPosition) {
|
||||||
|
if (len === 1) {
|
||||||
|
siblingPosition.first = true;
|
||||||
|
siblingPosition.last = true;
|
||||||
|
} else {
|
||||||
|
siblingPosition.first = index === 0;
|
||||||
|
siblingPosition.last = index === len - 1;
|
||||||
|
}
|
||||||
|
return siblingPosition;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function loopAllChildren(childs, callback, parent) {
|
||||||
|
const loop = (children, level, _parent) => {
|
||||||
|
const len = getChildrenlength(children);
|
||||||
|
React.Children.forEach(children, (item, index) => {
|
||||||
|
const pos = `${level}-${index}`;
|
||||||
|
if (item.props.children && item.type && item.type.isTreeNode) {
|
||||||
|
loop(item.props.children, pos, { node: item, pos });
|
||||||
|
}
|
||||||
|
callback(item, index, pos, item.key || pos, getSiblingPosition(index, len, {}), _parent);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
loop(childs, 0, parent);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isInclude(smallArray, bigArray) {
|
||||||
|
return smallArray.every((ii, i) => {
|
||||||
|
return ii === bigArray[i];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// console.log(isInclude(['0', '1'], ['0', '10', '1']));
|
||||||
|
|
||||||
|
|
||||||
|
// arr.length === 628, use time: ~20ms
|
||||||
|
export function filterParentPosition(arr) {
|
||||||
|
const levelObj = {};
|
||||||
|
arr.forEach((item) => {
|
||||||
|
const posLen = item.split('-').length;
|
||||||
|
if (!levelObj[posLen]) {
|
||||||
|
levelObj[posLen] = [];
|
||||||
|
}
|
||||||
|
levelObj[posLen].push(item);
|
||||||
|
});
|
||||||
|
const levelArr = Object.keys(levelObj).sort();
|
||||||
|
for (let i = 0; i < levelArr.length; i++) {
|
||||||
|
if (levelArr[i + 1]) {
|
||||||
|
levelObj[levelArr[i]].forEach(ii => {
|
||||||
|
for (let j = i + 1; j < levelArr.length; j++) {
|
||||||
|
levelObj[levelArr[j]].forEach((_i, index) => {
|
||||||
|
if (isInclude(ii.split('-'), _i.split('-'))) {
|
||||||
|
levelObj[levelArr[j]][index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
levelObj[levelArr[j]] = levelObj[levelArr[j]].filter(p => p);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let nArr = [];
|
||||||
|
levelArr.forEach(i => {
|
||||||
|
nArr = nArr.concat(levelObj[i]);
|
||||||
|
});
|
||||||
|
return nArr;
|
||||||
|
}
|
||||||
|
// console.log(filterParentPosition(
|
||||||
|
// ['0-2', '0-3-3', '0-10', '0-10-0', '0-0-1', '0-0', '0-1-1', '0-1']
|
||||||
|
// ));
|
||||||
|
|
||||||
|
|
||||||
|
function stripTail(str) {
|
||||||
|
const arr = str.match(/(.+)(-[^-]+)$/);
|
||||||
|
let st = '';
|
||||||
|
if (arr && arr.length === 3) {
|
||||||
|
st = arr[1];
|
||||||
|
}
|
||||||
|
return st;
|
||||||
|
}
|
||||||
|
function splitPosition(pos) {
|
||||||
|
return pos.split('-');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function handleCheckState(obj, checkedPositionArr, checkIt) {
|
||||||
|
// console.log(stripTail('0-101-000'));
|
||||||
|
let objKeys = Object.keys(obj);
|
||||||
|
// let s = Date.now();
|
||||||
|
objKeys.forEach((i, index) => {
|
||||||
|
const iArr = splitPosition(i);
|
||||||
|
let saved = false;
|
||||||
|
checkedPositionArr.forEach((_pos) => {
|
||||||
|
// 设置子节点，全选或全不选
|
||||||
|
const _posArr = splitPosition(_pos);
|
||||||
|
if (iArr.length > _posArr.length && isInclude(_posArr, iArr)) {
|
||||||
|
obj[i].halfChecked = false;
|
||||||
|
obj[i].checked = checkIt;
|
||||||
|
objKeys[index] = null;
|
||||||
|
}
|
||||||
|
if (iArr[0] === _posArr[0] && iArr[1] === _posArr[1]) {
|
||||||
|
// 如果
|
||||||
|
saved = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!saved) {
|
||||||
|
objKeys[index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// TODO: 循环 2470000 次耗时约 1400 ms。 性能瓶颈！
|
||||||
|
// console.log(Date.now()-s, checkedPositionArr.length * objKeys.length);
|
||||||
|
objKeys = objKeys.filter(i => i); // filter non null;
|
||||||
|
|
||||||
|
for (let pIndex = 0; pIndex < checkedPositionArr.length; pIndex++) {
|
||||||
|
// 循环设置父节点的 选中 或 半选状态
|
||||||
|
const loop = (__pos) => {
|
||||||
|
const _posLen = splitPosition(__pos).length;
|
||||||
|
if (_posLen <= 2) { // e.g. '0-0', '0-1'
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let sibling = 0;
|
||||||
|
let siblingChecked = 0;
|
||||||
|
const parentPosition = stripTail(__pos);
|
||||||
|
objKeys.forEach((i /* , index*/) => {
|
||||||
|
const iArr = splitPosition(i);
|
||||||
|
if (iArr.length === _posLen && isInclude(splitPosition(parentPosition), iArr)) {
|
||||||
|
sibling++;
|
||||||
|
if (obj[i].checked) {
|
||||||
|
siblingChecked++;
|
||||||
|
const _i = checkedPositionArr.indexOf(i);
|
||||||
|
if (_i > -1) {
|
||||||
|
checkedPositionArr.splice(_i, 1);
|
||||||
|
if (_i <= pIndex) {
|
||||||
|
pIndex--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (obj[i].halfChecked) {
|
||||||
|
siblingChecked += 0.5;
|
||||||
|
}
|
||||||
|
// objKeys[index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// objKeys = objKeys.filter(i => i); // filter non null;
|
||||||
|
const parent = obj[parentPosition];
|
||||||
|
// sibling 不会等于0
|
||||||
|
// 全不选 - 全选 - 半选
|
||||||
|
if (siblingChecked === 0) {
|
||||||
|
parent.checked = false;
|
||||||
|
parent.halfChecked = false;
|
||||||
|
} else if (siblingChecked === sibling) {
|
||||||
|
parent.checked = true;
|
||||||
|
parent.halfChecked = false;
|
||||||
|
} else {
|
||||||
|
parent.halfChecked = true;
|
||||||
|
parent.checked = false;
|
||||||
|
}
|
||||||
|
loop(parentPosition);
|
||||||
|
};
|
||||||
|
loop(checkedPositionArr[pIndex], pIndex);
|
||||||
|
}
|
||||||
|
// console.log(Date.now()-s, objKeys.length, checkIt);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCheck(treeNodesStates) {
|
||||||
|
const halfCheckedKeys = [];
|
||||||
|
const checkedKeys = [];
|
||||||
|
const checkedNodes = [];
|
||||||
|
const checkedNodesPositions = [];
|
||||||
|
Object.keys(treeNodesStates).forEach((item) => {
|
||||||
|
const itemObj = treeNodesStates[item];
|
||||||
|
if (itemObj.checked) {
|
||||||
|
checkedKeys.push(itemObj.key);
|
||||||
|
checkedNodes.push(itemObj.node);
|
||||||
|
checkedNodesPositions.push({ node: itemObj.node, pos: item });
|
||||||
|
} else if (itemObj.halfChecked) {
|
||||||
|
halfCheckedKeys.push(itemObj.key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
halfCheckedKeys, checkedKeys, checkedNodes, checkedNodesPositions, treeNodesStates,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getStrictlyValue(checkedKeys, halfChecked) {
|
||||||
|
if (halfChecked) {
|
||||||
|
return { checked: checkedKeys, halfChecked };
|
||||||
|
}
|
||||||
|
return checkedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function arraysEqual(a, b) {
|
||||||
|
if (a === b) return true;
|
||||||
|
if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (a.length !== b.length) return false;
|
||||||
|
|
||||||
|
// If you don't care about the order of the elements inside
|
||||||
|
// the array, you should sort both arrays here.
|
||||||
|
|
||||||
|
for (let i = 0; i < a.length; ++i) {
|
||||||
|
if (a[i] !== b[i]) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,286 @@
|
||||||
|
/* eslint no-loop-func: 0*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export function browser(navigator) {
|
||||||
|
let tem;
|
||||||
|
const ua = navigator.userAgent;
|
||||||
|
let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
|
||||||
|
if (/trident/i.test(M[1])) {
|
||||||
|
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
|
||||||
|
return `IE ${tem[1] || ''}`;
|
||||||
|
}
|
||||||
|
if (M[1] === 'Chrome') {
|
||||||
|
tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
|
||||||
|
if (tem) return tem.slice(1).join(' ').replace('OPR', 'Opera');
|
||||||
|
}
|
||||||
|
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
|
||||||
|
tem = ua.match(/version\/(\d+)/i);
|
||||||
|
if (tem) {
|
||||||
|
M.splice(1, 1, tem[1]);
|
||||||
|
}
|
||||||
|
return M.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
// export function getOffset(el) {
|
||||||
|
// const obj = el.getBoundingClientRect();
|
||||||
|
// return {
|
||||||
|
// left: obj.left + document.body.scrollLeft,
|
||||||
|
// top: obj.top + document.body.scrollTop,
|
||||||
|
// width: obj.width,
|
||||||
|
// height: obj.height
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // iscroll offset
|
||||||
|
// offset = function (el) {
|
||||||
|
// var left = -el.offsetLeft,
|
||||||
|
// top = -el.offsetTop;
|
||||||
|
|
||||||
|
// // jshint -W084
|
||||||
|
// while (el = el.offsetParent) {
|
||||||
|
// left -= el.offsetLeft;
|
||||||
|
// top -= el.offsetTop;
|
||||||
|
// }
|
||||||
|
// // jshint +W084
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// left: left,
|
||||||
|
// top: top
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
/* eslint-disable */
|
||||||
|
export function getOffset(ele) {
|
||||||
|
let doc, win, docElem, rect;
|
||||||
|
|
||||||
|
if (!ele.getClientRects().length) {
|
||||||
|
return { top: 0, left: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
rect = ele.getBoundingClientRect();
|
||||||
|
|
||||||
|
if (rect.width || rect.height) {
|
||||||
|
doc = ele.ownerDocument;
|
||||||
|
win = doc.defaultView;
|
||||||
|
docElem = doc.documentElement;
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: rect.top + win.pageYOffset - docElem.clientTop,
|
||||||
|
left: rect.left + win.pageXOffset - docElem.clientLeft
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return rect;
|
||||||
|
}
|
||||||
|
/* eslint-enable */
|
||||||
|
|
||||||
|
function getChildrenlength(children) {
|
||||||
|
let len = 1;
|
||||||
|
if (Array.isArray(children)) {
|
||||||
|
len = children.length;
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSiblingPosition(index, len, siblingPosition) {
|
||||||
|
if (len === 1) {
|
||||||
|
siblingPosition.first = true;
|
||||||
|
siblingPosition.last = true;
|
||||||
|
} else {
|
||||||
|
siblingPosition.first = index === 0;
|
||||||
|
siblingPosition.last = index === len - 1;
|
||||||
|
}
|
||||||
|
return siblingPosition;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function loopAllChildren(childs, callback, parent) {
|
||||||
|
const loop = (children, level, _parent) => {
|
||||||
|
const len = getChildrenlength(children);
|
||||||
|
React.Children.forEach(children, (item, index) => {
|
||||||
|
const pos = `${level}-${index}`;
|
||||||
|
if (item.props.children && item.type && item.type.isTreeNode) {
|
||||||
|
loop(item.props.children, pos, { node: item, pos });
|
||||||
|
}
|
||||||
|
callback(item, index, pos, item.key || pos, getSiblingPosition(index, len, {}), _parent);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
loop(childs, 0, parent);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isInclude(smallArray, bigArray) {
|
||||||
|
return smallArray.every((ii, i) => {
|
||||||
|
return ii === bigArray[i];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// console.log(isInclude(['0', '1'], ['0', '10', '1']));
|
||||||
|
|
||||||
|
|
||||||
|
// arr.length === 628, use time: ~20ms
|
||||||
|
export function filterParentPosition(arr) {
|
||||||
|
const levelObj = {};
|
||||||
|
arr.forEach((item) => {
|
||||||
|
const posLen = item.split('-').length;
|
||||||
|
if (!levelObj[posLen]) {
|
||||||
|
levelObj[posLen] = [];
|
||||||
|
}
|
||||||
|
levelObj[posLen].push(item);
|
||||||
|
});
|
||||||
|
const levelArr = Object.keys(levelObj).sort();
|
||||||
|
for (let i = 0; i < levelArr.length; i++) {
|
||||||
|
if (levelArr[i + 1]) {
|
||||||
|
levelObj[levelArr[i]].forEach(ii => {
|
||||||
|
for (let j = i + 1; j < levelArr.length; j++) {
|
||||||
|
levelObj[levelArr[j]].forEach((_i, index) => {
|
||||||
|
if (isInclude(ii.split('-'), _i.split('-'))) {
|
||||||
|
levelObj[levelArr[j]][index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
levelObj[levelArr[j]] = levelObj[levelArr[j]].filter(p => p);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let nArr = [];
|
||||||
|
levelArr.forEach(i => {
|
||||||
|
nArr = nArr.concat(levelObj[i]);
|
||||||
|
});
|
||||||
|
return nArr;
|
||||||
|
}
|
||||||
|
// console.log(filterParentPosition(
|
||||||
|
// ['0-2', '0-3-3', '0-10', '0-10-0', '0-0-1', '0-0', '0-1-1', '0-1']
|
||||||
|
// ));
|
||||||
|
|
||||||
|
|
||||||
|
function stripTail(str) {
|
||||||
|
const arr = str.match(/(.+)(-[^-]+)$/);
|
||||||
|
let st = '';
|
||||||
|
if (arr && arr.length === 3) {
|
||||||
|
st = arr[1];
|
||||||
|
}
|
||||||
|
return st;
|
||||||
|
}
|
||||||
|
function splitPosition(pos) {
|
||||||
|
return pos.split('-');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function handleCheckState(obj, checkedPositionArr, checkIt) {
|
||||||
|
// console.log(stripTail('0-101-000'));
|
||||||
|
let objKeys = Object.keys(obj);
|
||||||
|
// let s = Date.now();
|
||||||
|
objKeys.forEach((i, index) => {
|
||||||
|
const iArr = splitPosition(i);
|
||||||
|
let saved = false;
|
||||||
|
checkedPositionArr.forEach((_pos) => {
|
||||||
|
// 设置子节点，全选或全不选
|
||||||
|
const _posArr = splitPosition(_pos);
|
||||||
|
if (iArr.length > _posArr.length && isInclude(_posArr, iArr)) {
|
||||||
|
obj[i].halfChecked = false;
|
||||||
|
obj[i].checked = checkIt;
|
||||||
|
objKeys[index] = null;
|
||||||
|
}
|
||||||
|
if (iArr[0] === _posArr[0] && iArr[1] === _posArr[1]) {
|
||||||
|
// 如果
|
||||||
|
saved = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!saved) {
|
||||||
|
objKeys[index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// TODO: 循环 2470000 次耗时约 1400 ms。 性能瓶颈！
|
||||||
|
// console.log(Date.now()-s, checkedPositionArr.length * objKeys.length);
|
||||||
|
objKeys = objKeys.filter(i => i); // filter non null;
|
||||||
|
|
||||||
|
for (let pIndex = 0; pIndex < checkedPositionArr.length; pIndex++) {
|
||||||
|
// 循环设置父节点的 选中 或 半选状态
|
||||||
|
const loop = (__pos) => {
|
||||||
|
const _posLen = splitPosition(__pos).length;
|
||||||
|
if (_posLen <= 2) { // e.g. '0-0', '0-1'
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let sibling = 0;
|
||||||
|
let siblingChecked = 0;
|
||||||
|
const parentPosition = stripTail(__pos);
|
||||||
|
objKeys.forEach((i /* , index*/) => {
|
||||||
|
const iArr = splitPosition(i);
|
||||||
|
if (iArr.length === _posLen && isInclude(splitPosition(parentPosition), iArr)) {
|
||||||
|
sibling++;
|
||||||
|
if (obj[i].checked) {
|
||||||
|
siblingChecked++;
|
||||||
|
const _i = checkedPositionArr.indexOf(i);
|
||||||
|
if (_i > -1) {
|
||||||
|
checkedPositionArr.splice(_i, 1);
|
||||||
|
if (_i <= pIndex) {
|
||||||
|
pIndex--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (obj[i].halfChecked) {
|
||||||
|
siblingChecked += 0.5;
|
||||||
|
}
|
||||||
|
// objKeys[index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// objKeys = objKeys.filter(i => i); // filter non null;
|
||||||
|
const parent = obj[parentPosition];
|
||||||
|
// sibling 不会等于0
|
||||||
|
// 全不选 - 全选 - 半选
|
||||||
|
if (siblingChecked === 0) {
|
||||||
|
parent.checked = false;
|
||||||
|
parent.halfChecked = false;
|
||||||
|
} else if (siblingChecked === sibling) {
|
||||||
|
parent.checked = true;
|
||||||
|
parent.halfChecked = false;
|
||||||
|
} else {
|
||||||
|
parent.halfChecked = true;
|
||||||
|
parent.checked = false;
|
||||||
|
}
|
||||||
|
loop(parentPosition);
|
||||||
|
};
|
||||||
|
loop(checkedPositionArr[pIndex], pIndex);
|
||||||
|
}
|
||||||
|
// console.log(Date.now()-s, objKeys.length, checkIt);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCheck(treeNodesStates) {
|
||||||
|
const halfCheckedKeys = [];
|
||||||
|
const checkedKeys = [];
|
||||||
|
const checkedNodes = [];
|
||||||
|
const checkedNodesPositions = [];
|
||||||
|
Object.keys(treeNodesStates).forEach((item) => {
|
||||||
|
const itemObj = treeNodesStates[item];
|
||||||
|
if (itemObj.checked) {
|
||||||
|
checkedKeys.push(itemObj.key);
|
||||||
|
checkedNodes.push(itemObj.node);
|
||||||
|
checkedNodesPositions.push({ node: itemObj.node, pos: item });
|
||||||
|
} else if (itemObj.halfChecked) {
|
||||||
|
halfCheckedKeys.push(itemObj.key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
halfCheckedKeys, checkedKeys, checkedNodes, checkedNodesPositions, treeNodesStates,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getStrictlyValue(checkedKeys, halfChecked) {
|
||||||
|
if (halfChecked) {
|
||||||
|
return { checked: checkedKeys, halfChecked };
|
||||||
|
}
|
||||||
|
return checkedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function arraysEqual(a, b) {
|
||||||
|
if (a === b) return true;
|
||||||
|
if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (a.length !== b.length) return false;
|
||||||
|
|
||||||
|
// If you don't care about the order of the elements inside
|
||||||
|
// the array, you should sort both arrays here.
|
||||||
|
|
||||||
|
for (let i = 0; i < a.length; ++i) {
|
||||||
|
if (a[i] !== b[i]) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,641 @@
|
||||||
|
/* eslint no-console:0 */
|
||||||
|
import React, { PropTypes } from 'react';
|
||||||
|
import assign from 'object-assign';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import {
|
||||||
|
loopAllChildren, isInclude, getOffset,
|
||||||
|
filterParentPosition, handleCheckState, getCheck,
|
||||||
|
getStrictlyValue, arraysEqual,
|
||||||
|
} from './util';
|
||||||
|
|
||||||
|
function noop() {
|
||||||
|
}
|
||||||
|
|
||||||
|
class Tree extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
['onKeyDown', 'onCheck'].forEach((m) => {
|
||||||
|
this[m] = this[m].bind(this);
|
||||||
|
});
|
||||||
|
this.contextmenuKeys = [];
|
||||||
|
this.checkedKeysChange = true;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
expandedKeys: this.getDefaultExpandedKeys(props),
|
||||||
|
checkedKeys: this.getDefaultCheckedKeys(props),
|
||||||
|
selectedKeys: this.getDefaultSelectedKeys(props),
|
||||||
|
dragNodesKeys: '',
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
dropNodeKey: '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
const expandedKeys = this.getDefaultExpandedKeys(nextProps, true);
|
||||||
|
const checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
|
||||||
|
const selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
|
||||||
|
const st = {};
|
||||||
|
if (expandedKeys) {
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
if (checkedKeys) {
|
||||||
|
if (nextProps.checkedKeys === this.props.checkedKeys) {
|
||||||
|
this.checkedKeysChange = false;
|
||||||
|
} else {
|
||||||
|
this.checkedKeysChange = true;
|
||||||
|
}
|
||||||
|
st.checkedKeys = checkedKeys;
|
||||||
|
}
|
||||||
|
if (selectedKeys) {
|
||||||
|
st.selectedKeys = selectedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragStart(e, treeNode) {
|
||||||
|
this.dragNode = treeNode;
|
||||||
|
this.dragNodesKeys = this.getDragNodes(treeNode);
|
||||||
|
const st = {
|
||||||
|
dragNodesKeys: this.dragNodesKeys,
|
||||||
|
};
|
||||||
|
const expandedKeys = this.getExpandedKeys(treeNode, false);
|
||||||
|
if (expandedKeys) {
|
||||||
|
// Controlled expand, save and then reset
|
||||||
|
this.getRawExpandedKeys();
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
this.props.onDragStart({
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
});
|
||||||
|
this._dropTrigger = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnterGap(e, treeNode) {
|
||||||
|
const offsetTop = (0, getOffset)(treeNode.refs.selectHandle).top;
|
||||||
|
const offsetHeight = treeNode.refs.selectHandle.offsetHeight;
|
||||||
|
const pageY = e.pageY;
|
||||||
|
const gapHeight = 2;
|
||||||
|
if (pageY > offsetTop + offsetHeight - gapHeight) {
|
||||||
|
this.dropPosition = 1;
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (pageY < offsetTop + gapHeight) {
|
||||||
|
this.dropPosition = -1;
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
this.dropPosition = 0;
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnter(e, treeNode) {
|
||||||
|
const enterGap = this.onDragEnterGap(e, treeNode);
|
||||||
|
if (this.dragNode.props.eventKey === treeNode.props.eventKey && enterGap === 0) {
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const st = {
|
||||||
|
dragOverNodeKey: treeNode.props.eventKey,
|
||||||
|
};
|
||||||
|
const expandedKeys = this.getExpandedKeys(treeNode, true);
|
||||||
|
if (expandedKeys) {
|
||||||
|
this.getRawExpandedKeys();
|
||||||
|
st.expandedKeys = expandedKeys;
|
||||||
|
}
|
||||||
|
this.setState(st);
|
||||||
|
this.props.onDragEnter({
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
expandedKeys: expandedKeys && [...expandedKeys] || [...this.state.expandedKeys],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragOver(e, treeNode) {
|
||||||
|
this.props.onDragOver({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragLeave(e, treeNode) {
|
||||||
|
this.props.onDragLeave({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onDrop(e, treeNode) {
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
dropNodeKey: key,
|
||||||
|
});
|
||||||
|
if (this.dragNodesKeys.indexOf(key) > -1) {
|
||||||
|
if (console.warn) {
|
||||||
|
console.warn('can not drop to dragNode(include it\'s children node)');
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const posArr = treeNode.props.pos.split('-');
|
||||||
|
const res = {
|
||||||
|
event: e,
|
||||||
|
node: treeNode,
|
||||||
|
dragNode: this.dragNode,
|
||||||
|
dragNodesKeys: [...this.dragNodesKeys],
|
||||||
|
dropPosition: this.dropPosition + Number(posArr[posArr.length - 1]),
|
||||||
|
};
|
||||||
|
if (this.dropPosition !== 0) {
|
||||||
|
res.dropToGap = true;
|
||||||
|
}
|
||||||
|
if ('expandedKeys' in this.props) {
|
||||||
|
res.rawExpandedKeys = [...this._rawExpandedKeys] || [...this.state.expandedKeys];
|
||||||
|
}
|
||||||
|
this.props.onDrop(res);
|
||||||
|
this._dropTrigger = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnd(e, treeNode) {
|
||||||
|
this.setState({
|
||||||
|
dragOverNodeKey: '',
|
||||||
|
});
|
||||||
|
this.props.onDragEnd({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onExpand(treeNode) {
|
||||||
|
const expanded = !treeNode.props.expanded;
|
||||||
|
const controlled = 'expandedKeys' in this.props;
|
||||||
|
const expandedKeys = [...this.state.expandedKeys];
|
||||||
|
const index = expandedKeys.indexOf(treeNode.props.eventKey);
|
||||||
|
if (expanded && index === -1) {
|
||||||
|
expandedKeys.push(treeNode.props.eventKey);
|
||||||
|
} else if (!expanded && index > -1) {
|
||||||
|
expandedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
if (!controlled) {
|
||||||
|
this.setState({ expandedKeys });
|
||||||
|
}
|
||||||
|
this.props.onExpand(expandedKeys, { node: treeNode, expanded });
|
||||||
|
|
||||||
|
// after data loaded, need set new expandedKeys
|
||||||
|
if (expanded && this.props.loadData) {
|
||||||
|
return this.props.loadData(treeNode).then(() => {
|
||||||
|
if (!controlled) {
|
||||||
|
this.setState({ expandedKeys });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onCheck(treeNode) {
|
||||||
|
let checked = !treeNode.props.checked;
|
||||||
|
if (treeNode.props.halfChecked) {
|
||||||
|
checked = true;
|
||||||
|
}
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
let checkedKeys = [...this.state.checkedKeys];
|
||||||
|
const index = checkedKeys.indexOf(key);
|
||||||
|
|
||||||
|
const newSt = {
|
||||||
|
event: 'check',
|
||||||
|
node: treeNode,
|
||||||
|
checked,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.props.checkStrictly && ('checkedKeys' in this.props)) {
|
||||||
|
if (checked && index === -1) {
|
||||||
|
checkedKeys.push(key);
|
||||||
|
}
|
||||||
|
if (!checked && index > -1) {
|
||||||
|
checkedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
newSt.checkedNodes = [];
|
||||||
|
loopAllChildren(this.props.children, (item, ind, pos, keyOrPos) => {
|
||||||
|
if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
||||||
|
newSt.checkedNodes.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.props.onCheck(getStrictlyValue(checkedKeys, this.props.checkedKeys.halfChecked), newSt);
|
||||||
|
} else {
|
||||||
|
if (checked && index === -1) {
|
||||||
|
this.treeNodesStates[treeNode.props.pos].checked = true;
|
||||||
|
const checkedPositions = [];
|
||||||
|
Object.keys(this.treeNodesStates).forEach(i => {
|
||||||
|
if (this.treeNodesStates[i].checked) {
|
||||||
|
checkedPositions.push(i);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
|
||||||
|
}
|
||||||
|
if (!checked) {
|
||||||
|
this.treeNodesStates[treeNode.props.pos].checked = false;
|
||||||
|
this.treeNodesStates[treeNode.props.pos].halfChecked = false;
|
||||||
|
handleCheckState(this.treeNodesStates, [treeNode.props.pos], false);
|
||||||
|
}
|
||||||
|
const checkKeys = getCheck(this.treeNodesStates);
|
||||||
|
newSt.checkedNodes = checkKeys.checkedNodes;
|
||||||
|
newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
|
||||||
|
newSt.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
||||||
|
this.checkKeys = checkKeys;
|
||||||
|
|
||||||
|
this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
|
||||||
|
if (!('checkedKeys' in this.props)) {
|
||||||
|
this.setState({
|
||||||
|
checkedKeys,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.props.onCheck(checkedKeys, newSt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect(treeNode) {
|
||||||
|
const props = this.props;
|
||||||
|
const selectedKeys = [...this.state.selectedKeys];
|
||||||
|
const eventKey = treeNode.props.eventKey;
|
||||||
|
const index = selectedKeys.indexOf(eventKey);
|
||||||
|
let selected;
|
||||||
|
if (index !== -1) {
|
||||||
|
selected = false;
|
||||||
|
selectedKeys.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
selected = true;
|
||||||
|
if (!props.multiple) {
|
||||||
|
selectedKeys.length = 0;
|
||||||
|
}
|
||||||
|
selectedKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
const selectedNodes = [];
|
||||||
|
if (selectedKeys.length) {
|
||||||
|
loopAllChildren(this.props.children, (item) => {
|
||||||
|
if (selectedKeys.indexOf(item.key) !== -1) {
|
||||||
|
selectedNodes.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const newSt = {
|
||||||
|
event: 'select',
|
||||||
|
node: treeNode,
|
||||||
|
selected,
|
||||||
|
selectedNodes,
|
||||||
|
};
|
||||||
|
if (!('selectedKeys' in this.props)) {
|
||||||
|
this.setState({
|
||||||
|
selectedKeys,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
props.onSelect(selectedKeys, newSt);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter(e, treeNode) {
|
||||||
|
this.props.onMouseEnter({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(e, treeNode) {
|
||||||
|
this.props.onMouseLeave({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
onContextMenu(e, treeNode) {
|
||||||
|
const selectedKeys = [...this.state.selectedKeys];
|
||||||
|
const eventKey = treeNode.props.eventKey;
|
||||||
|
if (this.contextmenuKeys.indexOf(eventKey) === -1) {
|
||||||
|
this.contextmenuKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
this.contextmenuKeys.forEach((key) => {
|
||||||
|
const index = selectedKeys.indexOf(key);
|
||||||
|
if (index !== -1) {
|
||||||
|
selectedKeys.splice(index, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (selectedKeys.indexOf(eventKey) === -1) {
|
||||||
|
selectedKeys.push(eventKey);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
selectedKeys,
|
||||||
|
});
|
||||||
|
this.props.onRightClick({ event: e, node: treeNode });
|
||||||
|
}
|
||||||
|
|
||||||
|
// all keyboard events callbacks run from here at first
|
||||||
|
onKeyDown(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
getFilterExpandedKeys(props, expandKeyProp, expandAll) {
|
||||||
|
const keys = props[expandKeyProp];
|
||||||
|
if (!expandAll && !props.autoExpandParent) {
|
||||||
|
return keys || [];
|
||||||
|
}
|
||||||
|
const expandedPositionArr = [];
|
||||||
|
if (props.autoExpandParent) {
|
||||||
|
loopAllChildren(props.children, (item, index, pos, newKey) => {
|
||||||
|
if (keys.indexOf(newKey) > -1) {
|
||||||
|
expandedPositionArr.push(pos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const filterExpandedKeys = [];
|
||||||
|
loopAllChildren(props.children, (item, index, pos, newKey) => {
|
||||||
|
if (expandAll) {
|
||||||
|
filterExpandedKeys.push(newKey);
|
||||||
|
} else if (props.autoExpandParent) {
|
||||||
|
expandedPositionArr.forEach(p => {
|
||||||
|
if ((p.split('-').length > pos.split('-').length
|
||||||
|
&& isInclude(pos.split('-'), p.split('-')) || pos === p)
|
||||||
|
&& filterExpandedKeys.indexOf(newKey) === -1) {
|
||||||
|
filterExpandedKeys.push(newKey);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return filterExpandedKeys.length ? filterExpandedKeys : keys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultExpandedKeys(props, willReceiveProps) {
|
||||||
|
let expandedKeys = willReceiveProps ? undefined :
|
||||||
|
this.getFilterExpandedKeys(props, 'defaultExpandedKeys',
|
||||||
|
props.defaultExpandedKeys.length ? false : props.defaultExpandAll);
|
||||||
|
if ('expandedKeys' in props) {
|
||||||
|
expandedKeys = (props.autoExpandParent ?
|
||||||
|
this.getFilterExpandedKeys(props, 'expandedKeys', false) :
|
||||||
|
props.expandedKeys) || [];
|
||||||
|
}
|
||||||
|
return expandedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultCheckedKeys(props, willReceiveProps) {
|
||||||
|
let checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
|
||||||
|
if ('checkedKeys' in props) {
|
||||||
|
checkedKeys = props.checkedKeys || [];
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
if (props.checkedKeys.checked) {
|
||||||
|
checkedKeys = props.checkedKeys.checked;
|
||||||
|
} else if (!Array.isArray(props.checkedKeys)) {
|
||||||
|
checkedKeys = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return checkedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefaultSelectedKeys(props, willReceiveProps) {
|
||||||
|
const getKeys = (keys) => {
|
||||||
|
if (props.multiple) {
|
||||||
|
return [...keys];
|
||||||
|
}
|
||||||
|
if (keys.length) {
|
||||||
|
return [keys[0]];
|
||||||
|
}
|
||||||
|
return keys;
|
||||||
|
};
|
||||||
|
let selectedKeys = willReceiveProps ? undefined : getKeys(props.defaultSelectedKeys);
|
||||||
|
if ('selectedKeys' in props) {
|
||||||
|
selectedKeys = getKeys(props.selectedKeys);
|
||||||
|
}
|
||||||
|
return selectedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getRawExpandedKeys() {
|
||||||
|
if (!this._rawExpandedKeys && ('expandedKeys' in this.props)) {
|
||||||
|
this._rawExpandedKeys = [...this.state.expandedKeys];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getOpenTransitionName() {
|
||||||
|
const props = this.props;
|
||||||
|
let transitionName = props.openTransitionName;
|
||||||
|
const animationName = props.openAnimation;
|
||||||
|
if (!transitionName && typeof animationName === 'string') {
|
||||||
|
transitionName = `${props.prefixCls}-open-${animationName}`;
|
||||||
|
}
|
||||||
|
return transitionName;
|
||||||
|
}
|
||||||
|
|
||||||
|
getDragNodes(treeNode) {
|
||||||
|
const dragNodesKeys = [];
|
||||||
|
const tPArr = treeNode.props.pos.split('-');
|
||||||
|
loopAllChildren(this.props.children, (item, index, pos, newKey) => {
|
||||||
|
const pArr = pos.split('-');
|
||||||
|
if (treeNode.props.pos === pos || tPArr.length < pArr.length && isInclude(tPArr, pArr)) {
|
||||||
|
dragNodesKeys.push(newKey);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return dragNodesKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
getExpandedKeys(treeNode, expand) {
|
||||||
|
const key = treeNode.props.eventKey;
|
||||||
|
const expandedKeys = this.state.expandedKeys;
|
||||||
|
const expandedIndex = expandedKeys.indexOf(key);
|
||||||
|
let exKeys;
|
||||||
|
if (expandedIndex > -1 && !expand) {
|
||||||
|
exKeys = [...expandedKeys];
|
||||||
|
exKeys.splice(expandedIndex, 1);
|
||||||
|
return exKeys;
|
||||||
|
}
|
||||||
|
if (expand && expandedKeys.indexOf(key) === -1) {
|
||||||
|
return expandedKeys.concat([key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
filterTreeNode(treeNode) {
|
||||||
|
const filterTreeNode = this.props.filterTreeNode;
|
||||||
|
if (typeof filterTreeNode !== 'function' || treeNode.props.disabled) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return filterTreeNode.call(this, treeNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTreeNode(child, index, level = 0) {
|
||||||
|
const pos = `${level}-${index}`;
|
||||||
|
const key = child.key || pos;
|
||||||
|
const state = this.state;
|
||||||
|
const props = this.props;
|
||||||
|
|
||||||
|
// prefer to child's own selectable property if passed
|
||||||
|
let selectable = props.selectable;
|
||||||
|
if (child.props.hasOwnProperty('selectable')) {
|
||||||
|
selectable = child.props.selectable;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cloneProps = {
|
||||||
|
ref: `treeNode-${key}`,
|
||||||
|
root: this,
|
||||||
|
eventKey: key,
|
||||||
|
pos,
|
||||||
|
selectable,
|
||||||
|
loadData: props.loadData,
|
||||||
|
onMouseEnter: props.onMouseEnter,
|
||||||
|
onMouseLeave: props.onMouseLeave,
|
||||||
|
onRightClick: props.onRightClick,
|
||||||
|
prefixCls: props.prefixCls,
|
||||||
|
showLine: props.showLine,
|
||||||
|
showIcon: props.showIcon,
|
||||||
|
draggable: props.draggable,
|
||||||
|
dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
|
||||||
|
dragOverGapTop: state.dragOverNodeKey === key && this.dropPosition === -1,
|
||||||
|
dragOverGapBottom: state.dragOverNodeKey === key && this.dropPosition === 1,
|
||||||
|
_dropTrigger: this._dropTrigger,
|
||||||
|
expanded: state.expandedKeys.indexOf(key) !== -1,
|
||||||
|
selected: state.selectedKeys.indexOf(key) !== -1,
|
||||||
|
openTransitionName: this.getOpenTransitionName(),
|
||||||
|
openAnimation: props.openAnimation,
|
||||||
|
filterTreeNode: this.filterTreeNode.bind(this),
|
||||||
|
};
|
||||||
|
if (props.checkable) {
|
||||||
|
cloneProps.checkable = props.checkable;
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
if (state.checkedKeys) {
|
||||||
|
cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
|
||||||
|
}
|
||||||
|
if (props.checkedKeys.halfChecked) {
|
||||||
|
cloneProps.halfChecked = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
|
||||||
|
} else {
|
||||||
|
cloneProps.halfChecked = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.checkedKeys) {
|
||||||
|
cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
|
||||||
|
}
|
||||||
|
cloneProps.halfChecked = this.halfCheckedKeys.indexOf(key) !== -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.treeNodesStates && this.treeNodesStates[pos]) {
|
||||||
|
assign(cloneProps, this.treeNodesStates[pos].siblingPosition);
|
||||||
|
}
|
||||||
|
return React.cloneElement(child, cloneProps);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
const domProps = {
|
||||||
|
className: classNames(props.className, props.prefixCls),
|
||||||
|
role: 'tree-node',
|
||||||
|
};
|
||||||
|
if (props.focusable) {
|
||||||
|
domProps.tabIndex = '0';
|
||||||
|
domProps.onKeyDown = this.onKeyDown;
|
||||||
|
}
|
||||||
|
const getTreeNodesStates = () => {
|
||||||
|
this.treeNodesStates = {};
|
||||||
|
loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
|
||||||
|
this.treeNodesStates[pos] = {
|
||||||
|
siblingPosition,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
if (props.showLine && !props.checkable) {
|
||||||
|
getTreeNodesStates();
|
||||||
|
}
|
||||||
|
if (props.checkable && (this.checkedKeysChange || props.loadData)) {
|
||||||
|
if (props.checkStrictly) {
|
||||||
|
getTreeNodesStates();
|
||||||
|
} else if (props._treeNodesStates) {
|
||||||
|
this.treeNodesStates = props._treeNodesStates.treeNodesStates;
|
||||||
|
this.halfCheckedKeys = props._treeNodesStates.halfCheckedKeys;
|
||||||
|
this.checkedKeys = props._treeNodesStates.checkedKeys;
|
||||||
|
} else {
|
||||||
|
const checkedKeys = this.state.checkedKeys;
|
||||||
|
let checkKeys;
|
||||||
|
if (!props.loadData && this.checkKeys && this._checkedKeys &&
|
||||||
|
arraysEqual(this._checkedKeys, checkedKeys)) {
|
||||||
|
// if checkedKeys the same as _checkedKeys from onCheck, use _checkedKeys.
|
||||||
|
checkKeys = this.checkKeys;
|
||||||
|
} else {
|
||||||
|
const checkedPositions = [];
|
||||||
|
this.treeNodesStates = {};
|
||||||
|
loopAllChildren(props.children, (item, index, pos, keyOrPos, siblingPosition) => {
|
||||||
|
this.treeNodesStates[pos] = {
|
||||||
|
node: item,
|
||||||
|
key: keyOrPos,
|
||||||
|
checked: false,
|
||||||
|
halfChecked: false,
|
||||||
|
siblingPosition,
|
||||||
|
};
|
||||||
|
if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
||||||
|
this.treeNodesStates[pos].checked = true;
|
||||||
|
checkedPositions.push(pos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// if the parent node's key exists, it all children node will be checked
|
||||||
|
handleCheckState(this.treeNodesStates, filterParentPosition(checkedPositions), true);
|
||||||
|
checkKeys = getCheck(this.treeNodesStates);
|
||||||
|
}
|
||||||
|
this.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
||||||
|
this.checkedKeys = checkKeys.checkedKeys;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul {...domProps} unselectable ref="tree">
|
||||||
|
{React.Children.map(props.children, this.renderTreeNode, this)}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Tree.propTypes = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
children: PropTypes.any,
|
||||||
|
showLine: PropTypes.bool,
|
||||||
|
showIcon: PropTypes.bool,
|
||||||
|
selectable: PropTypes.bool,
|
||||||
|
multiple: PropTypes.bool,
|
||||||
|
checkable: PropTypes.oneOfType([
|
||||||
|
PropTypes.bool,
|
||||||
|
PropTypes.node,
|
||||||
|
]),
|
||||||
|
_treeNodesStates: PropTypes.object,
|
||||||
|
checkStrictly: PropTypes.bool,
|
||||||
|
draggable: PropTypes.bool,
|
||||||
|
autoExpandParent: PropTypes.bool,
|
||||||
|
defaultExpandAll: PropTypes.bool,
|
||||||
|
defaultExpandedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
expandedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
defaultCheckedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
checkedKeys: PropTypes.oneOfType([
|
||||||
|
PropTypes.arrayOf(PropTypes.string),
|
||||||
|
PropTypes.object,
|
||||||
|
]),
|
||||||
|
defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
selectedKeys: PropTypes.arrayOf(PropTypes.string),
|
||||||
|
onExpand: PropTypes.func,
|
||||||
|
onCheck: PropTypes.func,
|
||||||
|
onSelect: PropTypes.func,
|
||||||
|
loadData: PropTypes.func,
|
||||||
|
onMouseEnter: PropTypes.func,
|
||||||
|
onMouseLeave: PropTypes.func,
|
||||||
|
onRightClick: PropTypes.func,
|
||||||
|
onDragStart: PropTypes.func,
|
||||||
|
onDragEnter: PropTypes.func,
|
||||||
|
onDragOver: PropTypes.func,
|
||||||
|
onDragLeave: PropTypes.func,
|
||||||
|
onDrop: PropTypes.func,
|
||||||
|
onDragEnd: PropTypes.func,
|
||||||
|
filterTreeNode: PropTypes.func,
|
||||||
|
openTransitionName: PropTypes.string,
|
||||||
|
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||||
|
};
|
||||||
|
|
||||||
|
Tree.defaultProps = {
|
||||||
|
prefixCls: 'rc-tree',
|
||||||
|
showLine: false,
|
||||||
|
showIcon: true,
|
||||||
|
selectable: true,
|
||||||
|
multiple: false,
|
||||||
|
checkable: false,
|
||||||
|
checkStrictly: false,
|
||||||
|
draggable: false,
|
||||||
|
autoExpandParent: true,
|
||||||
|
defaultExpandAll: false,
|
||||||
|
defaultExpandedKeys: [],
|
||||||
|
defaultCheckedKeys: [],
|
||||||
|
defaultSelectedKeys: [],
|
||||||
|
onExpand: noop,
|
||||||
|
onCheck: noop,
|
||||||
|
onSelect: noop,
|
||||||
|
onDragStart: noop,
|
||||||
|
onDragEnter: noop,
|
||||||
|
onDragOver: noop,
|
||||||
|
onDragLeave: noop,
|
||||||
|
onDrop: noop,
|
||||||
|
onDragEnd: noop,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,320 @@
|
||||||
|
@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";
|
||||||
|
|
||||||
|
|
||||||
|
//css 分割线
|
||||||
|
.u-tree li span.u-tree-checkbox {
|
||||||
|
margin: 2px 4px 0 0;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox {
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
|
||||||
|
background-color: #108ee9;
|
||||||
|
border-color: #108ee9;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-inner {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #fff;
|
||||||
|
-webkit-transition: all .3s;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
|
||||||
|
background-color: #108ee9;
|
||||||
|
border-color: #108ee9;
|
||||||
|
}
|
||||||
|
u-tree-checkbox-disabled .u-tree-checkbox-inner {
|
||||||
|
border-color: #d9d9d9 !important;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
top: 5px;
|
||||||
|
width: 8px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-disabled .u-tree-checkbox-inner {
|
||||||
|
border-color: #d9d9d9 !important;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-disabled.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
|
||||||
|
-webkit-animation-name: none;
|
||||||
|
animation-name: none;
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-disabled .u-tree-checkbox-inner:after {
|
||||||
|
-webkit-animation-name: none;
|
||||||
|
animation-name: none;
|
||||||
|
border-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
|
||||||
|
-webkit-transform: rotate(45deg) scale(1);
|
||||||
|
-ms-transform: rotate(45deg) scale(1);
|
||||||
|
transform: rotate(45deg) scale(1);
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 1px;
|
||||||
|
display: table;
|
||||||
|
width: 5px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
||||||
|
transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
||||||
|
}
|
||||||
|
.u-tree-checkbox-inner:after {
|
||||||
|
-webkit-transform: rotate(45deg) scale(0);
|
||||||
|
-ms-transform: rotate(45deg) scale(0);
|
||||||
|
transform: rotate(45deg) scale(0);
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 1px;
|
||||||
|
display: table;
|
||||||
|
width: 5px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
||||||
|
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
||||||
|
}
|
||||||
|
.u-tree {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.u-tree li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 7px 0;
|
||||||
|
list-style: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.u-tree li a[draggable],
|
||||||
|
.u-tree li a[draggable="true"] {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
/* Required to make elements draggable in old WebKit */
|
||||||
|
-khtml-user-drag: element;
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
.u-tree li.drag-over > a[draggable] {
|
||||||
|
background-color: #108ee9;
|
||||||
|
color: white;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.u-tree li.drag-over-gap-top > a[draggable] {
|
||||||
|
border-top: 2px #108ee9 solid;
|
||||||
|
}
|
||||||
|
.u-tree li.drag-over-gap-bottom > a[draggable] {
|
||||||
|
border-bottom: 2px #108ee9 solid;
|
||||||
|
}
|
||||||
|
.u-tree li.filter-node > a {
|
||||||
|
color: #f50 !important;
|
||||||
|
font-weight: bold!important;
|
||||||
|
}
|
||||||
|
.u-tree li ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 18px;
|
||||||
|
}
|
||||||
|
.u-tree li a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: top;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: all 0.3s ease;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.u-tree li a:hover {
|
||||||
|
background-color: #e7f4fd;
|
||||||
|
}
|
||||||
|
.u-tree li a.u-tree-node-selected {
|
||||||
|
background-color: #cfe8fb;
|
||||||
|
}
|
||||||
|
.u-tree li span.u-checkbox {
|
||||||
|
margin: 2px 4px 0 0;
|
||||||
|
}
|
||||||
|
.u-tree li span.u-tree-switcher,
|
||||||
|
.u-tree li span.u-tree-iconEle {
|
||||||
|
margin: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-switcher-noop {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-roots_open,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-center_open,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-bottom_open,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-noline_open {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-roots_open:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-center_open:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-bottom_open:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-noline_open:after {
|
||||||
|
font-size: 18px;
|
||||||
|
font-size: 7px \9;
|
||||||
|
-webkit-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
transform: scale(0.58333333) rotate(0deg);
|
||||||
|
/* IE6-IE8 */
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||||
|
zoom: 1;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'uf';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\e639";
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 4px;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: -webkit-transform .3s ease;
|
||||||
|
transition: -webkit-transform .3s ease;
|
||||||
|
transition: transform .3s ease;
|
||||||
|
transition: transform .3s ease, -webkit-transform .3s ease;
|
||||||
|
}
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-roots_open:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-center_open:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-bottom_open:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-noline_open:after {
|
||||||
|
-webkit-filter: none;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-roots_open:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-center_open:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-bottom_open:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-noline_open:after {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-roots_close,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-center_close,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-bottom_close,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-noline_close {
|
||||||
|
position: relative;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
||||||
|
}
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-roots_close:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-center_close:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-noline_close:after {
|
||||||
|
font-size: 18px;
|
||||||
|
font-size: 7px \9;
|
||||||
|
-webkit-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
transform: scale(0.58333333) rotate(0deg);
|
||||||
|
/* IE6-IE8 */
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||||
|
zoom: 1;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'uf';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\e639";
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 4px;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: -webkit-transform .3s ease;
|
||||||
|
transition: -webkit-transform .3s ease;
|
||||||
|
transition: transform .3s ease;
|
||||||
|
transition: transform .3s ease, -webkit-transform .3s ease;
|
||||||
|
}
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-roots_close:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-center_close:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-noline_close:after {
|
||||||
|
-webkit-filter: none;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-roots_close:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-center_close:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
|
||||||
|
:root .u-tree li span.u-tree-switcher.u-tree-noline_close:after {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-roots_close:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-center_close:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-bottom_close:after,
|
||||||
|
.u-tree li span.u-tree-switcher.u-tree-noline_close:after {
|
||||||
|
-webkit-transform: rotate(270deg) scale(0.6);
|
||||||
|
-ms-transform: rotate(270deg) scale(0.6);
|
||||||
|
transform: rotate(270deg) scale(0.6);
|
||||||
|
}
|
||||||
|
.u-tree-child-tree {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.u-tree-child-tree-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.u-tree-treenode-disabled > span,
|
||||||
|
.u-tree-treenode-disabled > a,
|
||||||
|
.u-tree-treenode-disabled > a span {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.u-tree-icon__open {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.u-tree-icon__close {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.u-motion-collapse {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.u-motion-collapse-active {
|
||||||
|
-webkit-transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,383 @@
|
||||||
|
import React, { PropTypes } from 'react';
|
||||||
|
import assign from 'object-assign';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import Animate from 'rc-animate';
|
||||||
|
import { browser } from './util';
|
||||||
|
|
||||||
|
const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : '';
|
||||||
|
const ieOrEdge = /.*(IE|Edge).+/.test(browserUa);
|
||||||
|
// const uaArray = browserUa.split(' ');
|
||||||
|
// const gtIE8 = uaArray.length !== 2 || uaArray[0].indexOf('IE') === -1 || Number(uaArray[1]) > 8;
|
||||||
|
|
||||||
|
const defaultTitle = '---';
|
||||||
|
|
||||||
|
class TreeNode extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
[
|
||||||
|
'onExpand',
|
||||||
|
'onCheck',
|
||||||
|
'onContextMenu',
|
||||||
|
'onMouseEnter',
|
||||||
|
'onMouseLeave',
|
||||||
|
'onDragStart',
|
||||||
|
'onDragEnter',
|
||||||
|
'onDragOver',
|
||||||
|
'onDragLeave',
|
||||||
|
'onDrop',
|
||||||
|
'onDragEnd',
|
||||||
|
].forEach((m) => {
|
||||||
|
this[m] = this[m].bind(this);
|
||||||
|
});
|
||||||
|
this.state = {
|
||||||
|
dataLoading: false,
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if (!this.props.root._treeNodeInstances) {
|
||||||
|
this.props.root._treeNodeInstances = [];
|
||||||
|
}
|
||||||
|
this.props.root._treeNodeInstances.push(this);
|
||||||
|
}
|
||||||
|
// shouldComponentUpdate(nextProps) {
|
||||||
|
// if (!nextProps.expanded) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
|
||||||
|
onCheck() {
|
||||||
|
this.props.root.onCheck(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSelect() {
|
||||||
|
this.props.root.onSelect(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseEnter(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onMouseEnter(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onMouseLeave(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onContextMenu(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.root.onContextMenu(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragStart(e) {
|
||||||
|
// console.log('dragstart', this.props.eventKey, e);
|
||||||
|
// e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: true,
|
||||||
|
});
|
||||||
|
this.props.root.onDragStart(e, this);
|
||||||
|
try {
|
||||||
|
// ie throw error
|
||||||
|
// firefox-need-it
|
||||||
|
e.dataTransfer.setData('text/plain', '');
|
||||||
|
} finally {
|
||||||
|
// empty
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnter(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragEnter(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragOver(e) {
|
||||||
|
// todo disabled
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragOver(e, this);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragLeave(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.root.onDragLeave(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDrop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
});
|
||||||
|
this.props.root.onDrop(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDragEnd(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.setState({
|
||||||
|
dragNodeHighlight: false,
|
||||||
|
});
|
||||||
|
this.props.root.onDragEnd(e, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onExpand() {
|
||||||
|
const callbackPromise = this.props.root.onExpand(this);
|
||||||
|
if (callbackPromise && typeof callbackPromise === 'object') {
|
||||||
|
const setLoading = (dataLoading) => {
|
||||||
|
this.setState({ dataLoading });
|
||||||
|
};
|
||||||
|
setLoading(true);
|
||||||
|
callbackPromise.then(() => {
|
||||||
|
setLoading(false);
|
||||||
|
}, () => {
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// keyboard event support
|
||||||
|
onKeyDown(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSwitcher(props, expandedState) {
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const switcherCls = {
|
||||||
|
[`${prefixCls}-switcher`]: true,
|
||||||
|
};
|
||||||
|
if (!props.showLine) {
|
||||||
|
switcherCls[`${prefixCls}-noline_${expandedState}`] = true;
|
||||||
|
} else if (props.pos === '0-0') {
|
||||||
|
switcherCls[`${prefixCls}-roots_${expandedState}`] = true;
|
||||||
|
} else {
|
||||||
|
switcherCls[`${prefixCls}-center_${expandedState}`] = !props.last;
|
||||||
|
switcherCls[`${prefixCls}-bottom_${expandedState}`] = props.last;
|
||||||
|
}
|
||||||
|
if (props.disabled) {
|
||||||
|
switcherCls[`${prefixCls}-switcher-disabled`] = true;
|
||||||
|
return <span className={classNames(switcherCls)}></span>;
|
||||||
|
}
|
||||||
|
return <span className={classNames(switcherCls)} onClick={this.onExpand}></span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCheckbox(props) {
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const checkboxCls = {
|
||||||
|
[`${prefixCls}-checkbox`]: true,
|
||||||
|
};
|
||||||
|
if (props.checked) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-checked`] = true;
|
||||||
|
} else if (props.halfChecked) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-indeterminate`] = true;
|
||||||
|
}
|
||||||
|
let customEle = null;
|
||||||
|
if (typeof props.checkable !== 'boolean') {
|
||||||
|
customEle = props.checkable;
|
||||||
|
}
|
||||||
|
if (props.disabled || props.disableCheckbox) {
|
||||||
|
checkboxCls[`${prefixCls}-checkbox-disabled`] = true;
|
||||||
|
return <span ref="checkbox" className={classNames(checkboxCls)}>{customEle}</span>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span ref="checkbox"
|
||||||
|
className={classNames(checkboxCls) }
|
||||||
|
onClick={this.onCheck}
|
||||||
|
>{customEle}</span>);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderChildren(props) {
|
||||||
|
const renderFirst = this.renderFirst;
|
||||||
|
this.renderFirst = 1;
|
||||||
|
let transitionAppear = true;
|
||||||
|
if (!renderFirst && props.expanded) {
|
||||||
|
transitionAppear = false;
|
||||||
|
}
|
||||||
|
const children = props.children;
|
||||||
|
let newChildren = children;
|
||||||
|
if (children &&
|
||||||
|
(children.type === TreeNode ||
|
||||||
|
Array.isArray(children) &&
|
||||||
|
children.every((item) => {
|
||||||
|
return item.type === TreeNode;
|
||||||
|
}))) {
|
||||||
|
const cls = {
|
||||||
|
[`${props.prefixCls}-child-tree`]: true,
|
||||||
|
[`${props.prefixCls}-child-tree-open`]: props.expanded,
|
||||||
|
};
|
||||||
|
if (props.showLine) {
|
||||||
|
cls[`${props.prefixCls}-line`] = !props.last;
|
||||||
|
}
|
||||||
|
const animProps = {};
|
||||||
|
if (props.openTransitionName) {
|
||||||
|
animProps.transitionName = props.openTransitionName;
|
||||||
|
} else if (typeof props.openAnimation === 'object') {
|
||||||
|
animProps.animation = assign({}, props.openAnimation);
|
||||||
|
if (!transitionAppear) {
|
||||||
|
delete animProps.animation.appear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
newChildren = (
|
||||||
|
<Animate {...animProps}
|
||||||
|
showProp="data-expanded"
|
||||||
|
transitionAppear={transitionAppear}
|
||||||
|
component=""
|
||||||
|
>
|
||||||
|
{!props.expanded ? null : <ul className={classNames(cls)} data-expanded={props.expanded}>
|
||||||
|
{React.Children.map(children, (item, index) => {
|
||||||
|
return props.root.renderTreeNode(item, index, props.pos);
|
||||||
|
}, props.root)}
|
||||||
|
</ul>}
|
||||||
|
</Animate>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return newChildren;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
const prefixCls = props.prefixCls;
|
||||||
|
const expandedState = props.expanded ? 'open' : 'close';
|
||||||
|
let iconState = expandedState;
|
||||||
|
|
||||||
|
let canRenderSwitcher = true;
|
||||||
|
const content = props.title;
|
||||||
|
let newChildren = this.renderChildren(props);
|
||||||
|
if (!newChildren || newChildren === props.children) {
|
||||||
|
// content = newChildren;
|
||||||
|
newChildren = null;
|
||||||
|
if (!props.loadData || props.isLeaf) {
|
||||||
|
canRenderSwitcher = false;
|
||||||
|
iconState = 'docu';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// For performance, does't render children into dom when `!props.expanded` (move to Animate)
|
||||||
|
// if (!props.expanded) {
|
||||||
|
// newChildren = null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
const iconEleCls = {
|
||||||
|
[`${prefixCls}-iconEle`]: true,
|
||||||
|
[`${prefixCls}-icon_loading`]: this.state.dataLoading,
|
||||||
|
[`${prefixCls}-icon__${iconState}`]: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectHandle = () => {
|
||||||
|
const icon = (props.showIcon || props.loadData && this.state.dataLoading) ?
|
||||||
|
<span className={classNames(iconEleCls)}></span> : null;
|
||||||
|
const title = <span className={`${prefixCls}-title`}>{content}</span>;
|
||||||
|
const wrap = `${prefixCls}-node-content-wrapper`;
|
||||||
|
const domProps = {
|
||||||
|
className: `${wrap} ${wrap}-${iconState === expandedState ? iconState : 'normal'}`,
|
||||||
|
};
|
||||||
|
if (!props.disabled) {
|
||||||
|
if (props.selected || !props._dropTrigger && this.state.dragNodeHighlight) {
|
||||||
|
domProps.className += ` ${prefixCls}-node-selected`;
|
||||||
|
}
|
||||||
|
domProps.onClick = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (props.selectable) {
|
||||||
|
this.onSelect();
|
||||||
|
}
|
||||||
|
// not fire check event
|
||||||
|
// if (props.checkable) {
|
||||||
|
// this.onCheck();
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
if (props.onRightClick) {
|
||||||
|
domProps.onContextMenu = this.onContextMenu;
|
||||||
|
}
|
||||||
|
if (props.onMouseEnter) {
|
||||||
|
domProps.onMouseEnter = this.onMouseEnter;
|
||||||
|
}
|
||||||
|
if (props.onMouseLeave) {
|
||||||
|
domProps.onMouseLeave = this.onMouseLeave;
|
||||||
|
}
|
||||||
|
if (props.draggable) {
|
||||||
|
domProps.className += ' draggable';
|
||||||
|
if (ieOrEdge) {
|
||||||
|
// ie bug!
|
||||||
|
domProps.href = '#';
|
||||||
|
}
|
||||||
|
domProps.draggable = true;
|
||||||
|
domProps['aria-grabbed'] = true;
|
||||||
|
domProps.onDragStart = this.onDragStart;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<a ref="selectHandle" title={typeof content === 'string' ? content : ''} {...domProps}>
|
||||||
|
{icon}{title}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const liProps = {};
|
||||||
|
if (props.draggable) {
|
||||||
|
liProps.onDragEnter = this.onDragEnter;
|
||||||
|
liProps.onDragOver = this.onDragOver;
|
||||||
|
liProps.onDragLeave = this.onDragLeave;
|
||||||
|
liProps.onDrop = this.onDrop;
|
||||||
|
liProps.onDragEnd = this.onDragEnd;
|
||||||
|
}
|
||||||
|
|
||||||
|
let disabledCls = '';
|
||||||
|
let dragOverCls = '';
|
||||||
|
if (props.disabled) {
|
||||||
|
disabledCls = `${prefixCls}-treenode-disabled`;
|
||||||
|
} else if (props.dragOver) {
|
||||||
|
dragOverCls = 'drag-over';
|
||||||
|
} else if (props.dragOverGapTop) {
|
||||||
|
dragOverCls = 'drag-over-gap-top';
|
||||||
|
} else if (props.dragOverGapBottom) {
|
||||||
|
dragOverCls = 'drag-over-gap-bottom';
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterCls = props.filterTreeNode(this) ? 'filter-node' : '';
|
||||||
|
|
||||||
|
const noopSwitcher = () => {
|
||||||
|
const cls = {
|
||||||
|
[`${prefixCls}-switcher`]: true,
|
||||||
|
[`${prefixCls}-switcher-noop`]: true,
|
||||||
|
};
|
||||||
|
if (props.showLine) {
|
||||||
|
cls[`${prefixCls}-center_docu`] = !props.last;
|
||||||
|
cls[`${prefixCls}-bottom_docu`] = props.last;
|
||||||
|
} else {
|
||||||
|
cls[`${prefixCls}-noline_docu`] = true;
|
||||||
|
}
|
||||||
|
return <span className={classNames(cls)}></span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li {...liProps} ref="li"
|
||||||
|
className={classNames(props.className, disabledCls, dragOverCls, filterCls) }
|
||||||
|
>
|
||||||
|
{canRenderSwitcher ? this.renderSwitcher(props, expandedState) : noopSwitcher()}
|
||||||
|
{props.checkable ? this.renderCheckbox(props) : null}
|
||||||
|
{selectHandle()}
|
||||||
|
{newChildren}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TreeNode.isTreeNode = 1;
|
||||||
|
|
||||||
|
TreeNode.propTypes = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
disableCheckbox: PropTypes.bool,
|
||||||
|
expanded: PropTypes.bool,
|
||||||
|
isLeaf: PropTypes.bool,
|
||||||
|
root: PropTypes.object,
|
||||||
|
onSelect: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
TreeNode.defaultProps = {
|
||||||
|
title: defaultTitle,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TreeNode;
|
||||||
|
|
@ -0,0 +1,363 @@
|
||||||
|
|
||||||
|
$treePrefixCls: 'u-tree';
|
||||||
|
.#{$treePrefixCls} {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: 0;
|
||||||
|
.draggable {
|
||||||
|
color: #333;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
/* Required to make elements draggable in old WebKit */
|
||||||
|
-khtml-user-drag: element;
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
&.drag-over {
|
||||||
|
> .draggable {
|
||||||
|
background-color: #316ac5;
|
||||||
|
color: white;
|
||||||
|
border: 1px #316ac5 solid;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-top {
|
||||||
|
> .draggable {
|
||||||
|
border-top: 2px blue solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-bottom {
|
||||||
|
> .draggable {
|
||||||
|
border-bottom: 2px blue solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-node {
|
||||||
|
> .#{$treePrefixCls}-node-content-wrapper {
|
||||||
|
color: #a60000!important;
|
||||||
|
font-weight: bold!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 18px;
|
||||||
|
&.#{$treePrefixCls}-line {
|
||||||
|
background: url("https://t.alipayobjects.com/images/T13BtfXl0mXXXXXXXX.gif") 0 0 repeat-y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.#{$treePrefixCls}-node-content-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 3px 0 0;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 17px;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
&.#{$treePrefixCls}-switcher,
|
||||||
|
&.#{$treePrefixCls}-checkbox,
|
||||||
|
&.#{$treePrefixCls}-iconEle {
|
||||||
|
line-height: 16px;
|
||||||
|
margin-right: 2px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
background-color: transparent;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: scroll;
|
||||||
|
background-image: url("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png");
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-icon_loading {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
background: url(https://t.alipayobjects.com/images/rmsweb/T1YxhiXgJbXXXXXXXX.gif) no-repeat scroll 0 0 transparent;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-switcher {
|
||||||
|
&.#{$treePrefixCls}-switcher-noop {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-roots_open {
|
||||||
|
background-position: -93px -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-roots_close {
|
||||||
|
background-position: -75px -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-center_open {
|
||||||
|
background-position: -92px -18px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-center_close {
|
||||||
|
background-position: -74px -18px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-bottom_open {
|
||||||
|
background-position: -92px -36px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-bottom_close {
|
||||||
|
background-position: -74px -36px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-noline_open {
|
||||||
|
background-position: -92px -72px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-noline_close {
|
||||||
|
background-position: -74px -72px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-center_docu {
|
||||||
|
background-position: -56px -18px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-bottom_docu {
|
||||||
|
background-position: -56px -36px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-noline_docu {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-checkbox {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
margin: 0 3px;
|
||||||
|
background-position: 0 0;
|
||||||
|
&-checked {
|
||||||
|
background-position: -14px 0;
|
||||||
|
}
|
||||||
|
&-indeterminate {
|
||||||
|
background-position: -14px -28px;
|
||||||
|
}
|
||||||
|
&-disabled {
|
||||||
|
background-position: 0 -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-checkbox-checked.#{$treePrefixCls}-checkbox-disabled {
|
||||||
|
background-position: -14px -56px;
|
||||||
|
}
|
||||||
|
&.#{$treePrefixCls}-checkbox-indeterminate.#{$treePrefixCls}-checkbox-disabled {
|
||||||
|
position: relative;
|
||||||
|
background: #ccc;
|
||||||
|
border-radius: 3px;
|
||||||
|
&::after {
|
||||||
|
content: ' ';
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
position: absolute;
|
||||||
|
left: 3px;
|
||||||
|
top: 5px;
|
||||||
|
width: 5px;
|
||||||
|
height: 0;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-child-tree {
|
||||||
|
display: none;
|
||||||
|
&-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-treenode-disabled {
|
||||||
|
>span,
|
||||||
|
>a,
|
||||||
|
>a span {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-node-selected {
|
||||||
|
background-color: #ffe6b0;
|
||||||
|
border: 1px #ffb951 solid;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&-icon__open {
|
||||||
|
margin-right: 2px;
|
||||||
|
background-position: -110px -16px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
&-icon__close {
|
||||||
|
margin-right: 2px;
|
||||||
|
background-position: -110px 0;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
&-icon__docu {
|
||||||
|
margin-right: 2px;
|
||||||
|
background-position: -110px -32px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$tree-prefix-cls: "ant-tree";
|
||||||
|
$primary-color: '#108ee9';
|
||||||
|
$highlight-color: '#f50';
|
||||||
|
$font-size-base: '12px';
|
||||||
|
//.antCheckboxFn($checkbox-prefix-cls: "ant-tree-checkbox");
|
||||||
|
|
||||||
|
.#{$tree-prefix-cls} {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 7px 0;
|
||||||
|
list-style: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: 0;
|
||||||
|
a[draggable],
|
||||||
|
a[draggable="true"] {
|
||||||
|
user-select: none;
|
||||||
|
/* Required to make elements draggable in old WebKit */
|
||||||
|
-khtml-user-drag: element;
|
||||||
|
-webkit-user-drag: element;
|
||||||
|
}
|
||||||
|
&.drag-over {
|
||||||
|
> a[draggable] {
|
||||||
|
background-color: $primary-color;
|
||||||
|
color: white;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-top {
|
||||||
|
> a[draggable] {
|
||||||
|
border-top: 2px $primary-color solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.drag-over-gap-bottom {
|
||||||
|
> a[draggable] {
|
||||||
|
border-bottom: 2px $primary-color solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-node {
|
||||||
|
> a {
|
||||||
|
color: $highlight-color!important;
|
||||||
|
font-weight: bold!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 0 18px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: top;
|
||||||
|
color: $text-color;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
&:hover {
|
||||||
|
background-color: tint($primary-color, 90%);
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-node-selected {
|
||||||
|
background-color: tint($primary-color, 80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
&.#{$tree-prefix-cls}-checkbox {
|
||||||
|
margin: 2px 4px 0 0;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-switcher,
|
||||||
|
&.#{$tree-prefix-cls}-iconEle {
|
||||||
|
margin: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0 none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-icon_loading {
|
||||||
|
&:after {
|
||||||
|
display: inline-block;
|
||||||
|
animation: loadingCircle 1s infinite linear;
|
||||||
|
color: $primary-color;
|
||||||
|
font-family: 'uf';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\e6ae";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-switcher {
|
||||||
|
&.#{$tree-prefix-cls}-switcher-noop {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-roots_open,
|
||||||
|
&.#{$tree-prefix-cls}-center_open,
|
||||||
|
&.#{$tree-prefix-cls}-bottom_open,
|
||||||
|
&.#{$tree-prefix-cls}-noline_open {
|
||||||
|
//@include antTreeSwitcherIcon;
|
||||||
|
}
|
||||||
|
&.#{$tree-prefix-cls}-roots_close,
|
||||||
|
&.#{$tree-prefix-cls}-center_close,
|
||||||
|
&.#{$tree-prefix-cls}-bottom_close,
|
||||||
|
&.#{$tree-prefix-cls}-noline_close {
|
||||||
|
//@include antTreeSwitcherIcon;
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
|
||||||
|
&:after {
|
||||||
|
transform: rotate(270deg) scale(0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-child-tree {
|
||||||
|
display: none;
|
||||||
|
&-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-treenode-disabled {
|
||||||
|
>span,
|
||||||
|
>a,
|
||||||
|
>a span {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-icon__open {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
&-icon__close {
|
||||||
|
margin-right: 2px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin antTreeSwitcherIcon {
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
font-size: 12px;
|
||||||
|
-webkit-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-transform: scale(0.58333333) rotate(0deg);
|
||||||
|
transform: scale(0.58333333) rotate(0deg);
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||||
|
zoom: 1;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'anticon';
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
content: "\E606";
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 4px;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: -webkit-transform .3s ease;
|
||||||
|
transition: -webkit-transform .3s ease;
|
||||||
|
transition: transform .3s ease;
|
||||||
|
transition: transform .3s ease, -webkit-transform .3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
import React,{PropTypes,Component} from 'react';
|
||||||
|
import RcTree from './Tree';
|
||||||
|
import TreeNode from './TreeNode';
|
||||||
|
import animation from './openAnimation';
|
||||||
|
|
||||||
|
const AntTreeNodeProps ={
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
disableCheckbox: PropTypes.bool,
|
||||||
|
title: PropTypes.oneOfType([
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.node
|
||||||
|
]),
|
||||||
|
key: PropTypes.string,
|
||||||
|
isLeaf: PropTypes.bool
|
||||||
|
}
|
||||||
|
|
||||||
|
export class AntTreeNode extends Component {
|
||||||
|
render() {
|
||||||
|
return <AntTreeNode {...this.props} />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AntTreeNode.AntTreeNodeProps = AntTreeNodeProps;
|
||||||
|
|
||||||
|
const TreeProps ={
|
||||||
|
showLine: PropTypes.bool,
|
||||||
|
className: PropTypes.string,
|
||||||
|
/** 是否支持多选 */
|
||||||
|
multiple: PropTypes.bool,
|
||||||
|
/** 是否自动展开父节点 */
|
||||||
|
autoExpandParent: PropTypes.bool,
|
||||||
|
/** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
|
||||||
|
checkStrictly: PropTypes.bool,
|
||||||
|
/** 是否支持选中 */
|
||||||
|
checkable: PropTypes.bool,
|
||||||
|
/** 默认展开所有树节点 */
|
||||||
|
defaultExpandAll: PropTypes.bool,
|
||||||
|
/** 默认展开指定的树节点 */
|
||||||
|
defaultExpandedKeys: PropTypes.array,
|
||||||
|
/** （受控）展开指定的树节点 */
|
||||||
|
expandedKeys: PropTypes.array,
|
||||||
|
/** （受控）选中复选框的树节点 */
|
||||||
|
checkedKeys: PropTypes.oneOfType([
|
||||||
|
PropTypes.array,
|
||||||
|
PropTypes.object
|
||||||
|
]),
|
||||||
|
/** 默认选中复选框的树节点 */
|
||||||
|
defaultCheckedKeys: PropTypes.array,
|
||||||
|
/** （受控）设置选中的树节点 */
|
||||||
|
selectedKeys: PropTypes.array,
|
||||||
|
/** 默认选中的树节点 */
|
||||||
|
defaultSelectedKeys: PropTypes.array,
|
||||||
|
/** 展开/收起节点时触发 */
|
||||||
|
onExpand: PropTypes.func,
|
||||||
|
/** 点击复选框触发 */
|
||||||
|
onCheck: PropTypes.func,
|
||||||
|
/** 点击树节点触发 */
|
||||||
|
onSelect: PropTypes.func,
|
||||||
|
/** filter some AntTreeNodes as you need. it should return true */
|
||||||
|
filterAntTreeNode: PropTypes.func,
|
||||||
|
/** 异步加载数据 */
|
||||||
|
loadData: PropTypes.func,
|
||||||
|
/** 响应右键点击 */
|
||||||
|
onRightClick: PropTypes.func,
|
||||||
|
/** 设置节点可拖拽（IE>8）*/
|
||||||
|
draggable: PropTypes.bool,
|
||||||
|
/** 开始拖拽时调用 */
|
||||||
|
onDragStart: PropTypes.func,
|
||||||
|
/** dragenter 触发时调用 */
|
||||||
|
onDragEnter: PropTypes.func,
|
||||||
|
/** dragover 触发时调用 */
|
||||||
|
onDragOver: PropTypes.func,
|
||||||
|
/** dragleave 触发时调用 */
|
||||||
|
onDragLeave: PropTypes.func,
|
||||||
|
/** drop 触发时调用 */
|
||||||
|
onDrop: PropTypes.func,
|
||||||
|
style: React.CSSProperties,
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
filterTreeNode: PropTypes.func
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultProps = {
|
||||||
|
prefixCls: 'u-tree',
|
||||||
|
checkable: false,
|
||||||
|
showIcon: false,
|
||||||
|
openAnimation: animation,
|
||||||
|
}
|
||||||
|
|
||||||
|
class Tree extends Component{
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const props = this.props;
|
||||||
|
let checkable = props.checkable;
|
||||||
|
return (
|
||||||
|
<RcTree
|
||||||
|
{...props}
|
||||||
|
checkable={checkable ? (<span className={`${props.prefixCls}-checkbox-inner`} />) : checkable }
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</RcTree>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Tree.TreeNode = TreeNode;
|
||||||
|
Tree.TreeProps = TreeProps;
|
||||||
|
Tree.defaultProps = defaultProps;
|
||||||
|
export default Tree;
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import cssAnimation from 'css-animation';
|
||||||
|
|
||||||
|
function animate(node, show, done) {
|
||||||
|
let height;
|
||||||
|
return cssAnimation(node, 'u-motion-collapse', {
|
||||||
|
start() {
|
||||||
|
if (!show) {
|
||||||
|
node.style.height = `${node.offsetHeight}px`;
|
||||||
|
} else {
|
||||||
|
height = node.offsetHeight;
|
||||||
|
node.style.height = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
active() {
|
||||||
|
node.style.height = `${show ? height : 0}px`;
|
||||||
|
},
|
||||||
|
end() {
|
||||||
|
node.style.height = '';
|
||||||
|
done();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const animation = {
|
||||||
|
enter(node, done) {
|
||||||
|
return animate(node, true, done);
|
||||||
|
},
|
||||||
|
leave(node, done) {
|
||||||
|
return animate(node, false, done);
|
||||||
|
},
|
||||||
|
appear(node, done) {
|
||||||
|
return animate(node, true, done);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default animation;
|
||||||
|
|
@ -0,0 +1,286 @@
|
||||||
|
/* eslint no-loop-func: 0*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export function browser(navigator) {
|
||||||
|
let tem;
|
||||||
|
const ua = navigator.userAgent;
|
||||||
|
let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
|
||||||
|
if (/trident/i.test(M[1])) {
|
||||||
|
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
|
||||||
|
return `IE ${tem[1] || ''}`;
|
||||||
|
}
|
||||||
|
if (M[1] === 'Chrome') {
|
||||||
|
tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
|
||||||
|
if (tem) return tem.slice(1).join(' ').replace('OPR', 'Opera');
|
||||||
|
}
|
||||||
|
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
|
||||||
|
tem = ua.match(/version\/(\d+)/i);
|
||||||
|
if (tem) {
|
||||||
|
M.splice(1, 1, tem[1]);
|
||||||
|
}
|
||||||
|
return M.join(' ');
|
||||||
|
}
|
||||||
|
|
||||||
|
// export function getOffset(el) {
|
||||||
|
// const obj = el.getBoundingClientRect();
|
||||||
|
// return {
|
||||||
|
// left: obj.left + document.body.scrollLeft,
|
||||||
|
// top: obj.top + document.body.scrollTop,
|
||||||
|
// width: obj.width,
|
||||||
|
// height: obj.height
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // iscroll offset
|
||||||
|
// offset = function (el) {
|
||||||
|
// var left = -el.offsetLeft,
|
||||||
|
// top = -el.offsetTop;
|
||||||
|
|
||||||
|
// // jshint -W084
|
||||||
|
// while (el = el.offsetParent) {
|
||||||
|
// left -= el.offsetLeft;
|
||||||
|
// top -= el.offsetTop;
|
||||||
|
// }
|
||||||
|
// // jshint +W084
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// left: left,
|
||||||
|
// top: top
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
/* eslint-disable */
|
||||||
|
export function getOffset(ele) {
|
||||||
|
let doc, win, docElem, rect;
|
||||||
|
|
||||||
|
if (!ele.getClientRects().length) {
|
||||||
|
return { top: 0, left: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
rect = ele.getBoundingClientRect();
|
||||||
|
|
||||||
|
if (rect.width || rect.height) {
|
||||||
|
doc = ele.ownerDocument;
|
||||||
|
win = doc.defaultView;
|
||||||
|
docElem = doc.documentElement;
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: rect.top + win.pageYOffset - docElem.clientTop,
|
||||||
|
left: rect.left + win.pageXOffset - docElem.clientLeft
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return rect;
|
||||||
|
}
|
||||||
|
/* eslint-enable */
|
||||||
|
|
||||||
|
function getChildrenlength(children) {
|
||||||
|
let len = 1;
|
||||||
|
if (Array.isArray(children)) {
|
||||||
|
len = children.length;
|
||||||
|
}
|
||||||
|
return len;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSiblingPosition(index, len, siblingPosition) {
|
||||||
|
if (len === 1) {
|
||||||
|
siblingPosition.first = true;
|
||||||
|
siblingPosition.last = true;
|
||||||
|
} else {
|
||||||
|
siblingPosition.first = index === 0;
|
||||||
|
siblingPosition.last = index === len - 1;
|
||||||
|
}
|
||||||
|
return siblingPosition;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function loopAllChildren(childs, callback, parent) {
|
||||||
|
const loop = (children, level, _parent) => {
|
||||||
|
const len = getChildrenlength(children);
|
||||||
|
React.Children.forEach(children, (item, index) => {
|
||||||
|
const pos = `${level}-${index}`;
|
||||||
|
if (item.props.children && item.type && item.type.isTreeNode) {
|
||||||
|
loop(item.props.children, pos, { node: item, pos });
|
||||||
|
}
|
||||||
|
callback(item, index, pos, item.key || pos, getSiblingPosition(index, len, {}), _parent);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
loop(childs, 0, parent);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isInclude(smallArray, bigArray) {
|
||||||
|
return smallArray.every((ii, i) => {
|
||||||
|
return ii === bigArray[i];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// console.log(isInclude(['0', '1'], ['0', '10', '1']));
|
||||||
|
|
||||||
|
|
||||||
|
// arr.length === 628, use time: ~20ms
|
||||||
|
export function filterParentPosition(arr) {
|
||||||
|
const levelObj = {};
|
||||||
|
arr.forEach((item) => {
|
||||||
|
const posLen = item.split('-').length;
|
||||||
|
if (!levelObj[posLen]) {
|
||||||
|
levelObj[posLen] = [];
|
||||||
|
}
|
||||||
|
levelObj[posLen].push(item);
|
||||||
|
});
|
||||||
|
const levelArr = Object.keys(levelObj).sort();
|
||||||
|
for (let i = 0; i < levelArr.length; i++) {
|
||||||
|
if (levelArr[i + 1]) {
|
||||||
|
levelObj[levelArr[i]].forEach(ii => {
|
||||||
|
for (let j = i + 1; j < levelArr.length; j++) {
|
||||||
|
levelObj[levelArr[j]].forEach((_i, index) => {
|
||||||
|
if (isInclude(ii.split('-'), _i.split('-'))) {
|
||||||
|
levelObj[levelArr[j]][index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
levelObj[levelArr[j]] = levelObj[levelArr[j]].filter(p => p);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let nArr = [];
|
||||||
|
levelArr.forEach(i => {
|
||||||
|
nArr = nArr.concat(levelObj[i]);
|
||||||
|
});
|
||||||
|
return nArr;
|
||||||
|
}
|
||||||
|
// console.log(filterParentPosition(
|
||||||
|
// ['0-2', '0-3-3', '0-10', '0-10-0', '0-0-1', '0-0', '0-1-1', '0-1']
|
||||||
|
// ));
|
||||||
|
|
||||||
|
|
||||||
|
function stripTail(str) {
|
||||||
|
const arr = str.match(/(.+)(-[^-]+)$/);
|
||||||
|
let st = '';
|
||||||
|
if (arr && arr.length === 3) {
|
||||||
|
st = arr[1];
|
||||||
|
}
|
||||||
|
return st;
|
||||||
|
}
|
||||||
|
function splitPosition(pos) {
|
||||||
|
return pos.split('-');
|
||||||
|
}
|
||||||
|
|
||||||
|
export function handleCheckState(obj, checkedPositionArr, checkIt) {
|
||||||
|
// console.log(stripTail('0-101-000'));
|
||||||
|
let objKeys = Object.keys(obj);
|
||||||
|
// let s = Date.now();
|
||||||
|
objKeys.forEach((i, index) => {
|
||||||
|
const iArr = splitPosition(i);
|
||||||
|
let saved = false;
|
||||||
|
checkedPositionArr.forEach((_pos) => {
|
||||||
|
// 设置子节点，全选或全不选
|
||||||
|
const _posArr = splitPosition(_pos);
|
||||||
|
if (iArr.length > _posArr.length && isInclude(_posArr, iArr)) {
|
||||||
|
obj[i].halfChecked = false;
|
||||||
|
obj[i].checked = checkIt;
|
||||||
|
objKeys[index] = null;
|
||||||
|
}
|
||||||
|
if (iArr[0] === _posArr[0] && iArr[1] === _posArr[1]) {
|
||||||
|
// 如果
|
||||||
|
saved = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!saved) {
|
||||||
|
objKeys[index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// TODO: 循环 2470000 次耗时约 1400 ms。 性能瓶颈！
|
||||||
|
// console.log(Date.now()-s, checkedPositionArr.length * objKeys.length);
|
||||||
|
objKeys = objKeys.filter(i => i); // filter non null;
|
||||||
|
|
||||||
|
for (let pIndex = 0; pIndex < checkedPositionArr.length; pIndex++) {
|
||||||
|
// 循环设置父节点的 选中 或 半选状态
|
||||||
|
const loop = (__pos) => {
|
||||||
|
const _posLen = splitPosition(__pos).length;
|
||||||
|
if (_posLen <= 2) { // e.g. '0-0', '0-1'
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let sibling = 0;
|
||||||
|
let siblingChecked = 0;
|
||||||
|
const parentPosition = stripTail(__pos);
|
||||||
|
objKeys.forEach((i /* , index*/) => {
|
||||||
|
const iArr = splitPosition(i);
|
||||||
|
if (iArr.length === _posLen && isInclude(splitPosition(parentPosition), iArr)) {
|
||||||
|
sibling++;
|
||||||
|
if (obj[i].checked) {
|
||||||
|
siblingChecked++;
|
||||||
|
const _i = checkedPositionArr.indexOf(i);
|
||||||
|
if (_i > -1) {
|
||||||
|
checkedPositionArr.splice(_i, 1);
|
||||||
|
if (_i <= pIndex) {
|
||||||
|
pIndex--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (obj[i].halfChecked) {
|
||||||
|
siblingChecked += 0.5;
|
||||||
|
}
|
||||||
|
// objKeys[index] = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// objKeys = objKeys.filter(i => i); // filter non null;
|
||||||
|
const parent = obj[parentPosition];
|
||||||
|
// sibling 不会等于0
|
||||||
|
// 全不选 - 全选 - 半选
|
||||||
|
if (siblingChecked === 0) {
|
||||||
|
parent.checked = false;
|
||||||
|
parent.halfChecked = false;
|
||||||
|
} else if (siblingChecked === sibling) {
|
||||||
|
parent.checked = true;
|
||||||
|
parent.halfChecked = false;
|
||||||
|
} else {
|
||||||
|
parent.halfChecked = true;
|
||||||
|
parent.checked = false;
|
||||||
|
}
|
||||||
|
loop(parentPosition);
|
||||||
|
};
|
||||||
|
loop(checkedPositionArr[pIndex], pIndex);
|
||||||
|
}
|
||||||
|
// console.log(Date.now()-s, objKeys.length, checkIt);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCheck(treeNodesStates) {
|
||||||
|
const halfCheckedKeys = [];
|
||||||
|
const checkedKeys = [];
|
||||||
|
const checkedNodes = [];
|
||||||
|
const checkedNodesPositions = [];
|
||||||
|
Object.keys(treeNodesStates).forEach((item) => {
|
||||||
|
const itemObj = treeNodesStates[item];
|
||||||
|
if (itemObj.checked) {
|
||||||
|
checkedKeys.push(itemObj.key);
|
||||||
|
checkedNodes.push(itemObj.node);
|
||||||
|
checkedNodesPositions.push({ node: itemObj.node, pos: item });
|
||||||
|
} else if (itemObj.halfChecked) {
|
||||||
|
halfCheckedKeys.push(itemObj.key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
halfCheckedKeys, checkedKeys, checkedNodes, checkedNodesPositions, treeNodesStates,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getStrictlyValue(checkedKeys, halfChecked) {
|
||||||
|
if (halfChecked) {
|
||||||
|
return { checked: checkedKeys, halfChecked };
|
||||||
|
}
|
||||||
|
return checkedKeys;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function arraysEqual(a, b) {
|
||||||
|
if (a === b) return true;
|
||||||
|
if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (a.length !== b.length) return false;
|
||||||
|
|
||||||
|
// If you don't care about the order of the elements inside
|
||||||
|
// the array, you should sort both arrays here.
|
||||||
|
|
||||||
|
for (let i = 0; i < a.length; ++i) {
|
||||||
|
if (a[i] !== b[i]) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {shallow, mount, render} from 'enzyme';
|
||||||
|
import {expect} from 'chai';
|
||||||
|
import Tree from '../src/index';
|
||||||
Loading…
Reference in New Issue