import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { Scrollbars } from 'react-custom-scrollbars'; import { scrollDirections } from 'Helpers/Props'; import styles from './OverlayScroller.css'; const SCROLLBAR_SIZE = 10; class OverlayScroller extends Component { // // Lifecycle constructor(props, context) { super(props, context); this._scroller = null; this._isScrolling = false; } componentDidUpdate(prevProps) { const { scrollTop } = this.props; if ( !this._isScrolling && scrollTop != null && scrollTop !== prevProps.scrollTop ) { this._scroller.scrollTop(scrollTop); } } // // Control _setScrollRef = (ref) => { this._scroller = ref; if (ref) { this.props.registerScroller(ref.view); } } _renderThumb = (props) => { return (
); } _renderTrackHorizontal = ({ style, props }) => { const finalStyle = { ...style, right: 2, bottom: 2, left: 2, borderRadius: 3, height: SCROLLBAR_SIZE }; return (
); } _renderTrackVertical = ({ style, props }) => { const finalStyle = { ...style, right: 2, bottom: 2, top: 2, borderRadius: 3, width: SCROLLBAR_SIZE }; return (
); } _renderView = (props) => { return (
); } // // Listers onScrollStart = () => { this._isScrolling = true; } onScrollStop = () => { this._isScrolling = false; } onScroll = (event) => { const { scrollTop, scrollLeft } = event.currentTarget; this._isScrolling = true; const onScroll = this.props.onScroll; if (onScroll) { onScroll({ scrollTop, scrollLeft }); } } // // Render render() { const { autoHide, autoScroll, children } = this.props; return ( {children} ); } } OverlayScroller.propTypes = { className: PropTypes.string, trackClassName: PropTypes.string, scrollTop: PropTypes.number, scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL]).isRequired, autoHide: PropTypes.bool.isRequired, autoScroll: PropTypes.bool.isRequired, children: PropTypes.node, onScroll: PropTypes.func, registerScroller: PropTypes.func }; OverlayScroller.defaultProps = { className: styles.scroller, trackClassName: styles.thumb, scrollDirection: scrollDirections.VERTICAL, autoHide: false, autoScroll: true, registerScroller: () => {} }; export default OverlayScroller;