newbreedofgeek / react-stepzilla Goto Github PK

If a step uses react-validation-mixin for validation, and use the top nav to navigate backwards it validated the form and throws errors.

navigating backwards via the top menu should not validate and save the form.

Upto what level customizations can be done ?
For an example:

• Styling the step name
• Adding custom previous and next buttons

Hello,
I am creating a form using redux-form and I have a custom survey where each page is displaying as a step. The next/previous buttons that are created do not have the type attribute set so when they are clicked within the form the default behavior for a button is to submit. Adding type="button" fixed my issue.

A fade-in effect between screens would be awesome.

This is incorrect as StepZilla needs a sValidated public method to work. This is an artefact due to the public/private coding style I initially used. It needs to go...

Why progress bar is broken?
Perhaps is it related with other dependencies?

I am using following..

"dependencies": { "canvas-gauges": "^2.1.0", "centrifuge": "^1.4.1", "classnames": "^2.2.5", "crypto-js": "^3.1.9-1", "express": "^4.14.0", "express-history-api-fallback": "^2.1.0", "fs": "0.0.1-security", "gulp-util": "^3.0.7", "history": "^2.1.2", "pubsub-js": "^1.5.3", "rc-tabs": "^7.1.0", "react": "^15.3.2", "react-addons-css-transition-group": "^15.3.2", "react-bootstrap": "^0.30.3", "react-day-picker": "^5.1.1", "react-dom": "^15.3.2", "react-dropzone": "^3.13.1", "react-router": "^3.0.0", "react-router-bootstrap": "^0.23.1", "react-select": "^1.0.0-rc.3", "react-stepzilla": "^4.5.0", "sha256": "^0.2.0", "webpack-dev-server": "^1.16.2" }, "devDependencies": { "babel-core": "^6.14.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.14.0", "babel-preset-react": "^6.11.1", "browser-sync": "^2.16.0", "connect-history-api-fallback": "^1.3.0", "css-loader": "^0.25.0", "del": "^2.2.2", "exports-loader": "^0.6.3", "file-loader": "^0.9.0", "gulp": "^3.9.1", "gulp-changed": "^1.3.2", "gulp-concat": "^2.6.0", "gulp-cssnano": "^2.1.2", "gulp-expect-file": "0.0.7", "gulp-filter": "^4.0.0", "gulp-flatten": "^0.3.1", "gulp-html-prettify": "0.0.1", "gulp-if": "^2.0.1", "gulp-ignore": "^2.0.1", "gulp-jade": "^1.1.0", "gulp-jsvalidate": "^2.1.0", "gulp-less": "^3.1.0", "gulp-load-plugins": "^1.3.0", "gulp-rename": "^1.2.2", "gulp-rtlcss": "^1.0.0", "gulp-sass": "^2.3.2", "gulp-sourcemaps": "^1.6.0", "gulp-sync": "^0.1.4", "gulp-uglify": "^2.0.0", "gulp-util": "^3.0.7", "imports-loader": "^0.6.5", "marked": "^0.3.6", "modernizr-webpack-plugin": "^1.0.5", "react-hot-loader": "^3.0.0-beta.4", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.13.2", "webpack-dev-middleware": "^1.7.0", "webpack-hot-middleware": "^2.12.2", "webpack-stream": "^3.2.0", "yargs": "^5.0.0" }

Looking forward to be solved.
Thanks.

hi, i have a form and i want next and previous navigation buttons in some steps, while in some steps i dont want them to show,
i defined showNavigation false in step 2 as follow
i did following but it didnt work
const steps=[
{name: 'Step 1', component: <Step1 getStore={() => (this.getStore())} /> },
{name: 'Step 2', component: <Step2 showNavigation={false} getStore={() => (this.getStore())} />},
{name: 'Step 3', component: <Step3 getStore={() => (this.getStore())} />}
]
when i pass it in
it removes navigation altogether

but it is showing next button in step 2 and there is no syntax error
regards

warning.js:36Warning: Unknown prop jumpToStep on

   const steps =
      [
        {name: 'Step 1', component: <div><h1>1</h1></div>},
        {name: 'Step 2', component: <div><h1>2</h1></div>}
      ];

<StepZilla steps={steps} />

Hi,

I'm opening a new issue on that.

My steps are using redux and implementing isValidated() as mentioned in the documents.
The problem:
IsValidated method isn't called.

I've debug it a little bit and found in the method "stepMoveAllowed" it get ProxyComponent and not the step itself, so isValidted doesn't exist on this path.

It always starts at step 1 (index 0) regardless of the number that is plugged into startAtStep,

Is it possible to have a next button in the last step?

If I look at the demo, 'step 4' has one, but I just cannot get the same result for some reason?

Hi, first of all, great work. I start to use it and let more easy my life ;)

I need to make some validation with backend service in step component. What should I return on validated method ? maybe you can support a Promise.

Hi @newbreedofgeek can you add a way to make that Next Button be disabled before component report a valid state?

Thank you for donating your time and talent to this project, I appreciate your efforts.

I've started using and modifying the code for a project and it's going well. However, I wasn't able to find the licensing terms for your code and I was wondering if you could please clarify what they are. I want to be sure that I'm not violating your license :)

Thank you for your help

Hi
When you have 2 steps, submit button is not shown in 2nd step.
Why is it?
Looking forward to be revised soon.
Thanks.

I cannot start isValidated() method in my step
I found what stepMoveAllowed(skipValidationExecution = false) method in StepZIlla cannot properly check this because this.refs is empty

else if (Object.keys(this.refs).length == 0 || typeof this.refs.activeComponent.isValidated == 'undefined') {
				console.log(this.refs); // return EMPTY OBJECT
				// 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;
			}

my libraries
"react": "^15.3.2",
    "react-addons-css-transition-group": "^15.5.2",
    "react-bootstrap": "^0.30.10",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.13.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-overlays": "^0.6.12",
    "react-redux": "^5.0.4",
    "react-router": "3.0.5",
    "react-router-bootstrap": "^0.23.2",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^4.0.8",

I always hate to open an issue (and rarely do), but I have been banging my head against this for a long time now and I just can't seem to get the isVaildated() function to stop the user from hitting enter or hitting the next button when validation is failing:

Example component (I am using Redux so the siteRegistration object includes all of the user account registration data and booleans for whether each field is valid):

import React, { PropTypes, Component } from 'react'
import { connect } from 'react-redux'
import { Row, Col, FormGroup, ControlLabel, FormControl, Button, Alert } from 'react-bootstrap'
import { checkPassphrase, setPassphrase } from '../modules/siteRegistration'

class PassphraseStep1 extends Component {

    static propTypes = {
        siteRegistration: PropTypes.object.isRequired
    };

    constructor(props) {
      super(props);
      this.state = { passphrase: '' }
      /* Used this from the examples but not sure it is doing anything */
      this.isValidated = this.isValidated.bind(this);
    }

    componentDidMount() {
        this.setState({ passphrase: this.props.siteRegistration.passphrase })
    }

    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value }, 
            () => {
                this.props.setPassphrase(this.state.passphrase)
                this.props.checkPassphrase(this.state.passphrase)
            }
        )
    }

    isValidated() {
        /* this properly returns true and false from the props */
        return this.props.siteRegistration.passphraseIsValid
    }

    render() {
        const { siteRegistration } = this.props
        return (
            <div>
                <form>
                    <FormGroup bsSize="lg" controlId="passphrase">
                        <ControlLabel>Passphrase</ControlLabel>
                        <FormControl type="text" name="passphrase" value={this.state.passphrase} onChange={(e) => this.handleChange(e)} />
                        <FormControl.Feedback />
                    </FormGroup>
                    <div className={s.alertContainer}>
                        {this.isValidated() ? <Alert bsStyle="success">This is valid!</Alert> : null}
                    </div>
                </form>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch, ownProps) => ({
    setPassphrase: (passphrase) => dispatch(setPassphrase(passphrase)),
    checkPassphrase: (passphrase) => dispatch(checkPassphrase(passphrase))
})

const mapStateToProps = (state, ownProps) => ({
    siteRegistration: state.siteRegistration
})

export default connect(mapStateToProps, mapDispatchToProps)(PassphraseStep1)

Is there something I am doing wrong with isValidated()?

I got this error while implement it on stateless component

Warning: Stateless function components cannot be given refs (See ref "activeComponent" in ProductForm created by StepZilla). Attempts to access this ref will fail.

When I enter:
meteor npm install react-stepzilla --save

I get:
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

I have webpack 2.3.3 installed, any ideas?

Thanks

Hi

I have four steps and when I set startAtStep={2}, the next button does not show up.
then I hit previous and every thing works fine.

Hi!

I'm using react-stepzilla, but I'm encountering these warnings:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

They're pretty trivial, but they're messing up my CI runs.

I checked the source and noticed that stepzilla is importing PropTypes from react, which is in the process of being moved into that external package.

I can put up a PR if you'd like!

I can't access refs.component isValidated() method from step component. please help me

Hi there,

I just encountered an issue regarding the option preventEnterSubmission which disables enter submissions in all child inputs. I believe this behaviour isn't intended for textareas. I suggest updating the handleKeyDown method as follows:

  // handles keydown on enter being pressed in any Child component input area. in this case it goes to the next
  handleKeyDown(evt) {
    if (evt.which === 13) {
      if (!this.props.preventEnterSubmission && evt.target.type != 'textarea') {
        this.next();
      }
      else if(evt.target.type != 'textarea') {
        evt.preventDefault();
      }
    }
  }

Is their a way to disable the steps. I am needing this during the review step. when the click save, i want to disable the button to prevent them from submitting more then one since saving is going to be done server side. Is it possible?

I noticed I can skip right to Step 4 from the overhead step options, even though Step 2 (let's take it from the example) requires form input - if I'm on step 2 it works fine, but if i'm on step 1 or 3 i can skip through. Is there a simple way to solve this?

There is no "dist" folder in the NPM package so the module can't be used in a project.

Hi again... when use jumpToStep on lastStep (where apply nextTextOnFinalActionStep to footer button) step target of jumpToStep render same text as nextTextOnFinalActionStep.

It happen inclusive in your live demo example. You can see if click next button on step target will say Save in place of Next.

how can i pass data from one step to another. can i use props.getStore(). to store and change the values.

Thanks a bunch!

If you come to Montreal, I owe you a beer.

Hi @newbreedofgeek me again. Yours .catch are silent other errors on components used as steps don't be raised.
Try follow. Make a component with a development error, like use an undefined as function and should get it reproduced.

whenever i use JumptoState(); everythings works fine but i get warning as:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

is there a solution for this problem

Ideally, it should not add bootstrap as a dependency but can add styles of the button only.

Let me know if I can open pr to add styles of button, it would be great! :)

Do not show next button if you have only one step.

How to submit a form when clicking Next button? Or submit a form when clicking last Next button?

@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 ??

Hi is it possible to change the text of the buttons? I'm from Latin America, and i need it in Spanish, with other legend.

Thks!

Even in the Example it's not working reliable. If you click on the text (span element) e.g. "Step 1" it's not navigating back, and all styles are loss. If you click at the hook (before pseudo element of the span) it's working.

A fix would be great to guarantee consistency

You can only update the nextTextOnFinalActionStep if you have 3 or more steps. This is most probably a bug, but not a major issue as most people will have more than 2 steps.

When using startAtStep prop, the stepper looks like you are in the first step.
First step in 'in-progress' state, and all other steps seems to be in 'todo' state (style-wise, grey color).

Fixed by PR #17

Hi @newbreedofgeek is it possible to configure custom controls for the previous and next buttons?

I added the component:

const StepZilla = require('react-stepzilla');

And my render method:

    render() {
        const stepOne = (
            <div >
                <h1> Hello </h1>
            </div>
        );
        const stepTwo = (
            <div >
                <h1> World </h1>
            </div>
        );
        const stepThree = (
            <div >
                <h1> !!! </h1>
            </div>
        );
        const steps =
            [
              { name: 'Step 1', component: <stepOne /> },
              { name: 'Step 2', component: <StepTwo /> },
              { name: 'Step 3', component: <stepThree /> },
            ];

        return (
            <div className="step-progress">
                <StepZilla steps={steps} />
            </div>
        );
    }

I get this error:
React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)

When a Promise is returned we should have a way to disable the next button as to prevent click spam. This can be done within the component by using local state and ignoring calls to the isValidated() method but ideally this should be handled as core functionality.

Version: 4.4.4

Steps to repro:

1. Jump to Step 3 (this steps uses basic form validation) - it will work
2. Jump back to Step 1 - it will work
3. Jump to Step 4 - it won't work as Step 3 needs to pass validation (intended behaviour)
4. Jump to Step 3, fill the form and Jump to Step 4 - this will validate the form and it will jump to step 5. Jump back to Step 1 - it will work
5. Jump back to Step 4 - this will work now as we have validated data in Step 3 already
6. Jump back to Step 1 - it will work
7. Jump to Step 5 - THIS SHOULD NOT WORK as Step 4 is react-validation-mixin based validation

But....
Repeat Steps 1 - 6

And now...

• Don't fill the Step 4 form and jump to Step 5 - this will trigger validation and it will fail
• Not jump back to Step 1 and then try and Jump to Step 5 (as in Step 8 above) - This wont be allowed now!

Looks like validation needs to be triggered at least once on react-validation-mixin steps before the Direct Steps Navigation rules will apply.

If you click on the text, back and forward buttons disappear because the span doesn't have a value attribute so evt.target.value is undefined.

You can see this in the example app, there is a blue highlight around the next button after you click it to move to step two.

I think this is the expected behavior of chrome, the focus is kept on a button after it is clicked. It is confusing for users (they try to press enter and nothing happens).

I added a ref to a div in my step component and tried to manually set the focus to that in the componentDidMount function- but focus snaps back to the next clicked button. It would be nice if focus was blurred on the selected button between steps, or if there was a ref to the buttons that I could use to blur/set focus as I wanted.

When enabling nextTextOnFinalActionStep="Submit" the previous steps are also changed to "Submit" where they should have remained "Next".

Hi,

I tried to open this app in IE. Blank page only loading not components are getting rendered.

Stepzilla shows only step numbers (1, 2,3, etc,) and hide step titles in small screens. How can we make it still show step titles/texts?

i have a question. i want to customize the next and previous button to match my layout. can i resize the buttons also please guide if i can manipulate the length of navigation bar