@sberdevices/plasma-temple/dist/hooks/useScrollableContainer.js

SberDevices CanvasApp Templates.

"use strict";

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

var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));

var _utils = /*#__PURE__*/require("../utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var getPositionY = function getPositionY(_ref) {
  var element = _ref.element,
      container = _ref.container,
      containerRect = _ref.containerRect,
      diffMultiplier = _ref.diffMultiplier;
  var elementRect = element.getBoundingClientRect();
  var currentScrollTop = container.scrollTop;
  var maxScrollTop = container.scrollHeight - container.offsetHeight;
  var isCenter = elementRect.height * 3 > containerRect.height;
  var defaultDiff = isCenter ? (containerRect.height - elementRect.height) / 2 : elementRect.height * diffMultiplier;

  if (elementRect.top - defaultDiff - containerRect.top < elementRect.height) {
    if (elementRect.top < 0) {
      var _diff = defaultDiff + (Math.abs(elementRect.top) + containerRect.top);

      return {
        top: Math.max(currentScrollTop - _diff, 0)
      };
    }

    var diff = defaultDiff + (containerRect.top - elementRect.top);
    return {
      top: Math.max(currentScrollTop - diff, 0)
    };
  }

  if (containerRect.bottom - elementRect.bottom - defaultDiff < 0) {
    var _diff2 = defaultDiff + (elementRect.bottom - containerRect.bottom);

    return {
      top: Math.min(currentScrollTop + _diff2, maxScrollTop)
    };
  }

  return {
    top: currentScrollTop
  };
};

var useScrollableContainer = function useScrollableContainer() {
  var scrollContainerRef = _react["default"].useRef(null);

  var containerRect = _react["default"].useRef(null);

  var handleFocus = _react["default"].useCallback(function (event) {
    if (event.target && scrollContainerRef.current) {
      if (!containerRect.current) {
        containerRect.current = scrollContainerRef.current.getBoundingClientRect();
      }

      var target = event.target;
      var position = getPositionY({
        element: target,
        container: scrollContainerRef.current,
        containerRect: containerRect.current,
        diffMultiplier: 1.5
      });
      (0, _utils.scroll)({
        element: scrollContainerRef.current,
        startPosition: scrollContainerRef.current.scrollTop,
        offset: position.top - scrollContainerRef.current.scrollTop,
        duration: 300,
        axis: 'y'
      });
    }
  }, []);

  _react["default"].useEffect(function () {
    if (!scrollContainerRef.current) {
      return;
    }

    if (!containerRect.current) {
      containerRect.current = scrollContainerRef.current.getBoundingClientRect();
    } // eslint-disable-next-line no-underscore-dangle


    if (window && window.__spatialNavigation__) {
      var _scrollContainerRef$c;

      (_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.addEventListener('navbeforefocus', handleFocus, true);
    } else {
      scrollContainerRef.current.addEventListener('focus', handleFocus, true);
    }

    return function () {
      var _scrollContainerRef$c2, _scrollContainerRef$c3;

      (_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.removeEventListener('focus', handleFocus);
      (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.removeEventListener('navbeforefocus', handleFocus);
    };
  }, []);

  return scrollContainerRef;
};

exports.useScrollableContainer = useScrollableContainer;
//# sourceMappingURL=useScrollableContainer.js.map