import _extends from "babel-runtime/helpers/extends";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
var __rest = this && this.__rest || function (s, e) {
    var t = {};
    for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
    }
    return t;
};
import _raf, { cancel as caf } from "raf";
import css from "dom-css";
import { Component, createElement, cloneElement } from "react";
import PropTypes from "prop-types";
import isString from "./components/utils/isString";
import getScrollbarWidth from "./components/utils/getScrollbarWidth";
import returnFalse from "./components/utils/returnFalse";
import getInnerWidth from "./components/utils/getInnerWidth";
import getInnerHeight from "./components/utils/getInnerHeight";
import { containerStyleDefault, containerStyleAutoHeight, viewStyleDefault, viewStyleAutoHeight, viewStyleUniversalInitial, trackHorizontalStyleDefault, trackVerticalStyleDefault, thumbHorizontalStyleDefault, thumbVerticalStyleDefault, disableSelectStyle, disableSelectStyleReset } from "./components/styles";
import { renderViewDefault, renderTrackHorizontalDefault, renderTrackVerticalDefault, renderThumbHorizontalDefault, renderThumbVerticalDefault } from "./components/defaultRenderElements";

var Scrollbars = function (_Component) {
    _inherits(Scrollbars, _Component);

    function Scrollbars(props) {
        var _ref;

        _classCallCheck(this, Scrollbars);

        for (var _len = arguments.length, rest = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            rest[_key - 1] = arguments[_key];
        }

        var _this = _possibleConstructorReturn(this, (_ref = Scrollbars.__proto__ || Object.getPrototypeOf(Scrollbars)).call.apply(_ref, [this, props].concat(rest)));

        _this.getScrollLeft = _this.getScrollLeft.bind(_this);
        _this.getScrollTop = _this.getScrollTop.bind(_this);
        _this.getScrollWidth = _this.getScrollWidth.bind(_this);
        _this.getScrollHeight = _this.getScrollHeight.bind(_this);
        _this.getClientWidth = _this.getClientWidth.bind(_this);
        _this.getClientHeight = _this.getClientHeight.bind(_this);
        _this.getValues = _this.getValues.bind(_this);
        _this.getThumbHorizontalWidth = _this.getThumbHorizontalWidth.bind(_this);
        _this.getThumbVerticalHeight = _this.getThumbVerticalHeight.bind(_this);
        _this.getScrollLeftForOffset = _this.getScrollLeftForOffset.bind(_this);
        _this.getScrollTopForOffset = _this.getScrollTopForOffset.bind(_this);
        _this.scrollLeft = _this.scrollLeft.bind(_this);
        _this.scrollTop = _this.scrollTop.bind(_this);
        _this.scrollToLeft = _this.scrollToLeft.bind(_this);
        _this.scrollToTop = _this.scrollToTop.bind(_this);
        _this.scrollToRight = _this.scrollToRight.bind(_this);
        _this.scrollToBottom = _this.scrollToBottom.bind(_this);
        _this.handleTrackMouseEnter = _this.handleTrackMouseEnter.bind(_this);
        _this.handleTrackMouseLeave = _this.handleTrackMouseLeave.bind(_this);
        _this.handleHorizontalTrackMouseDown = _this.handleHorizontalTrackMouseDown.bind(_this);
        _this.handleVerticalTrackMouseDown = _this.handleVerticalTrackMouseDown.bind(_this);
        _this.handleHorizontalThumbMouseDown = _this.handleHorizontalThumbMouseDown.bind(_this);
        _this.handleVerticalThumbMouseDown = _this.handleVerticalThumbMouseDown.bind(_this);
        _this.handleWindowResize = _this.handleWindowResize.bind(_this);
        _this.handleScroll = _this.handleScroll.bind(_this);
        _this.handleDrag = _this.handleDrag.bind(_this);
        _this.handleDragEnd = _this.handleDragEnd.bind(_this);
        _this.state = {
            didMountUniversal: false
        };
        return _this;
    }

    _createClass(Scrollbars, [{
        key: "componentDidMount",
        value: function componentDidMount() {
            this.addListeners();
            this.update();
            this.componentDidMountUniversal();
        }
    }, {
        key: "componentDidMountUniversal",
        value: function componentDidMountUniversal() {
            // eslint-disable-line react/sort-comp
            var universal = this.props.universal;

            if (!universal) return;
            this.setState({ didMountUniversal: true });
        }
    }, {
        key: "componentDidUpdate",
        value: function componentDidUpdate() {
            this.update();
        }
    }, {
        key: "componentWillUnmount",
        value: function componentWillUnmount() {
            this.removeListeners();
            caf(this.requestFrame);
            clearTimeout(this.hideTracksTimeout);
            clearInterval(this.detectScrollingInterval);
        }
    }, {
        key: "getScrollLeft",
        value: function getScrollLeft() {
            if (!this.view) return 0;
            return this.view.scrollLeft;
        }
    }, {
        key: "getScrollTop",
        value: function getScrollTop() {
            if (!this.view) return 0;
            return this.view.scrollTop;
        }
    }, {
        key: "getScrollWidth",
        value: function getScrollWidth() {
            if (!this.view) return 0;
            return this.view.scrollWidth;
        }
    }, {
        key: "getScrollHeight",
        value: function getScrollHeight() {
            if (!this.view) return 0;
            return this.view.scrollHeight;
        }
    }, {
        key: "getClientWidth",
        value: function getClientWidth() {
            if (!this.view) return 0;
            return this.view.clientWidth;
        }
    }, {
        key: "getClientHeight",
        value: function getClientHeight() {
            if (!this.view) return 0;
            return this.view.clientHeight;
        }
    }, {
        key: "getValues",
        value: function getValues() {
            var _ref2 = this.view || {},
                _ref2$scrollLeft = _ref2.scrollLeft,
                scrollLeft = _ref2$scrollLeft === undefined ? 0 : _ref2$scrollLeft,
                _ref2$scrollTop = _ref2.scrollTop,
                scrollTop = _ref2$scrollTop === undefined ? 0 : _ref2$scrollTop,
                _ref2$scrollWidth = _ref2.scrollWidth,
                scrollWidth = _ref2$scrollWidth === undefined ? 0 : _ref2$scrollWidth,
                _ref2$scrollHeight = _ref2.scrollHeight,
                scrollHeight = _ref2$scrollHeight === undefined ? 0 : _ref2$scrollHeight,
                _ref2$clientWidth = _ref2.clientWidth,
                clientWidth = _ref2$clientWidth === undefined ? 0 : _ref2$clientWidth,
                _ref2$clientHeight = _ref2.clientHeight,
                clientHeight = _ref2$clientHeight === undefined ? 0 : _ref2$clientHeight;

            return {
                left: scrollLeft / (scrollWidth - clientWidth) || 0,
                top: scrollTop / (scrollHeight - clientHeight) || 0,
                scrollLeft: scrollLeft,
                scrollTop: scrollTop,
                scrollWidth: scrollWidth,
                scrollHeight: scrollHeight,
                clientWidth: clientWidth,
                clientHeight: clientHeight
            };
        }
    }, {
        key: "getThumbHorizontalWidth",
        value: function getThumbHorizontalWidth() {
            var _props = this.props,
                thumbSize = _props.thumbSize,
                thumbMinSize = _props.thumbMinSize;
            var _view = this.view,
                scrollWidth = _view.scrollWidth,
                clientWidth = _view.clientWidth;

            var trackWidth = getInnerWidth(this.trackHorizontal);
            var width = Math.ceil(clientWidth / scrollWidth * trackWidth);
            if (trackWidth === width) return 0;
            if (thumbSize) return thumbSize;
            return Math.max(width, thumbMinSize);
        }
    }, {
        key: "getThumbVerticalHeight",
        value: function getThumbVerticalHeight() {
            var _props2 = this.props,
                thumbSize = _props2.thumbSize,
                thumbMinSize = _props2.thumbMinSize;
            var _view2 = this.view,
                scrollHeight = _view2.scrollHeight,
                clientHeight = _view2.clientHeight;

            var trackHeight = getInnerHeight(this.trackVertical);
            var height = Math.ceil(clientHeight / scrollHeight * trackHeight);
            if (trackHeight === height) return 0;
            if (thumbSize) return thumbSize;
            return Math.max(height, thumbMinSize);
        }
    }, {
        key: "getScrollLeftForOffset",
        value: function getScrollLeftForOffset(offset) {
            var _view3 = this.view,
                scrollWidth = _view3.scrollWidth,
                clientWidth = _view3.clientWidth;

            var trackWidth = getInnerWidth(this.trackHorizontal);
            var thumbWidth = this.getThumbHorizontalWidth();
            return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
        }
    }, {
        key: "getScrollTopForOffset",
        value: function getScrollTopForOffset(offset) {
            var _view4 = this.view,
                scrollHeight = _view4.scrollHeight,
                clientHeight = _view4.clientHeight;

            var trackHeight = getInnerHeight(this.trackVertical);
            var thumbHeight = this.getThumbVerticalHeight();
            return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
        }
    }, {
        key: "scrollLeft",
        value: function scrollLeft() {
            var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

            if (!this.view) return;
            this.view.scrollLeft = left;
        }
    }, {
        key: "scrollTop",
        value: function scrollTop() {
            var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

            if (!this.view) return;
            this.view.scrollTop = top;
        }
    }, {
        key: "scrollToLeft",
        value: function scrollToLeft() {
            if (!this.view) return;
            this.view.scrollLeft = 0;
        }
    }, {
        key: "scrollToTop",
        value: function scrollToTop() {
            if (!this.view) return;
            this.view.scrollTop = 0;
        }
    }, {
        key: "scrollToRight",
        value: function scrollToRight() {
            if (!this.view) return;
            this.view.scrollLeft = this.view.scrollWidth;
        }
    }, {
        key: "scrollToBottom",
        value: function scrollToBottom() {
            if (!this.view) return;
            this.view.scrollTop = this.view.scrollHeight;
        }
    }, {
        key: "addListeners",
        value: function addListeners() {
            /* istanbul ignore if */
            if (typeof document === "undefined" || !this.view) return;
            var view = this.view,
                trackHorizontal = this.trackHorizontal,
                trackVertical = this.trackVertical,
                thumbHorizontal = this.thumbHorizontal,
                thumbVertical = this.thumbVertical;

            view.addEventListener("scroll", this.handleScroll);
            if (!getScrollbarWidth()) return;
            trackHorizontal.addEventListener("mouseenter", this.handleTrackMouseEnter);
            trackHorizontal.addEventListener("mouseleave", this.handleTrackMouseLeave);
            trackHorizontal.addEventListener("mousedown", this.handleHorizontalTrackMouseDown);
            trackVertical.addEventListener("mouseenter", this.handleTrackMouseEnter);
            trackVertical.addEventListener("mouseleave", this.handleTrackMouseLeave);
            trackVertical.addEventListener("mousedown", this.handleVerticalTrackMouseDown);
            thumbHorizontal.addEventListener("mousedown", this.handleHorizontalThumbMouseDown);
            thumbVertical.addEventListener("mousedown", this.handleVerticalThumbMouseDown);
            window.addEventListener("resize", this.handleWindowResize);
        }
    }, {
        key: "removeListeners",
        value: function removeListeners() {
            /* istanbul ignore if */
            if (typeof document === "undefined" || !this.view) return;
            var view = this.view,
                trackHorizontal = this.trackHorizontal,
                trackVertical = this.trackVertical,
                thumbHorizontal = this.thumbHorizontal,
                thumbVertical = this.thumbVertical;

            view.removeEventListener("scroll", this.handleScroll);
            if (!getScrollbarWidth()) return;
            trackHorizontal.removeEventListener("mouseenter", this.handleTrackMouseEnter);
            trackHorizontal.removeEventListener("mouseleave", this.handleTrackMouseLeave);
            trackHorizontal.removeEventListener("mousedown", this.handleHorizontalTrackMouseDown);
            trackVertical.removeEventListener("mouseenter", this.handleTrackMouseEnter);
            trackVertical.removeEventListener("mouseleave", this.handleTrackMouseLeave);
            trackVertical.removeEventListener("mousedown", this.handleVerticalTrackMouseDown);
            thumbHorizontal.removeEventListener("mousedown", this.handleHorizontalThumbMouseDown);
            thumbVertical.removeEventListener("mousedown", this.handleVerticalThumbMouseDown);
            window.removeEventListener("resize", this.handleWindowResize);
            // Possibly setup by `handleDragStart`
            this.teardownDragging();
        }
    }, {
        key: "handleScroll",
        value: function handleScroll(event) {
            var _this2 = this;

            var _props3 = this.props,
                onScroll = _props3.onScroll,
                onScrollFrame = _props3.onScrollFrame;

            if (onScroll) onScroll(event);
            this.update(function (values) {
                var scrollLeft = values.scrollLeft,
                    scrollTop = values.scrollTop;

                _this2.viewScrollLeft = scrollLeft;
                _this2.viewScrollTop = scrollTop;
                if (onScrollFrame) onScrollFrame(values);
            });
            this.detectScrolling();
        }
    }, {
        key: "handleScrollStart",
        value: function handleScrollStart() {
            var onScrollStart = this.props.onScrollStart;

            if (onScrollStart) onScrollStart();
            this.handleScrollStartAutoHide();
        }
    }, {
        key: "handleScrollStartAutoHide",
        value: function handleScrollStartAutoHide() {
            var autoHide = this.props.autoHide;

            if (!autoHide) return;
            this.showTracks();
        }
    }, {
        key: "handleScrollStop",
        value: function handleScrollStop() {
            var onScrollStop = this.props.onScrollStop;

            if (onScrollStop) onScrollStop();
            this.handleScrollStopAutoHide();
        }
    }, {
        key: "handleScrollStopAutoHide",
        value: function handleScrollStopAutoHide() {
            var autoHide = this.props.autoHide;

            if (!autoHide) return;
            this.hideTracks();
        }
    }, {
        key: "handleWindowResize",
        value: function handleWindowResize() {
            this.update();
        }
    }, {
        key: "handleHorizontalTrackMouseDown",
        value: function handleHorizontalTrackMouseDown(event) {
            event.preventDefault();
            var target = event.target,
                clientX = event.clientX;

            var _target$getBoundingCl = target.getBoundingClientRect(),
                targetLeft = _target$getBoundingCl.left;

            var thumbWidth = this.getThumbHorizontalWidth();
            var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
            this.view.scrollLeft = this.getScrollLeftForOffset(offset);
        }
    }, {
        key: "handleVerticalTrackMouseDown",
        value: function handleVerticalTrackMouseDown(event) {
            event.preventDefault();
            var target = event.target,
                clientY = event.clientY;

            var _target$getBoundingCl2 = target.getBoundingClientRect(),
                targetTop = _target$getBoundingCl2.top;

            var thumbHeight = this.getThumbVerticalHeight();
            var offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
            this.view.scrollTop = this.getScrollTopForOffset(offset);
        }
    }, {
        key: "handleHorizontalThumbMouseDown",
        value: function handleHorizontalThumbMouseDown(event) {
            event.preventDefault();
            this.handleDragStart(event);
            var target = event.target,
                clientX = event.clientX;
            var offsetWidth = target.offsetWidth;

            var _target$getBoundingCl3 = target.getBoundingClientRect(),
                left = _target$getBoundingCl3.left;

            this.prevPageX = offsetWidth - (clientX - left);
        }
    }, {
        key: "handleVerticalThumbMouseDown",
        value: function handleVerticalThumbMouseDown(event) {
            event.preventDefault();
            this.handleDragStart(event);
            var target = event.target,
                clientY = event.clientY;
            var offsetHeight = target.offsetHeight;

            var _target$getBoundingCl4 = target.getBoundingClientRect(),
                top = _target$getBoundingCl4.top;

            this.prevPageY = offsetHeight - (clientY - top);
        }
    }, {
        key: "setupDragging",
        value: function setupDragging() {
            css(document.body, disableSelectStyle);
            document.addEventListener("mousemove", this.handleDrag);
            document.addEventListener("mouseup", this.handleDragEnd);
            document.onselectstart = returnFalse;
        }
    }, {
        key: "teardownDragging",
        value: function teardownDragging() {
            css(document.body, disableSelectStyleReset);
            document.removeEventListener("mousemove", this.handleDrag);
            document.removeEventListener("mouseup", this.handleDragEnd);
            document.onselectstart = undefined;
        }
    }, {
        key: "handleDragStart",
        value: function handleDragStart(event) {
            this.dragging = true;
            event.stopImmediatePropagation();
            this.setupDragging();
        }
    }, {
        key: "handleDrag",
        value: function handleDrag(event) {
            if (this.prevPageX) {
                var clientX = event.clientX;

                var _trackHorizontal$getB = this.trackHorizontal.getBoundingClientRect(),
                    trackLeft = _trackHorizontal$getB.left;

                var thumbWidth = this.getThumbHorizontalWidth();
                var clickPosition = thumbWidth - this.prevPageX;
                var offset = -trackLeft + clientX - clickPosition;
                this.view.scrollLeft = this.getScrollLeftForOffset(offset);
            }
            if (this.prevPageY) {
                var clientY = event.clientY;

                var _trackVertical$getBou = this.trackVertical.getBoundingClientRect(),
                    trackTop = _trackVertical$getBou.top;

                var thumbHeight = this.getThumbVerticalHeight();
                var _clickPosition = thumbHeight - this.prevPageY;
                var _offset = -trackTop + clientY - _clickPosition;
                this.view.scrollTop = this.getScrollTopForOffset(_offset);
            }
            return false;
        }
    }, {
        key: "handleDragEnd",
        value: function handleDragEnd() {
            this.dragging = false;
            this.prevPageX = this.prevPageY = 0;
            this.teardownDragging();
            this.handleDragEndAutoHide();
        }
    }, {
        key: "handleDragEndAutoHide",
        value: function handleDragEndAutoHide() {
            var autoHide = this.props.autoHide;

            if (!autoHide) return;
            this.hideTracks();
        }
    }, {
        key: "handleTrackMouseEnter",
        value: function handleTrackMouseEnter() {
            this.trackMouseOver = true;
            this.handleTrackMouseEnterAutoHide();
        }
    }, {
        key: "handleTrackMouseEnterAutoHide",
        value: function handleTrackMouseEnterAutoHide() {
            var autoHide = this.props.autoHide;

            if (!autoHide) return;
            this.showTracks();
        }
    }, {
        key: "handleTrackMouseLeave",
        value: function handleTrackMouseLeave() {
            this.trackMouseOver = false;
            this.handleTrackMouseLeaveAutoHide();
        }
    }, {
        key: "handleTrackMouseLeaveAutoHide",
        value: function handleTrackMouseLeaveAutoHide() {
            var autoHide = this.props.autoHide;

            if (!autoHide) return;
            this.hideTracks();
        }
    }, {
        key: "showTracks",
        value: function showTracks() {
            clearTimeout(this.hideTracksTimeout);
            css(this.trackHorizontal, { opacity: 1 });
            css(this.trackVertical, { opacity: 1 });
        }
    }, {
        key: "hideTracks",
        value: function hideTracks() {
            var _this3 = this;

            if (this.dragging) return;
            if (this.scrolling) return;
            if (this.trackMouseOver) return;
            var autoHideTimeout = this.props.autoHideTimeout;

            clearTimeout(this.hideTracksTimeout);
            this.hideTracksTimeout = setTimeout(function () {
                css(_this3.trackHorizontal, { opacity: 0 });
                css(_this3.trackVertical, { opacity: 0 });
            }, autoHideTimeout);
        }
    }, {
        key: "detectScrolling",
        value: function detectScrolling() {
            var _this4 = this;

            if (this.scrolling) return;
            this.scrolling = true;
            this.handleScrollStart();
            this.detectScrollingInterval = setInterval(function () {
                if (_this4.lastViewScrollLeft === _this4.viewScrollLeft && _this4.lastViewScrollTop === _this4.viewScrollTop) {
                    clearInterval(_this4.detectScrollingInterval);
                    _this4.scrolling = false;
                    _this4.handleScrollStop();
                }
                _this4.lastViewScrollLeft = _this4.viewScrollLeft;
                _this4.lastViewScrollTop = _this4.viewScrollTop;
            }, 100);
        }
    }, {
        key: "raf",
        value: function raf(callback) {
            var _this5 = this;

            if (this.requestFrame) _raf.cancel(this.requestFrame);
            this.requestFrame = _raf(function () {
                _this5.requestFrame = undefined;
                callback();
            });
        }
    }, {
        key: "update",
        value: function update(callback) {
            var _this6 = this;

            this.raf(function () {
                return _this6._update(callback);
            });
        }
    }, {
        key: "_update",
        value: function _update(callback) {
            var _props4 = this.props,
                onUpdate = _props4.onUpdate,
                hideTracksWhenNotNeeded = _props4.hideTracksWhenNotNeeded;

            var values = this.getValues();
            if (getScrollbarWidth()) {
                var scrollLeft = values.scrollLeft,
                    clientWidth = values.clientWidth,
                    scrollWidth = values.scrollWidth;

                var trackHorizontalWidth = getInnerWidth(this.trackHorizontal);
                var thumbHorizontalWidth = this.getThumbHorizontalWidth();
                var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
                var thumbHorizontalStyle = {
                    width: thumbHorizontalWidth,
                    transform: "translateX(" + thumbHorizontalX + "px)"
                };
                var scrollTop = values.scrollTop,
                    clientHeight = values.clientHeight,
                    scrollHeight = values.scrollHeight;

                var trackVerticalHeight = getInnerHeight(this.trackVertical);
                var thumbVerticalHeight = this.getThumbVerticalHeight();
                var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
                var thumbVerticalStyle = {
                    height: thumbVerticalHeight,
                    transform: "translateY(" + thumbVerticalY + "px)"
                };
                if (hideTracksWhenNotNeeded) {
                    var trackHorizontalStyle = {
                        visibility: scrollWidth > clientWidth ? "visible" : "hidden"
                    };
                    var trackVerticalStyle = {
                        visibility: scrollHeight > clientHeight ? "visible" : "hidden"
                    };
                    css(this.trackHorizontal, trackHorizontalStyle);
                    css(this.trackVertical, trackVerticalStyle);
                }
                css(this.thumbHorizontal, thumbHorizontalStyle);
                css(this.thumbVertical, thumbVerticalStyle);
            }
            if (onUpdate) onUpdate(values);
            if (typeof callback !== "function") return;
            callback(values);
        }
    }, {
        key: "render",
        value: function render() {
            var _this7 = this;

            var scrollbarWidth = getScrollbarWidth();
            /* eslint-disable no-unused-vars */
            var _a = this.props,
                onScroll = _a.onScroll,
                onScrollFrame = _a.onScrollFrame,
                onScrollStart = _a.onScrollStart,
                onScrollStop = _a.onScrollStop,
                onUpdate = _a.onUpdate,
                renderView = _a.renderView,
                renderTrackHorizontal = _a.renderTrackHorizontal,
                renderTrackVertical = _a.renderTrackVertical,
                renderThumbHorizontal = _a.renderThumbHorizontal,
                renderThumbVertical = _a.renderThumbVertical,
                tagName = _a.tagName,
                hideTracksWhenNotNeeded = _a.hideTracksWhenNotNeeded,
                autoHide = _a.autoHide,
                autoHideTimeout = _a.autoHideTimeout,
                autoHideDuration = _a.autoHideDuration,
                thumbSize = _a.thumbSize,
                thumbMinSize = _a.thumbMinSize,
                universal = _a.universal,
                autoHeight = _a.autoHeight,
                autoHeightMin = _a.autoHeightMin,
                autoHeightMax = _a.autoHeightMax,
                style = _a.style,
                children = _a.children,
                props = __rest(_a, ["onScroll", "onScrollFrame", "onScrollStart", "onScrollStop", "onUpdate", "renderView", "renderTrackHorizontal", "renderTrackVertical", "renderThumbHorizontal", "renderThumbVertical", "tagName", "hideTracksWhenNotNeeded", "autoHide", "autoHideTimeout", "autoHideDuration", "thumbSize", "thumbMinSize", "universal", "autoHeight", "autoHeightMin", "autoHeightMax", "style", "children"]);
            /* eslint-enable no-unused-vars */
            var didMountUniversal = this.state.didMountUniversal;

            var containerStyle = _extends(_extends(_extends({}, containerStyleDefault), autoHeight && _extends(_extends({}, containerStyleAutoHeight), { minHeight: autoHeightMin, maxHeight: autoHeightMax })), style);
            var viewStyle = _extends(_extends(_extends(_extends(_extends({}, viewStyleDefault), {
                // Hide scrollbars by setting a negative margin
                marginRight: scrollbarWidth ? -scrollbarWidth : 0, marginBottom: scrollbarWidth ? -scrollbarWidth : 0 }), autoHeight && _extends(_extends({}, viewStyleAutoHeight), {
                // Add scrollbarWidth to autoHeight in order to compensate negative margins
                minHeight: isString(autoHeightMin) ? "calc(" + autoHeightMin + " + " + scrollbarWidth + "px)" : autoHeightMin + scrollbarWidth, maxHeight: isString(autoHeightMax) ? "calc(" + autoHeightMax + " + " + scrollbarWidth + "px)" : autoHeightMax + scrollbarWidth })), autoHeight && universal && !didMountUniversal && {
                minHeight: autoHeightMin,
                maxHeight: autoHeightMax
            }), universal && !didMountUniversal && viewStyleUniversalInitial);
            var trackAutoHeightStyle = {
                transition: "opacity " + autoHideDuration + "ms",
                opacity: 0
            };
            var trackHorizontalStyle = _extends(_extends(_extends({}, trackHorizontalStyleDefault), autoHide && trackAutoHeightStyle), (!scrollbarWidth || universal && !didMountUniversal) && {
                display: "none"
            });
            var trackVerticalStyle = _extends(_extends(_extends({}, trackVerticalStyleDefault), autoHide && trackAutoHeightStyle), (!scrollbarWidth || universal && !didMountUniversal) && {
                display: "none"
            });
            return createElement(tagName, _extends(_extends({}, props), { style: containerStyle, ref: function ref(_ref3) {
                    _this7.container = _ref3;
                } }), [cloneElement(renderView({ style: viewStyle }), {
                key: "view",
                ref: function ref(_ref4) {
                    _this7.view = _ref4;
                }
            }, children), cloneElement(renderTrackHorizontal({ style: trackHorizontalStyle }), {
                key: "trackHorizontal",
                ref: function ref(_ref5) {
                    _this7.trackHorizontal = _ref5;
                }
            }, cloneElement(renderThumbHorizontal({ style: thumbHorizontalStyleDefault }), {
                ref: function ref(_ref6) {
                    _this7.thumbHorizontal = _ref6;
                }
            })), cloneElement(renderTrackVertical({ style: trackVerticalStyle }), {
                key: "trackVertical",
                ref: function ref(_ref7) {
                    _this7.trackVertical = _ref7;
                }
            }, cloneElement(renderThumbVertical({ style: thumbVerticalStyleDefault }), {
                ref: function ref(_ref8) {
                    _this7.thumbVertical = _ref8;
                }
            }))]);
        }
    }]);

    return Scrollbars;
}(Component);

export default Scrollbars;

Scrollbars.propTypes = {
    onScroll: PropTypes.func,
    onScrollFrame: PropTypes.func,
    onScrollStart: PropTypes.func,
    onScrollStop: PropTypes.func,
    onUpdate: PropTypes.func,
    renderView: PropTypes.func,
    renderTrackHorizontal: PropTypes.func,
    renderTrackVertical: PropTypes.func,
    renderThumbHorizontal: PropTypes.func,
    renderThumbVertical: PropTypes.func,
    tagName: PropTypes.string,
    thumbSize: PropTypes.number,
    thumbMinSize: PropTypes.number,
    hideTracksWhenNotNeeded: PropTypes.bool,
    autoHide: PropTypes.bool,
    autoHideTimeout: PropTypes.number,
    autoHideDuration: PropTypes.number,
    autoHeight: PropTypes.bool,
    autoHeightMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    autoHeightMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    universal: PropTypes.bool,
    style: PropTypes.object,
    children: PropTypes.node
};
Scrollbars.defaultProps = {
    renderView: renderViewDefault,
    renderTrackHorizontal: renderTrackHorizontalDefault,
    renderTrackVertical: renderTrackVerticalDefault,
    renderThumbHorizontal: renderThumbHorizontalDefault,
    renderThumbVertical: renderThumbVerticalDefault,
    tagName: "div",
    thumbMinSize: 30,
    hideTracksWhenNotNeeded: false,
    autoHide: false,
    autoHideTimeout: 1000,
    autoHideDuration: 200,
    autoHeight: false,
    autoHeightMin: 0,
    autoHeightMax: 200,
    universal: false
};