/**
 * @file ListStepItem component
 * @author chao(chao.zhang@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import RaisedButton from '../RaisedButton';
import Theme from '../Theme';

class ListStepItem extends Component {

    static Theme = Theme;

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.touchTapHandler = ::this.touchTapHandler;

    }

    touchTapHandler() {
        const {activatedStep, finishedStep, index, onTouchTap} = this.props;
        activatedStep !== index && finishedStep >= index && onTouchTap(index);
    }

    render() {

        const {className, style, activatedStep, finishedStep, index, data} = this.props,

            state = activatedStep === index ? 'activated' : (finishedStep >= index ? 'finished' : ''),
            itemClassName = (state ? ' ' + state : '') + (className ? ' ' + className : '');

        return (
            <RaisedButton {...data}
                          className={'list-step-item' + itemClassName}
                          style={style}
                          theme={state === 'activated' ? Theme.HIGHLIGHT : (state === 'finished' ? Theme.PRIMARY : '')}
                          value={data.value}
                          onTouchTap={this.touchTapHandler}/>
        );

    }
};

ListStepItem.propTypes = {

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    /**
     * Item index.
     */
    index: PropTypes.number,

    /**
     * Sets the step as active.
     */
    activatedStep: PropTypes.number,

    /**
     * The final step.
     */
    finishedStep: PropTypes.number,

    /**
     * The data of step item.
     */
    data: PropTypes.object,

    /**
     * Callback function fired when step change.
     */
    onTouchTap: PropTypes.func

};

ListStepItem.defaultProps = {
    className: '',
    style: null,
    index: 0,
    activatedStep: 0,
    finishedStep: 0,
    data: null
};

export default ListStepItem;
@@ -151,16 +151,53 @@
 -types';
+%0Aimport classNames from 'classnames';
 %0A%0Aimport
@@ -898,38 +898,88 @@
 e = 
-(state ? ' ' + 
+classNames('list-step-item', %7B%0A                %5B
 state
- : '') + (
+%5D: state,%0A                %5B
 clas
@@ -987,16 +987,10 @@
 Name
- ? ' ' +
+%5D:
  cla
@@ -995,21 +995,30 @@
 lassName
- : ''
+%0A            %7D
 );%0A%0A    
@@ -1107,27 +1107,8 @@
 me=%7B
-'list-step-item' + 
 item

update ListStepItem