updated dist example

mac-s-g · mac-s-g · commit 79e3f1b1b288 · 2017-05-04T12:29:24.000-07:00
diff --git a/src/html/test-dist.html.template b/src/html/test-dist.html.template
@@ -20,26 +20,37 @@
         color: #aaa;
         font-size:14px;
         font-family: monospace;
+        margin-left: 6px;
+      }
+      .react-json-view {
+        padding: 4px 6px;
+        border-radius: 3px;
       }
     </style>
   </head>
   <body>
   <div id="app-container">
     <div class="code-comment">// example 1: JSON object</div>
-    <div id="example1"></div>
+    <div class="example" id="example1"></div>
     <br />
     <div class="code-comment">// example 2: array input</div>
-    <div id="example2"></div>
+    <div class="example" id="example2"></div>
     <br />
     <div class="code-comment">// example 3: collapsed by default</div>
-    <div id="example3"></div>
+    <div class="example" id="example3"></div>
+    <br />
+    <div class="code-comment">// example 4: base-16 monokai theme</div>
+    <div class="example" id="example4"></div>
+    <br />
+    <div class="code-comment">// example 5: base-16 solarized theme</div>
+    <div class="example" id="example5"></div>
   </div>
   <script src="https://unpkg.com/react@15/dist/react.js"></script>
   <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
   <script type="text/javascript" src="./main.js"></script>
   <style>
     #app-container>div{
-      margin-bottom: 15px;
+      margin-bottom: 5px;
     }
   </style>
   <script type="text/javascript">
@@ -111,6 +122,54 @@
         jsonView3.render(),
         document.getElementById('example3')
       );
+
+      /*-----------EXAMPLE 4-----------*/
+      //some test JSON
+      var test_json = {
+          test: 'this is a test string',
+          another_sibling: 42,
+          how_will_array_do: [1, 2, 3, 'test'],
+          how_will_floats_do: -2.757,
+          parent: {
+              sibling1: true,
+              sibling2: false,
+              sibling3: null,
+              'last-sibling': {
+                  grand_child: NaN,
+                  'grand-child-func': (a) => {
+                      let b = a*a;
+                      return b;
+                  }
+              }
+          },
+          string_number: "1234"
+      };
+
+      // reactJsonView is a global variable
+      var jsonView4 = new reactJsonView.default({
+        src: test_json,
+        theme: 'monokai',
+        name: 'monokai-theme'
+      });
+      ReactDOM.render(
+        jsonView4.render(),
+        document.getElementById('example4')
+      );
+
+      /*-----------EXAMPLE 5-----------*/
+      //an example ARRAY
+      var test_array = [
+        'you can also display arrays!', 1, 2, 3, {'pretty_cool': true}
+      ];
+      var jsonView5 = new reactJsonView.default({
+        src: test_array,
+        name: 'solarized-array',
+        theme: 'solarized'
+      });
+      ReactDOM.render(
+        jsonView5.render(),
+        document.getElementById('example5')
+      );
   </script>
   </body>
 </html>
