Fix state being mutated when using onValues

Author: zackify

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-validify",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Form validation made easy",
   "main": "dist/form.js",
   "directories": {

src/form.js

@@ -51,8 +51,9 @@ export default class Form extends React.Component {
   }
 
   onChange({ target }) {
-    let { values } = this.state;
     let { onValues } = this.props;
+    let values = { ...this.props.values, ...this.state.values };
+
     values[target.name] = target.value;
 
     if (onValues) return onValues({ ...values });

tests/on-values.js

@@ -1,10 +1,14 @@
 //Test things dealing with onValues prop
 import React from 'react';
 import Form from '../src/form';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 const Input = ({ error, ...props }) =>
-  error ? <p className="error">{error}</p> : <input {...props} />;
+  error
+    ? <p className="error">
+        {error}
+      </p>
+    : <input {...props} />;
 
 test('Form passes values to onValues', () => {
   const onValues = jest.fn();
@@ -40,3 +44,37 @@ test('Form sets values on prop change', () => {
   wrapper.setProps({ values: { test: 'changed!' } });
   expect(wrapper.find(Input).props().value).toEqual('changed!');
 });
+
+test('onValues does not mutate state', () => {
+  let onClick = jest.fn();
+
+  class Test extends React.Component {
+    constructor() {
+      super();
+      this.state = { values: { test: 'Set' } };
+    }
+
+    render() {
+      return (
+        <Form
+          values={this.state.values}
+          onValues={values => this.setState({ values })}
+        >
+          <Input name="test" />
+          <div
+            submit
+            className="submit"
+            onClick={() => this.setState({ values: { test: '' } })}
+          />
+        </Form>
+      );
+    }
+  }
+  const wrapper = mount(<Test />);
+  wrapper
+    .find(Input)
+    .simulate('change', { target: { name: 'test', value: 'Setting' } });
+
+  wrapper.find('.submit').simulate('click');
+  expect(wrapper.find(Input).props().value).toEqual('');
+});

tests/submit.js

@@ -4,7 +4,11 @@ import Form from '../src/form';
 import { shallow } from 'enzyme';
 
 const Input = ({ error, ...props }) =>
-  error ? <p className="error">{error}</p> : <input {...props} />;
+  error
+    ? <p className="error">
+        {error}
+      </p>
+    : <input {...props} />;
 
 test('Submit triggers validation', () => {
   const wrapper = shallow(