diff --git a/README.md b/README.md index ddbeb3e..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. | @@ -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..2a4e514 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)} @@ -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 ( + { + 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 && :} ) } 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)