newbreedofgeek / react-stepzilla Goto Github PK
View Code? Open in Web Editor NEWA React multi-step/wizard component for sequential data collection
Home Page: https://newbreedofgeek.github.io/react-stepzilla/
License: ISC License
A React multi-step/wizard component for sequential data collection
Home Page: https://newbreedofgeek.github.io/react-stepzilla/
License: ISC License
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.
Do not show next button if you have only one step.
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.
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.
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...
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",
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.
I can't access refs.component isValidated() method from step component. please help me
It always starts at step 1 (index 0) regardless of the number that is plugged into startAtStep
,
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 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)
Hi,
I tried to open this app in IE. Blank page only loading not components are getting rendered.
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
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.
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?
Version: 4.4.4
Steps to repro:
But....
Repeat Steps 1 - 6
And now...
Looks like validation needs to be triggered at least once on react-validation-mixin steps before the Direct Steps Navigation rules will apply.
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" }
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!
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
Hi @newbreedofgeek is it possible to configure custom controls for the previous and next buttons?
how can i pass data from one step to another. can i use props.getStore(). to store and change the values.
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.
Hi
When you have 2 steps, submit button is not shown in 2nd step.
Why is it?
Looking forward to be revised soon.
Thanks.
A fade-in effect between screens would be awesome.
There is no "dist" folder in the NPM package so the module can't be used in a project.
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?
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.
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!
How to submit a form when clicking Next button? Or submit a form when clicking last Next button?
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
@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, 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.
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
Upto what level customizations can be done ?
For an example:
step name
previous
and next
buttonsHi @newbreedofgeek can you add a way to make that Next Button be disabled before component report a valid state?
warning.js:36Warning: Unknown prop jumpToStep
on
seem to be on the components in the steps
const steps =
[
{name: 'Step 1', component: <div><h1>1</h1></div>},
{name: 'Step 2', component: <div><h1>2</h1></div>}
];
<StepZilla steps={steps} />
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();
}
}
}
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.
Thanks a bunch!
If you come to Montreal, I owe you a beer.
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
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?
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
When enabling nextTextOnFinalActionStep="Submit" the previous steps are also changed to "Submit" where they should have remained "Next".
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
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.
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()?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.