From 1d4eee7392c01a894e8bb0846542aec957791f28 Mon Sep 17 00:00:00 2001
From: Daniel Santos <dsantosp12@gmail.com>
Date: Sat, 4 Apr 2020 18:19:57 -0400
Subject: [PATCH 1/3] Add property that hides the array keys

Change: Closes #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
---
 README.md                                   |  1 +
 src/js/components/ObjectName.js             |  6 +++---
 src/js/components/VariableEditor.js         | 14 +++++++-------
 src/js/index.js                             |  1 +
 test/tests/js/components/ObjectName-test.js | 15 +++++++++++++++
 5 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index fed04f2f..48ae1373 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
 `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
diff --git a/src/js/components/ObjectName.js b/src/js/components/ObjectName.js
index 05124dbc..68970866 100644
--- a/src/js/components/ObjectName.js
+++ b/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, theme, jsvRoot, name, displayArrayKey
     } = props;
 
     const display_name = props.name ? props.name : '';
@@ -11,12 +11,12 @@ export default function getObjectName(props) {
     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}>
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js
index 60497bac..6a373213 100644
--- a/src/js/components/VariableEditor.js
+++ b/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
diff --git a/src/js/index.js b/src/js/index.js
index 64773a3a..34797e1f 100644
--- a/src/js/index.js
+++ b/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.
diff --git a/test/tests/js/components/ObjectName-test.js b/test/tests/js/components/ObjectName-test.js
index 0e368f66..760c7b6b 100644
--- a/test/tests/js/components/ObjectName-test.js
+++ b/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)
+    })
 })

From 0ec198e53a64d9b19a1eafa14627f85e294ff678 Mon Sep 17 00:00:00 2001
From: Daniel Santos <dsantosp12@gmail.com>
Date: Wed, 3 Feb 2021 22:58:25 -0500
Subject: [PATCH 2/3] Add extract missing prop after resolving conflict

---
 src/js/components/ObjectName.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/components/ObjectName.js b/src/js/components/ObjectName.js
index 54fa46b1..c420b1ce 100644
--- a/src/js/components/ObjectName.js
+++ b/src/js/components/ObjectName.js
@@ -8,7 +8,8 @@ export default function getObjectName(props) {
         quotesOnKeys,
         theme,
         jsvRoot,
-        name
+        name,
+        displayArrayKey
     } = props;
 
     const display_name = props.name ? props.name : '';

From 6b50e714ad78f6c83a83e65c4e9824a255f93eb2 Mon Sep 17 00:00:00 2001
From: Daniel Santos <dsantosp12@gmail.com>
Date: Wed, 3 Feb 2021 23:02:40 -0500
Subject: [PATCH 3/3] Apply linter rules

---
 src/js/components/ObjectName.js     |  4 +++-
 src/js/components/VariableEditor.js | 18 ++++++++++--------
 src/js/index.js                     |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/js/components/ObjectName.js b/src/js/components/ObjectName.js
index c420b1ce..c1cfaac7 100644
--- a/src/js/components/ObjectName.js
+++ b/src/js/components/ObjectName.js
@@ -22,7 +22,9 @@ export default function getObjectName(props) {
                 <span class="array-key">{display_name}</span>
                 <span {...Theme(theme, 'colon')}>:</span>
             </span>
-        ) : (<span />);
+        ) : (
+            <span />
+        );
     } else {
         return (
             <span {...Theme(theme, 'object-name')} key={namespace}>
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js
index d8ae7d5b..7b44d725 100644
--- a/src/js/components/VariableEditor.js
+++ b/src/js/components/VariableEditor.js
@@ -71,14 +71,16 @@ class VariableEditor extends React.PureComponent {
                 class="variable-row"
                 key={variable.name}
             >
-                {(type == 'array') ? ((displayArrayKey ?
-                    (<span
-                        {...Theme(theme, 'array-key')}
-                        key={variable.name + '_' + namespace}>
-                        {variable.name}
-                        <div {...Theme(theme, 'colon')}>:</div>
-                    </span>)
-                    : null)
+                {type == 'array' ? (
+                    displayArrayKey ? (
+                        <span
+                            {...Theme(theme, 'array-key')}
+                            key={variable.name + '_' + namespace}
+                        >
+                            {variable.name}
+                            <div {...Theme(theme, 'colon')}>:</div>
+                        </span>
+                    ) : null
                 ) : (
                     <span>
                         <span
diff --git a/src/js/index.js b/src/js/index.js
index 72772c35..f47338df 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -56,7 +56,7 @@ class ReactJsonView extends React.PureComponent {
         style: {},
         validationMessage: 'Validation Error',
         defaultValue: null,
-        displayArrayKey: true,
+        displayArrayKey: true
     };
 
     // will trigger whenever setState() is called, or parent passes in new props.