@material-ui/core/es/Tabs/ScrollbarSize.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import EventListener from 'react-event-listener';
import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.

const styles = {
  width: 100,
  height: 100,
  position: 'absolute',
  top: -10000,
  overflow: 'scroll',
  msOverflowStyle: 'scrollbar'
};
/**
 * @ignore - internal component.
 * The component is originates from https://github.com/STORIS/react-scrollbar-size.
 * It has been moved into the core in order to minimize the bundle size.
 */

class ScrollbarSize extends React.Component {
  constructor(...args) {
    super(...args);
    this.handleResize = debounce(() => {
      const {
        onChange
      } = this.props;
      const prevHeight = this.scrollbarHeight;
      const prevWidth = this.scrollbarWidth;
      this.setMeasurements();

      if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
        onChange({
          scrollbarHeight: this.scrollbarHeight,
          scrollbarWidth: this.scrollbarWidth
        });
      }
    }, 166);

    this.setMeasurements = () => {
      const nodeRef = this.nodeRef;

      if (!nodeRef) {
        return;
      }

      this.scrollbarHeight = nodeRef.offsetHeight - nodeRef.clientHeight;
      this.scrollbarWidth = nodeRef.offsetWidth - nodeRef.clientWidth;
    };
  }

  // Corresponds to 10 frames at 60 Hz.
  componentDidMount() {
    this.setMeasurements();
    this.props.onLoad({
      scrollbarHeight: this.scrollbarHeight,
      scrollbarWidth: this.scrollbarWidth
    });
  }

  componentWillUnmount() {
    this.handleResize.clear();
  }

  render() {
    const {
      onChange
    } = this.props;
    return React.createElement("div", null, onChange ? React.createElement(EventListener, {
      target: "window",
      onResize: this.handleResize
    }) : null, React.createElement("div", {
      style: styles,
      ref: ref => {
        this.nodeRef = ref;
      }
    }));
  }

}

ScrollbarSize.propTypes = process.env.NODE_ENV !== "production" ? {
  onChange: PropTypes.func.isRequired,
  onLoad: PropTypes.func.isRequired
} : {};
export default ScrollbarSize;