'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import Stepper from '../src/index.js';

let App = React.createClass({
  render() {
    const steps = ['Step One', 'Step Two', 'Step Three', 'Step Four'];
    return (
      <div style={ { height: 200, width: 600 } }>
        <Stepper steps={ steps } activeStep={ 1 } />
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('content'));

@@ -20,16 +20,31 @@
 rt React
+, %7B Component %7D
  from 'r
@@ -128,68 +128,100 @@
 ';%0A%0A
-let App = React.createClass(%7B%0A  rend
+class App extends Component %7B%0A  constructor() %7B%0A    sup
 er()
- %7B
+;
 %0A    
-const
+this.state = %7B%0A     
  steps
- =
+:
  %5B'S
@@ -272,55 +272,414 @@
 ur'%5D
-;%0A    return (%0A      %3Cdiv s
+,%0A      currentStep: 0,%0A    %7D;%0A    this.onClickNext = this.onClickNext.bind(this);%0A  %7D%0A%0A  onClickNext() %7B%0A    const %7B steps, currentStep %7D = this.state;%0A    this.setState(%7B%0A      steps: steps.map((s, i) =%3E (i == currentStep ? %60$%7Bs%7D Completed%60 : s)),%0A      currentStep: currentStep + 1,%0A    %7D);%0A  %7D%0A%0A  render() %7B%0A    const %7B steps, currentStep %7D = this.state;%0A    const buttonS
 tyle
+ 
 =
-%7B
  %7B 
-height: 200
+background: '#E0E0E0'
 , wi
@@ -687,68 +687,244 @@
 th: 
-600 %7D %7D%3E%0A        %3CStepper steps=%7B steps %7D activeStep=%7B 1 %7D /
+200, padding: 16, textAlign: 'center', margin: '0 auto', marginTop: 32 %7D;%0A%0A    return (%0A      %3Cdiv%3E%0A        %3CStepper steps=%7B steps %7D activeStep=%7B currentStep %7D /%3E%0A        %3Cdiv style=%7B buttonStyle %7D onClick=%7B this.onClickNext %7D%3ENext%3C/div
 %3E%0A  
@@ -946,17 +946,16 @@
 );%0A  %7D%0A%7D
-)
 ;%0A%0AReact

Add detail example