Merge pull request mac-s-g#101 from mac-s-g/custom-validation-message

Custom validation message

Author: mac-s-g

dev-server/dev-server.js

@@ -27,6 +27,7 @@ ReactDom.render(
         <JsonViewer
         src={getExampleJson1()}
         theme='railscasts'
+        validationMessage="You're doing something wrong."
         collapseStringsAfterLength={15}
         onEdit={(e)=>{console.log(e); if (e.new_value == 'error'){return false;}}}
         onDelete={(e)=>{console.log(e);}}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-json-view",
   "description": "Interactive react component for displaying javascript arrays and JSON objects.",
-  "version": "1.11.6",
+  "version": "1.11.7",
   "main": "dist/main.js",
   "files": [
     "dist/"

src/js/components/ValidationFailure.js

@@ -12,7 +12,7 @@ import Theme from './../themes/getStyle';
 export default class extends React.Component {
 
     render() {
-        const {active, theme, rjvId} = this.props;
+        const {message, active, theme, rjvId} = this.props;
 
         return active ? (
         <div
@@ -25,7 +25,9 @@ export default class extends React.Component {
             });
         }}
         >
-            <span {...Theme(theme, 'validation-failure-label')}>Validation Error</span>
+            <span {...Theme(theme, 'validation-failure-label')}>
+                {message}
+            </span>
             <Clear
             {...Theme(theme, 'validation-failure-clear')} />
         </div>

src/js/index.js

@@ -49,7 +49,8 @@ export default class extends React.Component {
         onDelete: false,
         onAdd: false,
         iconStyle: "triangle",
-        style: {}
+        style: {},
+        validationMessage: "Validation Error"
     }
 
     getListeners = () => {
@@ -98,6 +99,13 @@ export default class extends React.Component {
         }
 
         this.validateInput();
+
+        ObjectAttributes.set(
+            this.rjvId,
+            'global',
+            'src',
+            this.state.src
+        );
     }
 
     //make sure props are passed in as expected
@@ -130,12 +138,16 @@ export default class extends React.Component {
     }
 
     render() {
-        const {addKeyRequest, style, validationFailure, ...props} = this.state;
+        const {
+            validationFailure, validationMessage,
+            addKeyRequest, style, ...props
+        } = this.state;
         //reset key request to false once it's observed
         this.state.addKeyRequest = false;
         return (<div class="react-json-view"
             style={{...Theme(props.theme, 'app-container').style, ...style}} >
             <ValidationFailure
+                message={validationMessage}
                 active={validationFailure}
                 theme={props.theme}
                 rjvId={this.rjvId} />

src/js/stores/ObjectAttributes.js

@@ -88,6 +88,7 @@ class ObjectAttributes extends EventEmitter {
             walk = walk[idx];
         }
 
+
         if (variable_removed) {
             if (toType(walk) == 'array') {
                 walk.splice(name, 1);
@@ -116,9 +117,10 @@ class ObjectAttributes extends EventEmitter {
         let idx = copy_namespace.shift();
         if (type == 'array') {
             result = [...src];
-            result[idx] = this.deepCopy(src[idx], copy_namespace);
         } else if (type == 'object') {
             result = {...src};
+        }
+        if (idx !== undefined) {
             result[idx] = this.deepCopy(src[idx], copy_namespace);
         }
         return result;

test/tests/js/components/ValidationFailure-test.js

@@ -5,7 +5,6 @@ import {expect} from 'chai';
 import Index from '/react/src/js/index';
 import ValidationFailure from '/react/src/js/components/ValidationFailure';
 
-
 describe('<ValidationFailure />', function () {
     const rjvId = 1;
 
@@ -50,4 +49,27 @@ describe('<ValidationFailure />', function () {
         wrapper.find('.validation-failure').simulate('click');
     });
 
+    it('ValidationFailure disabled with ValidationMessage', function () {
+        const wrapper = mount(
+            <Index validationMessage="custom validation" />
+        );
+        expect(
+            wrapper.find('.validation-failure').length
+        ).to.equal(0);
+    });
+
+    it('ValidationFailure touch click event', function () {
+        const wrapper = mount(
+            <ValidationFailure
+            active={true}
+            theme='rjv-default'
+            rjvId={rjvId}
+            message="custom validation"
+            />
+        );
+        expect(
+            wrapper.find('.validation-failure').html()
+        ).to.contain('custom validation');
+    });
+
 });