Merge pull request #87 from truongthanh1303/feat/show-comma-option

Kikobeats · web-flow · commit a72086a0ffc0 · 2025-08-01T17:26:49.000+02:00
feat: show comma option
diff --git a/README.md b/README.md
@@ -39,7 +39,8 @@ npm install @microlink/react-json-view --save
 ```js
 import ReactJsonView from '@microlink/react-json-view'
 
-<ReactJsonView src={{
+<ReactJsonView
+  src={{
   string: 'this is a test string',
   integer: 42,
   array: [1, 2, 3, 'test', NaN],
@@ -53,7 +54,9 @@ import ReactJsonView from '@microlink/react-json-view'
   string_number: '1234',
   date: new Date(),
   bigNumber: new BigNumber('0.0060254656709730629123')
-}} />
+  }}
+  showComma
+/>
 ```
 
 ### API
@@ -84,6 +87,7 @@ import ReactJsonView from '@microlink/react-json-view'
 | `displayArrayKey`            | `boolean`                                        | `true`                   | When set to `true`, the index of the elements prefix values.                                                                                                                                                                                                              |
 | `escapeStrings`              | `boolean`                                        | `true`                   | When set to `true`, strings sequences such as \n, \t, \r, \f will be escaped.                                                                                                                                                                                                          |
 | `bigNumber`                  | `Class`                                          | `null`                   | A custom class for handling large numbers. The class should have a constructor that accepts a numeric string/value and a `name` property for display purposes. You can use existing libraries like `bignumber.js`, `decimal.js`, `big.js`, or provide your own implementation.                                                                                                               |
+| `showComma`                  | `boolean`                                        | `true`                   | When set to `true`, commas are displayed between object properties and array elements for better readability. Interactive tools (clipboard, edit, delete icons) appear after the comma when hovering over JSON elements.                                                                                                                              |
 
 #### Callbacks
 
diff --git a/dev-server/src/index.js b/dev-server/src/index.js
@@ -64,6 +64,53 @@ ReactDom.render(
         return false
       }}
       defaultValue=''
+      showComma={true}
+    />
+
+    <br />
+
+    {/* Same example without commas for comparison */}
+    <JsonViewer
+      bigNumber={BigNumber}
+      sortKeys
+      style={{ padding: '30px', backgroundColor: 'white' }}
+      src={getExampleJson1()}
+      quotesOnKeys={false}
+      collapseStringsAfterLength={12}
+      onEdit={e => {
+        console.log('edit callback', e)
+        if (e.new_value == 'error') {
+          return false
+        }
+      }}
+      onDelete={e => {
+        console.log('delete callback', e)
+      }}
+      onAdd={e => {
+        console.log('add callback', e)
+        if (e.new_value == 'error') {
+          return false
+        }
+      }}
+      onSelect={e => {
+        console.log('select callback', e)
+        console.log(e.namespace)
+      }}
+      displayObjectSize={true}
+      name={'dev-server (no commas)'}
+      enableClipboard={copy => {
+        console.log('you copied to clipboard!', copy)
+      }}
+      shouldCollapse={({ src, namespace, type }) => {
+        if (type === 'array' && src.indexOf('test') > -1) {
+          return true
+        } else if (namespace.indexOf('moment') > -1) {
+          return true
+        }
+        return false
+      }}
+      defaultValue=''
+      showComma={false}
     />
 
     <br />
@@ -98,6 +145,7 @@ ReactDom.render(
         src.constructor.name === 'Moment'
       }
       selectOnFocus
+      showComma={true}
     />
 
     <br />
diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js
@@ -109,6 +109,8 @@ export default class extends React.PureComponent {
                     type='array'
                     parent_type='array_group'
                     theme={theme}
+                    showComma={this.props.showComma}
+                    isLast={i === groups - 1}
                     {...rest}
                   />
                   )
diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js
@@ -144,7 +144,6 @@ class RjvObject extends React.PureComponent {
           <span {...Theme(theme, 'brace')}>
             {object_type === 'array' ? '[' : '{'}
           </span>
-          {expanded ? this.getObjectMetaData(src) : null}
         </span>
       )
     }
@@ -167,7 +166,6 @@ class RjvObject extends React.PureComponent {
             {object_type === 'array' ? '[' : '{'}
           </span>
         </span>
-        {expanded ? this.getObjectMetaData(src) : null}
       </span>
     )
   }
@@ -185,6 +183,8 @@ class RjvObject extends React.PureComponent {
       theme,
       jsvRoot,
       iconStyle,
+      showComma,
+      isLast,
       ...rest
     } = this.props
 
@@ -222,8 +222,13 @@ class RjvObject extends React.PureComponent {
           >
             {object_type === 'array' ? ']' : '}'}
           </span>
-          {expanded ? null : this.getObjectMetaData(src)}
         </span>
+        {showComma && !isLast && !jsvRoot && (
+          <span {...Theme(theme, 'comma')}>
+            ,
+          </span>
+        )}
+        {this.getObjectMetaData(src)}
       </div>
     )
   }
@@ -234,7 +239,8 @@ class RjvObject extends React.PureComponent {
       parent_type,
       index_offset,
       groupArraysAfterLength,
-      namespace
+      namespace,
+      showComma,
     } = this.props
     const { object_type } = this.state
     const elements = []
@@ -244,8 +250,9 @@ class RjvObject extends React.PureComponent {
       keys = keys.sort()
     }
 
-    keys.forEach(name => {
+    keys.forEach((name, index) => {
       variable = new JsonVariable(name, variables[name], props.bigNumber)
+      const isLast = index === keys.length - 1
 
       if (parent_type === 'array_group' && index_offset) {
         variable.name = parseInt(variable.name) + index_offset
@@ -260,6 +267,8 @@ class RjvObject extends React.PureComponent {
             src={variable.value}
             namespace={namespace.concat(variable.name)}
             parent_type={object_type}
+            isLast={isLast}
+            showComma={showComma}
             {...props}
           />
         )
@@ -282,6 +291,8 @@ class RjvObject extends React.PureComponent {
             namespace={namespace.concat(variable.name)}
             type='array'
             parent_type={object_type}
+            isLast={isLast}
+            showComma={showComma}
             {...props}
           />
         )
@@ -294,6 +305,8 @@ class RjvObject extends React.PureComponent {
             singleIndent={SINGLE_INDENT}
             namespace={namespace}
             type={this.props.type}
+            isLast={isLast}
+            showComma={showComma}
             {...props}
           />
         )
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js
@@ -57,7 +57,9 @@ class VariableEditor extends React.PureComponent {
       onSelect,
       displayArrayKey,
       quotesOnKeys,
-      keyModifier
+      keyModifier,
+      showComma,
+      isLast
     } = this.props
     const { editMode } = this.state
     return (
@@ -126,6 +128,11 @@ class VariableEditor extends React.PureComponent {
         >
           {this.getValue(variable, editMode)}
         </div>
+        {showComma && !isLast && (
+          <span {...Theme(theme, 'comma')}>
+            ,
+          </span>
+        )}
         {enableClipboard
           ? (
             <CopyToClipboard
diff --git a/src/js/index.js b/src/js/index.js
@@ -60,7 +60,8 @@ class ReactJsonView extends React.PureComponent {
     displayArrayKey: true,
     selectOnFocus: false,
     keyModifier: e => e.metaKey || e.ctrlKey,
-    bigNumber: null
+    bigNumber: null,
+    showComma: true
   }
 
   // will trigger whenever setState() is called, or parent passes in new props.
diff --git a/src/js/themes/getStyle.js b/src/js/themes/getStyle.js
@@ -386,6 +386,13 @@ const getDefaultThemeStyling = theme => {
       color: colors.validationFailure.iconColor,
       fontSize: constants.iconFontSize,
       transform: 'rotate(45deg)'
+    },
+    comma: {
+      display: 'inline-block',
+      color: constants.commaColor,
+      fontSize: constants.commaFontSize,
+      marginRight: constants.commaMarginRight,
+      cursor: 'default'
     }
   }
 }
diff --git a/src/js/themes/styleConstants.js b/src/js/themes/styleConstants.js
@@ -91,5 +91,9 @@ export default {
   addKeyModalWidth: '200px',
   addKeyModalMargin: 'auto',
   addKeyModalPadding: '10px',
-  addKeyModalRadius: '3px'
-}
+  addKeyModalRadius: '3px',
+
+  commaColor: '#666',
+  commaFontSize: '12px',
+  commaMarginRight: '4px'
+};
diff --git a/test/tests/js/Index-test.js b/test/tests/js/Index-test.js
@@ -128,4 +128,48 @@ describe('<Index />', function () {
     )
     expect(wrapper.find('.object-size')).to.have.length(1)
   })
+
+  it('should show commas when showComma is true', function () {
+    const wrapper = render(
+      <Index
+        src={{
+          first: 'first property',
+          second: 'second property',
+          third: 'third property'
+        }}
+        showComma
+      />
+    )
+    // Check that commas are present in the rendered output
+    expect(wrapper.text()).to.include(',')
+  })
+
+  it('should not show commas when showComma is false', function () {
+    const wrapper = render(
+      <Index
+        src={{
+          first: 'first property',
+          second: 'second property',
+          third: 'third property'
+        }}
+        showComma={false}
+      />
+    )
+    // Check that commas are not present in the rendered output
+    expect(wrapper.text()).to.not.include(',')
+  })
+
+  it('should default to showing commas when showComma is not specified', function () {
+    const wrapper = render(
+      <Index
+        src={{
+          first: 'first property',
+          second: 'second property',
+          third: 'third property'
+        }}
+      />
+    )
+    // Check that commas are present by default
+    expect(wrapper.text()).to.include(',')
+  })
 })
diff --git a/test/tests/js/components/DataTypes/Object-test.js b/test/tests/js/components/DataTypes/Object-test.js
@@ -373,4 +373,97 @@ describe('<JsonObject />', function () {
     )
     expect(wrapper.text()).to.equal('"":{"d":"d""b":"b""a":"a""c":"c"}')
   })
+
+  it('Object should show comma when showComma is true and not last element', function () {
+    let src = {
+      prop1: 1,
+      prop2: 2
+    }
+
+    const wrapper = shallow(
+      <JsonObject
+        src={src}
+        theme='rjv-default'
+        namespace={['root']}
+        rjvId={rjvId}
+        showComma
+        isLast={false}
+        collapsed={false}
+        indentWidth={1}
+        depth={1}
+        type='object'
+      />
+    )
+    expect(wrapper.find('span').someWhere(node => node.text() === ',')).to.be.true
+  })
+
+  it('Object should not show comma when showComma is false', function () {
+    let src = {
+      prop1: 1,
+      prop2: 2
+    }
+
+    const wrapper = shallow(
+      <JsonObject
+        src={src}
+        theme='rjv-default'
+        namespace={['root']}
+        rjvId={rjvId}
+        showComma={false}
+        isLast={false}
+        collapsed={false}
+        indentWidth={1}
+        depth={1}
+        type='object'
+      />
+    )
+    expect(wrapper.find('span').someWhere(node => node.text() === ',')).to.be.false
+  })
+
+  it('Object should not show comma when isLast is true', function () {
+    let src = {
+      prop1: 1,
+      prop2: 2
+    }
+
+    const wrapper = shallow(
+      <JsonObject
+        src={src}
+        theme='rjv-default'
+        namespace={['root']}
+        rjvId={rjvId}
+        showComma
+        isLast
+        collapsed={false}
+        indentWidth={1}
+        depth={1}
+        type='object'
+      />
+    )
+    expect(wrapper.find('span').someWhere(node => node.text() === ',')).to.be.false
+  })
+
+  it('Object should not show comma when jsvRoot is true', function () {
+    let src = {
+      prop1: 1,
+      prop2: 2
+    }
+
+    const wrapper = shallow(
+      <JsonObject
+        src={src}
+        theme='rjv-default'
+        namespace={['root']}
+        rjvId={rjvId}
+        showComma
+        isLast={false}
+        jsvRoot
+        collapsed={false}
+        indentWidth={1}
+        depth={1}
+        type='object'
+      />
+    )
+    expect(wrapper.find('span').someWhere(node => node.text() === ',')).to.be.false
+  })
 })
diff --git a/test/tests/js/components/VariableEditor-test.js b/test/tests/js/components/VariableEditor-test.js

Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,8 @@ export default class extends React.PureComponent {`
`109`	`109`	`type='array'`
`110`	`110`	`parent_type='array_group'`
`111`	`111`	`theme={theme}`
	`112`	`+ showComma={this.props.showComma}`
	`113`	`+ isLast={i === groups - 1}`
`112`	`114`	`{...rest}`
`113`	`115`	`/>`
`114`	`116`	`)`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,8 @@ class ReactJsonView extends React.PureComponent {`
`60`	`60`	`displayArrayKey: true,`
`61`	`61`	`selectOnFocus: false,`
`62`	`62`	`keyModifier: e => e.metaKey \|\| e.ctrlKey,`
`63`		`- bigNumber: null`
	`63`	`+ bigNumber: null,`
	`64`	`+ showComma: true`
`64`	`65`	`}`
`65`	`66`
`66`	`67`	`// will trigger whenever setState() is called, or parent passes in new props.`
Original file line number	Diff line number	Diff line change
`@@ -386,6 +386,13 @@ const getDefaultThemeStyling = theme => {`
`386`	`386`	`color: colors.validationFailure.iconColor,`
`387`	`387`	`fontSize: constants.iconFontSize,`
`388`	`388`	`transform: 'rotate(45deg)'`
	`389`	`+ },`
	`390`	`+ comma: {`
	`391`	`+ display: 'inline-block',`
	`392`	`+ color: constants.commaColor,`
	`393`	`+ fontSize: constants.commaFontSize,`
	`394`	`+ marginRight: constants.commaMarginRight,`
	`395`	`+ cursor: 'default'`
`389`	`396`	`}`
`390`	`397`	`}`
`391`	`398`	`}`