cuz/src/components/Steps/Steps.js

Front-end modular development kit.

import React, { cloneElement } from 'react';
import {utils} from 'react-bootstrap';
import classNames from 'classnames';

function getActiveStepFromChildren(children) {
  let activeStep = 0;

  utils.ValidComponentChildren.forEach(children, (child, index) => {
    if (child.props.active === true) {
      activeStep = index;
    }
  });

  return activeStep;
}

const Steps = React.createClass({
  propTypes: {
    children: React.PropTypes.any,
    onSelect: React.PropTypes.func,
    defaultActiveStep: React.PropTypes.number,
    activeStep: React.PropTypes.number,
    className: React.PropTypes.string,
  },

  getInitialState() {
    const activeStep = this.props.defaultActiveStep || getActiveStepFromChildren(this.props.children);
    return {
      activeStep
    };
  },

  onSelect(step) {
    const {onSelect} = this.props;
    this.setState({
      activeStep: step,
    });
    if (onSelect) onSelect(step);
  },

  renderStep(child, index) {
    const activeStep = this.props.activeStep || this.state.activeStep;
    return cloneElement(
      child,
      {
        active: (index + 1) === activeStep,
        index: child.props.index || (index + 1),
        onSelect: this.onSelect,
      }
    );
  },

  render() {
    const { children, className, ...props } = this.props;
    return (
      <ul
        { ...props }
        className={classNames('wizard-steps', 'form-wizard', 'clearfix', className)}>
        { utils.ValidComponentChildren.map(children, this.renderStep) }
      </ul>
    );
  }
});

export default Steps;