custom json-view

Author: chacha912

.gitignore

@@ -2,7 +2,6 @@
 npm-debug.log
 /coverage
 /debug
-/dist
 /node_modules
 .nyc_output
 .envrc

dev-server/src/index.js

@@ -64,6 +64,8 @@ ReactDom.render(
         return false
       }}
       defaultValue=''
+      iconStyle='arrow'
+      displayBraceColon={false}
     />
 
     <br />

dist/main.js

@@ -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 "arrow".
    *
    * Default: {}
    */
-  iconStyle?: 'circle' | 'triangle' | 'square'
+  iconStyle?: 'circle' | 'triangle' | 'square' | 'arrow'
   /**
    * Set the indent-width for nested objects.
    *
@@ -87,6 +87,12 @@ export interface ReactJsonViewProps {
    * Default: true
    */
   displayDataTypes?: boolean
+  /**
+   * set to false to remove brace and colon for object.
+   *
+   * Default: true
+   */
+  displayBraceColon?: boolean;
   /**
    * When set to true, the index of the elements prefix values
    *

index.d.ts

@@ -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.displayBraceColon && <span>{'{'}</span>}
             <span {...Theme(props.theme, 'ellipsis')}>...</span>
-            <span>{'}'}</span>
+            {this.props.displayBraceColon && <span>{'}'}</span>}
           </span>
         </span>
       )

src/js/components/DataTypes/Function.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, displayBraceColon } = this.props
 
     if (parent_type === 'array_group') {
       return (
         <span>
-          <span {...Theme(theme, 'brace')}>
-            {object_type === 'array' ? '[' : '{'}
-          </span>
+          {displayBraceColon && (
+            <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>
+          {displayBraceColon && (
+            <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,
+      displayBraceColon,
       ...rest
     } = this.props
 
@@ -214,14 +219,16 @@ class RjvObject extends React.PureComponent {
           })
           : this.getEllipsis()}
         <span class='brace-row'>
-          <span
-            style={{
-              ...Theme(theme, 'brace').style,
-              paddingLeft: expanded ? '3px' : '0px'
-            }}
-          >
-            {object_type === 'array' ? ']' : '}'}
-          </span>
+          {displayBraceColon && (
+            <span
+              style={{
+                ...Theme(theme, 'brace').style,
+                paddingLeft: expanded ? '3px' : '0px'
+              }}
+            >
+              {object_type === 'array' ? ']' : '}'}
+            </span>
+          )}
           {expanded ? null : this.getObjectMetaData(src)}
         </span>
       </div>

src/js/components/DataTypes/Object.js

@@ -9,7 +9,8 @@ export default function getObjectName (props) {
     theme,
     jsvRoot,
     name,
-    displayArrayKey
+    displayArrayKey,
+    displayBraceColon
   } = 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>
+          {displayBraceColon && <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>
+        {displayBraceColon && <span {...Theme(theme, 'colon')}>:</span>}
       </span>
     )
   }

src/js/components/ObjectName.js

@@ -7,7 +7,9 @@ import {
   SquareMinus,
   SquarePlus,
   ArrowRight,
-  ArrowDown
+  ArrowDown,
+  ArrowDownSmall,
+  ArrowRightSmall
 } from './icons'
 
 export function ExpandedIcon (props) {
@@ -21,6 +23,10 @@ export function ExpandedIcon (props) {
       return (
         <SquareMinus {...Theme(theme, 'expanded-icon')} class='expanded-icon' />
       )
+    case 'arrow':
+      return (
+        <ArrowDownSmall {...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 'arrow':
+      return (
+        <ArrowRightSmall
+          {...Theme(theme, 'collapsed-icon')}
+          class='collapsed-icon'
+        />
+      )
     default:
       return (
         <CirclePlus

src/js/components/ToggleIcons.js

@@ -111,6 +111,34 @@ export class ArrowRight extends React.PureComponent {
   }
 }
 
+export class ArrowRightSmall 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'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <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'
+            fill='currentColor'
+          />
+        </svg>
+      </span>
+    )
+  }
+}
+
 export class ArrowDown extends React.PureComponent {
   render () {
     const { props } = this
@@ -134,6 +162,34 @@ export class ArrowDown extends React.PureComponent {
   }
 }
 
+export class ArrowDownSmall 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'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <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'
+            fill='currentColor'
+          />
+        </svg>
+      </span>
+    )
+  }
+}
+
 export class Clippy extends React.PureComponent {
   render () {
     const { props } = this

src/js/components/icons.js

@@ -1,11 +1,11 @@
 class Dispatcher {
   handler = () => {}
 
-  register(handler) {
+  register (handler) {
     this.handler = handler
   }
 
-  dispatch(data) {
+  dispatch (data) {
     this.handler?.(data)
   }
 }