Merge pull request mac-s-g#284 from imdanielsp/master

Add displayArrayKey property that hides the array keys

Author: mac-s-g

README.md

@@ -61,6 +61,7 @@ Name|Type|Default|Description
 `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
+`displayArrayKey`|`boolean`|`true`|When set to `true`, the index of the elements prefix values
 
 ### Features
 * `onEdit`, `onAdd` and `onDelete` props allow users to edit the `src` variable

src/js/components/ObjectName.js

@@ -8,19 +8,22 @@ export default function getObjectName(props) {
         quotesOnKeys,
         theme,
         jsvRoot,
-        name
+        name,
+        displayArrayKey
     } = props;
 
     const display_name = props.name ? props.name : '';
 
     if (jsvRoot && (name === false || name === null)) {
         return <span />;
     } else if (parent_type == 'array') {
-        return (
+        return displayArrayKey ? (
             <span {...Theme(theme, 'array-key')} key={namespace}>
                 <span class="array-key">{display_name}</span>
                 <span {...Theme(theme, 'colon')}>:</span>
             </span>
+        ) : (
+            <span />
         );
     } else {
         return (

src/js/components/VariableEditor.js

@@ -53,10 +53,10 @@ class VariableEditor extends React.PureComponent {
             enableClipboard,
             onEdit,
             onDelete,
-            onSelect
+            onSelect,
+            displayArrayKey
         } = this.props;
         const { editMode } = this.state;
-
         return (
             <div
                 {...Theme(theme, 'objectKeyVal', {
@@ -72,13 +72,15 @@ class VariableEditor extends React.PureComponent {
                 key={variable.name}
             >
                 {type == 'array' ? (
-                    <span
-                        {...Theme(theme, 'array-key')}
-                        key={variable.name + '_' + namespace}
-                    >
-                        {variable.name}
-                        <div {...Theme(theme, 'colon')}>:</div>
-                    </span>
+                    displayArrayKey ? (
+                        <span
+                            {...Theme(theme, 'array-key')}
+                            key={variable.name + '_' + namespace}
+                        >
+                            {variable.name}
+                            <div {...Theme(theme, 'colon')}>:</div>
+                        </span>
+                    ) : null
                 ) : (
                     <span>
                         <span

src/js/index.js

@@ -55,7 +55,8 @@ class ReactJsonView extends React.PureComponent {
         iconStyle: 'triangle',
         style: {},
         validationMessage: 'Validation Error',
-        defaultValue: null
+        defaultValue: null,
+        displayArrayKey: true
     };
 
     // will trigger whenever setState() is called, or parent passes in new props.

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

@@ -25,6 +25,7 @@ describe("<ObjectName />", function() {
                 parent_type="array"
                 theme="rjv-default"
                 jsvRoot={false}
+                displayArrayKey={true}
             />
         )
         expect(wrapper.find(".array-key")).to.have.length(1)
@@ -67,4 +68,18 @@ describe("<ObjectName />", function() {
         )
         expect(wrapper.find(".object-key").children('span')).to.have.length(1)
     })
+  
+    it("ObjectName array hides key", function() {
+      const wrapper = render(
+          <ObjectName
+              namespace={"test"}
+              name="test"
+              parent_type="array"
+              theme="rjv-default"
+              jsvRoot={false}
+              displayArrayKey={false}
+          />
+      )
+      expect(wrapper.find(".array-key")).to.have.length(0)
+    })
 })