From 1b65215e043eadc26787a9d37edfe999df8c6875 Mon Sep 17 00:00:00 2001 From: chacha912 Date: Sun, 16 Mar 2025 21:15:01 +0900 Subject: [PATCH 1/2] Add displayCompact option for cleaner nested structure visualization --- README.md | 1 + docs/src/js/components/Demo.js | 25 +++++++++++++++- index.d.ts | 7 +++++ src/js/components/DataTypes/Function.js | 4 +-- src/js/components/DataTypes/Object.js | 38 +++++++++++++++---------- src/js/components/ObjectName.js | 7 +++-- 6 files changed, 61 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index ddbeb3e..94d2b04 100644 --- a/README.md +++ b/README.md @@ -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. | diff --git a/docs/src/js/components/Demo.js b/docs/src/js/components/Demo.js index 7ba5dac..5e592e0 100644 --- a/docs/src/js/components/Demo.js +++ b/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 {
Collapse Strings After Length:
{this.getCollapsedStringsInput(collapseStringsAfter)} +
+
Display Compact
+ {this.getCompactInput(displayCompact)} +
{this.getNotes(onEdit, onAdd)} @@ -435,6 +442,22 @@ class Demo extends React.PureComponent { ) } + getCompactInput = displayCompact => { + return ( + { + this.set('displayCompact', val) + }} + /> + ) + } + getCollapsedStringsInput = collapseStringsAfter => { return ( - {'{'} + {!this.props.displayCompact && {'{'}} ... - {'}'} + {!this.props.displayCompact && {'}'}} ) diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js index 4d37bff..0624c60 100644 --- a/src/js/components/DataTypes/Object.js +++ b/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 ( - - {object_type === 'array' ? '[' : '{'} - + {!displayCompact && ( + + {object_type === 'array' ? '[' : '{'} + + )} {expanded ? this.getObjectMetaData(src) : null} ) @@ -163,9 +165,11 @@ class RjvObject extends React.PureComponent { - - {object_type === 'array' ? '[' : '{'} - + {!displayCompact && ( + + {object_type === 'array' ? '[' : '{'} + + )} {expanded ? this.getObjectMetaData(src) : null} @@ -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()} - - {object_type === 'array' ? ']' : '}'} - + {!displayCompact && ( + + {object_type === 'array' ? ']' : '}'} + + )} {expanded ? null : this.getObjectMetaData(src)} diff --git a/src/js/components/ObjectName.js b/src/js/components/ObjectName.js index 301d6f7..c2f1af1 100644 --- a/src/js/components/ObjectName.js +++ b/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) { ? ( {display_name} - : + {!displayCompact && :} ) : ( @@ -35,7 +36,7 @@ export default function getObjectName (props) { {display_name} {quotesOnKeys && "} - : + {!displayCompact && :} ) } From 7d061c680ea3050bc3183cf95c03a0f2bb5cd0ab Mon Sep 17 00:00:00 2001 From: chacha912 Date: Sun, 16 Mar 2025 22:14:44 +0900 Subject: [PATCH 2/2] Add chevron icon style option --- README.md | 2 +- docs/src/js/components/Demo.js | 3 +- index.d.ts | 4 +- src/js/components/ToggleIcons.js | 15 +++++- src/js/components/icons.js | 54 ++++++++++++++++++++ test/tests/js/components/ToggleIcons-test.js | 18 ++++++- 6 files changed, 90 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 94d2b04..df00458 100644 --- a/README.md +++ b/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. | diff --git a/docs/src/js/components/Demo.js b/docs/src/js/components/Demo.js index 5e592e0..2a4e514 100644 --- a/docs/src/js/components/Demo.js +++ b/docs/src/js/components/Demo.js @@ -337,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) diff --git a/index.d.ts b/index.d.ts index 848bceb..23a3253 100644 --- a/index.d.ts +++ b/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. * diff --git a/src/js/components/ToggleIcons.js b/src/js/components/ToggleIcons.js index 9ded049..7467cbd 100644 --- a/src/js/components/ToggleIcons.js +++ b/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 ( ) + case 'chevron': + return ( + + ) default: return ( @@ -45,6 +51,13 @@ export function CollapsedIcon (props) { class='collapsed-icon' /> ) + case 'chevron': + return ( + + ) default: return ( + + + + + ) + } +} + 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 ( + + + + + + ) + } +} + export class Clippy extends React.PureComponent { render () { const { props } = this diff --git a/test/tests/js/components/ToggleIcons-test.js b/test/tests/js/components/ToggleIcons-test.js index 3dbe48f..f47d9c3 100644 --- a/test/tests/js/components/ToggleIcons-test.js +++ b/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('', function () { @@ -41,6 +43,13 @@ describe('', function () { expect(wrapper.type()).to.equal(SquareMinus) }) + it('ExpandedIcon with chevron style', function () { + const wrapper = shallow( + + ) + expect(wrapper.type()).to.equal(ChevronDown) + }) + it('ExpandedIcon with no style', function () { const wrapper = shallow() expect(wrapper.type()).to.equal(CircleMinus) @@ -60,6 +69,13 @@ describe('', function () { expect(wrapper.type()).to.equal(SquarePlus) }) + it('CollapsedIcon with chevron style', function () { + const wrapper = shallow( + + ) + expect(wrapper.type()).to.equal(ChevronRight) + }) + it('CollapsedIcon with no style', function () { const wrapper = shallow() expect(wrapper.type()).to.equal(CirclePlus)