import React, { PropTypes } from 'react';
import SmoothScrollbar from 'smooth-scrollbar';

export default class Scrollbar extends React.Component {
    static propTypes = {
        speed: PropTypes.number,
        damping: PropTypes.number,
        thumbMinSize: PropTypes.number,
        syncCallbacks: PropTypes.bool,
        renderByPixels: PropTypes.bool,
        alwaysShowTracks: PropTypes.bool,
        continuousScrolling: PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.bool,
        ]),
        overscrollEffect: PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.bool,
        ]),
        overscrollEffectColor: PropTypes.string,
        overscrollDamping: PropTypes.number,
        onScroll: PropTypes.func,
        children: PropTypes.node,
    };

    static childContextTypes = {
        getScrollbar: PropTypes.func,
    };

    constructor(props) {
        super(props);

        this.callbacks = [];
    }

    getChildContext() {
        return {
            getScrollbar: (cb) => {
                if (typeof cb !== 'function') return;

                if (this.scrollbar) setTimeout(() => cb(this.scrollbar));
                else this.callbacks.push(cb);
            }
        };
    }

    componentDidMount() {
        this.scrollbar = SmoothScrollbar.init(this.refs.container, this.props);

        this.callbacks.forEach((cb) => {
            requestAnimationFrame(() => cb(this.scrollbar));
        });

        this.scrollbar.addListener(::this.handleScroll);
    }

    componentWillUnmount() {
        this.scrollbar.destroy(true);
    }

    componentWillReceiveProps(nextProps) {
        this.scrollbar.setOptions(nextProps);
    }

    componentDidUpdate() {
        this.scrollbar && this.scrollbar.update();
    }

    handleScroll(status) {
        if (this.props.onScroll) {
            this.props.onScroll(status, this.scrollbar);
        }
    }

    render() {
        const {
            speed,
            damping,
            thumbMinSize,
            syncCallbacks,
            renderByPixels,
            alwaysShowTracks,
            continuousScrolling,
            overscrollEffect,
            overscrollEffectColor,
            overscrollDamping,
            onScroll,

            children,
            ...others,
        } = this.props;

        return (
            <section data-scrollbar ref="container" {...others}>
                {children}
            </section>
        );
    }
}

@@ -1293,16 +1293,20 @@
 ollbar =
+ new
  SmoothS
@@ -1317,13 +1317,8 @@
 lbar
-.init
 (thi
@@ -2425,18 +2425,510 @@
     
-%7Bchildren%7D
+%3Carticle className=%22scroll-content%22%3E%0A                    %7Bchildren%7D%0A                %3C/article%3E%0A                %3Caside className=%22scrollbar-track scrollbar-track-x%22%3E%0A                    %3Cdiv className=%22scrollbar-thumb scrollbar-thumb-x%22%3E%3C/div%3E%0A                %3C/aside%3E%0A                %3Caside className=%22scrollbar-track scrollbar-track-y%22%3E%0A                    %3Cdiv className=%22scrollbar-thumb scrollbar-thumb-y%22%3E%3C/div%3E%0A                %3C/aside%3E%0A                %3Ccanvas className=%22overscroll-glow%22%3E%3C/canvas%3E
 %0A   

use `new Scrollbar(...)` instead of `Scrollbar.init` resolve #9