react-stepzilla
Advanced tools
Comparing version 4.6.2 to 4.6.3
@@ -387,2 +387,4 @@ 'use strict'; | ||
var props = this.props; | ||
var compToRender = void 0; | ||
@@ -423,7 +425,10 @@ | ||
'button', | ||
{ style: this.state.showPreviousBtn ? {} : this.hidden, | ||
className: 'btn btn-prev btn-primary btn-lg pull-left', | ||
{ | ||
style: this.state.showPreviousBtn ? {} : this.hidden, | ||
className: props.backButtonCls, | ||
onClick: function onClick() { | ||
_this6.previous(); | ||
} }, | ||
}, | ||
id: 'prev-button' | ||
}, | ||
this.props.backButtonText | ||
@@ -433,7 +438,10 @@ ), | ||
'button', | ||
{ style: this.state.showNextBtn ? {} : this.hidden, | ||
className: 'btn btn-next btn-primary btn-lg pull-right', | ||
{ | ||
style: this.state.showNextBtn ? {} : this.hidden, | ||
className: props.nextButtonCls, | ||
onClick: function onClick() { | ||
_this6.next(); | ||
} }, | ||
}, | ||
id: 'next-button' | ||
}, | ||
this.state.nextStepText | ||
@@ -461,3 +469,5 @@ ) | ||
nextButtonText: "Next", | ||
nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right", | ||
backButtonText: "Previous", | ||
backButtonCls: "btn btn-next btn-primary btn-lg pull-left", | ||
hocValidationAppliedTo: [] | ||
@@ -479,4 +489,6 @@ }; | ||
nextButtonText: _propTypes2.default.string, | ||
nextButtonCls: _propTypes2.default.string, | ||
backButtonCls: _propTypes2.default.string, | ||
backButtonText: _propTypes2.default.string, | ||
hocValidationAppliedTo: _propTypes2.default.array | ||
}; |
{ | ||
"name": "react-stepzilla", | ||
"version": "4.6.2", | ||
"version": "4.6.3", | ||
"description": "A react multi-step, wizard component for managing data collection via forms and sub components", | ||
@@ -5,0 +5,0 @@ "main": "./dist/main.js", |
@@ -83,2 +83,8 @@ # react stepzilla [![npm version](https://badge.fury.io/js/react-stepzilla.svg)](https://badge.fury.io/js/react-stepzilla) | ||
// specify the next button class (if not given it defaults to "btn btn-prev btn-primary btn-lg" which depends on bootstrap) | ||
nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right" | ||
// specify the back button text (if not given it default to "btn btn-next btn-primary btn-lg") | ||
backButtonCls: "btn btn-next btn-primary btn-lg pull-left" | ||
// 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) | ||
@@ -85,0 +91,0 @@ nextTextOnFinalActionStep: "Save" |
@@ -47,2 +47,4 @@ 'use strict'; | ||
backButtonText='Previous'<br /> | ||
nextButtonCls='btn btn-prev btn-primary btn-lg pull-right'<br /> | ||
backButtonCls='btn btn-next btn-primary btn-lg pull-left'<br /> | ||
nextTextOnFinalActionStep='[default value of nextButtonText]'<br /> | ||
@@ -49,0 +51,0 @@ hocValidationAppliedTo: [] |
@@ -290,2 +290,3 @@ import React, { Component } from 'react'; | ||
render() { | ||
const { props } = this; | ||
let compToRender; | ||
@@ -321,12 +322,20 @@ | ||
{compToRender} | ||
<div style={this.props.showNavigation ? {} : this.hidden} className="footer-buttons"> | ||
<button style={this.state.showPreviousBtn ? {} : this.hidden} | ||
className="btn btn-prev btn-primary btn-lg pull-left" | ||
onClick={() => {this.previous()}}>{this.props.backButtonText}</button> | ||
<button style={this.state.showNextBtn ? {} : this.hidden} | ||
className="btn btn-next btn-primary btn-lg pull-right" | ||
onClick={() => {this.next()}}>{this.state.nextStepText}</button> | ||
</div> | ||
<div style={this.props.showNavigation ? {} : this.hidden} className="footer-buttons"> | ||
<button | ||
style={this.state.showPreviousBtn ? {} : this.hidden} | ||
className={props.backButtonCls} | ||
onClick={() => {this.previous()}} | ||
id="prev-button" | ||
> | ||
{this.props.backButtonText} | ||
</button> | ||
<button | ||
style={this.state.showNextBtn ? {} : this.hidden} | ||
className={props.nextButtonCls} | ||
onClick={() => {this.next()}} | ||
id="next-button" | ||
> | ||
{this.state.nextStepText} | ||
</button> | ||
</div> | ||
</div> | ||
@@ -346,3 +355,5 @@ ); | ||
nextButtonText: "Next", | ||
nextButtonCls: "btn btn-prev btn-primary btn-lg pull-right", | ||
backButtonText: "Previous", | ||
backButtonCls: "btn btn-next btn-primary btn-lg pull-left", | ||
hocValidationAppliedTo: [] | ||
@@ -364,4 +375,6 @@ }; | ||
nextButtonText: PropTypes.string, | ||
nextButtonCls: PropTypes.string, | ||
backButtonCls: PropTypes.string, | ||
backButtonText: PropTypes.string, | ||
hocValidationAppliedTo: PropTypes.array | ||
} |
@@ -133,20 +133,20 @@ import React from 'react'; | ||
it('should render the Prev and Next button markup', () => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev')).to.have.length(1); | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next')).to.have.length(1); | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button')).to.have.length(1); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button')).to.have.length(1); | ||
}); | ||
it('should show the Next button on first view', () => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').prop('style')).to.deep.equal({}); | ||
}); | ||
it('should render the forward button with the default "Next" text', () => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Next'); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Next'); | ||
}); | ||
it('should render the back button with the default "Previous" text', () => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').text()).to.be.equal('Previous'); | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').text()).to.be.equal('Previous'); | ||
}); | ||
it('should NOT show render the Prev button on first view', () => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({ | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({ | ||
display: 'none' | ||
@@ -157,8 +157,8 @@ }); | ||
it('should render the Next and Prev button on 2nd step (and test if step classes also updated correctly)', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.progtrckr').childAt(0).hasClass('progtrckr-done')).to.be.true; | ||
@@ -174,10 +174,10 @@ expect(enzymeWrapper.find('.progtrckr').childAt(1).hasClass('progtrckr-doing')).to.be.true; | ||
it('should NOT show render the Next button on last step (and test if step classes also updated correctly)', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').prop('style')).to.deep.equal({ | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').prop('style')).to.deep.equal({ | ||
display: 'none' | ||
}); | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.progtrckr').childAt(0).hasClass('progtrckr-done')).to.be.true; | ||
@@ -196,10 +196,10 @@ expect(enzymeWrapper.find('.progtrckr').childAt(1).hasClass('progtrckr-done')).to.be.true; | ||
it('should render Prev button on last (2nd) step', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({}); | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({}); | ||
@@ -216,3 +216,3 @@ done(); | ||
it('should render "Next" as text for the forwards movement button', () => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Next'); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Next'); | ||
}); | ||
@@ -225,7 +225,7 @@ }); | ||
it('should render "Previous" as text for the backwards movement button', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').text()).to.be.equal('Previous'); | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').text()).to.be.equal('Previous'); | ||
@@ -241,7 +241,7 @@ done(); | ||
it('should render "Next" when we jump to the final action step (2nd step in this case)', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Next'); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Next'); | ||
@@ -259,7 +259,7 @@ done(); | ||
it('should render "MoveForward" when we jump to the final action step as thats the default', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('MoveForward'); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('MoveForward'); | ||
@@ -338,10 +338,10 @@ done(); | ||
it('should NOT render Prev button on last (2nd) step', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').prop('style')).to.deep.equal({ | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').prop('style')).to.deep.equal({ | ||
display: 'none' | ||
@@ -362,3 +362,3 @@ }); | ||
it('should render "MoveForward" as text for the forwards movement button', () => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('MoveForward'); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('MoveForward'); | ||
}); | ||
@@ -373,7 +373,7 @@ }); | ||
it('should render "MoveBack" as text for the backwards movement button', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-prev').text()).to.be.equal('MoveBack'); | ||
expect(enzymeWrapper.find('.footer-buttons #prev-button').text()).to.be.equal('MoveBack'); | ||
@@ -391,7 +391,7 @@ done(); | ||
it('should render "Save" when we jump to the final action step (2nd step in this case)', (done) => { | ||
enzymeWrapper.find('.footer-buttons .btn-next').simulate('click'); | ||
enzymeWrapper.find('.footer-buttons #next-button').simulate('click'); | ||
// click above is promise driven so it's async, setTimeout is probabaly not the best way to do this but it will do for now | ||
setTimeout(() => { | ||
expect(enzymeWrapper.find('.footer-buttons .btn-next').text()).to.be.equal('Save'); | ||
expect(enzymeWrapper.find('.footer-buttons #next-button').text()).to.be.equal('Save'); | ||
@@ -398,0 +398,0 @@ done(); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
1798194
27
43733
174