Add property that hides the array keys

Change: Closes mac-s-g#180

This change introduces the `displayArrayKey` property to the
`ReactJsonView` component defaulting to `true`. This property will allow
users to hide the `array-key` in the component output.

Verification:

- Run unit test
- Added unit test
- Toggle the `displayArrayKey` and visually verified the key is not
displayed when expected

Author: imdanielsp

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
 `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

@@ -3,20 +3,20 @@ import Theme from './../themes/getStyle';
 
 export default function getObjectName(props) {
     const {
-        parent_type, namespace, theme, jsvRoot, name
+        parent_type, namespace, theme, jsvRoot, 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 (
             <span {...Theme(theme, 'object-name')} key={namespace}>

src/js/components/VariableEditor.js

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

src/js/index.js

@@ -59,6 +59,7 @@ class ReactJsonView extends React.PureComponent {
         style: {},
         validationMessage: 'Validation Error',
         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)
@@ -41,4 +42,18 @@ describe("<ObjectName />", function() {
         )
         expect(wrapper.find("span").children()).to.have.length(0)
     })
+
+    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)
+    })
 })