react-nano-scrollbar/dist/react-nano-scrollbar.cjs.development.js

<h1 align="center"> react-nano-scrollbar </h1>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);

var ScrollArea = function ScrollArea(_ref) {
  var className = _ref.className,
      children = _ref.children,
      hideScrollbarX = _ref.hideScrollbarX,
      hideScrollbarY = _ref.hideScrollbarY,
      _ref$autohide = _ref.autohide,
      autohide = _ref$autohide === void 0 ? true : _ref$autohide,
      _ref$horizontal = _ref.horizontal,
      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal;
  var areaRef = React.useRef(null);
  var contentRef = React.useRef(null);
  var barXRef = React.useRef(null);
  var barTrackXRef = React.useRef(null);
  var barYRef = React.useRef(null);
  var barTrackYRef = React.useRef(null);
  React.useEffect(function () {
    var area = areaRef.current;
    var content = contentRef.current;
    var barX = barXRef.current;
    var barTrackX = barTrackXRef.current;
    var barY = barYRef.current;
    var barTrackY = barTrackYRef.current;

    if (!area || !content || !barX || !barTrackX || !barY || !barTrackY) {
      return;
    }

    var timeout = undefined;

    var recalculateBarX = function recalculateBarX() {
      var areaRect = area.getBoundingClientRect();
      var width = Math.min(1.0, areaRect.width / content.scrollWidth);
      barX.style.width = width * 100 + '%';
      barX.style.left = content.scrollLeft / content.scrollWidth * 100 + '%';
      barTrackX.style.display = hideScrollbarX || width >= 1 ? 'none' : 'block';
    };

    var recalculateBarY = function recalculateBarY() {
      var areaRect = area.getBoundingClientRect();
      var height = Math.min(1.0, areaRect.height / content.scrollHeight);
      barY.style.height = height * 100 + '%';
      barY.style.top = content.scrollTop / content.scrollHeight * 100 + '%';
      barTrackY.style.display = hideScrollbarY || height >= 1 ? 'none' : 'block';
    };

    var onScroll = function onScroll() {
      area.classList.add('react-nano-scrollbar-moving');
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        area.classList.remove('react-nano-scrollbar-moving');
      }, 1000);
      recalculateBarX();
      recalculateBarY();
    };

    var dragging = undefined;
    var initX = 0;
    var initY = 0;
    var initScrollTop = 0;
    var initScrollLeft = 0;

    var onStartDrag = function onStartDrag(bar, x, y) {
      dragging = bar;
      initX = x;
      initY = y;
      initScrollTop = content.scrollTop;
      initScrollLeft = content.scrollLeft;

      if (bar === 'x') {
        barTrackX.classList.add('react-nano-scrollbar-active');
      } else {
        barTrackY.classList.add('react-nano-scrollbar-active');
      }
    };

    var onMoveDrag = function onMoveDrag(x, y) {
      if (!dragging) return;
      var areaRect = area.getBoundingClientRect();

      if (dragging === 'x') {
        var diff = x - initX;
        content.scrollLeft = initScrollLeft + diff / areaRect.width * content.scrollWidth;
      } else {
        var _diff = y - initY;

        content.scrollTop = initScrollTop + _diff / areaRect.height * content.scrollHeight;
      }
    };

    var onEndDrag = function onEndDrag() {
      dragging = undefined;
      barTrackX.classList.remove('react-nano-scrollbar-active');
      barTrackY.classList.remove('react-nano-scrollbar-active');
    };

    var handleMouseMove = function handleMouseMove(e) {
      if (!dragging) return;
      e.preventDefault();
      e.stopPropagation();
      onMoveDrag(e.clientX, e.clientY);
    };

    var handleTouchMove = function handleTouchMove(e) {
      if (!dragging) return;
      e.preventDefault();
      e.stopPropagation();
      var touch = e.touches[0];

      if (!touch) {
        return;
      }

      onMoveDrag(touch.clientX, touch.clientY);
    };

    var onMouseDownX = function onMouseDownX(e) {
      e.preventDefault();
      e.stopPropagation();
      onStartDrag('x', e.clientX, e.clientY);
    };

    var onTouchStartX = function onTouchStartX(e) {
      e.preventDefault();
      e.stopPropagation();
      var touch = e.touches[0];

      if (!touch) {
        return;
      }

      onStartDrag('x', touch.clientX, touch.clientY);
    };

    var onMouseDownY = function onMouseDownY(e) {
      e.preventDefault();
      e.stopPropagation();
      onStartDrag('y', e.clientX, e.clientY);
    };

    var onTouchStartY = function onTouchStartY(e) {
      e.preventDefault();
      e.stopPropagation();
      var touch = e.touches[0];

      if (!touch) {
        return;
      }

      onStartDrag('y', touch.clientX, touch.clientY);
    };

    var onWheel = function onWheel(e) {
      if (horizontal) {
        e.preventDefault();

        if (!e.shiftKey) {
          content.scrollBy({
            behavior: 'auto',
            left: e.deltaY
          });
        } else {
          content.scrollBy({
            behavior: 'auto',
            top: e.deltaY
          });
        }
      }
    };

    onScroll();
    content.addEventListener('scroll', onScroll);
    content.addEventListener('wheel', onWheel);
    barX.addEventListener('mousedown', onMouseDownX);
    barX.addEventListener('touchstart', onTouchStartX);
    barY.addEventListener('mousedown', onMouseDownY);
    barY.addEventListener('touchstart', onTouchStartY);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', onEndDrag);
    document.addEventListener('touchmove', handleTouchMove);
    document.addEventListener('touchend', onEndDrag);
    document.addEventListener('touchcancel', onEndDrag);
    return function () {
      content.removeEventListener('scroll', onScroll);
      barX.removeEventListener('mousedown', onMouseDownX);
      barX.removeEventListener('touchstart', onTouchStartX);
      barY.addEventListener('mousedown', onMouseDownY);
      barY.addEventListener('touchstart', onTouchStartY);
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', onEndDrag);
      document.removeEventListener('touchmove', handleTouchMove);
      document.removeEventListener('touchend', onEndDrag);
      document.removeEventListener('touchcancel', onEndDrag);
    };
  });
  return React__default.createElement("div", {
    className: 'react-nano-scrollbar-wrapper ' + (autohide ? 'react-nano-scrollbar-autohide ' : '') + (className ? className : ''),
    ref: areaRef
  }, React__default.createElement("div", {
    className: "react-nano-scrollbar-content",
    ref: contentRef
  }, children), React__default.createElement("div", {
    className: "react-nano-scrollbar-track-x",
    ref: barTrackXRef
  }, React__default.createElement("div", {
    className: "react-nano-scrollbar-x",
    ref: barXRef
  })), React__default.createElement("div", {
    className: "react-nano-scrollbar-track-y",
    ref: barTrackYRef
  }, React__default.createElement("div", {
    className: "react-nano-scrollbar-y",
    ref: barYRef
  })));
};

exports.ScrollArea = ScrollArea;
//# sourceMappingURL=react-nano-scrollbar.cjs.development.js.map