/**
 * @file TimeItems component
 * @author sunday(sunday.wei@derbysoft.com)
 */

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

import Event from '../_vendors/Event';

export default class TimeItems extends Component {

    static propTypes = {
        className: PropTypes.string,
        style: PropTypes.object,
        data: PropTypes.array
    };

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.clickHandle = ::this.clickHandle;
        this.mousemoveHandle = ::this.mousemoveHandle;
        this.mouseoutHandle = ::this.mouseoutHandle;

    }

    clickHandle(value) {
        if (this.refs.timeItems) {
            this.scrollTo(this.refs.timeItems, (+value) * 30, 200);
        }
        this.props.onChange && this.props.onChange(value);
    }


    mousemoveHandle() {
        this.refs.timeItems.style.overflowY = 'auto';
    }

    scrollTo(element, to, duration) {
        // jump to target if duration zero
        if (duration <= 0) {
            element.scrollTop = to;
            return;
        }
        let difference = to - element.scrollTop;
        let perTick = difference / duration * 10;
        setTimeout(() => {
            element.scrollTop = element.scrollTop + perTick;
            if (element.scrollTop === to) return;
            this.scrollTo(element, to, duration - 10);
        }, 10);
    };

    mouseoutHandle() {
        this.refs.timeItems.style.overflowY = 'hidden';
    }

    componentDidMount() {
        const {value} = this.props;
        if (this.refs.timeItems) {
            const el = this.refs.timeItems;
            this.scrollTo(this.refs.timeItems, (+value) * 30, 0);
        }
        Event.addEvent(this.refs.timeItems, 'mouseover', this.mousemoveHandle);
        Event.addEvent(this.refs.timeItems, 'mouseout', this.mouseoutHandle);
    }

    componentWillUnmount() {
        Event.removeEvent(this.refs.timeItems, 'mouseover', this.mousemoveHandle);
        Event.removeEvent(this.refs.timeItems, 'mouseout', this.mouseoutHandle);
    }

    render() {

        const {className, style, data, value} = this.props,
            {width} = style;

        let liStyle = {};
        if (width == '100%') {
            liStyle.paddingLeft = '140px';
        } else if (width == '50%') {
            liStyle.paddingLeft = '60px';
        } else {
            liStyle.paddingLeft = '36px';
        }
        return (
            <div className={`timeItems ${className ? className : ''}`}
                 style={style}
                 ref="timeItems">
                <ul className="timeList">
                    {
                        data && data.length ?
                            data.map((item, key) => {
                                return (
                                    <li className={`timeItem ${item.value ? '' : 'disabled'} ${item.text == value ? 'active' : ''}`}
                                        key={key}
                                        style={liStyle}
                                        onClick={() => {
                                            if (item.value) {
                                                this.clickHandle(item.text);
                                            }
                                        }}>
                                        {item.text}
                                    </li>
                                );
                            })
                            :
                            null
                    }
                </ul>
            </div>
        );

    }
}
@@ -196,23 +196,8 @@
 ';%0A%0A
-export default 
 clas
@@ -233,141 +233,8 @@
  %7B%0A%0A
-    static propTypes = %7B%0A        className: PropTypes.string,%0A        style: PropTypes.object,%0A        data: PropTypes.array%0A    %7D;%0A%0A
     
@@ -3459,8 +3459,151 @@
 %0A    %7D%0A%7D
+%0A%0ATimeItems.propTypes = %7B%0A    className: PropTypes.string,%0A    style: PropTypes.object,%0A    data: PropTypes.array%0A%7D;%0A%0Aexport default TimeItems;

update TimeItems