Support for Higher Order Components

[newbreedofgeek]

@newbreedofgeek
Can we use a wrapped component. I am using the react-validation-mixin to validate the form input an as a setup we need to wrap the component around the selected strategy. It seems that the isValidated() method not applied ??

[wassimz]

Hi @newbreedofgeek
I have tried to create an example (you can see it on my fork project (https://github.com/wassimz/react-stepzilla/blob/master/src/examples/Step22.js) but still not able to make it run (I am novice on react programming). So you can have a look on it and see how can I make it run.

Thanks

[newbreedofgeek]

Ok, let me take a look.

[wassimz]

@newbreedofgeek
Any update on this issue ??

[newbreedofgeek]

@wassimz I'm looking at this now...

[newbreedofgeek]

@wassimz I had look and it's indeed possible to support react-validation-mixin with StepZilla.

But it needs an upgrade to the core library. I'm hoping to push this put in the next few days as I need to test it for backward compatibility.

[wassimz]

@newbreedofgeek
Thanks for your effort and time. Any hint or possibility to have a temporary fix as it's blocking me now for my project.

Thanks

[newbreedofgeek]

@wassimz I'm worked out how to it and am making the change now, the tricky part now is making it backwards compatible. I should be able to push a new version of StepZilla by tomorrow with the fix.

[newbreedofgeek]

@wassimz sorry, my update broke the core functionality. It's a bit more complicated then I planned.

I should be able to work it out by tomorrow. There is some work in progress that I've checked in:
https://github.com/newbreedofgeek/react-stepzilla/blob/master/src/examples/Step4.js

I've updated your code to fix some issues and allow for StepZilla integration. It does nto fully work yet but I should be able to finish it by tomorrow.

[wassimz]

Excellent @newbreedofgeek. Thanks for the time and effort you spent on my issue.
:)

[newbreedofgeek]

@wassimz give it a go :)

You need version 4.3.0 so do a npm update.

full working code is in:
https://github.com/newbreedofgeek/react-stepzilla/blob/master/src/examples/Step4.js

Don't forget the new setting 'hocValidationAppliedTo' which is required when using react-validation-mixin
https://github.com/newbreedofgeek/react-stepzilla/blob/master/src/examples/Example.js#L57

as per README:
// 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]