jonmiles · vivian-perez · Apr 16, 2015 · Apr 16, 2015 · Apr 16, 2015 · Apr 16, 2015
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 public/bower_components/
+public/index.html
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,36 +1,52 @@
-module.exports = function(grunt) {
-  grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'), // the package file to use
-
-    react: {
-      single_file_output: {
-        files: {
-          'public/js/react-bootstrap-treeview.js': 'src/react-bootstrap-treeview.jsx'
+module.exports = function (grunt) {
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'), // the package file to use
+
+        react: {
+            single_file_output: {
+                files: {
+                    'dist/js/react-bootstrap-treeview.js': 'src/react-bootstrap-treeview.jsx'
+                }
+            }
+        },
+
+        watch: {
+            files: ['<%= react.single_file_output.files[\'dist/js/react-bootstrap-treeview.js\'] %>', '<%= browserify.main.src %>'],
+            tasks: ['default', 'browserify']
+        },
+
+        copy: {
+            main: {
+                files: [
+                    // copy src to example
+                    {expand: true, cwd: 'src/', src: '*.css', dest: 'dist/css/'},
+                    {expand: true, cwd: 'src/', src: '*.css', dest: 'example/public/css/'}
+                    // { expand: true, cwd: 'src/js', src: '*', dest: 'public/js/' }
+                ]
+            }
+        },
+
+        'browserify': {
+            main: {
+                options: {
+                    debug: true,
+                    transform: ['reactify'],
+                    extensions: ['.jsx']
+                },
+                src: 'example/js/example.js',
+                dest: 'example/public/js/example.js'
+
+            }
+
         }
-      }
-    },
-
-    watch: {
-      files: [/*'tests/*.js', 'tests/*.html', */'src/**'],
-      tasks: ['default']
-    },
-
-    copy: {
-      main: { 
-        files: [
-          // copy src to example
-          { expand: true, cwd: 'src/', src: '*.css', dest: 'public/css/' },
-          // { expand: true, cwd: 'src/js', src: '*', dest: 'public/js/' }
-        ]
-      }
-    }
-  });
-
-  // load up your plugins
-  grunt.loadNpmTasks('grunt-react');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-copy');
-
-  // register one or more task lists (you should ALWAYS have a "default" task list)
-  grunt.registerTask('default', ['react', 'copy', 'watch']);
+    });
+
+    // load up your plugins
+    grunt.loadNpmTasks('grunt-react');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-browserify');
+
+    // register one or more task lists (you should ALWAYS have a "default" task list)
+    grunt.registerTask('default', ['react', 'copy', 'browserify', 'watch']);
 };
diff --git a/README.md b/README.md
@@ -38,12 +38,10 @@ Include the correct styles, it's mainly just bootstrap but we add a few tweaks a
 <link href="path/to/react-bootstrap-treeview.css" rel="stylesheet">
 ```
 
-Add required libraries.
+Require the commonJS TreeView
 
-```html
-<!-- Required JavaScript -->
-<script src="path/to/react.js"></script>
-<script src="path/to/react-bootstrap-tree.js"></script>
+```js
+var TreeView = require('react-bootstrap-treeview');
 ```
 
 Then, a basic initialization would look like.
@@ -55,37 +53,15 @@ React.render(
 );
 ```
 
+Ifyou don't use browserify, include js files in dist folder
+<script src="path/to/react-bootstrap-treeview.js"></script>
+
 ### Example
 
-Putting it all together a minimal implementation might look like this.
+An example can be run via the command:
+grunt
 
-```html
-<html>
-  <head>
-    <title>React + Bootstrap Tree View</title>
-    <link href="path/to/bootstrap.css" rel="stylesheet">
-    <link href="path/to/react-bootstrap-treeview.css" rel="stylesheet">
-  </head>
-  <body>
-    <div class="container">
-      <h1>React + Bootstrap Tree View</h1>
-      <br/>
-      <div class="row">
-        <div id="treeview"></div>
-      </div>
-    </div>
-    <script src="path/to/react.js"></script>
-    <script src="path/to/JSXTransformer.js"></script>
-    <script src="path/to/react-bootstrap-treeview.js"></script>
-    <script type="text/jsx">
-    	React.render(
-				<TreeView data={data} />,
-				document.getElementById('treeview')
-			);
-    </script>
-  </body>
-</html>
-```
+Files are created in example/public folder.
 
 
 ## Data Structure
@@ -276,6 +252,12 @@ Boolean.  Default: true
 
 Whether or not to highlight the selected node.
 
+#### isSelectionExclusive
+Boolean, Default false
+
+If true, when a line is selected, others are unselected
+
+
 #### levels
 Integer. Default: 2
 
@@ -286,6 +268,9 @@ String, class name(s).  Default: "glyphicon glyphicon-stop" as defined by [Boots
 
 Sets the default icon to be used on all nodes, except when overridden on a per node basis in data.
 
+#### onLineClicked
+Function, callback call when a line (node) is clicked
+
 #### selectedBackColor
 String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: '#428bca'.
 
@@ -306,7 +291,23 @@ Boolean.  Default: false
 
 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.
 
+#### treeNodeAttributes
+Object, couples of keys/values ```{key1 : value1, key2 : value2}```
+
+*key:* HTML attribute of the node ```<li>```
 
+*value:* Dynamic data computed from this.props.data
+
+example: 
+```javascript
+    treeNodeAttributes = {'data-foo' : 'bar'}  
+    data = {
+                 text: 'Parent 1',
+                 bar: '1'
+            }
+ ```
+ The node "Parent 1" will have a data-id attribute equals to 1
+ ```html <li data-foo="1" /> Parent 1 </li>```
 
 ## Copyright and Licensing
 Copyright 2013 Jonathan Miles

diff --git a/bower.json b/bower.json
diff --git a/dist/css/react-bootstrap-treeview.css b/dist/css/react-bootstrap-treeview.css
@@ -0,0 +1,20 @@
+
+.treeview .list-group-item {
+    cursor: pointer;
+}
+
+.treeview span:not(.badge) {
+    width: 1rem;
+    height: 1rem;
+}
+
+.treeview span.indent {
+    margin-left: 6px;
+    margin-right: 6px;
+}
+
+.treeview span.icon {
+    margin-left: 0px;
+    margin-right: 6px;
+}
+
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <title>React.js Tree View <i>for Twitter Bootstrap</title>
+      <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
+      <!-- Latest compiled and minified CSS -->
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+
+      <!-- Optional theme -->
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
+
+      <!-- Latest compiled and minified JavaScript -->
+      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    <link href="./css/react-bootstrap-treeview.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
+      <h1>React.js Tree View <i>for Twitter Bootstrap</i></h1>
+      <br/>
+      <div class="row">
+        <div id="treeview"></div>
+      </div>
+    </div>
+    <script src="http://fb.me/react-with-addons-0.13.1.js"></script>
+    <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
+    <script src="./js/react-bootstrap-treeview.js"></script>
+    <script type="text/jsx" src="./js/example.jsx"></script>
+
+  </body>
+</html>