Select implementation

kendaganio · Feb 27, 2018 · a32fc19 · a32fc19
1 parent f823dd9
commit a32fc19
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 35 deletions.
diff --git a/dist/toguro.js b/dist/toguro.js
diff --git a/dist/toguro.js.map b/dist/toguro.js.map
diff --git a/index.html b/index.html
@@ -1,22 +1,21 @@
 <!DOCTYPE html>
 <html>
-
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <title></title>
-    <script src="./dist/toguro.js"></script>
 
     <link rel="stylesheet" href="../corgi/css/corgi.css" type="text/css" media="screen" charset="utf-8">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/themes/prism.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/CodeFlask.js/0.2.0/codeflask.min.css" />
 
+    <script src="./dist/toguro.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/prism.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/CodeFlask.js/0.1.1/codeflask.min.js"></script>
 
     <style type="text/css" media="screen">
       #left-panel { 
-        padding-top: 50px;
+        padding-top: 20px;
         background: #eee;
         border-right: 2px dashed gray;
       }
@@ -53,43 +52,49 @@
             "type": "integer",
             "title": "Age",
           },
-          "description": {
-            "type": "string",
-            "title": "Description",
-          },
-          "done": {
+          "remember_me": {
             "type": "boolean",
-            "title": "Done",
+            "title": "Remember me",
           },
-          "rating": {
-            "type": "integer",
-            "title": "Rating",
+          "favorite_color": {
+            "type": "string",
+            "title": "Color",
+            "enum": [
+              "Red",
+              "Blue",
+              "Green"
+            ]
           }
         },
         "required": [
           "name"
         ]
       }
 
-      document.querySelector('#schema').innerHTML = JSON.stringify(schema, null, 2)
+      var el = document.getElementById('form-mount')
+      var schemaEl = document.querySelector('#schema')
+      schemaEl.innerHTML = JSON.stringify(schema, null, 2)
 
       var flask = new CodeFlask;
       flask.run('#schema', {language: 'json'});
+      flask.onUpdate(function(code) {
+        toguro.setSchema(JSON.parse(code))
+        toguro.renderTo(el)
+      });
 
+      // business stuff
 
       var submitHandler = function(formData) {
         alert(JSON.stringify(formData, undefined, 2))
       }
 
-      var el = document.getElementById('form-mount')
       var toguro = new Toguro({
         schema: schema,
         submit: submitHandler
       });
 
       toguro.renderTo(el)
 
-      var generate = document.querySelector("#generate")
     </script>
   </body>
 </html>
diff --git a/src/dom.js b/src/dom.js
@@ -1,6 +1,8 @@
 const htmlTags = [
   'input',
   'label',
+  'select',
+  'option',
   'div',
   'form',
   'fieldset'

diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,28 @@
 import renderers from './renderers'
 import dom from './dom'
 
-const whatInputType = {
-  'string': 'text',
-  'boolean': 'checkbox',
-  'integer': 'number'
+const whatInputType = props => {
+  if (props.type === 'string' && props.enum) {
+    return 'select'
+  } else {
+    const lel = {
+      'string': 'text',
+      'boolean': 'checkbox',
+      'integer': 'number'
+    }
+    return lel[props.type]
+  }
 }
 
 const createFormGroup = (key, value) => {
-  const type = whatInputType[value.type]
-  const rendered = renderers(type)({...value, key, type})
-
-  return dom.div({class: 'form-group'}, rendered)
+  const type = whatInputType(value)
+  const props = {
+    ...value,
+    type,
+    key
+  }
+  const renderer = renderers(type)
+  return dom.div({class: 'form-group'}, renderer(props))
 }
 
 export class Toguro {
@@ -20,6 +31,10 @@ export class Toguro {
     this.submit = options.submit
   }
 
+  setSchema (schema) {
+    this.schema = schema
+  }
+
   render () {
     let { properties } = this.schema
     const elements = Object.keys(properties).map(key => createFormGroup(key, properties[key]))
@@ -41,6 +56,7 @@ export class Toguro {
   renderTo (el) {
     // eslint-disable-next-line
     if (!(el instanceof Element)) { throw new Error('el should be a valid HTML Element') }
+    el.innerHTML = ''
     el.appendChild(this.render())
   }
 }
diff --git a/src/renderers.js b/src/renderers.js
@@ -34,10 +34,24 @@ function checkbox (props) {
   )
 }
 
+function select (props) {
+  return dom.fragment([
+    dom.label(labelProps(props),
+      props.title
+    ),
+    dom.select(inputProps(props),
+      dom.option({value: ''}, '-- Choose one ---'),
+      ...props.enum.map(e => dom.option({value: e}, e))
+    )
+  ])
+}
+
 export default (type) => {
   switch (type) {
     case 'checkbox':
       return checkbox
+    case 'select':
+      return select
     default:
       return generic
   }