@6thquake/react-material/es/Scrollbar/Scrollbar.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Scrollbars } from 'react-custom-scrollbars';
import withStyles from '../styles/withStyles';

const styles = theme => {
  return {};
};

class Scrollbar extends React.Component {
  constructor(...args) {
    super(...args);
    this.scrollInfo = {
      scrollTop: 0,
      scrollHeight: 0,
      clientHeight: 0
    };
    this.direction = 'down';

    this.handleScrollStop = e => {
      const {
        onPullDownRefresh,
        onReachBottom,
        onScrollStop,
        offsetTop,
        offsetBottom
      } = this.props;
      const {
        scrollTop,
        scrollHeight,
        clientHeight
      } = this.scrollInfo;

      if (this.direction === 'up' && scrollTop - offsetTop <= 0) {
        onPullDownRefresh && onPullDownRefresh();
      }

      if (this.direction === 'down' && scrollTop >= scrollHeight - offsetBottom - clientHeight) {
        onReachBottom && onReachBottom();
      }

      onScrollStop && onScrollStop();
    };

    this.handleScroll = e => {
      const {
        onScroll
      } = this.props;
      const {
        scrollTop,
        clientHeight,
        scrollHeight
      } = e.target;

      if (scrollTop > this.scrollInfo.scrollTop) {
        this.direction = 'down';
      } else {
        this.direction = 'up';
      }

      this.scrollInfo = {
        scrollTop,
        clientHeight,
        scrollHeight
      };
      onScroll && onScroll(e);
    };
  }

  // up or down

  /**
   * scroll to the top value
   * @param {PropTypes.number} top
   */
  scrollTop(top = 0) {
    return this.scrollbar.scrollTop(top);
  }
  /**
   * scroll to the left value
   * @param {PropTypes.number} left
   */


  scrollLeft(left = 0) {
    return this.scrollbar.scrollLeft(left);
  }
  /**
   * scroll to top
   */


  scrollToTop() {
    return this.scrollbar.scrollToTop();
  }
  /**
   * scroll to bottom
   */


  scrollToBottom() {
    return this.scrollbar.scrollToBottom();
  }
  /**
   * scroll to left
   */


  scrollToLeft() {
    return this.scrollbar.scrollToLeft();
  }
  /**
   * scroll to right
   */


  scrollToRight() {
    return this.scrollbar.scrollToRight();
  }
  /**
   * get scrollLeft value
   */


  getScrollLeft() {
    return this.scrollbar.getScrollLeft();
  }
  /**
   * get scrollTop value
   */


  getScrollTop() {
    return this.scrollbar.getScrollTop();
  }
  /**
   * get scrollWidth value
   */


  getScrollWidth() {
    return this.scrollbar.getScrollWidth();
  }
  /**
   * get scrollHeight value
   */


  getScrollHeight() {
    return this.scrollbar.getScrollHeight();
  }
  /**
   * get view client width
   */


  getClientWidth() {
    return this.scrollbar.getClientWidth();
  }
  /**
   * get view client height
   */


  getClientHeight() {
    return this.scrollbar.getClientHeight();
  }
  /**
   * get an object with values about the current position.
   */


  getValues() {
    return this.scrollbar.getValues();
  }

  render() {
    const _this$props = this.props,
          {
      children,
      offsetTop = 0,
      offsetBottom = 0
    } = _this$props,
          other = _objectWithoutPropertiesLoose(_this$props, ["children", "offsetTop", "offsetBottom", "onPullDownRefresh", "onReachBottom", "onScrollStop", "onScroll"]);

    return React.createElement(Scrollbars, _extends({}, other, {
      ref: node => this.scrollbar = node,
      onScrollStop: this.handleScrollStop,
      onScroll: this.handleScroll
    }), children);
  }

}

process.env.NODE_ENV !== "production" ? Scrollbar.propTypes = {
  /**
   * This will activate auto-height
   */
  autoHeight: PropTypes.bool,

  /**
   * This will activate auto-height
   */
  autoHeightMax: PropTypes.number,

  /**
   * This will activate auto-height
   */
  autoHeightMin: PropTypes.number,

  /**
   * This will activate auto hide
   */
  autoHide: PropTypes.bool,

  /**
   * Duration for hide animation in ms.
   */
  autoHideDuration: PropTypes.number,

  /**
   * Hide delay in ms
   */
  autoHideTimeout: PropTypes.number,

  /**
   * offsetBottom
   */
  offsetBottom: PropTypes.func,

  /**
   * offsetTop
   */
  offsetTop: PropTypes.func,

  /**
   * Callback fired after scrolling to top or left
   */
  onPullDownRefresh: PropTypes.func,

  /**
   * Callback fired after scrolling to bottom or right
   */
  onReachBottom: PropTypes.func,

  /**
   * Will be called with the native scroll event
   */
  onScroll: PropTypes.func,

  /**
   * Runs inside the animation frame. Passes some handy values about the current scroll position
   */
  onScrollFrame: PropTypes.func,

  /**
   * Called when scrolling starts
   */
  onScrollStart: PropTypes.func,

  /**
   * Called when scrolling stops
   */
  onScrollStop: PropTypes.func,

  /**
   * Called when ever the component is updated. Runs inside the animation frame
   */
  onUpdate: PropTypes.func,

  /**
   * The vertical scrollbars track
   */
  renderThumbHorizontal: PropTypes.func,

  /**
   * The horizontal thumb
   */
  renderThumbVertical: PropTypes.func,

  /**
   * The element your content is rendered in
   */
  renderTrackHorizontal: PropTypes.func,

  /**
   * The horizontal scrollbars track
   */
  renderTrackVertical: PropTypes.func,

  /**
   * The vertical thumb
   */
  renderView: PropTypes.func,

  /**
   * If your app runs on both client and server, activate the universal mode. This will ensure that the initial markup on client and server are the same
   */
  universal: PropTypes.bool
} : void 0;
Scrollbar.defaultProps = {
  offsetTop: 0,
  offsetBottom: 0
};
export default (Component => {
  return React.forwardRef((props, ref) => {
    return React.createElement(Component, _extends({}, props, {
      innerRef: ref
    }));
  });
})(withStyles(styles)(Scrollbar));