diff options
Diffstat (limited to 'app/components/CustomScrollbars.js')
| -rw-r--r-- | app/components/CustomScrollbars.js | 87 |
1 files changed, 48 insertions, 39 deletions
diff --git a/app/components/CustomScrollbars.js b/app/components/CustomScrollbars.js index cb1014fd0a..6539a91185 100644 --- a/app/components/CustomScrollbars.js +++ b/app/components/CustomScrollbars.js @@ -39,7 +39,7 @@ export default class CustomScrollbars extends React.Component<Props, State> { scrollTo(x: number, y: number) { const scrollable = this._scrollableElement; - if(scrollable) { + if (scrollable) { scrollable.scrollLeft = x; scrollable.scrollTop = y; } @@ -47,10 +47,12 @@ export default class CustomScrollbars extends React.Component<Props, State> { scrollToElement(child: HTMLElement, scrollPosition: ScrollPosition) { const scrollable = this._scrollableElement; - if(scrollable) { + if (scrollable) { // throw if child is not a descendant of scroll view - if(!scrollable.contains(child)) { - throw new Error('Cannot scroll to an element which is not a descendant of CustomScrollbars.'); + if (!scrollable.contains(child)) { + throw new Error( + 'Cannot scroll to an element which is not a descendant of CustomScrollbars.', + ); } const scrollTop = this._computeScrollTop(scrollable, child, scrollPosition); @@ -62,11 +64,11 @@ export default class CustomScrollbars extends React.Component<Props, State> { componentDidMount() { this._updateScrollbarsHelper({ position: true, - size: true + size: true, }); // show scroll indicators briefly when mounted - if(this.props.autoHide) { + if (this.props.autoHide) { this._startAutoHide(); } } @@ -78,7 +80,7 @@ export default class CustomScrollbars extends React.Component<Props, State> { componentDidUpdate() { this._updateScrollbarsHelper({ position: true, - size: true + size: true, }); } @@ -87,15 +89,18 @@ export default class CustomScrollbars extends React.Component<Props, State> { const showScrollbars = this.state.canScroll && this.state.showScrollIndicators; const thumbAnimationClass = showScrollbars ? ' custom-scrollbars__thumb--visible' : ''; return ( - <div {...otherProps } className="custom-scrollbars"> - <div className={ `custom-scrollbars__thumb ${thumbAnimationClass}` } + <div {...otherProps} className="custom-scrollbars"> + <div + className={`custom-scrollbars__thumb ${thumbAnimationClass}`} style={{ position: 'absolute', top: 0, right: 0 }} - ref={ this._onThumbRef }></div> - <div className="custom-scrollbars__scrollable" + ref={this._onThumbRef} + /> + <div + className="custom-scrollbars__scrollable" style={{ overflow: 'auto' }} - onScroll={ this._onScroll } - ref={ this._onScrollableRef }> - { children } + onScroll={this._onScroll} + ref={this._onScrollableRef}> + {children} </div> </div> ); @@ -103,22 +108,22 @@ export default class CustomScrollbars extends React.Component<Props, State> { _onScrollableRef = (ref) => { this._scrollableElement = ref; - } + }; _onThumbRef = (ref) => { this._thumbElement = ref; - } + }; _onScroll = () => { this._updateScrollbarsHelper({ position: true }); - if(this.props.autoHide) { + if (this.props.autoHide) { this._startAutoHide(); } - } + }; _startAutoHide() { - if(this._autoHideTimer) { + if (this._autoHideTimer) { clearTimeout(this._autoHideTimer); } @@ -128,7 +133,7 @@ export default class CustomScrollbars extends React.Component<Props, State> { }); }, AUTOHIDE_TIMEOUT); - if(!this.state.showScrollIndicators) { + if (!this.state.showScrollIndicators) { this.setState({ showScrollIndicators: true, }); @@ -136,25 +141,25 @@ export default class CustomScrollbars extends React.Component<Props, State> { } _stopAutoHide() { - if(this._autoHideTimer) { + if (this._autoHideTimer) { clearTimeout(this._autoHideTimer); this._autoHideTimer = null; } } _computeScrollTop(scrollable: HTMLElement, child: HTMLElement, scrollPosition: ScrollPosition) { - switch(scrollPosition) { - case 'top': - return child.offsetTop; + switch (scrollPosition) { + case 'top': + return child.offsetTop; - case 'bottom': - return child.offsetTop - (scrollable.offsetHeight - child.clientHeight); + case 'bottom': + return child.offsetTop - (scrollable.offsetHeight - child.clientHeight); - case 'middle': - return child.offsetTop - ((scrollable.offsetHeight - child.clientHeight) * 0.5); + case 'middle': + return child.offsetTop - (scrollable.offsetHeight - child.clientHeight) * 0.5; - default: - throw new Error(`Unknown enum type for ScrollPosition: ${ scrollPosition }`); + default: + throw new Error(`Unknown enum type for ScrollPosition: ${scrollPosition}`); } } @@ -178,11 +183,11 @@ export default class CustomScrollbars extends React.Component<Props, State> { // calculate the thumb boundary to make sure that the visual appearance of // a thumb at lowest point matches the bottom of scrollable view - const thumbBoundary = visibleHeight - thumbHeight - (this.props.thumbInset.y * 2); + const thumbBoundary = visibleHeight - thumbHeight - this.props.thumbInset.y * 2; // calculate thumb position based on scroll progress and thumb boundary // adding vertical inset to adjust the thumb's appearance - const thumbPosition = (thumbBoundary * scrollPosition) + this.props.thumbInset.y; + const thumbPosition = thumbBoundary * scrollPosition + this.props.thumbInset.y; return { x: -this.props.thumbInset.x, @@ -203,29 +208,33 @@ export default class CustomScrollbars extends React.Component<Props, State> { _updateScrollbarsHelper(updateFlags: $Shape<ScrollbarUpdateContext>) { const scrollable = this._scrollableElement; const thumb = this._thumbElement; - if(scrollable && thumb) { + if (scrollable && thumb) { this._updateScrollbars(scrollable, thumb, updateFlags); } } - _updateScrollbars(scrollable: HTMLElement, thumb: HTMLElement, context: $Shape<ScrollbarUpdateContext>) { - if(context.size) { + _updateScrollbars( + scrollable: HTMLElement, + thumb: HTMLElement, + context: $Shape<ScrollbarUpdateContext>, + ) { + if (context.size) { const thumbHeight = this._computeThumbHeight(scrollable); thumb.style.setProperty('height', thumbHeight + 'px'); // hide thumb when there is nothing to scroll - const canScroll = (thumbHeight < scrollable.offsetHeight); - if(this.state.canScroll !== canScroll) { + const canScroll = thumbHeight < scrollable.offsetHeight; + if (this.state.canScroll !== canScroll) { this.setState({ canScroll }); // flash the scroll indicators when the view becomes scrollable - if(this.props.autoHide && canScroll) { + if (this.props.autoHide && canScroll) { this._startAutoHide(); } } } - if(context.position) { + if (context.position) { const { x, y } = this._computeThumbPosition(scrollable, thumb); thumb.style.setProperty('transform', `translate(${x}px, ${y}px)`); } |