New textarea component added.

Example of textarea added in app.js

Author: nirajrajgor

src/App.css

@@ -15,9 +15,6 @@
 .control-error {
 border: 1px solid red;
 }
-.error-text {
-color: red;
-}
 
 .form-group label,
 .form-group .info-text {
@@ -31,6 +28,10 @@
 margin-top: 4px;
 }
 
+.form-group .error-text {
+color: red;
+}
+
 .btn-submit {
 margin: 20px 0;
 padding: 8px 14px;

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import './App.css';
-import { TextInput } from './utils/form_helpers';
+import { TextInput, TextArea } from './utils/form_helpers';
 import Validation, { Validate } from './utils/form_helpers/Validation';
 import { inputType } from './utils/Constants';
 import { onChangeHandler } from './utils/form_helpers/FormMethods';
@@ -74,6 +74,20 @@ class App extends Component {
 message: "Password is required"
 }
 ]
+},
+summary: {
+value: '',
+placeholder: 'Enter summary',
+rows: 5,
+valid: false,
+touched: false,
+errorMessage: "",
+validationRules: [
+{
+validate: Validation.isRequired,
+message: "Summary is required"
+}
+]
 }
 }
 }
@@ -135,6 +149,19 @@ class App extends Component {
 touched={this.state.formControls.password.touched}
 valid={this.state.formControls.password.valid}
 />
+
+<TextArea
+label="Summary"
+name="summary"
+placeholder={this.state.formControls.summary.placeholder}
+// helpText="summary"
+errorMessage={this.state.formControls.summary.errorMessage}
+value={this.state.formControls.summary.value}
+rows={this.state.formControls.summary.rows}
+onChange={onChangeHandler(this)}
+touched={this.state.formControls.summary.touched}
+valid={this.state.formControls.summary.valid}
+/>
 <button type="submit" className="btn-submit" disabled={!this.state.formIsValid}> Submit </button>
 </form>
 </div>

src/utils/form_helpers/TextArea.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const TextArea = ({
+touched,
+valid,
+label,
+value,
+errorMessage,
+helpText,
+...props
+}) => {
+let formControl = "form-control";
+
+if (touched && !valid) {
+formControl = "form-control control-error";
+}
+return (
+<div className="form-group">
+<label htmlFor={props.name}>{label}</label>
+<textarea className={formControl} id={props.name} {...props} >
+{value}
+</textarea>
+{/* Help text or Error */}
+<div className={errorMessage ? "info-text error-text" : "info-text"}>{errorMessage ? errorMessage : helpText}</div>
+</div>
+);
+}
+
+export default TextArea;

src/utils/form_helpers/index.js

@@ -1 +1,2 @@
-export { default as TextInput } from "./TextInput";
+export { default as TextInput } from "./TextInput";
+export { default as TextArea } from "./TextArea";