React FormFlow

FormFlow.jsx

'use strict';
var React = require('react');
var ProgressTracker = require('./js/ProgressTracker.jsx')

var FormFlow = React.createClass({
  getInitialState: function(){
    return {
      statusClass: "pure-u-1-1 status-bar",
      controlClass: "pure-u-1-1 control-bar",
      nextBtnClass: "button-success pure-button next",
      prevBtnClass: "button-secondary pure-button prev",
      step: 2,
      maxSteps: 8
    }
  },

  onNext: function(event){
    this.setState({step: this.state.step + 1 <= this.state.maxSteps ? this.state.step+1 : this.state.maxSteps})
  },

  onPrev: function(event){
    this.setState({step: this.state.step - 1 >= 1 ? this.state.step-1 : 1})
  },

  render: function(){
    return(<ProgressTracker 
      statusClass={this.state.statusClass}  
      controlClass={this.state.controlClass}  
      nextBtnClass={this.state.nextBtnClass}  
      prevBtnClass={this.state.prevBtnClass}  
      onPrev={this.onPrev}
      onNext={this.onNext}
      step={this.state.step}  
      maxSteps={this.state.maxSteps}  
    />);
  }
});

React.render(
  React.createElement(FormFlow), 
  document.getElementById('interactive-pane')
);

ProgressTracker.jsx

'use strict';
var React = require('react');
var Progress = require('react-progressbar');
var ProgressTracker = React.createClass({
  render: function() {
    return (
      <div>
        <Progress completed={(this.props.step/this.props.maxSteps)*100} />
        <div className={this.props.statusClass}>You are filling out form {this.props.step} of {this.props.maxSteps}</div>
        <div className={this.props.controlClass}>
          <button className={this.props.prevBtnClass} onClick={this.props.onPrev}>Previous</button>
          <button className={this.props.nextBtnClass} onClick={this.props.onNext}>Next</button>
        </div>
      </div>
    );
  }
});

module.exports = ProgressTracker;