Skip to content
This repository was archived by the owner on Jul 15, 2019. It is now read-only.

Commit 0cdf5c8

Browse files
jonmilesjonmiles
committed
Merge branch 'develop'
2 parents 0ba9651 + 921f1dd commit 0cdf5c8

File tree

14 files changed

+1039
-2
lines changed

14 files changed

+1039
-2
lines changed

‎.bowerrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "public/bower_components"
3+
}

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
public/bower_components/

‎Gruntfile.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
module.exports = function(grunt) {
2+
grunt.initConfig({
3+
pkg: grunt.file.readJSON('package.json'), // the package file to use
4+
5+
react: {
6+
single_file_output: {
7+
files: {
8+
'public/js/react-bootstrap-treeview.js': 'src/react-bootstrap-treeview.jsx'
9+
}
10+
}
11+
},
12+
13+
watch: {
14+
files: [/*'tests/*.js', 'tests/*.html', */'src/**'],
15+
tasks: ['default']
16+
},
17+
18+
copy: {
19+
main: {
20+
files: [
21+
// copy src to example
22+
{ expand: true, cwd: 'src/', src: '*.css', dest: 'public/css/' },
23+
// { expand: true, cwd: 'src/js', src: '*', dest: 'public/js/' }
24+
]
25+
}
26+
}
27+
});
28+
29+
// load up your plugins
30+
grunt.loadNpmTasks('grunt-react');
31+
grunt.loadNpmTasks('grunt-contrib-watch');
32+
grunt.loadNpmTasks('grunt-contrib-copy');
33+
34+
// register one or more task lists (you should ALWAYS have a "default" task list)
35+
grunt.registerTask('default', ['react', 'copy', 'watch']);
36+
};

‎README.md‎

Lines changed: 321 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,322 @@
1-
# React Bootstrap Tree View
1+
# React.js Bootstrap Tree View
22

3-
Coming soon!!!
3+
A prototype version of my jQuery based [Tree View for Twitter Bootstrap](https://github.com/jonmiles/bootstrap-treeview)
4+
5+
![Bootstrap Tree View Default](https://raw.github.com/jonmiles/react-bootstrap-treeview/master/screenshot/default.PNG)
6+
7+
## Dependencies
8+
9+
The project has very few dependencies, but you will need the following.
10+
- [React v0.13.1](https://facebook.github.io/react/)
11+
- [Bootstrap v3.3.4 (>= 3.0.0)](http://getbootstrap.com/)
12+
13+
## Getting Started
14+
15+
### Install
16+
17+
Npm:
18+
```javascript
19+
$ npm install react-bootstrap-treeview
20+
```
21+
22+
Bower:
23+
```javascript
24+
$ bower install react-bootstrap-treeview
25+
```
26+
27+
Manual:
28+
> Old fashion, downloadable files can be found [here](//github.com/jonmiles/bootstrap-treeview/releases)
29+
30+
31+
### Usage
32+
33+
Include the correct styles, it's mainly just bootstrap but we add a few tweaks as well.
34+
35+
```html
36+
<!-- Required CSS -->
37+
<link href="path/to/bootstrap.css" rel="stylesheet">
38+
<link href="path/to/react-bootstrap-treeview.css" rel="stylesheet">
39+
```
40+
41+
Add required libraries.
42+
43+
```html
44+
<!-- Required JavaScript -->
45+
<script src="path/to/react.js"></script>
46+
<script src="path/to/react-bootstrap-tree.js"></script>
47+
```
48+
49+
Then, a basic initialization would look like.
50+
51+
```javascript
52+
React.render(
53+
<TreeView data={data} />,
54+
document.getElementById('treeview')
55+
);
56+
```
57+
58+
### Example
59+
60+
Putting it all together a minimal implementation might look like this.
61+
62+
```html
63+
<html>
64+
<head>
65+
<title>React + Bootstrap Tree View</title>
66+
<link href="path/to/bootstrap.css" rel="stylesheet">
67+
<link href="path/to/react-bootstrap-treeview.css" rel="stylesheet">
68+
</head>
69+
<body>
70+
<div class="container">
71+
<h1>React + Bootstrap Tree View</h1>
72+
<br/>
73+
<div class="row">
74+
<div id="treeview"></div>
75+
</div>
76+
</div>
77+
<script src="path/to/react.js"></script>
78+
<script src="path/to/JSXTransformer.js"></script>
79+
<script src="path/to/react-bootstrap-treeview.js"></script>
80+
<script type="text/jsx">
81+
React.render(
82+
<TreeView data={data} />,
83+
document.getElementById('treeview')
84+
);
85+
</script>
86+
</body>
87+
</html>
88+
```
89+
90+
91+
## Data Structure
92+
93+
In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects.
94+
95+
Example
96+
97+
```javascript
98+
var tree = [
99+
{
100+
text: "Parent 1",
101+
nodes: [
102+
{
103+
text: "Child 1",
104+
nodes: [
105+
{
106+
text: "Grandchild 1"
107+
},
108+
{
109+
text: "Grandchild 2"
110+
}
111+
]
112+
},
113+
{
114+
text: "Child 2"
115+
}
116+
]
117+
},
118+
{
119+
text: "Parent 2"
120+
},
121+
{
122+
text: "Parent 3"
123+
},
124+
{
125+
text: "Parent 4"
126+
},
127+
{
128+
text: "Parent 5"
129+
}
130+
];
131+
```
132+
133+
At the lowest level a tree node is a represented as a simple JavaScript object. This one required property `text` will build you a tree.
134+
135+
```javascript
136+
{
137+
text: "Node 1"
138+
}
139+
```
140+
141+
If you want to do more, here's the full node specification
142+
143+
```javascript
144+
{
145+
text: "Node 1",
146+
icon: "glyphicon glyphicon-stop",
147+
color: "#000000",
148+
backColor: "#FFFFFF",
149+
href: "#node-1",
150+
state: {
151+
expanded: true,
152+
selected: true
153+
},
154+
tags: ['available'],
155+
nodes: [
156+
{},
157+
...
158+
]
159+
}
160+
```
161+
162+
### Node Properties
163+
164+
The following properties are defined to allow node level overrides, such as node specific icons, colours and tags.
165+
166+
#### text
167+
`String` `Mandatory`
168+
169+
The text value displayed for a given tree node, typically to the right of the nodes icon.
170+
171+
#### icon
172+
`String` `Optional`
173+
174+
The icon displayed on a given node, typically to the left of the text.
175+
176+
For simplicity we directly leverage [Bootstraps Glyphicons support](http://getbootstrap.com/components/#glyphicons) and as such you should provide both the base class and individual icon class separated by a space.
177+
178+
By providing the base class you retain full control over the icons used. If you want to use your own then just add your class to this icon field.
179+
180+
#### color
181+
`String` `Optional`
182+
183+
The foreground color used on a given node, overrides global color option.
184+
185+
#### backColor
186+
`String` `Optional`
187+
188+
The background color used on a given node, overrides global color option.
189+
190+
#### href
191+
`String` `Optional`
192+
193+
Used in conjunction with global enableLinks option to specify anchor tag URL on a given node.
194+
195+
#### state
196+
`Object` `Optional`
197+
198+
Describes a node's initial state.
199+
200+
#### state.expanded
201+
`Boolean` `Default: false`
202+
203+
Whether or not a node is expanded i.e. open. Takes precedence over global option levels.
204+
205+
#### state.selected
206+
`Boolean` `Default: false`
207+
208+
Whether or not a node is selected.
209+
210+
#### tags
211+
`Array of Strings` `Optional`
212+
213+
Used in conjunction with global showTags option to add additional information to the right of each node; using [Bootstrap Badges](http://getbootstrap.com/components/#badges)
214+
215+
216+
## Options
217+
218+
Options allow you to customise the treeview's default appearance and behaviour. They are passed to the react component as properties on initialization.
219+
220+
```javascript
221+
// Example: initializing the treeview
222+
// expanded to 5 levels
223+
// with a background color of green
224+
React.render(
225+
<TreeView data={data}
226+
levels={5}
227+
backColor={"green"} />,
228+
document.getElementById('treeview')
229+
);
230+
```
231+
232+
The following is a list of all available options.
233+
234+
#### data
235+
Array of Objects. No default, expects data
236+
237+
This is the core data to be displayed by the tree view.
238+
239+
#### backColor
240+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
241+
242+
Sets the default background color used by all nodes, except when overridden on a per node basis in data.
243+
244+
#### borderColor
245+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
246+
247+
Sets the border color for the component; set showBorder to false if you don't want a visible border.
248+
249+
#### collapseIcon
250+
String, class name(s). Default: "glyphicon glyphicon-minus" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
251+
252+
Sets the icon to be used on a collapsible tree node.
253+
254+
#### color
255+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
256+
257+
Sets the default foreground color used by all nodes, except when overridden on a per node basis in data.
258+
259+
#### emptyIcon
260+
String, class name(s). Default: "glyphicon" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
261+
262+
Sets the icon to be used on a tree node with no child nodes.
263+
264+
#### enableLinks
265+
Boolean. Default: false
266+
267+
Whether or not to present node text as a hyperlink. The href value of which must be provided in the data structure on a per node basis.
268+
269+
#### expandIcon
270+
String, class name(s). Default: "glyphicon glyphicon-plus" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
271+
272+
Sets the icon to be used on an expandable tree node.
273+
274+
#### highlightSelected
275+
Boolean. Default: true
276+
277+
Whether or not to highlight the selected node.
278+
279+
#### levels
280+
Integer. Default: 2
281+
282+
Sets the number of hierarchical levels deep the tree will be expanded to by default.
283+
284+
#### nodeIcon
285+
String, class name(s). Default: "glyphicon glyphicon-stop" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
286+
287+
Sets the default icon to be used on all nodes, except when overridden on a per node basis in data.
288+
289+
#### selectedBackColor
290+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#428bca'.
291+
292+
Sets the background color of the selected node.
293+
294+
#### selectedColor
295+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#FFFFFF'.
296+
297+
Sets the foreground color of the selected node.
298+
299+
#### showBorder
300+
Boolean. Default: true
301+
302+
Whether or not to display a border around nodes.
303+
304+
#### showTags
305+
Boolean. Default: false
306+
307+
Whether or not to display tags to the right of each node. The values of which must be provided in the data structure on a per node basis.
308+
309+
310+
311+
## Copyright and Licensing
312+
Copyright 2013 Jonathan Miles
313+
314+
Licensed under the Apache License, Version 2.0 (the "License");
315+
you may not use this file except in compliance with the License.
316+
You may obtain a copy of the License at <http://www.apache.org/licenses/LICENSE-2.0>
317+
318+
Unless required by applicable law or agreed to in writing, software
319+
distributed under the License is distributed on an "AS IS" BASIS,
320+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
321+
See the License for the specific language governing permissions and
322+
limitations under the License.

0 commit comments

Comments
 (0)