@cbinsights/fds/lib/hooks/useScrollAttributes/index.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getScrollAttributes = exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var _rafSchd = _interopRequireDefault(require("raf-schd"));

var getScrollAttributes = function getScrollAttributes(scrollLeft, clientWidth, contentScrollWidth) {
  /* "end" of scroll is the total width minus the visible area */
  var scrollEnd = contentScrollWidth - clientWidth;
  return {
    scrollStart: !scrollLeft,
    scrollEnd: Boolean(scrollLeft === scrollEnd)
  };
};

exports.getScrollAttributes = getScrollAttributes;

var useScrollAttributes = function useScrollAttributes(ref) {
  var _useState = (0, _react.useState)(true),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      isAtScrollStart = _useState2[0],
      setIsAtScrollStart = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      isAtScrollEnd = _useState4[0],
      setIsAtScrollEnd = _useState4[1];

  var throttledStart = (0, _rafSchd.default)(setIsAtScrollStart);
  var throttledEnd = (0, _rafSchd.default)(setIsAtScrollEnd);

  var onScroll = function onScroll() {
    if (ref.current) {
      var _ref$current = ref.current,
          scrollLeft = _ref$current.scrollLeft,
          clientWidth = _ref$current.clientWidth,
          scrollWidth = _ref$current.scrollWidth;

      var _getScrollAttributes = getScrollAttributes(scrollLeft, clientWidth, scrollWidth),
          scrollStart = _getScrollAttributes.scrollStart,
          scrollEnd = _getScrollAttributes.scrollEnd;

      throttledStart(scrollStart);
      throttledEnd(scrollEnd);
    }
  };

  (0, _react.useEffect)(function () {
    var _ref$current2;

    (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.addEventListener('scroll', onScroll);
    return function () {
      var _ref$current3;

      (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.removeEventListener('scroll', onScroll);
    };
  }, [ref]);
  return [isAtScrollStart, isAtScrollEnd];
};

var _default = useScrollAttributes;
exports.default = _default;