Keyboard handler for collapse/expanding

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).

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

src/js/components/DataTypes/Function.js

@@ -4,6 +4,8 @@ import DataTypeLabel from './DataTypeLabel';
 //theme
 import Theme from './../../themes/getStyle';
 
+import { generateExpanderProps } from '../../helpers/util';
+
 //attribute store for storing collapsed state
 import AttributeStore from './../../stores/ObjectAttributes';
 
@@ -48,7 +50,7 @@ export default class extends React.PureComponent {
                 <span
                     {...Theme(props.theme, 'function-value')}
                     class="rjv-function-container"
-                    onClick={this.toggleCollapsed}
+                    {...generateExpanderProps(this.toggleCollapsed, !collapsed)}
                 >
                     {this.getFunctionDisplay(collapsed)}
                 </span>

src/js/components/DataTypes/Object.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { polyfill } from 'react-lifecycles-compat';
-import { toType } from './../../helpers/util';
+import { toType, generateExpanderProps } from './../../helpers/util';
 
 //data type components
 import { JsonObject } from './DataTypes';
@@ -156,10 +156,12 @@ class RjvObject extends React.PureComponent {
         return (
             <span>
                 <span
-                    onClick={e => {
-                        this.toggleCollapsed();
-                    }}
+                    {...generateExpanderProps(
+                        this.toggleCollapsed,
+                        this.state.expanded
+                    )}
                     {...Theme(theme, 'brace-row')}
+                    className="rjv-object-container"
                 >
                     <div
                         class="icon-container"

src/js/components/DataTypes/String.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import DataTypeLabel from './DataTypeLabel';
-import { toType } from './../../helpers/util';
+import { toType, generateExpanderProps } from './../../helpers/util';
 
 //theme
 import Theme from './../../themes/getStyle';
@@ -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,16 +61,20 @@ export default class extends React.PureComponent {
                 );
             }
         }
-
         return (
             <div {...Theme(theme, 'string')}>
                 <DataTypeLabel type_name={type_name} {...props} />
                 <span
                     class="string-value"
                     {...style}
-                    onClick={this.toggleCollapsed}
+                    {...generateExpanderProps(
+                        this.toggleCollapsed,
+                        this.state.expanded
+                    )}
                 >
-                    "{value}"
+                    {quotesOnValues ? '"' : ''}
+                    {value}
+                    {quotesOnValues ? '"' : ''}
                 </span>
             </div>
         );

src/js/helpers/util.js

@@ -53,3 +53,20 @@ export function isTheme(theme) {
     }
     return false;
 }
+
+export function generateExpanderProps(callback, isExpanded) {
+    function handler(e) {
+        if (e && e.key && e.key != 'Enter') {
+            return;
+        } else {
+            return callback(e);
+        }
+    }
+    return {
+        onClick: callback,
+        onKeyDown: handler,
+        role: 'button',
+        tabIndex: '0',
+        'aria-expanded': isExpanded
+    };
+}

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,

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

@@ -1,86 +1,120 @@
-import React from "react"
-import { shallow, mount } from "enzyme"
-import { expect } from "chai"
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { expect } from 'chai';
 
-import JsonFunction from "./../../../../../src/js/components/DataTypes/Function"
+import JsonFunction from './../../../../../src/js/components/DataTypes/Function';
 
-import AttributeStore from "./../../../../../src/js/stores/ObjectAttributes"
+import AttributeStore from './../../../../../src/js/stores/ObjectAttributes';
 
-describe("<JsonFunction />", function() {
-    const rjvId = 1
+describe('<JsonFunction />', function () {
+    const rjvId = 1;
 
-    it("function component should have a data type label", function() {
+    it('function component should have a data type label', function () {
         const wrapper = mount(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
-        expect(wrapper.find(".data-type-label")).to.have.length(1)
-    })
+        );
+        expect(wrapper.find('.data-type-label')).to.have.length(1);
+    });
 
-    it("function component should not have a data type label", function() {
+    it('function component should not have a data type label', function () {
         const wrapper = mount(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 rjvId={rjvId}
                 displayDataTypes={false}
                 theme="rjv-default"
             />
-        )
-        expect(wrapper.find(".data-type-label")).to.have.length(0)
-    })
+        );
+        expect(wrapper.find('.data-type-label')).to.have.length(0);
+    });
 
-    it("function component expanded", function() {
-        AttributeStore.set(rjvId, "function-test", "collapsed", false)
+    it('function component expanded', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', false);
 
         const wrapper = shallow(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 namespace="function-test"
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
-        expect(wrapper.find(".function-collapsed")).to.have.length(0)
-    })
+        );
+        expect(wrapper.find('.function-collapsed')).to.have.length(0);
+    });
 
-    it("function component collapsed", function() {
-        AttributeStore.set(rjvId, "function-test", "collapsed", true)
+    it('function component collapsed', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', true);
 
         const wrapper = shallow(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 namespace="function-test"
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
+        );
 
-        expect(wrapper.find(".function-collapsed")).to.have.length(1)
-    })
+        expect(wrapper.find('.function-collapsed')).to.have.length(1);
+    });
 
-    it("function component click to expand", function() {
-        AttributeStore.set(rjvId, "function-test", "collapsed", true)
+    it('function component click to expand', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', true);
 
         const wrapper = shallow(
             <JsonFunction
-                value={function() {}}
+                value={function () {}}
                 namespace="function-test"
                 rjvId={rjvId}
                 displayDataTypes={true}
                 theme="rjv-default"
             />
-        )
+        );
 
-        expect(wrapper.find(".function-collapsed")).to.have.length(1)
+        expect(wrapper.find('.function-collapsed')).to.have.length(1);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(false);
 
-        wrapper.find(".rjv-function-container").simulate("click")
+        wrapper.find('.rjv-function-container').simulate('click');
 
-        expect(wrapper.find(".function-collapsed")).to.have.length(0)
-    })
-})
+        expect(wrapper.find('.function-collapsed')).to.have.length(0);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(true);
+    });
+
+    it('function component keydown to expand', function () {
+        AttributeStore.set(rjvId, 'function-test', 'collapsed', true);
+
+        const wrapper = shallow(
+            <JsonFunction
+                value={function () {}}
+                namespace="function-test"
+                rjvId={rjvId}
+                displayDataTypes={true}
+                theme="rjv-default"
+            />
+        );
+
+        expect(wrapper.find('.function-collapsed')).to.have.length(1);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(false);
+
+        wrapper
+            .find('.rjv-function-container')
+            .simulate('keydown', { key: 'Enter' });
+
+        expect(wrapper.find('.function-collapsed')).to.have.length(0);
+        expect(
+            wrapper.find('.rjv-function-container').prop('aria-expanded')
+        ).to.equal(true);
+    });
+});

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

@@ -5,7 +5,11 @@ import { expect } from 'chai';
 import JsonObject from './../../../../../src/js/components/DataTypes/Object';
 
 describe('<JsonObject />', function () {
-    const rjvId = 1;
+    let rjvId = 1;
+
+    beforeEach(() => {
+        rjvId++;
+    });
 
     it('Object component should have a data type label', function () {
         let src = {
@@ -373,4 +377,52 @@ describe('<JsonObject />', function () {
         );
         expect(wrapper.text()).to.equal('"":{"d":"d""b":"b""a":"a""c":"c"}');
     });
+
+    it('Object click to expand', function () {
+        let src = {
+            obj: {
+                test: true
+            }
+        };
+        const wrapper = shallow(
+            <JsonObject src={src} rjvId={rjvId} namespace={['root']} />
+        );
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(false);
+        wrapper.find('.rjv-object-container').simulate('click');
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(true);
+    });
+
+    it('Object keydown to expand', function () {
+        let src = {
+            obj: {
+                test: true
+            }
+        };
+        const wrapper = shallow(
+            <JsonObject src={src} rjvId={rjvId} namespace={['root']} />
+        );
+
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(false);
+
+        wrapper
+            .find('.rjv-object-container')
+            .simulate('keydown', { key: 'Space' });
+
+        expect(
+            wrapper.find('.rjv-object-container').prop('aria-expanded')
+        ).to.equal(false);
+
+        wrapper
+            .find('.rjv-object-container')
+            .simulate('keydown', { key: 'Enter' });
+        expect(
+            wrapper.find('.rjv-object-container').at(0).prop('aria-expanded')
+        ).to.equal(true);
+    });
 });