supporting react-validation-mixin and fixes #15

Author: newbreedofgeek

README.md

@@ -2,7 +2,12 @@
 is a multi-step, wizard component for sequential data collection. It basically lets you throw a bunch of react components at it (data forms, text / html components etc) and it will take the user through those components in steps. If it's a data-entry form it can tigger validation and only proceed if the data is valid.
 
 
-#### :tada::tada: whats new: react stepzilla now supports Pure Components!!! (as of v4.2.0) :tada::tada:
+:tada::tada::tada::tada::tada::tada::tada:
+#### whats new:
+- ... now supporting higer order component based validation via react-validation-mixin!!! (as of v4.3.0)
+- ... now supporting pure, dumb components!!! (as of v4.2.0)
+
+:tada::tada::tada::tada::tada::tada::tada: 
 
 
 ### what does it do?
@@ -74,6 +79,9 @@ startAtStep: [stepIndex]
 // specify what the Next button text should be in the step before the last (This is usually the last "Actionable" step. You can use this option to change the Next button to say Save - if you save the form data collected in previous steps)
 nextTextOnFinalActionStep: "Save"
 
+// its recommended that you use basic javascript validation (i.e simple validation implemented inside your step component. But stepzilla steps can also use 'react-validation-mixin' which wraps your steps as higher order components. If you use this then you need to specify those steps indexes that use 'react-validation-mixin' below in this array)
+hocValidationAppliedTo: [1, 2]
+
 ```
 
 example options usage:

dist/main.js

@@ -291,8 +291,11 @@ var StepZilla = function (_Component) {
       if (this.props.dontValidate) {
         proceed = true;
       } else {
-        // 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
-        if (Object.keys(this.refs).length == 0 || typeof this.refs.activeComponent.isValidated == 'undefined') {
+        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
           proceed = true;
         } else if (skipValidationExecution) {
           // we are moving backwards in steps, in this case dont validate as it means the user is not commiting to "save"
@@ -431,5 +434,6 @@ StepZilla.defaultProps = {
   dontValidate: false,
   preventEnterSubmission: false,
   startAtStep: 0,
-  nextTextOnFinalActionStep: "Next"
+  nextTextOnFinalActionStep: "Next",
+  hocValidationAppliedTo: []
 };