render schemas inside types to support JSON schema version 3

mohsen1 · Mar 28, 2017 · e5fe293 · e5fe293
1 parent b61a7a3
commit e5fe293
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 10 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/bundle.min.js b/dist/bundle.min.js
diff --git a/dist/style.css b/dist/style.css
@@ -1,7 +1,7 @@
 /*!
  * json-schema-view-js
  * https://github.com/mohsen1/json-schema-view-js#readme
- * Version: 0.4.1 - 2016-12-26T23:51:39.556Z
+ * Version: 1.0.0 - 2017-03-28T13:46:23.580Z
  * License: MIT
  */
 

diff --git a/dist/style.min.css b/dist/style.min.css
diff --git a/src/index.js b/src/index.js
@@ -30,6 +30,9 @@ export default class JSONSchemaView {
     this.options = options;
     this.isCollapsed = open <= 0;
 
+    // Guard against empty schemas
+    if (!this.schema) return '';
+
     // if schema is an empty object which means any JOSN
     this.isAny = typeof schema === 'object' &&
       !Array.isArray(schema) &&
@@ -39,6 +42,11 @@ export default class JSONSchemaView {
     // Determine if a schema is an array
     this.isArray = !this.isAny && this.schema && this.schema.type === 'array';
 
+    // Determine if a schema is a collection of types (an Array with at least one object in it)
+    this.isCollectionOfTypes = this.schema &&
+      Array.isArray(this.schema.type) &&
+      this.schema.type.reduce((item) => typeof item === 'object');
+
     this.isObject = this.schema &&
       (this.schema.type === 'object' ||
        this.schema.properties ||
@@ -47,7 +55,7 @@ export default class JSONSchemaView {
        this.schema.allOf);
 
     // Determine if a schema is a primitive
-    this.isPrimitive = !this.isAny && !this.isArray && !this.isObject;
+    this.isPrimitive = !this.isAny && !this.isArray && !this.isObject && !this.isCollectionOfTypes;
 
     //
     this.showToggle = this.schema.description ||
@@ -72,6 +80,13 @@ export default class JSONSchemaView {
         }
       });
     }
+
+    // Create a list of types as a string for Collections of types
+    if(this.isCollectionOfTypes) {
+      this.typeList = this.schema.type.reduce((prev, curr) => {
+        return prev.type + ', ' + curr.type;
+      });
+    }
   }
 
   /*
@@ -190,7 +205,7 @@ export default class JSONSchemaView {
       `}
 
       <!-- Object -->
-      ${_if(!this.isPrimitive && !this.isArray && !this.isAny)`
+      ${_if(!this.isPrimitive && !this.isArray && !this.isAny && !this.isCollectionOfTypes)`
         <div class="object">
           <a class="title"><span
             class="toggle-handle"></span>${this.schema.title || ''} <span
@@ -218,6 +233,20 @@ export default class JSONSchemaView {
           `}
         </div>
       `}
+
+      <!-- Type Array -->
+      ${_if(this.isCollectionOfTypes)`
+        <div class="collectionOfTypes">
+          <a class="title"><span class="toggle-handle"></span>${this.schema.title || ''}</a>
+          <span class="type">${this.typeList}</span>
+          <div class="inner">
+            ${_if(this.schema.description && !this.isCollapsed)`
+              <div class="description">${this.schema.description}</div>
+            `}
+             <!-- children go here -->
+          </div>
+        </div>
+      `}
 `.replace(/\s*\n/g, '\n').replace(/(\<\!\-\-).+/g, '').trim();
   }
 
@@ -312,6 +341,15 @@ export default class JSONSchemaView {
       inner.appendChild(view.render());
     }
 
+    if (this.isCollectionOfTypes) {
+      const openLevel = this.open - 1;
+      this.schema.type.forEach((type) => {
+        const view = new JSONSchemaView(type, openLevel);
+        inner.appendChild(view.render());
+      });
+
+    }
+
     if (typeof this.schema.properties === 'object') {
       Object.keys(this.schema.properties).forEach(propertyName => {
         const property = this.schema.properties[propertyName];

diff --git a/test/spec.js b/test/spec.js
@@ -27,6 +27,32 @@ const schema = {
   ]
 };
 
+const v3Schema = {
+  title: 'BloodType',
+  type: [
+    {
+      type: 'object',
+      title: 'BloodType',
+      description: 'Blood type with structured group and RhD',
+      properties: {
+        group: {
+          type: 'string',
+          enum: ['A', 'B', 'AB', 'O']
+        },
+        'RhD': {
+          type: 'string',
+          enum: ['+', '-', 'Null']
+        }
+      }
+    },
+    {
+      type: 'string',
+      description: 'Blood type in a string',
+      enum: ['A+', 'A-', 'O+', 'O-', 'AB+', 'AB-', 'A', 'B', 'AB', 'O']
+    }
+  ]
+};
+
 describe('rendering', ()=> {
   describe('blood type', ()=> {
     it('renders collapsed with 0 for open', ()=> {
@@ -45,4 +71,19 @@ describe('rendering', ()=> {
       expect(el.querySelector('.inner.oneOf').innerHTML.trim()).not.to.equal('');
     });
   });
+  describe('blood type JSON Schema version 3', () => {
+    it('renders multiple types inside type', () => {
+      const view = new JSONSchemaView(v3Schema, 2);
+      const el = view.render();
+
+      expect(el.querySelector('.type').innerHTML.trim()).to.equal('object, string');
+    });
+
+    it('renders schemas inside collectionOfTypes', () => {
+      const view = new JSONSchemaView(v3Schema, 2);
+      const el = view.render();
+
+      expect(el.querySelectorAll('.collectionOfTypes .inner > .json-schema-view').length).to.equal(2);
+    })
+  });
 });