feat(examples): add reactive json editor component

thi-ng · Feb 3, 2018 · b524145 · b524145
1 parent 10c119b
commit b524145
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/examples/json-components/index.html b/examples/json-components/index.html
@@ -17,7 +17,7 @@
 
         .item {
             display: inline-block;
-            width: 25%;
+            width: 45%;
             margin: 5px;
             padding: 10px;
             background: #eee;
@@ -50,6 +50,19 @@
             color: #fff;
             text-decoration: none;
         }
+
+        #container {
+            display: grid;
+            grid-template-columns: 33% auto;
+            grid-template-rows: auto;
+            grid-column-gap: 20px;
+        }
+
+        textarea {
+            width: 100%;
+            height: 100%;
+            font: 12px/1.2 monospace;
+        }
     </style>
 </head>
 

diff --git a/examples/json-components/src/index.ts b/examples/json-components/src/index.ts
@@ -2,7 +2,7 @@ import { isFunction } from "@thi.ng/checks/is-function";
 import { start } from "@thi.ng/hiccup-dom";
 
 // some dummy JSON records
-export const db = [
+let db = [
     {
         meta: {
             author: {
@@ -74,5 +74,24 @@ const item = componentFromSpec([
     }
 ]);
 
+// simple text area editor for our JSON data
+const editor = (() => {
+    let body = JSON.stringify(db, null, 2);
+    return [
+        "textarea",
+        {
+            oninput: (e) => {
+                try {
+                    db = JSON.parse(e.target.value);
+                } catch (_) { }
+            }
+        },
+        body
+    ];
+})();
+
 // start UI
-start(document.getElementById("app"), ["div", ...db.map(item)]);
+start(
+    document.getElementById("app"),
+    () => ["div#container", ["div", editor], ["div", ...db.map(item)]]
+);