WIP - HOC support

Author: newbreedofgeek

src/examples/Example.js

@@ -55,7 +55,6 @@ export default class Example extends Component {
             preventEnterSubmission={true}
             nextTextOnFinalActionStep={"Save"}
             hocValidationAppliedTo={[3]}
-            hocValidationPredicate={(compRef) => (compRef.isValid()) }
              />
         </div>
       </div>

src/examples/Step4.js

@@ -6,78 +6,104 @@ import strategy from 'joi-validation-strategy';
 import Joi from 'joi';
 
 class Step4 extends Component {
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
 
-        this.state = {
-            email: ''
-        };
+    this.state = {
+      emailEmergency: ''
+    };
 
-        this.validatorTypes = {
-          email: Joi.string().email().required()
-        };
+    this.validatorTypes = {
+      emailEmergency: Joi.string().email().required()
+    };
 
-        this.getValidatorData = this.getValidatorData.bind(this);
-        this.renderHelpText = this.renderHelpText.bind(this);
-    }
+    this.getValidatorData = this.getValidatorData.bind(this);
+    this.renderHelpText = this.renderHelpText.bind(this);
+    this.isValidated = this.isValidated.bind(this);
+  }
 
-    getValidatorData() {
-        return {
-            email: this.refs.email.value,
+  isValidated() {
+    return new Promise((resolve, reject) => {
+      this.props.validate((error) => {
+        if (error) {
+          reject(); // form contains errors
+          return;
         }
-    };
 
-    onChange(e) {
-        let newState = {};
-        newState[e.target.name] = e.target.value;
-        this.setState(newState);
+        this.props.updateStore({
+          ...this.getValidatorData(),
+          savedToCloud: false // use this to notify step4 that some changes took place and prompt the user to save again
+        });  // Update store here (this is just an example, in reality you will do it via redux or flux)
+
+        resolve(); // form is valid, fire action
+      });
+    });
+  }
+
+  getValidatorData() {
+    return {
+      emailEmergency: this.refs.emailEmergency.value,
     }
+  };
 
-    renderHelpText(message, id) {
-        return (<div className="val-err-tooltip" key={id}><span>{message}</span></div>);
-    };
+  onChange(e) {
+      let newState = {};
+      newState[e.target.name] = e.target.value;
+      this.setState(newState);
+  }
+
+  renderHelpText(message, id) {
+      return (<div className="val-err-tooltip" key={id}><span>{message}</span></div>);
+  };
+
+  render() {
+    // explicit class assigning based on validation
+    let notValidClasses = {};
+    notValidClasses.emailEmergencyCls = this.props.isValid('emailEmergency') ?
+        'no-error col-md-8' : 'has-error col-md-8';
 
-    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 step4">
-                <div className="row">
-                    <form id="Form" className="form-horizontal">
-                        <div className="form-group">
-                            <label className="col-md-12 control-label">
-                                <h1>Step 4: Enter your emergency contacts 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"
-                                    name="email"
-                                    value={this.state.email}
-                                    required
-                                    onBlur={this.props.handleValidation('email')}
-                                    onChange={this.onChange.bind(this)}
-                                />
-
-                                {this.props.getValidationMessages('email').map(this.renderHelpText)}
-                            </div>
-                        </div>
-                    </form>
-                </div>
+    return (
+        <div className="step step4">
+            <div className="row">
+                <form id="Form" className="form-horizontal">
+                  <div className="form-group">
+                    <label className="control-label col-md-12 ">
+                        <h1>Step 4: Enter your emergency contacts details:</h1>
+                    </label>
+                  </div>
+                  <div className="form-group col-md-12">
+                    <label className="control-label col-md-4">
+                        Your Emergency Email Address
+                    </label>
+                    <div className={notValidClasses.emailEmergencyCls}>
+                        <input
+                            ref="emailEmergency"
+                            autoComplete="off"
+                            type="emailEmergency"
+                            placeholder="[email protected]"
+                            className="form-control"
+                            name="emailEmergency"
+                            value={this.state.emailEmergency}
+                            required
+                            onBlur={this.props.handleValidation('emailEmergency')}
+                            onChange={this.onChange.bind(this)}
+                        />
+
+                        {this.props.getValidationMessages('emailEmergency').map(this.renderHelpText)}
+                    </div>
+                  </div>
+                  <div className="form-group hoc-alert col-md-12 ">
+                    <label className="col-md-12 control-label">
+                      <h4>You can also use <a href="https://github.com/jurassix/react-validation-mixin" target="_blank">react-validation-mixin</a> to handle your validations as well! (as of v4.3.0)!</h4>
+                    </label>
+                    <br />
+                    <div className="green">... StepZilla steps can use a mix of basic JS validation of Higer Order Component (HOC) based validation with react-validation-mixin.</div>
+                  </div>
+                </form>
             </div>
-        )
-    }
+        </div>
+    )
+  }
 }
 
 Step4.propTypes = {

src/examples/Step5.js

@@ -88,6 +88,14 @@ export default class Step5 extends Component {
                     {this.props.getStore().email}
                   </div>
                 </div>
+                <div className="col-md-12 txt">
+                  <div className="col-md-4">
+                    Emergency Email
+                  </div>
+                  <div className="col-md-4">
+                    {this.props.getStore().emailEmergency}
+                  </div>
+                </div>
                 <div className="col-md-12 eg-jump-lnk">
                   <a href="#" onClick={() => this.jumpToStep(1)}>e.g. showing how we use the jumpToStep method helper method to jump back to step 1</a>
                 </div>

src/examples/index.html

@@ -22,6 +22,10 @@
     margin-left: 10px;
   }
 
+  html h4 {
+    font-size: 16px;
+  }
+
   .progtrckr {
     text-align: center;
     padding-bottom: 16px;
@@ -115,6 +119,10 @@
   span.bold {
     font-weight: bold;
   }
+
+  html .hoc-alert {
+    margin-top: 20px;
+  }
   </style>
 </head>
 <body>

src/main.js

@@ -218,16 +218,15 @@ 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) {
       proceed = true;
     }
     else {
-      if (this.props.hocValidationPredicate != null && this.props.hocValidationAppliedTo.length > 0 && this.props.hocValidationAppliedTo.indexOf(this.state.compState) > -1) {
-        // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as per hocValidationAppliedTo, so use the provided predicate method to determine if the HOC validation passes/fails
-        proceed = this.props.hocValidationPredicate(this.refs.activeComponent);
+      if (this.props.hocValidationAppliedTo.length > 0 && this.props.hocValidationAppliedTo.indexOf(this.state.compState) > -1) {
+        // the user is using a higer order component (HOC) for validation (e.g react-validation-mixin), this wraps the StepZilla steps as a HOC, so use hocValidationAppliedTo to determine if this step needs the aync validation as per react-validation-mixin interface 
+        proceed = this.refs.activeComponent.refs.component.isValidated();
       }
       else if (Object.keys(this.refs).length == 0 || typeof this.refs.activeComponent.isValidated == 'undefined') {
         // if its a form component, it should have implemeted a public isValidated class (also pure componenets wont even have refs - i.e. a empty object). If not then continue
@@ -328,6 +327,5 @@ StepZilla.defaultProps = {
   preventEnterSubmission: false,
   startAtStep: 0,
   nextTextOnFinalActionStep: "Next",
-  hocValidationAppliedTo: [],
-  hocValidationPredicate: null
+  hocValidationAppliedTo: []
 };