hjkcai-rc-scrollbars
Version:
React scrollbars component
623 lines (622 loc) • 28.8 kB
JavaScript
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { Component } from 'react';
import raf, { cancel as caf } from 'raf';
import css from 'dom-css';
import { getFinalClasses, getScrollbarWidth, returnFalse, getInnerWidth, getInnerHeight, } from '../utils';
import { createStyles } from './styles';
var Scrollbars = (function (_super) {
__extends(Scrollbars, _super);
function Scrollbars(props) {
var _this = _super.call(this, props) || this;
_this.container = null;
_this.dragging = false;
_this.scrolling = false;
_this.trackMouseOver = false;
_this.mutationOb = new MutationObserver(function () { return _this.update(); });
_this.updateCallbacks = [];
_this.styles = createStyles(_this.props.disableDefaultStyles);
_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.handleHorizontalTrackWheel = _this.handleHorizontalTrackWheel.bind(_this);
_this.handleVerticalTrackWheel = _this.handleVerticalTrackWheel.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,
scrollbarWidth: getScrollbarWidth(),
};
return _this;
}
Scrollbars.prototype.componentDidMount = function () {
this.addListeners();
this.update();
this.componentDidMountUniversal();
};
Scrollbars.prototype.componentDidMountUniversal = function () {
var universal = this.props.universal;
if (!universal)
return;
this.setState({ didMountUniversal: true });
};
Scrollbars.prototype.componentDidUpdate = function () {
this.update();
};
Scrollbars.prototype.componentWillUnmount = function () {
this.removeListeners();
this.requestFrame && caf(this.requestFrame);
clearTimeout(this.hideTracksTimeout);
clearInterval(this.detectScrollingInterval);
};
Scrollbars.prototype.getScrollLeft = function () {
if (!this.view)
return 0;
return this.view.scrollLeft;
};
Scrollbars.prototype.getScrollTop = function () {
if (!this.view)
return 0;
return this.view.scrollTop;
};
Scrollbars.prototype.getScrollWidth = function () {
if (!this.view)
return 0;
return this.view.scrollWidth;
};
Scrollbars.prototype.getScrollHeight = function () {
if (!this.view)
return 0;
return this.view.scrollHeight;
};
Scrollbars.prototype.getClientWidth = function () {
if (!this.view)
return 0;
return this.view.clientWidth;
};
Scrollbars.prototype.getClientHeight = function () {
if (!this.view)
return 0;
return this.view.clientHeight;
};
Scrollbars.prototype.getValues = function () {
var _a = this.view || {}, _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, _c = _a.scrollTop, scrollTop = _c === void 0 ? 0 : _c, _d = _a.scrollWidth, scrollWidth = _d === void 0 ? 0 : _d, _e = _a.scrollHeight, scrollHeight = _e === void 0 ? 0 : _e, _f = _a.clientWidth, clientWidth = _f === void 0 ? 0 : _f, _g = _a.clientHeight, clientHeight = _g === void 0 ? 0 : _g;
return {
left: scrollLeft / (scrollWidth - clientWidth) || 0,
top: scrollTop / (scrollHeight - clientHeight) || 0,
scrollLeft: scrollLeft,
scrollTop: scrollTop,
scrollWidth: scrollWidth,
scrollHeight: scrollHeight,
clientWidth: clientWidth,
clientHeight: clientHeight,
};
};
Scrollbars.prototype.getThumbHorizontalWidth = function () {
if (!this.view || !this.trackHorizontal)
return 0;
var _a = this.props, thumbSize = _a.thumbSize, thumbMinSize = _a.thumbMinSize;
var _b = this.view, scrollWidth = _b.scrollWidth, clientWidth = _b.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);
};
Scrollbars.prototype.getThumbVerticalHeight = function () {
if (!this.view || !this.trackVertical)
return 0;
var _a = this.props, thumbSize = _a.thumbSize, thumbMinSize = _a.thumbMinSize;
var _b = this.view, scrollHeight = _b.scrollHeight, clientHeight = _b.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);
};
Scrollbars.prototype.getScrollLeftForOffset = function (offset) {
if (!this.view || !this.trackHorizontal)
return 0;
var _a = this.view, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
var trackWidth = getInnerWidth(this.trackHorizontal);
var thumbWidth = this.getThumbHorizontalWidth();
return (offset / (trackWidth - thumbWidth)) * (scrollWidth - clientWidth);
};
Scrollbars.prototype.getScrollTopForOffset = function (offset) {
if (!this.view || !this.trackVertical)
return 0;
var _a = this.view, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
var trackHeight = getInnerHeight(this.trackVertical);
var thumbHeight = this.getThumbVerticalHeight();
return (offset / (trackHeight - thumbHeight)) * (scrollHeight - clientHeight);
};
Scrollbars.prototype.scrollLeft = function (left) {
if (left === void 0) { left = 0; }
if (!this.view)
return;
this.view.scrollLeft = left;
};
Scrollbars.prototype.scrollTop = function (top) {
if (top === void 0) { top = 0; }
if (!this.view)
return;
this.view.scrollTop = top;
};
Scrollbars.prototype.scrollToLeft = function () {
if (!this.view)
return;
this.view.scrollLeft = 0;
};
Scrollbars.prototype.scrollToTop = function () {
if (!this.view)
return;
this.view.scrollTop = 0;
};
Scrollbars.prototype.scrollToRight = function () {
if (!this.view)
return;
this.view.scrollLeft = this.view.scrollWidth;
};
Scrollbars.prototype.scrollToBottom = function () {
if (!this.view)
return;
this.view.scrollTop = this.view.scrollHeight;
};
Scrollbars.prototype.scrollToY = function (y) {
if (!this.view)
return;
this.view.scrollTop = y;
};
Scrollbars.prototype.addListeners = function () {
if (typeof document === 'undefined' ||
!this.view ||
!this.trackHorizontal ||
!this.trackVertical ||
!this.thumbVertical ||
!this.thumbHorizontal)
return;
var _a = this, view = _a.view, trackHorizontal = _a.trackHorizontal, trackVertical = _a.trackVertical, thumbHorizontal = _a.thumbHorizontal, thumbVertical = _a.thumbVertical;
view.addEventListener('scroll', this.handleScroll);
if (!this.state.scrollbarWidth)
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);
trackHorizontal.addEventListener('wheel', this.handleHorizontalTrackWheel);
trackVertical.addEventListener('wheel', this.handleVerticalTrackWheel);
window.addEventListener('resize', this.handleWindowResize);
this.mutationOb.observe(view, { attributes: true, childList: true, subtree: true });
};
Scrollbars.prototype.removeListeners = function () {
if (typeof document === 'undefined' ||
!this.view ||
!this.trackHorizontal ||
!this.trackVertical ||
!this.thumbVertical ||
!this.thumbHorizontal)
return;
var _a = this, view = _a.view, trackHorizontal = _a.trackHorizontal, trackVertical = _a.trackVertical, thumbHorizontal = _a.thumbHorizontal, thumbVertical = _a.thumbVertical;
view.removeEventListener('scroll', this.handleScroll);
if (!this.state.scrollbarWidth)
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);
trackHorizontal.removeEventListener('wheel', this.handleHorizontalTrackWheel);
trackVertical.removeEventListener('wheel', this.handleVerticalTrackWheel);
window.removeEventListener('resize', this.handleWindowResize);
this.teardownDragging();
this.mutationOb.disconnect();
};
Scrollbars.prototype.handleScroll = function (event) {
var _this = this;
var _a = this.props, onScroll = _a.onScroll, onScrollFrame = _a.onScrollFrame;
if (onScroll)
onScroll(event);
this.update(function (values) {
var scrollLeft = values.scrollLeft, scrollTop = values.scrollTop;
_this.viewScrollLeft = scrollLeft;
_this.viewScrollTop = scrollTop;
if (onScrollFrame)
onScrollFrame(values);
});
this.detectScrolling();
};
Scrollbars.prototype.handleScrollStart = function () {
var onScrollStart = this.props.onScrollStart;
if (onScrollStart)
onScrollStart();
this.handleScrollStartAutoHide();
};
Scrollbars.prototype.handleScrollStartAutoHide = function () {
var autoHide = this.props.autoHide;
if (!autoHide)
return;
this.showTracks();
};
Scrollbars.prototype.handleScrollStop = function () {
var onScrollStop = this.props.onScrollStop;
if (onScrollStop)
onScrollStop();
this.handleScrollStopAutoHide();
};
Scrollbars.prototype.handleScrollStopAutoHide = function () {
var autoHide = this.props.autoHide;
if (!autoHide)
return;
this.hideTracks();
};
Scrollbars.prototype.handleWindowResize = function () {
this.update();
};
Scrollbars.prototype.handleHorizontalTrackMouseDown = function (event) {
var _this = this;
if (!this.view)
return;
event.preventDefault();
var target = event.target, clientX = event.clientX;
var targetLeft = target.getBoundingClientRect().left;
var thumbWidth = this.getThumbHorizontalWidth();
var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
this.view.scrollLeft = this.getScrollLeftForOffset(offset);
this.update(function () {
_this.handleDragStart(event);
var _a = _this.thumbHorizontal.getBoundingClientRect(), left = _a.left, width = _a.width;
_this.prevPageY = width - (event.clientX - left);
});
};
Scrollbars.prototype.handleVerticalTrackMouseDown = function (event) {
var _this = this;
if (!this.view)
return;
event.preventDefault();
var target = event.target, clientY = event.clientY;
var targetTop = target.getBoundingClientRect().top;
var thumbHeight = this.getThumbVerticalHeight();
var offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
this.view.scrollTop = this.getScrollTopForOffset(offset);
this.update(function () {
_this.handleDragStart(event);
var _a = _this.thumbVertical.getBoundingClientRect(), top = _a.top, height = _a.height;
_this.prevPageY = height - (event.clientY - top);
});
};
Scrollbars.prototype.handleHorizontalThumbMouseDown = function (event) {
event.preventDefault();
this.handleDragStart(event);
var target = event.target, clientX = event.clientX;
var offsetWidth = target.offsetWidth;
var left = target.getBoundingClientRect().left;
this.prevPageX = offsetWidth - (clientX - left);
};
Scrollbars.prototype.handleVerticalThumbMouseDown = function (event) {
event.preventDefault();
this.handleDragStart(event);
var target = event.target, clientY = event.clientY;
var offsetHeight = target.offsetHeight;
var top = target.getBoundingClientRect().top;
this.prevPageY = offsetHeight - (clientY - top);
};
Scrollbars.prototype.handleHorizontalTrackWheel = function (e) {
e.preventDefault();
this.scrollLeft(this.getScrollLeft() + e.deltaX);
};
Scrollbars.prototype.handleVerticalTrackWheel = function (e) {
e.preventDefault();
this.scrollTop(this.getScrollTop() + e.deltaY);
};
Scrollbars.prototype.setupDragging = function () {
css(document.body, this.styles.disableSelectStyle);
document.addEventListener('mousemove', this.handleDrag);
document.addEventListener('mouseup', this.handleDragEnd);
document.onselectstart = returnFalse;
};
Scrollbars.prototype.teardownDragging = function () {
css(document.body, this.styles.disableSelectStyleReset);
document.removeEventListener('mousemove', this.handleDrag);
document.removeEventListener('mouseup', this.handleDragEnd);
document.onselectstart = null;
};
Scrollbars.prototype.handleDragStart = function (event) {
this.dragging = true;
event.stopImmediatePropagation();
this.setupDragging();
};
Scrollbars.prototype.handleDrag = function (event) {
if (this.prevPageX && this.trackHorizontal && this.view) {
var clientX = event.clientX;
var trackLeft = this.trackHorizontal.getBoundingClientRect().left;
var thumbWidth = this.getThumbHorizontalWidth();
var clickPosition = thumbWidth - this.prevPageX;
var offset = -trackLeft + clientX - clickPosition;
this.view.scrollLeft = this.getScrollLeftForOffset(offset);
}
if (this.prevPageY && this.trackVertical && this.view) {
var clientY = event.clientY;
var trackTop = this.trackVertical.getBoundingClientRect().top;
var thumbHeight = this.getThumbVerticalHeight();
var clickPosition = thumbHeight - this.prevPageY;
var offset = -trackTop + clientY - clickPosition;
this.view.scrollTop = this.getScrollTopForOffset(offset);
}
return false;
};
Scrollbars.prototype.handleDragEnd = function () {
this.dragging = false;
this.prevPageX = this.prevPageY = 0;
this.teardownDragging();
this.handleDragEndAutoHide();
};
Scrollbars.prototype.handleDragEndAutoHide = function () {
var autoHide = this.props.autoHide;
if (!autoHide)
return;
this.hideTracks();
};
Scrollbars.prototype.handleTrackMouseEnter = function () {
this.trackMouseOver = true;
this.handleTrackMouseEnterAutoHide();
};
Scrollbars.prototype.handleTrackMouseEnterAutoHide = function () {
var autoHide = this.props.autoHide;
if (!autoHide)
return;
this.showTracks();
};
Scrollbars.prototype.handleTrackMouseLeave = function () {
this.trackMouseOver = false;
this.handleTrackMouseLeaveAutoHide();
};
Scrollbars.prototype.handleTrackMouseLeaveAutoHide = function () {
var autoHide = this.props.autoHide;
if (!autoHide)
return;
this.hideTracks();
};
Scrollbars.prototype.showTracks = function () {
if (this.hideTracksTimeout) {
clearTimeout(this.hideTracksTimeout);
this.hideTracksTimeout = undefined;
}
if (this.trackHorizontal && this.trackHorizontal.style.opacity !== '1') {
this.trackHorizontal.style.opacity = '1';
}
if (this.trackVertical && this.trackVertical.style.opacity !== '1') {
this.trackVertical.style.opacity = '1';
}
};
Scrollbars.prototype.hideTracks = function () {
var _this = this;
if (this.dragging)
return;
if (this.scrolling)
return;
if (this.trackMouseOver)
return;
var autoHideTimeout = this.props.autoHideTimeout;
if (this.hideTracksTimeout)
clearTimeout(this.hideTracksTimeout);
this.hideTracksTimeout = setTimeout(function () {
if (_this.trackHorizontal && _this.trackHorizontal.style.opacity !== '0') {
_this.trackHorizontal.style.opacity = '0';
}
if (_this.trackVertical && _this.trackVertical.style.opacity !== '0') {
_this.trackVertical.style.opacity = '0';
}
}, autoHideTimeout);
};
Scrollbars.prototype.detectScrolling = function () {
var _this = this;
if (this.scrolling)
return;
this.scrolling = true;
this.handleScrollStart();
this.detectScrollingInterval = setInterval(function () {
if (_this.lastViewScrollLeft === _this.viewScrollLeft &&
_this.lastViewScrollTop === _this.viewScrollTop) {
clearInterval(_this.detectScrollingInterval);
_this.scrolling = false;
_this.handleScrollStop();
}
_this.lastViewScrollLeft = _this.viewScrollLeft;
_this.lastViewScrollTop = _this.viewScrollTop;
}, 100);
};
Scrollbars.prototype.update = function (callback) {
var _this = this;
if (this.requestFrame)
return;
if (typeof callback === 'function')
this.updateCallbacks.push(callback);
this.requestFrame = raf(function () {
_this.requestFrame = undefined;
_this._update();
});
};
Scrollbars.prototype._update = function () {
var _a = this.props, onUpdate = _a.onUpdate, hideTracksWhenNotNeeded = _a.hideTracksWhenNotNeeded;
var values = this.getValues();
var freshScrollbarWidth = getScrollbarWidth();
if (this.state.scrollbarWidth !== freshScrollbarWidth) {
this.setState({ scrollbarWidth: freshScrollbarWidth });
}
if (this.state.scrollbarWidth) {
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(".concat(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(".concat(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 (this.updateCallbacks.length > 0) {
for (var i = 0; i < this.updateCallbacks.length; i++) {
this.updateCallbacks[i](values);
}
this.updateCallbacks = [];
}
};
Scrollbars.prototype.render = function () {
var _this = this;
var _a = this.state, scrollbarWidth = _a.scrollbarWidth, didMountUniversal = _a.didMountUniversal;
var _b = this.props, autoHeight = _b.autoHeight, autoHeightMax = _b.autoHeightMax, autoHeightMin = _b.autoHeightMin, children = _b.children, renderThumbHorizontal = _b.renderThumbHorizontal, renderThumbVertical = _b.renderThumbVertical, renderTrackHorizontal = _b.renderTrackHorizontal, renderTrackVertical = _b.renderTrackVertical, renderView = _b.renderView, style = _b.style, tagName = _b.tagName, universal = _b.universal, id = _b.id;
var Tag = tagName;
var _c = this.styles, containerStyleAutoHeight = _c.containerStyleAutoHeight, containerStyleDefault = _c.containerStyleDefault, viewStyleAutoHeight = _c.viewStyleAutoHeight, viewStyleDefault = _c.viewStyleDefault, viewStyleUniversalInitial = _c.viewStyleUniversalInitial;
var containerStyle = (function () {
var result = __assign({}, containerStyleDefault);
if (autoHeight) {
Object.assign(result, containerStyleAutoHeight);
result.minHeight = autoHeightMin;
result.maxHeight = autoHeightMax;
}
return Object.assign(result, style);
})();
var viewStyle = (function () {
var result = __assign(__assign({}, viewStyleDefault), { marginRight: scrollbarWidth ? -scrollbarWidth : 0, marginBottom: scrollbarWidth ? -scrollbarWidth : 0 });
if (autoHeight) {
Object.assign(result, viewStyleAutoHeight);
if (universal && !didMountUniversal) {
result.minHeight = autoHeightMin;
result.maxHeight = autoHeightMax;
}
else {
result.minHeight =
typeof autoHeightMin === 'string'
? "calc(".concat(autoHeightMin, " + ").concat(scrollbarWidth, "px)")
: autoHeightMin + scrollbarWidth;
result.maxHeight =
typeof autoHeightMax === 'string'
? "calc(".concat(autoHeightMax, " + ").concat(scrollbarWidth, "px)")
: autoHeightMax + scrollbarWidth;
}
}
return universal && !didMountUniversal
? Object.assign(result, viewStyleUniversalInitial)
: result;
})();
var trackStyle;
if (!scrollbarWidth || (universal && !didMountUniversal)) {
trackStyle = {
display: 'none',
};
}
var mergedClasses = getFinalClasses(this.props);
return (React.createElement(Tag, { ref: function (ref) {
_this.container = ref;
}, id: id, className: mergedClasses.root, style: containerStyle },
renderView({
ref: function (ref) {
_this.view = ref;
},
style: viewStyle,
className: mergedClasses.view,
children: children,
}),
renderTrackHorizontal({
ref: function (ref) {
_this.trackHorizontal = ref;
},
className: mergedClasses.trackHorizontal,
style: trackStyle,
children: renderThumbHorizontal({
ref: function (ref) {
_this.thumbHorizontal = ref;
},
className: mergedClasses.thumbHorizontal,
}),
}),
renderTrackVertical({
ref: function (ref) {
_this.trackVertical = ref;
},
className: mergedClasses.trackVertical,
style: trackStyle,
children: renderThumbVertical({
ref: function (ref) {
_this.thumbVertical = ref;
},
className: mergedClasses.thumbVertical,
}),
})));
};
Scrollbars.displayName = 'Scrollbars';
Scrollbars.defaultProps = {
autoHeight: false,
autoHeightMax: 200,
autoHeightMin: 0,
autoHide: false,
autoHideDuration: 200,
autoHideTimeout: 1000,
disableDefaultStyles: false,
hideTracksWhenNotNeeded: false,
renderThumbHorizontal: function (props) { return React.createElement("div", __assign({}, props)); },
renderThumbVertical: function (props) { return React.createElement("div", __assign({}, props)); },
renderTrackHorizontal: function (props) { return React.createElement("div", __assign({}, props)); },
renderTrackVertical: function (props) { return React.createElement("div", __assign({}, props)); },
renderView: function (props) { return React.createElement("div", __assign({}, props)); },
tagName: 'div',
thumbMinSize: 30,
universal: false,
};
return Scrollbars;
}(Component));
export { Scrollbars };