diff --git a/README.md b/README.md index 20ad1189..932b3721 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,7 @@ Name|Type|Default|Description `onSelect`|`(select)=>{}`|`false`|When a function is passed in, clicking a value triggers the `onSelect` method to be called. `sortKeys`|`boolean`|`false`|set to true to sort object keys `quotesOnKeys`|`boolean`|`true`|set to false to remove quotes from keys (eg. `"name":` vs. `name:`) +`quotesOnValues`|`boolean`|`true`|set to false to remove quotes from Values (eg. `[key]: "value"` vs. `[key]: value`) `validationMessage`|`string`|"Validation Error"|Custom message for validation failures to `onEdit`, `onAdd`, or `onDelete` callbacks `displayArrayKey`|`boolean`|`true`|When set to `true`, the index of the elements prefix values @@ -145,4 +146,4 @@ For information about contributing with Docker, see the [README in ./docker](htt ### Inspiration I drew a ton of design ideas from [react-json-tree](https://github.com/alexkuz/react-json-tree). Thanks to the RJT contributors for putting together an awesome component! -I'm also inspired by users who come up with interesting feature requests. Reach out to me with ideas for this project or other projects you want to collaborate on. My email address is listed on my [github user page](https://github.com/mac-s-g). +I'm also inspired by users who come up with interesting feature requests. Reach out to me with ideas for this project or other projects you want to collaborate on. My email address is listed on my [github user page](https://github.com/mac-s-g). \ No newline at end of file diff --git a/index.d.ts b/index.d.ts index c1a2ce31..7f6dcc39 100644 --- a/index.d.ts +++ b/index.d.ts @@ -93,6 +93,12 @@ export interface ReactJsonViewProps { * Default: true */ quotesOnKeys?: boolean; + /** + * set to false to remove quotes from Values (eg. [key]: "value" vs. [key]: value) + * + * Default: true + */ + quotesOnValues?: boolean; /** * When a callback function is passed in, edit functionality is enabled. * The callback is invoked before edits are completed. Returning false diff --git a/src/js/components/DataTypes/String.js b/src/js/components/DataTypes/String.js index cef5fc3b..bbefb8fa 100644 --- a/src/js/components/DataTypes/String.js +++ b/src/js/components/DataTypes/String.js @@ -41,7 +41,11 @@ export default class extends React.PureComponent { const type_name = 'string'; const { collapsed } = this.state; const { props } = this; - const { collapseStringsAfterLength, theme } = props; + const { + collapseStringsAfterLength, + theme, + quotesOnValues = true + } = props; let { value } = props; let collapsible = toType(collapseStringsAfterLength) === 'integer'; let style = { style: { cursor: 'default' } }; @@ -57,7 +61,6 @@ export default class extends React.PureComponent { ); } } - return (
@@ -66,7 +69,9 @@ export default class extends React.PureComponent { {...style} onClick={this.toggleCollapsed} > - "{value}" + {quotesOnValues ? '"' : ''} + {value} + {quotesOnValues ? '"' : ''}
); diff --git a/src/js/index.js b/src/js/index.js index f47338df..0e4142a8 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -43,6 +43,7 @@ class ReactJsonView extends React.PureComponent { shouldCollapse: false, sortKeys: false, quotesOnKeys: true, + quotesOnValues: true, groupArraysAfterLength: 100, indentWidth: 4, enableClipboard: true, diff --git a/test/tests/js/components/DataTypes/String-test.js b/test/tests/js/components/DataTypes/String-test.js index 44c1f0ac..184dc22a 100644 --- a/test/tests/js/components/DataTypes/String-test.js +++ b/test/tests/js/components/DataTypes/String-test.js @@ -67,4 +67,21 @@ describe("", function() { .text() ).to.equal('"123456789"') }) + + it("remove quotes from string value", function() { + const props = { + value: "123456789", + quotesOnValues: false, + rjvId: 1, + displayDataTypes: false, + theme: "rjv-default" + } + const component = shallow() + expect( + component + .render() + .find(".string-value") + .text() + ).to.equal('123456789') + }) })