Skip to content

feat: show comma option #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 1, 2025
Merged

feat: show comma option #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -53,7 +54,9 @@ import ReactJsonView from '@microlink/react-json-view'
string_number: '1234',
date: new Date(),
bigNumber: new BigNumber('0.0060254656709730629123')
}} />
}}
showComma
/>
```

### API
Expand Down Expand Up @@ -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

Expand Down
48 changes: 48 additions & 0 deletions dev-server/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down Expand Up @@ -98,6 +145,7 @@ ReactDom.render(
src.constructor.name === 'Moment'
}
selectOnFocus
showComma={true}
/>

<br />
Expand Down
2 changes: 2 additions & 0 deletions src/js/components/ArrayGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
)
Expand Down
23 changes: 18 additions & 5 deletions src/js/components/DataTypes/Object.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,6 @@ class RjvObject extends React.PureComponent {
<span {...Theme(theme, 'brace')}>
{object_type === 'array' ? '[' : '{'}
</span>
{expanded ? this.getObjectMetaData(src) : null}
</span>
)
}
Expand All @@ -167,7 +166,6 @@ class RjvObject extends React.PureComponent {
{object_type === 'array' ? '[' : '{'}
</span>
</span>
{expanded ? this.getObjectMetaData(src) : null}
</span>
)
}
Expand All @@ -185,6 +183,8 @@ class RjvObject extends React.PureComponent {
theme,
jsvRoot,
iconStyle,
showComma,
isLast,
...rest
} = this.props

Expand Down Expand Up @@ -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>
)
}
Expand All @@ -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 = []
Expand All @@ -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
Expand All @@ -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}
/>
)
Expand All @@ -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}
/>
)
Expand All @@ -294,6 +305,8 @@ class RjvObject extends React.PureComponent {
singleIndent={SINGLE_INDENT}
namespace={namespace}
type={this.props.type}
isLast={isLast}
showComma={showComma}
{...props}
/>
)
Expand Down
9 changes: 8 additions & 1 deletion src/js/components/VariableEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ class VariableEditor extends React.PureComponent {
onSelect,
displayArrayKey,
quotesOnKeys,
keyModifier
keyModifier,
showComma,
isLast
} = this.props
const { editMode } = this.state
return (
Expand Down Expand Up @@ -126,6 +128,11 @@ class VariableEditor extends React.PureComponent {
>
{this.getValue(variable, editMode)}
</div>
{showComma && !isLast && (
<span {...Theme(theme, 'comma')}>
,
</span>
)}
{enableClipboard
? (
<CopyToClipboard
Expand Down
3 changes: 2 additions & 1 deletion src/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
7 changes: 7 additions & 0 deletions src/js/themes/getStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
}
}
Expand Down
8 changes: 6 additions & 2 deletions src/js/themes/styleConstants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,5 +91,9 @@ export default {
addKeyModalWidth: '200px',
addKeyModalMargin: 'auto',
addKeyModalPadding: '10px',
addKeyModalRadius: '3px'
}
addKeyModalRadius: '3px',

commaColor: '#666',
commaFontSize: '12px',
commaMarginRight: '4px'
};
44 changes: 44 additions & 0 deletions test/tests/js/Index-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(',')
})
})
93 changes: 93 additions & 0 deletions test/tests/js/components/DataTypes/Object-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
})
Loading