From e8e02438e6bc5896c5e7f096edbdcccec8f8c7df Mon Sep 17 00:00:00 2001
From: Jerry Chang <therealjerrycan@gmail.com>
Date: Sat, 20 May 2017 21:18:26 -0700
Subject: [PATCH] Update usage of HOC Input Component in README and code
 example

Use React.propTypes instead of external 'prop-types' due to peer dep. of React@14.x

Updated HOC usage for Input Component used for examples
---
 README.md                    | 34 ++++++++++++++++++++----------
 examples/components/Input.js | 40 ++++++++++++++++++++++++++----------
 2 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 65cacd14..f4435873 100644
--- a/README.md
+++ b/README.md
@@ -83,18 +83,26 @@ This code results in a form with a submit button that will run the `submit` meth
 
 #### Building a form element (required)
 ```jsx
-  import Formsy from 'formsy-react';
-
-  const MyOwnInput = React.createClass({
+  import React from 'react';
+  import Formsy, { HOC as FormsyWrapper } from 'formsy-react';
+
+  class MyOwnInput extends React.Component { 
+  
+    constructor() {
+      super();
+      this.changeValue = this.changeValue.bind(this);
+    }
 
-    // Add the Formsy Mixin
-    mixins: [Formsy.Mixin],
+    static propTypes = {
+       setValue: React.propTypes.func,
+       showError: React.propTypes.func,
+       showRequired: React.propTypes.func,
+       getErrorMessage: React.propTypes.func
+    };
 
-    // setValue() will set the value of the component, which in
-    // turn will validate it and the rest of the form
     changeValue(event) {
       this.setValue(event.currentTarget.value);
-    },
+    }
 
     render() {
       // Set a specific className based on the validation
@@ -110,12 +118,16 @@ This code results in a form with a submit button that will run the `submit` meth
 
       return (
         <div className={className}>
-          <input type="text" onChange={this.changeValue} value={this.getValue()}/>
+          <input
+            type="text"
+            onChange={this.changeValue}
+            value={this.getValue()}
+          />
           <span>{errorMessage}</span>
         </div>
       );
-    }
-  });
+  }
+  export default FormsyWrapper(MyOwnInput);
 ```
 The form element component is what gives the form validation functionality to whatever you want to put inside this wrapper. You do not have to use traditional inputs, it can be anything you want and the value of the form element can also be anything you want. As you can see it is very flexible, you just have a small API to help you identify the state of the component and set its value.
 
diff --git a/examples/components/Input.js b/examples/components/Input.js
index fd668344..3d7c9db0 100644
--- a/examples/components/Input.js
+++ b/examples/components/Input.js
@@ -1,16 +1,31 @@
 import React from 'react';
-import Formsy from 'formsy-react';
+import Formsy, { HOC as FormsyWrapper } from 'formsy-react';
 
-const MyInput = React.createClass({
+class MyInput extends React.Component {
 
+  constructor() {
+    super();
+    this.changeValue = this.changeValue.bind(this);
+  }
+
+  static propTypes = {
+    title: React.propTypes.string,
+    name: React.propTypes.string,
+    className: React.propTypes.string,
+    type: React.propTypes.string,
+    setValue: React.propTypes.func,
+    showError: React.propTypes.func,
+    showRequired: React.propTypes.func,
+    getErrorMessage: React.propTypes.func
+  }
   // Add the Formsy Mixin
-  mixins: [Formsy.Mixin],
 
   // setValue() will set the value of the component, which in
   // turn will validate it and the rest of the form
   changeValue(event) {
-    this.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
-  },
+    this.props.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
+  }
+
   render() {
 
     // Set a specific className based on the validation
@@ -19,26 +34,29 @@ const MyInput = React.createClass({
     // passed to the input. showError() is true when the
     // value typed is invalid
     const className = 'form-group' + (this.props.className || ' ') +
-      (this.showRequired() ? 'required' : this.showError() ? 'error' : '');
+      (this.props.showRequired() ? 'required' : this.props.showError() ? 'error' : '');
 
     // An error message is returned ONLY if the component is invalid
     // or the server has returned an error message
-    const errorMessage = this.getErrorMessage();
+    const errorMessage = this.props.getErrorMessage();
 
     return (
       <div className={className}>
-        <label htmlFor={this.props.name}>{this.props.title}</label>
+        <label
+          htmlFor={this.props.name}>
+          {this.props.title}
+        </label>
         <input
           type={this.props.type || 'text'}
           name={this.props.name}
           onChange={this.changeValue}
-          value={this.getValue()}
+          value={this.props.getValue()}
           checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}
         />
         <span className='validation-error'>{errorMessage}</span>
       </div>
     );
   }
-});
+}
 
-export default MyInput;
+export default FormsyWrapper(MyInput);