content: import React from 'react';
  import {
    Step,
    Stepper,
    StepLabel,
  } from 'material-ui/Stepper';
  import RaisedButton from 'material-ui/RaisedButton';
  import FlatButton from 'material-ui/FlatButton';
  import ExpandTransition from 'material-ui/internal/ExpandTransition';
  import TextField from 'material-ui/TextField';
  
  /**
   * A contrived example using a transition between steps
   */
  class HorizontalTransition extends React.Component {
  
    state = {
      loading: false,
      finished: false,
      stepIndex: 0,
    };
  
    dummyAsync = (cb) => {
      this.setState({loading: true}, () => {
        this.asyncTimer = setTimeout(cb, 500);
      });
    };
  
    handleNext = () => {
      const {stepIndex} = this.state;
      if (!this.state.loading) {
        this.dummyAsync(() => this.setState({
          loading: false,
          stepIndex: stepIndex + 1,
          finished: stepIndex >= 2,
        }));
      }
    };
  
    handlePrev = () => {
      const {stepIndex} = this.state;
      if (!this.state.loading) {
        this.dummyAsync(() => this.setState({
          loading: false,
          stepIndex: stepIndex - 1,
        }));
      }
    };
  
    getStepContent(stepIndex) {
      switch (stepIndex) {
        case 0:
          return (
            <p>
              Select campaign settings. Campaign settings can include your budget, network, bidding
              options and adjustments, location targeting, campaign end date, and other settings that
              affect an entire campaign.
            </p>
          );
        case 1:
          return (
            <div>
              <TextField style={{marginTop: 0}} floatingLabelText="Ad group name" />
              <p>
                Ad group status is different than the statuses for campaigns, ads, and keywords, though the
                statuses can affect each other. Ad groups are contained within a campaign, and each campaign can
                have one or more ad groups. Within each ad group are ads, keywords, and bids.
              </p>
              <p>Something something whatever cool</p>
            </div>
          );
        case 2:
          return (
            <p>
              Try out different ad text to see what brings in the most customers, and learn how to
              enhance your ads using features like ad extensions. If you run into any problems with your
              ads, find out how to tell if they're running and how to resolve approval issues.
            </p>
          );
        default:
          return 'You\'re a long way from home sonny jim!';
      }
    }
  
    renderContent() {
      const {finished, stepIndex} = this.state;
      const contentStyle = {margin: '0 16px', overflow: 'hidden'};
  
      if (finished) {
        return (
          <div style={contentStyle}>
            <p>
              <a
                href="#"
                onClick={(event) => {
                  event.preventDefault();
                  this.setState({stepIndex: 0, finished: false});
                }}
              >
                Click here
              </a> to reset the example.
            </p>
          </div>
        );
      }
  
      return (
        <div style={contentStyle}>
          <div>{this.getStepContent(stepIndex)}</div>
          <div style={{marginTop: 24, marginBottom: 12}}>
            <FlatButton
              label="Back"
              disabled={stepIndex === 0}
              onTouchTap={this.handlePrev}
              style={{marginRight: 12}}
            />
            <RaisedButton
              label={stepIndex === 2 ? 'Finish' : 'Next'}
              primary={true}
              onTouchTap={this.handleNext}
            />
          </div>
        </div>
      );
    }
  
    render() {
      const {loading, stepIndex} = this.state;
  
      return (
        <div style={{width: '100%', maxWidth: 700, margin: 'auto'}}>
          <Stepper activeStep={stepIndex}>
            <Step>
              <StepLabel>Select campaign settings</StepLabel>
            </Step>
            <Step>
              <StepLabel>Create an ad group</StepLabel>
            </Step>
            <Step>
              <StepLabel>Create an ad</StepLabel>
            </Step>
          </Stepper>
          <ExpandTransition loading={loading} open={true}>
            {this.renderContent()}
          </ExpandTransition>
        </div>
      );
    }
  }
  
  export default HorizontalTransition;
  