From 69d990a0af1a1beb6f6649617f8cb961b10c1aaa Mon Sep 17 00:00:00 2001
From: Ayeni Olusegun <nsegun5@gmail.com>
Date: Sat, 24 Sep 2016 06:31:14 +0100
Subject: [PATCH 1/2] worked on the textarea component and added placeholder in
 the input component

---
 .gitignore                      |  2 ++
 examples/components/Input.js    |  1 +
 examples/components/Textarea.js | 48 +++++++++++++++++++++++++++++++++
 examples/global.css             | 12 ++++++---
 examples/reset-values/app.js    |  7 +++--
 5 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 examples/components/Textarea.js

diff --git a/.gitignore b/.gitignore
index 491fc359..a83f1f80 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 node_modules
 lib
+.idea/
+.DS_Store
\ No newline at end of file
diff --git a/examples/components/Input.js b/examples/components/Input.js
index fd668344..95485144 100644
--- a/examples/components/Input.js
+++ b/examples/components/Input.js
@@ -33,6 +33,7 @@ const MyInput = React.createClass({
           name={this.props.name}
           onChange={this.changeValue}
           value={this.getValue()}
+          placeholder={this.props.placeholder && this.props.type !== 'checkbox' ? this.props.placeholder : ''}
           checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}
         />
         <span className='validation-error'>{errorMessage}</span>
diff --git a/examples/components/Textarea.js b/examples/components/Textarea.js
new file mode 100644
index 00000000..37d9ef9b
--- /dev/null
+++ b/examples/components/Textarea.js
@@ -0,0 +1,48 @@
+/**
+ * Created by iamraphson on 9/24/16.
+ */
+import React from 'react';
+import Formsy from 'formsy-react';
+
+const MyTextarea = React.createClass({
+
+    // 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.value);
+    },
+    render() {
+
+        // Set a specific className based on the validation
+        // state of this component. showRequired() is true
+        // when the value is empty and the required prop is
+        // 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' : '');
+
+        // An error message is returned ONLY if the component is invalid
+        // or the server has returned an error message
+        const errorMessage = this.getErrorMessage();
+
+        return (
+            <div className={className}>
+                <label htmlFor={this.props.name}>{this.props.title}</label>
+                <textarea
+                name={this.props.name}
+                cols={this.props.cols || '20'}
+                rows={this.props.rows || '3'}
+                onChange={this.changeValue}
+                placeholder={this.props.placeholder || ''}
+                value={this.getValue()}
+                />
+                <span className='validation-error'>{errorMessage}</span>
+            </div>
+    );
+    }
+});
+
+export default MyTextarea;
\ No newline at end of file
diff --git a/examples/global.css b/examples/global.css
index 50aaa2a2..9bb9010f 100644
--- a/examples/global.css
+++ b/examples/global.css
@@ -39,7 +39,8 @@ form {
 .form-group input[type='email'],
 .form-group input[type='number'],
 .form-group input[type='password'],
-.form-group select {
+.form-group select,
+.form-group textarea{
   display: block;
   width: 100%;
   height: 34px;
@@ -53,12 +54,16 @@ form {
   border-radius: 4px;
   box-sizing: border-box;
 }
+.form-group textarea {
+  height: auto;
+}
 
 .form-group.error input[type='text'],
 .form-group.error input[type='email'],
 .form-group.error input[type='number'],
 .form-group.error input[type='password'],
-.form-group.error select {
+.form-group.error select,
+.form-group.error textarea{
   border-color: red;
   color: red;
 }
@@ -67,7 +72,8 @@ form {
 .form-group.required input[type='email'],
 .form-group.required input[type='number'],
 .form-group.required input[type='password'],
-.form-group.required select {
+.form-group.required select,
+.form-group.required textarea{
   border-color: #FF9696;
 }
 
diff --git a/examples/reset-values/app.js b/examples/reset-values/app.js
index d5deb8f4..a0637c91 100644
--- a/examples/reset-values/app.js
+++ b/examples/reset-values/app.js
@@ -4,11 +4,13 @@ import { Form } from 'formsy-react';
 
 import MyInput from './../components/Input';
 import MySelect from './../components/Select';
+import MyTextarea from './../components/Textarea';
 
 const user = {
   name: 'Sam',
   free: true,
-  hair: 'brown'
+  hair: 'brown',
+  address: 'Class 7, Herbert Macaulay, Sabo Yaba, Lagos, Nigeria'
 };
 
 const App = React.createClass({
@@ -22,7 +24,8 @@ const App = React.createClass({
     return (
       <Formsy.Form ref="form" onSubmit={this.submit} className="form">
         <MyInput name="name" title="Name" value={user.name} />
-        <MyInput name="free" title="Free to hire" type="checkbox" value={user.free} />
+        <MyInput name="free" title="Free to hire" type="checkbox" value={user.free} placeholder="cool" />
+        <MyTextarea  title="Address" name="address" value={user.address} cols="20" rows="7" />
         <MySelect name="hair" title="Hair" value={user.hair}
           options={[
             { value: "black", title: "Black" },

From 3813884e8a18a0f39042b2ff73e05f5571eefede Mon Sep 17 00:00:00 2001
From: Ayeni Olusegun <nsegun5@gmail.com>
Date: Tue, 27 Sep 2016 21:09:50 +0100
Subject: [PATCH 2/2] fix bug

---
 examples/components/Input.js    | 2 +-
 examples/components/Select.js   | 2 +-
 examples/components/Textarea.js | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/examples/components/Input.js b/examples/components/Input.js
index 95485144..a8730709 100644
--- a/examples/components/Input.js
+++ b/examples/components/Input.js
@@ -32,7 +32,7 @@ const MyInput = React.createClass({
           type={this.props.type || 'text'}
           name={this.props.name}
           onChange={this.changeValue}
-          value={this.getValue()}
+          value={this.getValue() || ''}
           placeholder={this.props.placeholder && this.props.type !== 'checkbox' ? this.props.placeholder : ''}
           checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}
         />
diff --git a/examples/components/Select.js b/examples/components/Select.js
index cf619be7..c9dbafc2 100644
--- a/examples/components/Select.js
+++ b/examples/components/Select.js
@@ -22,7 +22,7 @@ const MySelect = React.createClass({
     return (
       <div className={className}>
         <label htmlFor={this.props.name}>{this.props.title}</label>
-        <select name={this.props.name} onChange={this.changeValue} value={this.getValue()}>
+        <select name={this.props.name} onChange={this.changeValue} value={this.getValue() || ''}>
           {options}
         </select>
         <span className='validation-error'>{errorMessage}</span>
diff --git a/examples/components/Textarea.js b/examples/components/Textarea.js
index 37d9ef9b..32beadf8 100644
--- a/examples/components/Textarea.js
+++ b/examples/components/Textarea.js
@@ -37,8 +37,7 @@ const MyTextarea = React.createClass({
                 rows={this.props.rows || '3'}
                 onChange={this.changeValue}
                 placeholder={this.props.placeholder || ''}
-                value={this.getValue()}
-                />
+                value={this.getValue() || ''} />
                 <span className='validation-error'>{errorMessage}</span>
             </div>
     );