import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { Scrollbars } from 'react-custom-scrollbars-2'; 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 (