Skip to content

Commit be94039

Browse files
chetoncheton
committed
Merge branch 'dev' of github.com:cheton/react-infinite-tree into dev
2 parents 39f852a + 7e5865f commit be94039

30 files changed

+10700
-425
lines changed

‎README.md

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,16 @@ import 'react-infinite-tree/dist/react-infinite-tree.css';
3333

3434
const data = {
3535
id: 'fruit',
36-
label: 'Fruit',
36+
name: 'Fruit',
3737
children: [{
3838
id: 'apple',
39-
label: 'Apple'
39+
name: 'Apple'
4040
}, {
4141
id: 'banana',
42-
label: 'Banana',
42+
name: 'Banana',
4343
children: [{
4444
id: 'cherry',
45-
label: 'Cherry',
45+
name: 'Cherry',
4646
loadOnDemand: true
4747
}]
4848
}]
@@ -63,17 +63,16 @@ class App extends React.Component {
6363
<InfiniteTree
6464
ref={(c) => this.tree = c.tree}
6565
autoOpen={true}
66-
droppable={true}
6766
loadNodes={(parentNode, done) => {
6867
const suffix = parentNode.id.replace(/(\w)+/, '');
6968
const nodes = [
7069
{
7170
id: 'node1' + suffix,
72-
label: 'Node 1'
71+
name: 'Node 1'
7372
},
7473
{
7574
id: 'node2' + suffix,
76-
label: 'Node 2'
75+
name: 'Node 2'
7776
}
7877
];
7978
setTimeout(() => {
@@ -87,24 +86,18 @@ class App extends React.Component {
8786
}
8887
return true;
8988
}}
90-
onDropNode={(node, e) => {
91-
const source = e.dataTransfer.getData('text');
92-
document.querySelector('#dropped-result').innerHTML = 'Dropped to <b>' + quoteattr(node.label) + '</b>';
93-
}}
9489
onOpenNode={(node) => {
9590
console.log('open node:', node);
9691
}}
9792
onCloseNode={(node) => {
9893
console.log('close node:', node);
9994
}}
100-
onScrollProgress={(progress) => {
101-
document.querySelector('#scrolling-progress').style.width = progress + '%';
102-
}}
10395
onSelect={(node) => {
10496
console.log('select node:', node);
10597
}}
106-
onUpdate={() => {
107-
console.log(this.tree.getSelectedNode());
98+
onContentWillUpdate={() => {
99+
}}
100+
onContentDidUpdate={() => {
108101
}}
109102
/>
110103
</div>

‎dist/react-infinite-tree.css

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,40 @@
1-
/* Change the max-height to suit your needs. */
2-
.infinite-tree-content {
3-
max-height: 400px;
4-
}
51
.infinite-tree-scroll {
62
overflow: auto;
3+
max-height: 400px; /* Change the height to suit your needs. */
4+
}
5+
.infinite-tree-table {
6+
width: 100%;
77
}
88
.infinite-tree-content {
99
outline: 0;
1010
}
11-
.infinite-tree-content .tree-selected.tree-item,
12-
.infinite-tree-content .tree-selected.tree-item:hover {
11+
.infinite-tree-content .infinite-tree-selected.infinite-tree-item,
12+
.infinite-tree-content .infinite-tree-selected.infinite-tree-item:hover {
1313
background: #deecfd;
1414
border: 1px solid #06c;
1515
}
16-
.infinite-tree-content .tree-item {
16+
.infinite-tree-content .infinite-tree-item {
1717
border: 1px solid transparent;
1818
cursor: default;
1919
}
20-
.infinite-tree-content .tree-item:hover {
20+
.infinite-tree-content .infinite-tree-item:hover {
2121
background: #f2fdff;
2222
}
23-
.infinite-tree-content .tree-item.highlight {
24-
border: 1px dotted #ccc;
25-
background-color: #f5f6f7;
26-
}
27-
.infinite-tree-content .tree-node {
23+
.infinite-tree-content .infinite-tree-node {
2824
position: relative;
2925
}
30-
.infinite-tree-content .tree-toggler {
26+
.infinite-tree-content .infinite-tree-toggler {
3127
color: #666;
3228
-webkit-user-select: none;
3329
-moz-user-select: none;
3430
-ms-user-select: none;
3531
user-select: none;
3632
}
37-
.infinite-tree-content .tree-toggler:hover {
33+
.infinite-tree-content .infinite-tree-toggler:hover {
3834
color: #333;
3935
text-decoration: none;
4036
}
41-
.infinite-tree-content .tree-title {
37+
.infinite-tree-content .infinite-tree-title {
4238
cursor: pointer;
4339
-webkit-user-select: none;
4440
-moz-user-select: none;

‎dist/react-infinite-tree.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! react-infinite-tree v0.1.0 | (c) 2016 Cheton Wu <[email protected]> | MIT | https://github.com/cheton/react-infinite-tree */
1+
/*! react-infinite-tree v0.2.0 | (c) 2016 Cheton Wu <[email protected]> | MIT | https://github.com/cheton/react-infinite-tree */
22
exports["InfiniteTree"] =
33
/******/ (function(modules) { // webpackBootstrap
44
/******/ // The module cache
@@ -92,12 +92,11 @@ exports["InfiniteTree"] =
9292
}
9393

9494
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(_class2)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.tree = null, _this.eventHandlers = {
95-
onUpdate: null,
95+
onContentWillUpdate: null,
96+
onContentDidUpdate: null,
9697
onOpenNode: null,
9798
onCloseNode: null,
98-
onSelectNode: null,
99-
onDropNode: null,
100-
onScrollProgress: null
99+
onSelectNode: null
101100
}, _temp), _possibleConstructorReturn(_this, _ret);
102101
}
103102

@@ -122,7 +121,7 @@ exports["InfiniteTree"] =
122121
return;
123122
}
124123

125-
var eventName = lcfirst(key.substr(2)); // e.g. onUpdate -> update
124+
var eventName = lcfirst(key.substr(2)); // e.g. onContentWillUpdate -> contentWillUpdate
126125
_this2.eventHandlers[key] = _this2.props[key];
127126
_this2.tree.on(eventName, _this2.eventHandlers[key]);
128127
});

‎dist/react-infinite-tree.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/app.jsx

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import InfiniteTree from '../src';
33
import rowRenderer from './renderer';
44
import { quoteattr } from './helper';
55
import '../src/index.styl';
6+
import './app.styl';
67
import './animation.styl';
78

89
const generateData = () => {
910
const data = [];
10-
const source = '{"id":"<root>","label":"<root>","props":{"droppable":true},"children":[{"id":"alpha","label":"Alpha","props":{"droppable":true}},{"id":"bravo","label":"Bravo","props":{"droppable":true},"children":[{"id":"charlie","label":"Charlie","props":{"droppable":true},"children":[{"id":"delta","label":"Delta","props":{"droppable":true},"children":[{"id":"echo","label":"Echo","props":{"droppable":true}},{"id":"foxtrot","label":"Foxtrot","props":{"droppable":true}}]},{"id":"golf","label":"Golf","props":{"droppable":true}}]},{"id":"hotel","label":"Hotel","props":{"droppable":true},"children":[{"id":"india","label":"India","props":{"droppable":true},"children":[{"id":"juliet","label":"Juliet","props":{"droppable":true}}]}]},{"id":"kilo","label":"(Load On Demand) Kilo","loadOnDemand":true,"props":{"droppable":true}}]}]}';
11+
const source = '{"id":"<root>","name":"<root>","props":{"droppable":true},"children":[{"id":"alpha","name":"Alpha","props":{"droppable":true}},{"id":"bravo","name":"Bravo","props":{"droppable":true},"children":[{"id":"charlie","name":"Charlie","props":{"droppable":true},"children":[{"id":"delta","name":"Delta","props":{"droppable":true},"children":[{"id":"echo","name":"Echo","props":{"droppable":true}},{"id":"foxtrot","name":"Foxtrot","props":{"droppable":true}}]},{"id":"golf","name":"Golf","props":{"droppable":true}}]},{"id":"hotel","name":"Hotel","props":{"droppable":true},"children":[{"id":"india","name":"India","props":{"droppable":true},"children":[{"id":"juliet","name":"Juliet","props":{"droppable":true}}]}]},{"id":"kilo","name":"(Load On Demand) Kilo","loadOnDemand":true,"props":{"droppable":true}}]}]}';
1112
for (let i = 0; i < 1000; ++i) {
12-
data.push(JSON.parse(source.replace(/"(id|label)":"([^"]*)"/g, '"$1": "$2.' + i + '"')));
13+
data.push(JSON.parse(source.replace(/"(id|name)":"([^"]*)"/g, '"$1": "$2.' + i + '"')));
1314
}
1415
return data;
1516
};
@@ -18,11 +19,11 @@ class App extends React.Component {
1819
tree = null;
1920

2021
updatePreview(node) {
21-
const el = document.querySelector('#preview');
22+
const el = document.querySelector('[data-id="preview"]');
2223
if (node) {
2324
let o = {
2425
id: node.id,
25-
label: node.label,
26+
name: node.name,
2627
children: node.children ? node.children.length : 0,
2728
parent: node.parent ? node.parent.id : null,
2829
state: node.state
@@ -48,17 +49,28 @@ class App extends React.Component {
4849
<InfiniteTree
4950
ref={(c) => this.tree = c.tree}
5051
autoOpen={true}
51-
droppable={true}
52+
droppable={{
53+
hoverClass: 'infinite-tree-drop-hover',
54+
accept: function(opts) {
55+
const { type, draggableTarget, droppableTarget, node } = opts;
56+
return true;
57+
},
58+
drop: function(e, opts) {
59+
const { draggableTarget, droppableTarget, node } = opts;
60+
const source = e.dataTransfer.getData('text');
61+
document.querySelector('[data-id="dropped-result"]').innerHTML = 'Dropped to <b>' + quoteattr(node.name) + '</b>';
62+
}
63+
}}
5264
loadNodes={(parentNode, done) => {
5365
const suffix = parentNode.id.replace(/(\w)+/, '');
5466
const nodes = [
5567
{
5668
id: 'node1' + suffix,
57-
label: 'Node 1'
69+
name: 'Node 1'
5870
},
5971
{
6072
id: 'node2' + suffix,
61-
label: 'Node 2'
73+
name: 'Node 2'
6274
}
6375
];
6476
setTimeout(() => {
@@ -75,13 +87,13 @@ class App extends React.Component {
7587
}}
7688
onDropNode={(node, e) => {
7789
const source = e.dataTransfer.getData('text');
78-
document.querySelector('#dropped-result').innerHTML = 'Dropped to <b>' + quoteattr(node.label) + '</b>';
90+
document.querySelector('[data-id="dropped-result"]').innerHTML = 'Dropped to <b>' + quoteattr(node.name) + '</b>';
7991
}}
80-
onUpdate={() => {
81-
this.updatePreview(this.tree.getSelectedNode());
92+
onContentWillUpdate={() => {
93+
console.log('onContentWillUpdate');
8294
}}
83-
onScrollProgress={(progress) => {
84-
document.querySelector('#scrolling-progress').style.width = progress + '%';
95+
onContentDidUpdate={() => {
96+
this.updatePreview(this.tree.getSelectedNode());
8597
}}
8698
onSelect={(node) => {
8799
this.updatePreview(node);

‎examples/app.styl

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import 'nib'
2+
3+
#classic {
4+
.preview {
5+
font-family: Consolas;
6+
font-size: 14px;
7+
font-weight: bold;
8+
white-space: pre-wrap;
9+
background-color: #282c34;
10+
border: solid 1px #ccc;
11+
color: #9197a3;
12+
padding: 20px;
13+
min-height: 400px;
14+
}
15+
.progress-bar {
16+
-webkit-transition: none;
17+
-moz-transition: none;
18+
-ms-transition: none;
19+
-o-transition: none;
20+
transition: none;
21+
}
22+
.dropped-result {
23+
font-size: 16px;
24+
line-height: 42px;
25+
}
26+
.tree {
27+
border: 1px solid #ccc;
28+
background-color: #fff;
29+
}
30+
31+
.infinite-tree-item.infinite-tree-drop-hover {
32+
border: 1px dotted #ccc;
33+
background-color: #f5f6f7;
34+
}
35+
.infinite-tree-toggler {
36+
text-align: center;
37+
margin-right: 5px;
38+
}
39+
.infinite-tree-folder-icon {
40+
width: 19px;
41+
}
42+
.infinite-tree-folder-icon:first-child {
43+
margin-left: 20px;
44+
}
45+
.infinite-tree-folder-icon:before {
46+
margin-right: 5px;
47+
}
48+
49+
.infinite-tree-node .count {
50+
position: absolute;
51+
right: 4px;
52+
padding: 0 8px;
53+
height: 18px;
54+
line-height: 18px;
55+
background-color: #D8DFEA;
56+
color: #3B5998;
57+
font-style: normal;
58+
font-weight: bold;
59+
text-align: center;
60+
border-radius: 2px;
61+
}
62+
.infinite-tree-scroll {
63+
overflow: auto;
64+
max-height: 400px;
65+
}
66+
}

0 commit comments

Comments
 (0)