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

SberDevices CanvasApp Templates.

import React from 'react';
import { scroll } from '../utils';

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
  };
};

export var useScrollableContainer = function useScrollableContainer() {
  var scrollContainerRef = React.useRef(null);
  var containerRect = React.useRef(null);
  var handleFocus = React.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
      });
      scroll({
        element: scrollContainerRef.current,
        startPosition: scrollContainerRef.current.scrollTop,
        offset: position.top - scrollContainerRef.current.scrollTop,
        duration: 300,
        axis: 'y'
      });
    }
  }, []);
  React.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;
};
//# sourceMappingURL=useScrollableContainer.js.map