WIP - fix for higer order components

Author: newbreedofgeek

package.json

@@ -53,10 +53,14 @@
     "gulp-mocha": "^3.0.1",
     "gulp-plumber": "^1.1.0",
     "isparta": "^4.0.0",
+    "joi": "^10.2.2",
+    "joi-validation-strategy": "^0.3.3",
+    "json-loader": "^0.5.4",
     "promise": "^7.1.1",
     "react": "^15.3.2",
     "react-addons-test-utils": "^15.3.2",
     "react-dom": "^15.3.2",
+    "react-validation-mixin": "^5.4.0",
     "sinon": "^1.17.7",
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",

src/examples/Example.js

@@ -7,6 +7,7 @@ import Step2 from './Step2'
 import Step3 from './Step3'
 import Step4 from './Step4'
 import Step5 from './Step5'
+import StepValidationTest from './StepValidationTest'
 
 export default class Example extends Component {
   constructor(props) {
@@ -38,6 +39,7 @@ export default class Example extends Component {
   render() {
     const steps =
     [
+      {name: 'StepValidationTest', component: <StepValidationTest getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
       {name: 'Step1', component: <Step1 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
       {name: 'Step2', component: <Step2 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},
       {name: 'Step3', component: <Step3 getStore={() => (this.getStore())} updateStore={(u) => {this.updateStore(u)}} />},

src/examples/StepValidationTest.js

@@ -0,0 +1,99 @@
+'use strict';
+
+import React, { Component, PropTypes } from 'react';
+import validation from 'react-validation-mixin';
+import strategy from 'joi-validation-strategy';
+import Joi from 'joi';
+
+class StepValidationTest extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: ''
+        };
+
+        this.validatorTypes = {
+          email: Joi.string().email(),
+        };
+
+        this.getValidatorData = this.getValidatorData.bind(this);
+        this.isValidated = this.isValidated.bind(this);
+        this.renderHelpText = this.renderHelpText.bind(this);
+    }
+
+    getValidatorData() {
+        return {
+            email: this.refs.email.value,
+        }
+    };
+
+    isValidated() {
+        const isDataValid = this.props.isValid();
+
+        return isDataValid;
+    }
+
+    onChange(e) {
+        const state = {};
+
+        state[e.target.id] = e.target.value ;
+        this.setState(state);
+    }
+
+    renderHelpText(message, id) {
+        return (<div key={id}><span>{message}</span></div>);
+    };
+
+    render() {
+        // explicit class assigning based on validation
+        let notValidClasses = {};
+        notValidClasses.emailCls = this.props.isValid('email') ?
+            'no-error col-md-8' : 'has-error col-md-8';
+
+        return (
+            <div className="step step2-2">
+                <div className="row">
+                    <form id="Form" className="form-horizontal">
+                        <div className="form-group">
+                            <label className="col-md-12 control-label">
+                                <h1>Step 2: Enter your Details</h1>
+                            </label>
+                        </div>
+                        <div className="form-group col-md-12">
+                            <label className="control-label col-md-4">
+                                Email
+                            </label>
+                            <div className={notValidClasses.emailCls}>
+                                <input
+                                    ref="email"
+                                    autoComplete="off"
+                                    type="email"
+                                    placeholder="[email protected]"
+                                    className="form-control"
+                                    defaultValue={this.state.email}
+                                    required
+                                    onBlur={this.props.handleValidation('email')}
+                                    onChange={this.onChange.bind(this)}
+                                />
+                            </div>
+                            {this.props.getValidationMessages('email').map(this.renderHelpText)}
+                        </div>
+                    </form>
+                </div>
+            </div>
+        )
+    }
+}
+
+StepValidationTest.propTypes = {
+    errors: PropTypes.object,
+    validate: PropTypes.func,
+    isValid: PropTypes.func,
+    handleValidation: PropTypes.func,
+    getValidationMessages: PropTypes.func,
+    clearValidations: PropTypes.func,
+    getStore: PropTypes.func,
+    updateStore: PropTypes.func,
+};
+
+export default validation(strategy)(StepValidationTest);

src/main.js

@@ -218,6 +218,7 @@ export default class StepZilla extends Component {
 
   // are we allowed to move forward? via the next button or via jumpToStep?
   stepMoveAllowed(skipValidationExecution = false) {
+    debugger;
     let proceed = false;
 
     if (this.props.dontValidate) {

webpack.config.js

@@ -17,12 +17,21 @@ module.exports = {
         loader: 'babel-loader'
       },
       {
-      test: /\.css$/,
-      loader: 'style-loader!css-loader'
-    }
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      }
     ]
   },
   resolve: {
     extensions: ['', '.js', '.json']
+  },
+  node: {
+    net: 'empty',
+    tls: 'empty',
+    dns: 'empty'
   }
 };