/**
 * @file TimeLine component
 * @author wendy(wendy.wei@derbysoft.com)
 */

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

import TimeLineItem from '../_TimelineItem';
import Theme from '../Theme';

import Util from '../_vendors/Util';

class TimeLine extends Component {

    static Type = TimeLineItem.Type;
    static Theme = Theme;

    constructor(props, ...restArgs) {
        super(props, ...restArgs);
    }

    render() {

        const {data, style, className} = this.props,

            wrapperClassName = classNames('time-line', {
                [className]: className
            });

        return (
            <ul className={wrapperClassName}
                style={style}>

                {
                    data && data.map((item, index) =>
                        <TimeLineItem key={index}
                                      theme={item.theme}
                                      type={item.type}
                                      title={item.title}
                                      date={item.date}
                                      hasBorder={item.hasBorder}
                                      contentText={item.contentText}
                                      headerText={item.headerText}/>
                    )
                }

            </ul>
        );

    }
}

TimeLine.propTypes = {

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

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

    /**
     * The items data.
     */
    data: PropTypes.arrayOf(PropTypes.shape({

        /**
         * The TimeLine theme.Can be primary,highlight,success,warning,error.
         */
        theme: PropTypes.oneOf(Util.enumerateValue(Theme)),

        /**
         * The TimeLine type.Can be header or title.
         */
        type: PropTypes.string,

        /**
         * The text value of TimeLine header.
         */
        headerText: PropTypes.string,

        /**
         * The date value of TimeLine.
         */
        date: PropTypes.string,

        /**
         * If true,the right content will have border style.
         */
        hasBorder: PropTypes.bool,

        /**
         * The text value of right content.
         */
        contentText: PropTypes.string

    })).isRequired

};

TimeLine.defaultProps = {

    className: '',
    style: null,

    hasBorder: true,
    title: '',
    type: ''

};

export default TimeLine;
@@ -116,44 +116,8 @@
 t';%0A
-import PropTypes from 'prop-types';%0A
 impo
@@ -222,24 +222,73 @@
 ../Theme';%0A%0A
+import PureRender from '../_vendors/PureRender';%0A
 import Util 
@@ -313,16 +313,28 @@
 Util';%0A%0A
+@PureRender%0A
 class Ti
@@ -1411,16 +1411,113 @@
    %7D%0A%7D%0A%0A
+if (process.env.NODE_ENV === 'development') %7B%0A%0A    const PropTypes = require('prop-types');%0A%0A    
 TimeLine
@@ -1532,28 +1532,36 @@
 es = %7B%0A%0A    
+   
+ 
 /**%0A
+    
      * The C
@@ -1591,32 +1591,36 @@
 ot element.%0A
+    
      */%0A
     classNam
@@ -1603,24 +1603,28 @@
          */%0A
+    
     classNam
@@ -1641,24 +1641,28 @@
 es.string,%0A%0A
+    
     /**%0A    
@@ -1662,16 +1662,20 @@
 **%0A     
+ 
+   
 * Overri
@@ -1714,23 +1714,31 @@
 t.%0A     
+    
 */%0A    
+  
+  
 style: P
@@ -1755,16 +1755,20 @@
 bject,%0A%0A
+    
     /**%0A
@@ -1768,24 +1768,28 @@
    /**%0A     
+   
+ 
 * The items 
@@ -1795,27 +1795,35 @@
  data.%0A     
-*/%0A
+    */%0A    
     data: Pr
@@ -1857,36 +1857,44 @@
 hape(%7B%0A%0A        
-/**%0A
+    /**%0A    
          * The T
@@ -1956,35 +1956,43 @@
 error.%0A         
-*/%0A
+    */%0A    
         theme: P
@@ -2036,36 +2036,44 @@
 eme)),%0A%0A        
+   
+ 
 /**%0A
+    
          * The T
@@ -2105,24 +2105,28 @@
 r or title.%0A
+    
          */%0A
@@ -2129,24 +2129,28 @@
  */%0A        
+    
 type: PropTy
@@ -2162,32 +2162,36 @@
 tring,%0A%0A        
+    
 /**%0A         * T
@@ -2179,32 +2179,36 @@
    /**%0A         
+ 
+   
 * The text value
@@ -2229,32 +2229,36 @@
 eader.%0A         
+    
 */%0A        heade
@@ -2244,32 +2244,36 @@
      */%0A        
+  
+  
 headerText: Prop
@@ -2287,32 +2287,36 @@
 tring,%0A%0A        
+    
 /**%0A         * T
@@ -2308,24 +2308,28 @@
 **%0A         
+   
+ 
 * The date v
@@ -2347,35 +2347,43 @@
 eLine.%0A         
-*/%0A
+    */%0A    
         date: Pr
@@ -2399,36 +2399,44 @@
 tring,%0A%0A        
-/**%0A
+    /**%0A    
          * If tr
@@ -2481,35 +2481,43 @@
 style.%0A         
+ 
-*/%0A
+   */%0A    
         hasBorde
@@ -2536,36 +2536,44 @@
 .bool,%0A%0A        
+  
+  
 /**%0A
+    
          * The t
@@ -2601,35 +2601,43 @@
 ntent.%0A         
+   
+ 
 */%0A
+    
         contentT
@@ -2659,16 +2659,20 @@
 string%0A%0A
+    
     %7D)).
@@ -2683,18 +2683,25 @@
 quired%0A%0A
+    %7D;%0A%0A
 %7D
-;
 %0A%0ATimeLi
@@ -2724,46 +2724,8 @@
 = %7B%0A
-%0A    className: '',%0A    style: null,%0A%0A
     
@@ -2769,17 +2769,16 @@
 ype: ''%0A
-%0A
 %7D;%0A%0Aexpo

update TimeLine