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

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

import PointStepItem from '../_PointStepItem';

class PointStep extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

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

        this.touchTapHandler = ::this.touchTapHandler;

    }

    touchTapHandler(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, showFinishedStepIcon, finishedStepIconCls, disabled} = this.props,
            {activatedStep, finishedStep} = this.state,

            stepClassName = classNames('point-step', {
                [className]: className
            });

        return (
            <div className={stepClassName}
                 style={style}>

                {
                    steps && steps.map((item, index) =>
                        <PointStepItem 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}
                                       showFinishedStepIcon={showFinishedStepIcon}
                                       finishedStepIconCls={finishedStepIconCls}
                                       disabled={disabled}
                                       onTouchTap={this.touchTapHandler}/>
                    )
                }

            </div>
        );

    }
};

PointStep.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,

    showFinishedStepIcon: PropTypes.bool,
    finishedStepIconCls: PropTypes.string,

    disabled: PropTypes.bool,

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

};

PointStep.defaultProps = {

    className: null,
    style: null,

    steps: null,

    activatedStep: 0,
    finishedStep: 0,

    showFinishedStepIcon: true,
    finishedStepIconCls: 'fas fa-check',
    disabled: false

};

export default PointStep;
@@ -127,44 +127,8 @@
 t';%0A
-import PropTypes from 'prop-types';%0A
 impo
@@ -209,16 +209,78 @@
 Item';%0A%0A
+import PureRender from '../_vendors/PureRender';%0A%0A@PureRender%0A
 class Po
@@ -2856,321 +2856,127 @@
 %7D;%0A%0A
-PointStep.propTypes = %7B%0A%0A    /**%0A     * The CSS class name of the root element.%0A     */%0A    className: PropTypes.string,%0A%0A    /**%0A     * Override the styles of the root element.%0A     */%0A    style: PropT
+if (process.env.NODE_ENV === 'development') %7B%0A%0A    const PropTypes = require('prop-t
 ypes
-.object,%0A%0A%0A    /**%0A     * The render content of step.%0A     */%0A    steps: PropTypes.arrayOf(PropTypes.shape(
+');%0A%0A    PointStep.propTypes = 
 %7B%0A%0A 
@@ -3019,20 +3019,24 @@
 name of 
-step
+the root
  element
@@ -3137,20 +3137,20 @@
  of the 
-step
+root
  element
@@ -3197,16 +3197,17 @@
 bject,%0A%0A
+%0A
         
@@ -3216,24 +3216,398 @@
 *%0A         *
+ The render content of step.%0A         */%0A        steps: PropTypes.arrayOf(PropTypes.shape(%7B%0A%0A            /**%0A             * The CSS class name of step element.%0A             */%0A            className: PropTypes.string,%0A%0A            /**%0A             * Override the styles of the step element.%0A             */%0A            style: PropTypes.object,%0A%0A            /**%0A             *
  The text va
@@ -3620,35 +3620,43 @@
  step.%0A         
-*/%0A
+    */%0A    
         title: P
@@ -3676,16 +3676,20 @@
 ng%0A%0A    
+    
 %7D)).isRe
@@ -3697,16 +3697,20 @@
 uired,%0A%0A
+    
     /**%0A
@@ -3714,16 +3714,20 @@
 **%0A     
+    
 * Sets t
@@ -3750,23 +3750,31 @@
 e.%0A     
+    
 */%0A    
+    
 activate
@@ -3795,24 +3795,28 @@
 es.number,%0A%0A
+    
     /**%0A    
@@ -3812,24 +3812,28 @@
    /**%0A     
+    
 * The final 
@@ -3843,23 +3843,31 @@
 p.%0A     
+    
 */%0A    
+    
 finished
@@ -3887,24 +3887,28 @@
 es.number,%0A%0A
+    
     showFini
@@ -3937,24 +3937,28 @@
 s.bool,%0A    
+    
 finishedStep
@@ -3981,24 +3981,28 @@
 es.string,%0A%0A
+    
     disabled
@@ -4020,28 +4020,36 @@
 .bool,%0A%0A    
+    
 /**%0A
+    
      * Callb
@@ -4086,27 +4086,35 @@
 hange.%0A     
-*/%0A
+    */%0A    
     onChange
@@ -4131,18 +4131,25 @@
 s.func%0A%0A
+    %7D;%0A%0A
 %7D
-;
 %0A%0APointS
@@ -4174,65 +4174,8 @@
  %7B%0A%0A
-    className: null,%0A    style: null,%0A%0A    steps: null,%0A%0A
     

update PointStep