# src/Steps.js File

    import React,{PropTypes} from 'react';
    import ReactDOM,{findDOMNode} from 'react/lib/ReactDOM';
    import Component from './utils/Component';
    import classnames from 'classnames';
    import {setPhoenixPrefix} from './utils/Tool';

    /**
     * 步骤组件<br/>
     * - 通过list设置步骤过程名称数组，如["合作信息","公司信息","资质信息"]，必需。
     * - 可通过currentStep设置当前步骤，从0开始计算。
     * - 可通过clickCallback设置点击步骤的回调，函数返回步骤名称和索引。
     * - 可通过readOnly设置步骤是否只读不可点击，默认可点击。
     *
     * 主要属性和接口：
     * - list:初始进度百分比, 默认0。 <br/>
     * 如: `<Steps list={["合作信息","公司信息","资质信息"]} />`
     * - currentStep:当前步骤，从0开始计算，默认0。 <br/>
     * 如: `<Steps currentStep={1} list={["合作信息","公司信息","资质信息"]} />`
     * - clickCallback:点击步骤的回调，函数返回步骤名称和索引。 <br/>
     * 如: `<Steps clickCallback={(str,index)=>{console.log(index);}} list={["合作信息","公司信息","资质信息"]}/>`
     * - readOnly:只读不可点击，默认false。<br/>
     * 如: `<Steps readOnly list={["合作信息","公司信息","资质信息"]} />`
     *
     * @class Steps
     * @module 操作类组件
     * @extends Component
     * @constructor
     * @since 1.7.0
     * @demo steps|steps.js {展示}
     * @show true
     * */

    export default class Steps extends Component{
        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'badge'
             * */
            classPrefix: PropTypes.string,
            /**
             * 是否为只读模式（只读模式不会触发点击回调），默认为false
             * @property readOnly
             * @type Boolean
             * @default false
             **/
            readOnly: PropTypes.bool,
            /**
             * steps内容数组，把每一步的文案放入数组中作为list的值
             * @property list
             * @type Array
             * @default []
             **/
            list: PropTypes.arrayOf(PropTypes.string),
            /**
             * 当前处于第几步，默认为0，也就是说所有的步骤都没有开始，如果到第一步的话将currentStep设置为1即可，注意currentStep不可以超过list数组长度
             * @property currentStep
             * @type Number
             * @default 0
             **/
            currentStep: PropTypes.number,
            /**
             * 点击每一步的回调，function(str,index){} str为步骤名称，index为第几步（从1开始计数）
             * @method clickCallback
             * @type Function
             * @default null
             **/
            clickCallback: PropTypes.func
        };

        static defaultProps = {
            readOnly: false,
            list: [],
            currentStep: 0,
            classPrefix:'steps',
            classMapping : {}
        };

        constructor(props,context){
            super(props,context);

            this.state = {
                currentStep: props.currentStep
            }
        }

        componentWillReceiveProps(nextProps){
             if(this.state.currentStep != nextProps.currentStep) this.setState({currentStep: nextProps.currentStep});
        }

        clickCallback(str, index, e){
            let {readOnly, clickCallback} = this.props, thisElemnt = e.currentTarget;
            if(readOnly) return;

            this.setState({
                currentStep: index
            });

            if(clickCallback) clickCallback(str,index);
        }

        renderSteps(){
            let {list} = this.props;
            let _this = this, listLen = list.length;

            return (
                <ul>
                    {
                        list.map((item, index)=>{
                            return (
                                <li key={index} className={classnames(setPhoenixPrefix('steps-list'), index==this.state.currentStep? 'active':index<this.state.currentStep? 'done':'')}
                                    style={{left: index/(listLen-1)*100+'%' }}
                                    onClick={_this.clickCallback.bind(_this,item,index)}
                                >
                                    <span className={setPhoenixPrefix('steps-dot')}></span>
                                    <p>{item}</p>
                                </li>
                            )
                        })
                    }
                </ul>
            );
        }

        render(){
            return(
                <div className={classnames(this.getProperty(true),this.props.className)}>
                    {this.renderSteps()}
               </div>
            )
        }
    }