Add add tree button to demo page.

jverghese · Feb 7, 2015 · 3cba3c4 · 3cba3c4
1 parent 0d6a6a2
commit 3cba3c4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -2,11 +2,20 @@
   <head>
     <title>TreeBrowser Component</title>
     <link rel="stylesheet" href="css/tree-browser.css">
+    <style type="text/css">
+      /* Demo Styles */
+      .tree-container {
+        border: 1px solid black;
+      }
+    </style>
   </head>
   <body>
     <h1>Tree Browser</h1>
     <button id="changeDataButton">Change Data</button>
-    <div id="treeContainer"></div>
+    <button id="addTreeButton">Add tree</button>
+    <p></p>
+    <div class="tree-container" id="treeContainer"></div>
+    <div class="tree-container" id="treeContainer2"></div>
     <!-- include react -->
     <script src="lib/react/react.js"></script>
     <script src="lib/react/JSXTransformer.js"></script>
@@ -23,10 +32,18 @@ <h1>Tree Browser</h1>
 
       $("#changeDataButton").click(function() {
         $.getJSON("sample-data/tree2.json")
-                .then(function(data) {
-                  treeBrowser.setData(data);
-                });
+          .then(function(data) {
+            treeBrowser.setData(data);
+          });
       });
+
+      $("#addTreeButton").click(function() {
+        $(this).hide();
+        $.getJSON("sample-data/tree2.json")
+          .then(function(data) {
+            TreeBrowser.create('#treeContainer2', data);
+          });
+      })
     </script>
   </body>
 </html>
diff --git a/src/tree-browser.jsx b/src/tree-browser.jsx
@@ -31,7 +31,7 @@ var TreeBrowser = (function () {
      */
     var TreeBrowser = React.createClass({
         getInitialState: function () {
-            return { data: [] };
+            return this.props.data;
         },
         /**
          * Method to update tree data after render.
@@ -140,7 +140,7 @@ var TreeBrowser = (function () {
          * @return {TreeBrowser}
          */
         create: function(cssSelector, data) {
-            data = data || {};
+            data = { data: data || [] };
             return React.render(
                 <TreeBrowser data={data} />,
                 $(cssSelector)[0]