/**
 * @file RoundStep component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

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

import RoundStepItem from '../_RoundStepItem';

export default class RoundStep extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.state = {
            activatedStep: props.activatedStep,
            finishedStep: props.finishedStep
        };

        this.tapHandle = ::this.tapHandle;

    }

    tapHandle(activatedStep) {

        const {onChange} = this.props;

        this.setState({
            activatedStep
        }, () => {
            onChange && onChange({
                activatedStep,
                finishedStep: this.state.finishedStep
            });
        });
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.activatedStep !== this.state.activatedStep
            || nextProps.finishedStep !== this.state.finishedStep) {
            this.setState({
                activatedStep: nextProps.activatedStep,
                finishedStep: nextProps.finishedStep
            });
        }
    }

    render() {

        const {className, style, steps} = this.props;
        const {activatedStep, finishedStep} = this.state;

        return (
            <div className={`round-step ${className}`}
                 style={style}>

                {
                    steps.map((item, index) => {
                        return (
                            <RoundStepItem key={index}
                                           index={index}
                                           className={item.className}
                                           style={{
                                               ...item.style,
                                               width: `${100 / steps.length}%`,
                                               zIndex: steps.length - index
                                           }}
                                           activatedStep={activatedStep}
                                           finishedStep={finishedStep}
                                           value={item}
                                           isFirst={index === 0}
                                           isLast={index === steps.length - 1}
                                           onTouchTap={this.tapHandle}/>
                        );
                    })
                }

            </div>
        );

    }
};

RoundStep.propTypes = {

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

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


    /**
     * The render content of step.
     */
    steps: PropTypes.arrayOf(PropTypes.shape({

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

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

        /**
         * The text value of step.
         */
        title: PropTypes.string

    })).isRequired,

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

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

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

};

RoundStep.defaultProps = {

    className: '',
    style: null,

    steps: [],

    activatedStep: 0,
    finishedStep: 0

};
@@ -477,24 +477,29 @@
   this.t
+ouchT
 apHandle
  = ::thi
@@ -490,16 +490,17 @@
 apHandle
+r
  = ::thi
@@ -502,24 +502,29 @@
 ::this.t
+ouchT
 apHandle
 ;%0A%0A    %7D
@@ -515,16 +515,17 @@
 apHandle
+r
 ;%0A%0A    %7D
@@ -531,24 +531,29 @@
 %7D%0A%0A    t
+ouchT
 apHandle
 (activat
@@ -544,16 +544,17 @@
 apHandle
+r
 (activat
@@ -1229,16 +1229,59 @@
 e, steps
+, showFinishedStepIcon, finishedStepIconCls
 %7D = this
@@ -1286,26 +1286,28 @@
 is.props
-;%0A
+,%0A  
         
 const %7Ba
@@ -1298,21 +1298,17 @@
         
-const
+ 
  %7Bactiva
@@ -1487,16 +1487,25 @@
         
+ steps &&
  steps.m
@@ -2401,16 +2401,188 @@
 th - 1%7D%0A
+                                           showFinishedStepIcon=%7BshowFinishedStepIcon%7D%0A                                           finishedStepIconCls=%7BfinishedStepIconCls%7D%0A
         
@@ -2634,24 +2634,29 @@
 =%7Bthis.t
+ouchT
 apHandle
 %7D/%3E%0A    
@@ -2647,16 +2647,17 @@
 apHandle
+r
 %7D/%3E%0A    
@@ -3564,32 +3564,118 @@
 pTypes.number,%0A%0A
+    showFinishedStepIcon: PropTypes.bool,%0A    finishedStepIconCls: PropTypes.string,%0A%0A
     /**%0A     * C
@@ -3804,10 +3804,12 @@
 me: 
-''
+null
 ,%0A  
@@ -3839,10 +3839,12 @@
 ps: 
-%5B%5D
+null
 ,%0A%0A 
@@ -3883,12 +3883,84 @@
 dStep: 0
+,%0A    showFinishedStepIcon: true,%0A    finishedStepIconCls: 'fa fa-check'
 %0A%0A%7D;

update RoundStep