Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aef3c90

Browse files
已修改 examples/src/Demo.js
已修改 examples/src/DemoList.js 已修改 examples/src/demos/demo1.js 已修改 package.json 已修改 src/Tree.js 已修改 src/TreeNode.js Add examples/src/demos/demo2.js Add src/ChildNodesContainer.js
1 parent 51cdc72 commit aef3c90

File tree

8 files changed

+403
-315
lines changed

8 files changed

+403
-315
lines changed

‎examples/src/Demo.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import DemoList from './DemoList';
44
export default class Demo extends Component {
55

66
state = {
7-
current: null
7+
current: DemoList[0]
88
}
99

1010
onDemoChange(item, e) {

‎examples/src/DemoList.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import Demo1 from './demos/demo1';
2+
import Demo2 from './demos/demo2';
23

34
export default [
45
{
56
label: '树形显示',
67
component: Demo1
8+
},
9+
{
10+
label: '服务器加载',
11+
component: Demo2
712
}
813
]

‎examples/src/demos/demo1.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,17 @@ export default class DEMO extends Component {
1919
return store.getChildren(node.id);
2020
}
2121

22-
toggleExpand = () => {
23-
22+
toggleExpand = (node, e, t) => {
23+
node.expanded = !node.expanded;
24+
this.forceUpdate();
25+
//or
26+
// t.toggleExpand()
2427
}
2528

2629
render() {
2730
return (
2831
<NilTree
29-
onNodeDoubleClick={this.toggleExpand}
32+
onNodeClick={this.toggleExpand}
3033
loadData={this.loadData}
3134
showIcon
3235
/>

‎examples/src/demos/demo2.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { Component } from 'react';
2+
import TreeStore from 'xtree-store';
3+
import NilTree from 'nil-tree';
4+
import data from '../data.json';
5+
6+
export default class DEMO extends Component {
7+
8+
dataStore = {}
9+
10+
constructor(props) {
11+
super(props);
12+
13+
this.store = new TreeStore(data, {
14+
simpleData: true
15+
});
16+
17+
}
18+
19+
loadData = node => {
20+
21+
if (this.dataStore[node.id]) return this.dataStore[node.id];
22+
23+
return new Promise(resolve => {
24+
const store = this.store;
25+
setTimeout(() => {
26+
const childs = store.getChildren(node.id);
27+
this.dataStore[node.id] = childs;
28+
resolve(childs)
29+
}, 500);
30+
});
31+
}
32+
33+
toggleExpand = (node, e, t) => {
34+
node.expanded = !node.expanded;
35+
this.forceUpdate();
36+
// or
37+
// t.toggleExpand()
38+
}
39+
40+
render() {
41+
return (
42+
<NilTree
43+
onNodeClick={this.toggleExpand}
44+
loadData={this.loadData}
45+
showIcon
46+
/>
47+
);
48+
}
49+
50+
}

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
"description": "",
55
"main": "index.js",
66
"dependencies": {
7+
"@babel/runtime": "^7.1.2",
8+
"@babel/runtime-corejs2": "^7.1.2",
79
"classnames": "^2.2.6",
810
"prop-types": "^15.6.2",
911
"react": "^16.5.2",
10-
"@babel/runtime": "^7.1.2",
11-
"@babel/runtime-corejs2": "^7.1.2",
12-
"react-dom": "^16.5.2"
12+
"react-dom": "^16.5.2",
13+
"warning": "^4.0.2"
1314
},
1415
"devDependencies": {
1516
"@babel/core": "^7.1.2",

‎src/ChildNodesContainer.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
export default class ChildNodesContainer extends Component {
5+
6+
static propTypes = {
7+
expanded: PropTypes.bool,
8+
};
9+
10+
static defaultProps = {
11+
expanded: false,
12+
};
13+
14+
render() {
15+
const { expanded, children, ...others } = this.props;
16+
17+
return expanded ? <div {...others}>{children()}</div> : null;
18+
}
19+
}

‎src/Tree.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { findDOMNode } from 'react-dom';
33
import PropTypes from 'prop-types';
44
import classNames from 'classnames';
55
import TreeNode from './TreeNode';
6+
import ChildNodesContainer from './ChildNodesContainer';
67

78
const noop = () => { };
89

@@ -20,9 +21,10 @@ export default class Tree extends React.Component {
2021
loadData: null,
2122
showIcon: true,
2223
checkable: false,
24+
maxDepth: 50, //最大层级50
2325
//showLine: false, //自定义支持
2426
//animate: false, //自定义支持
25-
childWrapperComponent: 'div',
27+
childNodesWrapperComponent: ChildNodesContainer,
2628
renderIndentIcons: null,
2729
renderExpanderIcon: null,
2830
renderLoadingIcon: null,
@@ -33,7 +35,6 @@ export default class Tree extends React.Component {
3335
renderNode: null,
3436

3537
//events
36-
3738
onNodeClick: noop,
3839
onNodeDoubleClick: noop,
3940
onNodeContextMenu: noop,
@@ -54,7 +55,8 @@ export default class Tree extends React.Component {
5455
checked: false,
5556
pid: null,
5657
root: true,
57-
depth: 0,
58+
// depth: 0,
59+
relativeDepth: 0,
5860
}
5961
}
6062

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /