Merge pull request mac-s-g#271 from kochis/remove-quotes-from-keys-option

Add quotesOnKeys option

Author: mac-s-g

README.md

@@ -59,6 +59,7 @@ Name|Type|Default|Description
 `onDelete`|`(delete)=>{}`|`false`|When a callback function is passed in, `delete` functionality is enabled.  The callback is invoked before deletions are completed. Returning `false` from `onDelete` will prevent the change from being made. [see: onDelete docs](#onedit-onadd-and-ondelete-interaction)
 `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:`)
 `validationMessage`|`string`|"Validation Error"|Custom message for validation failures to `onEdit`, `onAdd`, or `onDelete` callbacks
 
 ### Features

src/js/components/ObjectName.js

@@ -3,7 +3,7 @@ import Theme from './../themes/getStyle';
 
 export default function getObjectName(props) {
     const {
-        parent_type, namespace, theme, jsvRoot, name
+        parent_type, namespace, quotesOnKeys, theme, jsvRoot, name
     } = props;
 
     const display_name = props.name ? props.name : '';
@@ -21,9 +21,13 @@ export default function getObjectName(props) {
         return (
             <span {...Theme(theme, 'object-name')} key={namespace}>
                 <span class="object-key">
-                    <span style={{verticalAlign:'top'}}>"</span>
+                    { quotesOnKeys &&
+                      <span style={{verticalAlign:'top'}}>"</span>
+                    }
                     <span>{display_name}</span>
-                    <span style={{verticalAlign:'top'}}>"</span>
+                    { quotesOnKeys &&
+                      <span style={{verticalAlign:'top'}}>"</span>
+                    }
                 </span>
                 <span {...Theme(theme, 'colon')}>:</span>
             </span>

src/js/index.js

@@ -46,6 +46,7 @@ class ReactJsonView extends React.PureComponent {
         collapseStringsAfterLength: false,
         shouldCollapse: false,
         sortKeys: false,
+        quotesOnKeys: true,
         groupArraysAfterLength: 100,
         indentWidth: 4,
         enableClipboard: true,

test/tests/js/components/DataTypes/Object-test.js

@@ -341,6 +341,7 @@ describe("<JsonObject />", function() {
                 sortKeys={true}
                 collapsed={false}
                 shouldCollapse={() => false}
+                quotesOnKeys={true}
             />
         )
         expect(wrapper.text()).to.equal('"":{"a":"a""b":"b""c":"c""d":"d"}');
@@ -361,6 +362,7 @@ describe("<JsonObject />", function() {
                 namespace={["root"]}
                 collapsed={false}
                 shouldCollapse={() => false}
+                quotesOnKeys={true}
             />
         )
         expect(wrapper.text()).to.equal('"":{"d":"d""b":"b""a":"a""c":"c"}');

test/tests/js/components/ObjectName-test.js

@@ -41,4 +41,30 @@ describe("<ObjectName />", function() {
         )
         expect(wrapper.find("span").children()).to.have.length(0)
     })
+
+    it("ObjectName with quotesOnKeys enabled (default)", function() {
+        const wrapper = render(
+            <ObjectName
+                namespace={"test"}
+                name="test"
+                theme="rjv-default"
+                jsvRoot={false}
+                quotesOnKeys={true}
+            />
+        )
+        expect(wrapper.find(".object-key").children('span')).to.have.length(3)
+    })
+
+    it("ObjectName with quotesOnKeys disabled", function() {
+        const wrapper = render(
+            <ObjectName
+                namespace={"test"}
+                name="test"
+                theme="rjv-default"
+                jsvRoot={false}
+                quotesOnKeys={false}
+            />
+        )
+        expect(wrapper.find(".object-key").children('span')).to.have.length(1)
+    })
 })