feat: Add displayCompact options and new icon styles

README.md

@@ -64,7 +64,7 @@ import ReactJsonView from '@microlink/react-json-view'
 | `name`                       | `string` or `JSX.Element`                        | `false`                  | "root" - Contains the name of your root node. Use `null` or `false` for no name.                                                                                                                                                                                          |
 | `theme`                      | `string`                                         | `'rjv-default'`          | RJV supports base-16 themes. Check out the list of supported themes [in the demo](https://react-json-view.microlink.io/). A custom "rjv-default" theme applies by default.                                                                                                |
 | `style`                      | `object`                                         | `{}`                     | Style attributes for react-json-view container. Explicit style attributes will override attributes provided by a theme.                                                                                                                                                   |
-| `iconStyle`                  | `string`                                         | `'circle'`               | Style of expand/collapse icons. Accepted values are "circle", "triangle" or "square".                                                                                                                                                                                     |
+| `iconStyle`                  | `string`                                         | `'circle'`               | Style of expand/collapse icons. Accepted values are "circle", "triangle", "square" or "chevron".                                                                                                                                                                          |
 | `indentWidth`                | `integer`                                        | 4                        | Set the indent-width for nested objects.                                                                                                                                                                                                                                  |
 | `collapsed`                  | `boolean` or `integer`                           | `false`                  | When set to `true`, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth.                                                                                                                                                       |
 | `collapseStringsAfterLength` | `integer`                                        | `false`                  | When an integer value is assigned, strings will be cut off at that length. Collapsed strings are followed by an ellipsis. String content can be expanded and collapsed by clicking on the string value.                                                                   |
@@ -73,6 +73,7 @@ import ReactJsonView from '@microlink/react-json-view'
 | `enableClipboard`            | `boolean` or `(copy)=>{}`                        | `true`                   | When prop is not `false`, the user can copy objects and arrays to clipboard by clicking on the clipboard icon. Copy callbacks are supported.                                                                                                                              |
 | `displayObjectSize`          | `boolean`                                        | `true`                   | When set to `true`, objects and arrays are labeled with size.                                                                                                                                                                                                             |
 | `displayDataTypes`           | `boolean`                                        | `true`                   | When set to `true`, data type labels prefix values.                                                                                                                                                                                                                       |
+| `displayCompact`             | `boolean`                                        | `false`                  | When set to true, hides display of  `:`, `{`, and `[` symbols for parent objects and arrays that are not the final value in the hierarchy.                                                                                                                                |
 | `onEdit`                     | `(edit)=>{}`                                     | `false`                  | When a callback function is passed in, `edit` functionality is enabled. The callback is invoked before edits are completed. Returning `false` from `onEdit` will prevent the change from being made. [see: onEdit docs](#onedit-onadd-and-ondelete-interaction)           |
 | `onAdd`                      | `(add)=>{}`                                      | `false`                  | When a callback function is passed in, `add` functionality is enabled. The callback is invoked before additions are completed. Returning `false` from `onAdd` will prevent the change from being made. [see: onAdd docs](#onedit-onadd-and-ondelete-interaction)          |
 | `defaultValue`               | `string \| number \| boolean \| array \| object` | `null`                   | Sets the default value to be used when adding an item to JSON.                                                                                                                                                                                                            |

docs/src/js/components/Demo.js

@@ -28,6 +28,7 @@ class Demo extends React.PureComponent {
     enableClipboard: true,
     indentWidth: 4,
     displayDataTypes: true,
+    displayCompact: false,
     iconStyle: 'triangle'
   }
 
@@ -135,7 +136,8 @@ class Demo extends React.PureComponent {
       iconStyle,
       collapsed,
       indentWidth,
-      displayDataTypes
+      displayDataTypes,
+      displayCompact
     } = this.state
 
     const style = {
@@ -214,6 +216,7 @@ class Demo extends React.PureComponent {
             enableClipboard={enableClipboard}
             indentWidth={indentWidth}
             displayDataTypes={displayDataTypes}
+            displayCompact={displayCompact}
             iconStyle={iconStyle}
           />
 
@@ -265,6 +268,10 @@ class Demo extends React.PureComponent {
               <div class='rjv-label'>Collapse Strings After Length:</div>
               {this.getCollapsedStringsInput(collapseStringsAfter)}
             </div>
+            <div class='rjv-input'>
+              <div class='rjv-label'>Display Compact</div>
+              {this.getCompactInput(displayCompact)}
+            </div>
           </div>
 
           {this.getNotes(onEdit, onAdd)}
@@ -330,7 +337,8 @@ class Demo extends React.PureComponent {
         options={[
           { value: 'circle', label: 'circle' },
           { value: 'square', label: 'square' },
-          { value: 'triangle', label: 'triangle' }
+          { value: 'triangle', label: 'triangle' },
+          { value: 'chevron', label: 'chevron' }
         ]}
         onChange={val => {
           this.set('iconStyle', val)
@@ -435,6 +443,22 @@ class Demo extends React.PureComponent {
     )
   }
 
+  getCompactInput = displayCompact => {
+    return (
+      <ReactSelect
+        name='display-compact'
+        value={displayCompact}
+        options={[
+          { value: true, label: 'true' },
+          { value: false, label: 'false' }
+        ]}
+        onChange={val => {
+          this.set('displayCompact', val)
+        }}
+      />
+    )
+  }
+
   getCollapsedStringsInput = collapseStringsAfter => {
     return (
       <ReactSelect

index.d.ts

@@ -28,11 +28,11 @@ export interface ReactJsonViewProps {
    */
   style?: React.CSSProperties
   /**
-   * Style of expand/collapse icons. Accepted values are "circle", triangle" or "square".
+   * Style of expand/collapse icons. Accepted values are "circle", triangle" or "square" or "chevron".
    *
    * Default: {}
    */
-  iconStyle?: 'circle' | 'triangle' | 'square'
+  iconStyle?: 'circle' | 'triangle' | 'square' | 'chevron'
   /**
    * Set the indent-width for nested objects.
    *
@@ -93,6 +93,13 @@ export interface ReactJsonViewProps {
    * Default: true
    */
   displayArrayKey?: boolean
+  /**
+   * When set to true, hides display of `:`, `{`, and `[` symbols for parent objects
+   * and arrays that are not the final value in the hierarchy.
+   *
+   * Default: false
+   */
+  displayCompact?: boolean
   /**
    * set to false to remove quotes from keys (eg. "name": vs. name:)
    *

src/js/components/DataTypes/Function.js

@@ -66,9 +66,9 @@ export default class extends React.PureComponent {
             .slice(9, -1)
             .replace(/\{[\s\S]+/, '')}
           <span class='function-collapsed' style={{ fontWeight: 'bold' }}>
-            <span>{'{'}</span>
+            {!this.props.displayCompact && <span>{'{'}</span>}
             <span {...Theme(props.theme, 'ellipsis')}>...</span>
-            <span>{'}'}</span>
+            {!this.props.displayCompact && <span>{'}'}</span>}
           </span>
         </span>
       )

src/js/components/DataTypes/Object.js

@@ -136,14 +136,16 @@ class RjvObject extends React.PureComponent {
   }
 
   getBraceStart (object_type, expanded) {
-    const { src, theme, iconStyle, parent_type } = this.props
+    const { src, theme, iconStyle, parent_type, displayCompact } = this.props
 
     if (parent_type === 'array_group') {
       return (
         <span>
-          <span {...Theme(theme, 'brace')}>
-            {object_type === 'array' ? '[' : '{'}
-          </span>
+          {!displayCompact && (
+            <span {...Theme(theme, 'brace')}>
+              {object_type === 'array' ? '[' : '{'}
+            </span>
+          )}
           {expanded ? this.getObjectMetaData(src) : null}
         </span>
       )
@@ -163,9 +165,11 @@ class RjvObject extends React.PureComponent {
             <IconComponent {...{ theme, iconStyle }} />
           </div>
           <ObjectName {...this.props} />
-          <span {...Theme(theme, 'brace')}>
-            {object_type === 'array' ? '[' : '{'}
-          </span>
+          {!displayCompact && (
+            <span {...Theme(theme, 'brace')}>
+              {object_type === 'array' ? '[' : '{'}
+            </span>
+          )}
         </span>
         {expanded ? this.getObjectMetaData(src) : null}
       </span>
@@ -185,6 +189,7 @@ class RjvObject extends React.PureComponent {
       theme,
       jsvRoot,
       iconStyle,
+      displayCompact,
       ...rest
     } = this.props
 
@@ -210,18 +215,21 @@ class RjvObject extends React.PureComponent {
           ? this.getObjectContent(depth, src, {
             theme,
             iconStyle,
+            displayCompact,
             ...rest
           })
           : this.getEllipsis()}
         <span class='brace-row'>
-          <span
-            style={{
-              ...Theme(theme, 'brace').style,
-              paddingLeft: expanded ? '3px' : '0px'
-            }}
-          >
-            {object_type === 'array' ? ']' : '}'}
-          </span>
+          {!displayCompact && (
+            <span
+              style={{
+                ...Theme(theme, 'brace').style,
+                paddingLeft: expanded ? '3px' : '0px'
+              }}
+            >
+              {object_type === 'array' ? ']' : '}'}
+            </span>
+          )}
           {expanded ? null : this.getObjectMetaData(src)}
         </span>
       </div>

src/js/components/ObjectName.js

@@ -9,7 +9,8 @@ export default function getObjectName (props) {
     theme,
     jsvRoot,
     name,
-    displayArrayKey
+    displayArrayKey,
+    displayCompact
   } = props
 
   const display_name = props.name ? props.name : ''
@@ -21,7 +22,7 @@ export default function getObjectName (props) {
       ? (
         <span {...Theme(theme, 'array-key')} key={namespace}>
           <span class='array-key'>{display_name}</span>
-          <span {...Theme(theme, 'colon')}>:</span>
+          {!displayCompact && <span {...Theme(theme, 'colon')}>:</span>}
         </span>
         )
       : (
@@ -35,7 +36,7 @@ export default function getObjectName (props) {
           <span>{display_name}</span>
           {quotesOnKeys && <span style={{ verticalAlign: 'top' }}>"</span>}
         </span>
-        <span {...Theme(theme, 'colon')}>:</span>
+        {!displayCompact && <span {...Theme(theme, 'colon')}>:</span>}
       </span>
     )
   }

src/js/components/ToggleIcons.js

@@ -7,7 +7,9 @@ import {
   SquareMinus,
   SquarePlus,
   ArrowRight,
-  ArrowDown
+  ArrowDown,
+  ChevronDown,
+  ChevronRight
 } from './icons'
 
 export function ExpandedIcon (props) {
@@ -21,6 +23,10 @@ export function ExpandedIcon (props) {
       return (
         <SquareMinus {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
       )
+    case 'chevron':
+      return (
+        <ChevronDown {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
+      )
     default:
       return (
         <CircleMinus {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
@@ -45,6 +51,13 @@ export function CollapsedIcon (props) {
           class='collapsed-icon'
         />
       )
+    case 'chevron':
+      return (
+        <ChevronRight
+          {...Theme(theme, 'collapsed-icon')}
+          class='collapsed-icon'
+        />
+      )
     default:
       return (
         <CirclePlus

src/js/components/icons.js

@@ -111,6 +111,33 @@ export class ArrowRight extends React.PureComponent {
   }
 }
 
+export class ChevronRight extends React.PureComponent {
+  render () {
+    const { props } = this
+    const { style, ...rest } = props
+
+    return (
+      <span {...rest}>
+        <svg
+          style={{
+            ...getIconStyle(style).style,
+            paddingLeft: '2px',
+            verticalAlign: 'top'
+          }}
+          viewBox='0 0 12 12'
+          fill='currentColor'
+        >
+          <path
+            fillRule='evenodd'
+            clipRule='evenodd'
+            d='M4.14645 2.64645C4.34171 2.45118 4.65829 2.45118 4.85355 2.64645L7.85355 5.64645C8.04882 5.84171 8.04882 6.15829 7.85355 6.35355L4.85355 9.35355C4.65829 9.54882 4.34171 9.54882 4.14645 9.35355C3.95118 9.15829 3.95118 8.84171 4.14645 8.64645L6.79289 6L4.14645 3.35355C3.95118 3.15829 3.95118 2.84171 4.14645 2.64645Z'
+          />
+        </svg>
+      </span>
+    )
+  }
+}
+
 export class ArrowDown extends React.PureComponent {
   render () {
     const { props } = this
@@ -134,6 +161,33 @@ export class ArrowDown extends React.PureComponent {
   }
 }
 
+export class ChevronDown extends React.PureComponent {
+  render () {
+    const { props } = this
+    const { style, ...rest } = props
+
+    return (
+      <span {...rest}>
+        <svg
+          style={{
+            ...getIconStyle(style).style,
+            paddingLeft: '2px',
+            verticalAlign: 'top'
+          }}
+          viewBox='0 0 12 12'
+          fill='currentColor'
+        >
+          <path
+            fillRule='evenodd'
+            clipRule='evenodd'
+            d='M2.64645 4.14645C2.84171 3.95118 3.15829 3.95118 3.35355 4.14645L6 6.79289L8.64645 4.14645C8.84171 3.95118 9.15829 3.95118 9.35355 4.14645C9.54882 4.34171 9.54882 4.65829 9.35355 4.85355L6.35355 7.85355C6.15829 8.04882 5.84171 8.04882 5.64645 7.85355L2.64645 4.85355C2.45118 4.65829 2.45118 4.34171 2.64645 4.14645Z'
+          />
+        </svg>
+      </span>
+    )
+  }
+}
+
 export class Clippy extends React.PureComponent {
   render () {
     const { props } = this

test/tests/js/components/ToggleIcons-test.js

@@ -13,7 +13,9 @@ import {
   SquareMinus,
   SquarePlus,
   ArrowRight,
-  ArrowDown
+  ArrowDown,
+  ChevronRight,
+  ChevronDown
 } from './../../../../src/js/components/icons'
 
 describe('<ToggleIcons />', function () {
@@ -41,6 +43,13 @@ describe('<ToggleIcons />', function () {
     expect(wrapper.type()).to.equal(SquareMinus)
   })
 
+  it('ExpandedIcon with chevron style', function () {
+    const wrapper = shallow(
+      <ExpandedIcon theme='rjv-default' iconStyle='chevron' />
+    )
+    expect(wrapper.type()).to.equal(ChevronDown)
+  })
+
   it('ExpandedIcon with no style', function () {
     const wrapper = shallow(<ExpandedIcon theme='rjv-default' />)
     expect(wrapper.type()).to.equal(CircleMinus)
@@ -60,6 +69,13 @@ describe('<ToggleIcons />', function () {
     expect(wrapper.type()).to.equal(SquarePlus)
   })
 
+  it('CollapsedIcon with chevron style', function () {
+    const wrapper = shallow(
+      <CollapsedIcon theme='rjv-default' iconStyle='chevron' />
+    )
+    expect(wrapper.type()).to.equal(ChevronRight)
+  })
+
   it('CollapsedIcon with no style', function () {
     const wrapper = shallow(<CollapsedIcon theme='rjv-default' />)
     expect(wrapper.type()).to.equal(CirclePlus)