cuz/src/components/Steps/Step.js

Front-end modular development kit.

import React from 'react';
import classNames from 'classnames';

const Step = React.createClass({
  propTypes: {
    children: React.PropTypes.any,
    index: React.PropTypes.number,
    active: React.PropTypes.bool,
    onSelect: React.PropTypes.func,
    onClick: React.PropTypes.func,
  },

  getDefaultProps() {
    return {
      active: false
    };
  },

  onSelect() {
    const { onClick, onSelect, index } = this.props;
    onSelect(index);
    if (onClick) onClick();
  },

  render() {
    const { children, index, active } = this.props;
    return (
        <li className={classNames({'active': active})} onClick={this.onSelect}>
            <span className="step">{ index }</span>
            <span className="title">{ children }</span>
        </li>
    );
  }
});

export default Step;