import { Timeline } from '@alifd/next';

const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Receipt" state="process"/>
    <TimelineItem title="Ship" />
    <TimelineItem title="Order" />
</Timeline>, mountNode);

import { Timeline } from '@alifd/next';

const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Cloudy" time={'2016-06-10 10:30:00'} state="process"/>
    <TimelineItem title="Sunny" time={'2016-06-11'} state="success"/>
    <TimelineItem title="Rainy" time={'2016-06-09'} state="error"/>
</Timeline>, mountNode);

import { Timeline } from '@alifd/next';

const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Sign" content="[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again" time={'2016-06-10 10:30:00'} state="process" />
    <TimelineItem title="Delivery" content="[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company" time={'2016-06-10 09:30:00'} />
    <TimelineItem title="Delivery" content="[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you" time={'2016-06-10 09:03:00'} />
    <TimelineItem title="Transport" content="[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued" time={'2016-06-10 06:10:00'} />
    <TimelineItem title="Transport" content="[Dongguan City] Guangdong Dongguan Transshipment Center has been issued" time={'2016-06-09 18:00:00'} />
    <TimelineItem title="Processing" content="[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province" time={'2016-06-09 16:12:00'} />
    <TimelineItem title="Processing" content="[Dongguan City] The merchant is informing the express company to insert" time={'2016-06-09 14:00:00'} />
    <TimelineItem title="Processing" content="[Dongguan City] Your order to be picked" time={'2016-06-09 10:12:19'} />
    <TimelineItem title="Processing" content="[Dongguan] Your order starts processing" time={'2016-06-09 10:01:09'} icon="atm"/>
</Timeline>, mountNode);

import { Timeline } from '@alifd/next';

const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Sign" state="process" timeLeft="2016-10-03" />
    <TimelineItem title="Ship" timeLeft="2016-10-02" />
    <TimelineItem title="Order" timeLeft="2016-10-01" />
</Timeline>, mountNode);

import { Timeline, Icon } from '@alifd/next';

const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Receipt" state="process" icon="smile" time="2017-10-21"/>
    <TimelineItem title="Ship" dot={<span className="custom-node"> 😂 </span>} state="success" time="2017-10-22"/>
    <TimelineItem title="Order" dot={<Icon type="success" size="xl" style={{ color: '#1DC11D' }}/>} content="Congratulations, successful orders!" time="2017-10-23"/>
</Timeline>, mountNode);

.custom-node {
    color: #1DC11D;
    position: relative;
    left: 3px;
    font-size: 14px;
}

import { Timeline, Select } from '@alifd/next';

const TimelineItem = Timeline.Item;

class Demo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            timelineAnimation: true
        };
    }

    onTimelineAnimation = (value) => {
        this.setState({ timelineAnimation: value });
    }

    render() {
        return (<div>
            <div className="custom-step-option">
                <Select placeholder="Whether to start animation" onChange={this.onTimelineAnimation} className="custom-select" defaultValue>
                    {
                        [true, false].map((item, index) => <Select.Option value={item} key={index}>{item ? 'Animation on' : 'Animation off'}</Select.Option>)
                    }
                </Select>
            </div>
            <Timeline animation={this.state.timelineAnimation} fold={[{ foldArea: [1, 2], foldShow: false }, { foldArea: [5], foldShow: false }]}>
                <TimelineItem title="Sign" content="[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again" time={'2016-06-10 10:30:00'} state="process" />
                <TimelineItem title="Delivery" content="[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company" time={'2016-06-10 09:30:00'} />
                <TimelineItem title="Delivery" content="[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you" time={'2016-06-10 09:03:00'} />
                <TimelineItem title="Transport" content="[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued" time={'2016-06-10 06:10:00'} />
                <TimelineItem title="Transport" content="[Dongguan City] Guangdong Dongguan Transshipment Center has been issued" time={'2016-06-09 18:00:00'} />
                <TimelineItem title="Processing" content="[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province" time={'2016-06-09 16:12:00'} />
                <TimelineItem title="Processing" content="[Dongguan City] The merchant is informing the express company to insert" time={'2016-06-09 14:00:00'} />
                <TimelineItem title="Processing" content="[Dongguan City] Your order to be picked" time={'2016-06-09 10:12:19'} />
                <TimelineItem title="Processing" content="[Dongguan] Your order starts processing" time={'2016-06-09 10:01:09'} />
            </Timeline>
        </div>);
    }
}
ReactDOM.render(<Demo />, mountNode);

.custom-step-option {
    margin-bottom: 20px;
}