Merge pull request jdorn#759 from mia-platform/align-with-json-editor-master

feat: Option "max_depth" and "use_default_values"

Author: schmunk42

CHANGELOG.md

@@ -1,3 +1,7 @@
+### Unreleased
+- added option `max_depth` used to specify the maximum depth of level's schema that have to be rendered
+- added option `use_default_values` used to specify if default values based on the "type" of the property have to be used
+
 ### 2.3.0-dev
 
 - Removed codeception container, use `codeceptjs` as node-dev module

README.md

@@ -276,6 +276,16 @@ Here are all the available options:
     <td>Preserve value at Move Up or Down.(No value is selected automatically upon deletion.)</td>
     <td><code>true</code></td>
   </tr>
+  <tr>
+    <td>max_depth</td>
+    <td>Max depth of the nested properties to be rendered of provided json schema. The missing of this option could cause "maximum call stack size exceeded" in case of object properties with circular references. <code>0</code> value means "render all".</td>
+    <td><code>0</code></td>
+  </tr>
+  <tr>
+    <td>use_default_values</td>
+    <td>If true default values based on the "type" of the property will be used</td>
+    <td><code>true</code></td>
+  </tr>
   </tbody>
 </table>
 

config/karma.conf.js

@@ -19,8 +19,8 @@ module.exports = function (config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      './src/core.js': [ 'webpack', 'sourcemap' ], // Same as entrypoint specified in webpack.config.js
-      './tests/unit/**/*.spec.js': [ 'webpack', 'sourcemap']
+      './src/core.js': ['webpack', 'sourcemap'], // Same as entrypoint specified in webpack.config.js
+      './tests/unit/**/*.spec.js': ['webpack', 'sourcemap']
     },
 
     // list of files / patterns to exclude

src/core.js

@@ -32,7 +32,6 @@ export class JSONEditor {
     // eslint-disable-next-line new-cap
     this.theme = new themeClass(this)
     const rules = extend(themeClass.rules, this.getEditorsRules())
-
     if (!this.theme.options.disable_theme_rules) {
       /* Attempt to locate a shadowRoot parent (i.e. in Web Components) */
       const shadowRoot = getShadowParent(this.element)
@@ -207,17 +206,15 @@ export class JSONEditor {
       classname = resolver(schema)
       return classname && JSONEditor.defaults.editors[classname]
     })
-
     if (!classname) throw new Error(`Unknown editor for schema ${JSON.stringify(schema)}`)
     if (!JSONEditor.defaults.editors[classname]) throw new Error(`Unknown editor ${classname}`)
-
     return JSONEditor.defaults.editors[classname]
   }
 
-  createEditor (editorClass, options) {
+  createEditor (editorClass, options, depthCounter = 1) {
     options = extend({}, editorClass.options || {}, options)
     // eslint-disable-next-line new-cap
-    return new editorClass(options, JSONEditor.defaults)
+    return new editorClass(options, JSONEditor.defaults, depthCounter)
   }
 
   onChange () {

src/defaults.js

@@ -287,7 +287,9 @@ function translate (key, variables) {
 /* Default options when initializing JSON Editor */
 const options = {
   upload,
-  prompt_before_delete: true
+  prompt_before_delete: true,
+  use_default_values: true,
+  max_depth: 0
 }
 
 /* This assignment was previously in index.js but makes more sense here */

src/editor.js

@@ -519,6 +519,10 @@ export class AbstractEditor {
     this.parent = null
   }
 
+  isDefaultRequired () {
+    return this.isRequired() || !!this.jsoneditor.options.use_default_values
+  }
+
   getDefault () {
     if (typeof this.schema.default !== 'undefined') {
       return this.schema.default
@@ -534,9 +538,9 @@ export class AbstractEditor {
     if (type && Array.isArray(type)) type = type[0]
 
     if (typeof type === 'string') {
-      if (type === 'number') return 0.0
-      if (type === 'boolean') return false
-      if (type === 'integer') return 0
+      if (type === 'number') return this.isDefaultRequired() ? 0.0 : undefined
+      if (type === 'boolean') return this.isDefaultRequired() ? false : undefined
+      if (type === 'integer') return this.isDefaultRequired() ? 0 : undefined
       if (type === 'string') return ''
       if (type === 'object') return {}
       if (type === 'array') return []

src/editors/multiple.js

@@ -208,7 +208,6 @@ export class MultipleEditor extends AbstractEditor {
           schema.required = this.schema.required.concat(type.required)
         }
       }
-
       this.validators[i] = new Validator(this.jsoneditor, schema, validatorOptions, this.defaults)
     })
 

src/editors/object.js

@@ -2,6 +2,11 @@ import { AbstractEditor } from '../editor.js'
 import { extend, trigger, hasOwnProperty } from '../utilities.js'
 
 export class ObjectEditor extends AbstractEditor {
+  constructor (options, defaults, depth) {
+    super(options, defaults)
+    this.currentDepth = depth
+  }
+
   getDefault () {
     return extend({}, this.schema.default || {})
   }
@@ -385,7 +390,7 @@ export class ObjectEditor extends AbstractEditor {
           parent: this,
           compact: true,
           required: true
-        })
+        }, this.currentDepth + 1)
         this.editors[key].preBuild()
 
         const width = this.editors[key].options.hidden ? 0 : (this.editors[key].options.grid_columns || this.editors[key].getNumColumns())
@@ -956,6 +961,31 @@ export class ObjectEditor extends AbstractEditor {
     }
   }
 
+  getSchemaOnMaxDepth (schema) {
+    return Object.keys(schema).reduce((acc, key) => {
+      switch (key) {
+        case '$ref':
+          return acc
+        case 'properties':
+        case 'items':
+          return {
+            ...acc,
+            [key]: {}
+          }
+        case 'additionalProperties':
+          return {
+            ...acc,
+            [key]: true
+          }
+        default:
+          return {
+            ...acc,
+            [key]: schema[key]
+          }
+      }
+    }, {})
+  }
+
   addObjectProperty (name, prebuildOnly) {
     /* Property is already added */
     if (this.editors[name]) return
@@ -980,12 +1010,14 @@ export class ObjectEditor extends AbstractEditor {
       /* Add the property */
       const editor = this.jsoneditor.getEditorClass(schema)
 
+      const { max_depth: maxDepth } = this.jsoneditor.options
+
       this.editors[name] = this.jsoneditor.createEditor(editor, {
         jsoneditor: this.jsoneditor,
-        schema,
+        schema: !!maxDepth && this.currentDepth >= maxDepth ? this.getSchemaOnMaxDepth(schema) : schema,
         path: `${this.path}.${name}`,
         parent: this
-      })
+      }, this.currentDepth + 1)
       this.editors[name].preBuild()
 
       if (!prebuildOnly) {

src/editors/select.js

@@ -4,9 +4,16 @@ import { extend } from '../utilities.js'
 export class SelectEditor extends AbstractEditor {
   setValue (value, initial) {
     /* Sanitize value before setting it */
-    let sanitized = this.typecast(value || '')
+    let sanitized = this.typecast(value)
 
-    if (!this.enum_values.includes(sanitized)) sanitized = this.enum_values[0]
+    const haveToUseDefaultValue = !!this.jsoneditor.options.use_default_values || typeof this.schema.default !== 'undefined'
+
+    if (
+      !this.enum_values.includes(sanitized) ||
+      (initial && !this.isRequired() && !haveToUseDefaultValue)
+    ) {
+      sanitized = this.enum_values[0]
+    }
 
     if (this.value === sanitized) return
 
@@ -45,6 +52,7 @@ export class SelectEditor extends AbstractEditor {
     if (this.schema.type === 'boolean') return value === 'undefined' || value === undefined ? undefined : !!value
     else if (this.schema.type === 'number') return 1 * value || 0
     else if (this.schema.type === 'integer') return Math.floor(value * 1 || 0)
+    else if (this.schema.enum && value === undefined) return undefined
     return `${value}`
   }
 

tests/fixtures/nested_object.json

@@ -0,0 +1,26 @@
+{
+    "type": "object",
+    "properties": {
+        "foo1": {
+            "type": "object",
+            "properties": {
+                "foo2": {
+                    "type": "object",
+                    "properties": {
+                        "foo3": {
+                            "type": "object",
+                            "properties": {
+                                "foo4": {
+                                    "type": "object",
+                                    "properties": {
+                                        "bar": {"type": "string", "default": "end schema"}
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}