feat(map-set-viewer): add rendering support for maps and sets

dev-server/src/index.js

@@ -12,10 +12,10 @@ import JsonViewer from './../../src/js/index'
 // custom big number class, You can use existing libraries like `bignumber.js`, `decimal.js`, `big.js` etc.
 class BigNumber {
   name = 'customName'
-  constructor(value) {
+  constructor (value) {
     this.value = value
   }
-  toString() {
+  toString () {
     return this.value.toString()
   }
 }
@@ -231,6 +231,8 @@ function getExampleJson1 () {
         }
       }
     },
+    map: getExampleMap(),
+    set: getExampleSet(),
     string_number: '1234',
     date: new Date(),
     moment: Moment(),
@@ -320,3 +322,48 @@ function getExampleArray () {
 function getExampleWithStringEscapeSequences () {
   return { '\\\n\t\r\f\\n': '\\\n\t\r\f\\n' }
 }
+
+function getExampleMap () {
+  return new Map([
+    ['string', 'string_value'],
+    [1, 'number_value'],
+    [1.1, 'float_value'],
+    [true, 'boolean_value'],
+    [
+      () => {
+        return 'function_value'
+      },
+      'function_value'
+    ],
+    [null, 'null_value'],
+    [NaN, 'NaN_value'],
+    [undefined, 'undefined_value'],
+    [new Date(), 'date_value'],
+    [new RegExp('regexp_value'), 'regexp_value'],
+    [new BigNumber('0.0060254656709730629123'), 'bigNumber_value'],
+    [{ example: 'object' }, 'object_value'],
+    [new Map([['nested_key', 'nested_value']]), 'map_value'],
+    [new Set([1, 2, 3]), 'set_value']
+  ])
+}
+
+function getExampleSet () {
+  return new Set([
+    'string',
+    1,
+    1.1,
+    true,
+    () => {
+      return 'function_value'
+    },
+    null,
+    NaN,
+    undefined,
+    new Date(),
+    new RegExp('regexp_value'),
+    new BigNumber('0.0060254656709730629123'),
+    { example: 'object' },
+    new Map([['nested_key', 'nested_value']]),
+    new Set([1, 2, 3])
+  ])
+}

src/js/components/DataTypes/Object.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { polyfill } from 'react-lifecycles-compat'
-import { toType } from './../../helpers/util'
+import { getBraceChar, toType } from './../../helpers/util'
 
 // data type components
 import { JsonObject } from './DataTypes'
@@ -46,6 +46,9 @@ class RjvObject extends React.PureComponent {
           type: toType(props.src),
           namespace: props.namespace
         }) === false) &&
+      // initialize closed if type is set or map
+      props.type !== 'set' &&
+      props.type !== 'map' &&
       // initialize closed if object has no items
       size !== 0
     const state = {
@@ -141,9 +144,7 @@ class RjvObject extends React.PureComponent {
     if (parent_type === 'array_group') {
       return (
         <span>
-          <span {...Theme(theme, 'brace')}>
-            {object_type === 'array' ? '[' : '{'}
-          </span>
+          <span {...Theme(theme, 'brace')}>{getBraceChar(object_type)}</span>
           {expanded ? this.getObjectMetaData(src) : null}
         </span>
       )
@@ -163,8 +164,11 @@ class RjvObject extends React.PureComponent {
             <IconComponent {...{ theme, iconStyle }} />
           </div>
           <ObjectName {...this.props} />
+          {['map', 'set'].includes(this.props.type) && (
+            <span {...Theme(theme, this.props.type)}>{this.props.type}</span>
+          )}
           <span {...Theme(theme, 'brace')}>
-            {object_type === 'array' ? '[' : '{'}
+            {getBraceChar(this.props.type)}
           </span>
         </span>
         {expanded ? this.getObjectMetaData(src) : null}
@@ -220,7 +224,7 @@ class RjvObject extends React.PureComponent {
               paddingLeft: expanded ? '3px' : '0px'
             }}
           >
-            {object_type === 'array' ? ']' : '}'}
+            {getBraceChar(type, true)}
           </span>
           {expanded ? null : this.getObjectMetaData(src)}
         </span>
@@ -234,13 +238,18 @@ class RjvObject extends React.PureComponent {
       parent_type,
       index_offset,
       groupArraysAfterLength,
-      namespace
+      namespace,
+      type
     } = this.props
     const { object_type } = this.state
     const elements = []
     let variable
     let keys = Object.keys(variables || {})
-    if (this.props.sortKeys && object_type !== 'array') {
+    if (
+      this.props.sortKeys &&
+      object_type !== 'array' &&
+      !['set', 'map'].includes(type)
+    ) {
       keys = keys.sort()
     }
 
@@ -285,6 +294,31 @@ class RjvObject extends React.PureComponent {
             {...props}
           />
         )
+      } else if (['map', 'set'].includes(variable.type)) {
+        const formatted = []
+        variable.value.forEach((value, key) => {
+          if (variable.type === 'map') {
+            formatted.push({
+              key,
+              value
+            })
+          } else {
+            formatted.push(value)
+          }
+        })
+
+        elements.push(
+          <JsonObject
+            key={variable.name}
+            depth={depth + DEPTH_INCREMENT}
+            name={variable.name}
+            src={formatted}
+            namespace={namespace.concat(variable.name)}
+            parent_type={object_type}
+            type={variable.type}
+            {...props}
+          />
+        )
       } else {
         // include bigNumber
         elements.push(

src/js/helpers/util.js

@@ -1,6 +1,5 @@
 // returns a string "type" of input object
 export function toType (obj, bigNumber) {
-
   /* Check if the object is an instance of the custom BigNumber class passed in as a prop
    * If it matches, return 'bigNumber' type so it can be displayed appropriately
    */
@@ -69,3 +68,14 @@ export function isTheme (theme) {
   }
   return false
 }
+
+export function getBraceChar (object_type, end = false) {
+  switch (object_type) {
+    case 'array':
+    case 'map':
+    case 'set':
+      return end ? ']' : '['
+    default:
+      return end ? '}' : '{'
+  }
+}

src/js/themes/getStyle.js

@@ -26,7 +26,9 @@ const colorMap = theme => ({
     undefined: theme.base05,
     regexp: theme.base0A,
     background: theme.base02,
-    bigNumber: theme.base09
+    bigNumber: theme.base09,
+    map: theme.base0C,
+    set: theme.base0F
   },
   editVariable: {
     editIcon: theme.base0E,
@@ -209,6 +211,24 @@ const getDefaultThemeStyling = theme => {
       padding: constants.nullPadding,
       borderRadius: constants.nullBorderRadius
     },
+    map: {
+      display: 'inline-block',
+      textTransform: 'capitalize',
+      color: colors.dataTypes.map,
+      fontSize: constants.mapSetFontSize,
+      padding: constants.mapSetPadding,
+      borderRadius: constants.mapSetBorderRadius,
+      backgroundColor: colors.dataTypes.background
+    },
+    set: {
+      display: 'inline-block',
+      textTransform: 'capitalize',
+      color: colors.dataTypes.set,
+      fontSize: constants.mapSetFontSize,
+      padding: constants.mapSetPadding,
+      borderRadius: constants.mapSetBorderRadius,
+      backgroundColor: colors.dataTypes.background
+    },
     undefined: {
       display: 'inline-block',
       color: colors.dataTypes.undefined,

src/js/themes/styleConstants.js

@@ -35,6 +35,11 @@ export default {
 
   variableValuePaddingRight: '6px',
 
+  mapSetFontSize: '11px',
+  mapSetFontWeight: 'bold',
+  mapSetPadding: '1px 2px',
+  mapSetBorderRadius: '3px',
+
   nullFontSize: '11px',
   nullFontWeight: 'bold',
   nullPadding: '1px 2px',