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

SberDevices CanvasApp Templates.

import React from 'react';
export var useSpatNav = function useSpatNav(callback) {
  var prevContainer = React.useRef(document.documentElement);
  React.useLayoutEffect(function () {
    var spatNavCb = function spatNavCb(event) {
      event.stopPropagation();
      var target = event.target;
      var container = target === null || target === void 0 ? void 0 : target.getSpatialNavigationContainer();

      if (container && container !== prevContainer.current) {
        callback(container);
        prevContainer.current = container;
      }

      if (container === document.body) {
        callback(target);
        return;
      }

      return false;
    };

    document.body.addEventListener('navbeforefocus', spatNavCb);
    return function () {
      document.body.removeEventListener('navbeforefocus', spatNavCb);
    };
  });
};
export var useActiveElementClick = function useActiveElementClick() {
  var conditionCb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
    return true;
  };
  React.useLayoutEffect(function () {
    var keyUpHander = function keyUpHander(event) {
      if (event.key === 'Enter') {
        if (document.activeElement && document.activeElement !== document.documentElement && conditionCb(document.activeElement)) {
          document.activeElement.click();
        }
      }

      return false;
    };

    document.addEventListener('keyup', keyUpHander);
    return function () {
      document.removeEventListener('keyup', keyUpHander);
    };
  }, [conditionCb]);
};
var dirByAxis = {
  x: 'left,right',
  y: 'up,down'
};

var isSpatNavEvent = function isSpatNavEvent(event) {
  return event instanceof Event && 'detail' in event;
};

export var useSpatNavBetweenTargets = function useSpatNavBetweenTargets(axis, callback) {
  var prevTarget = React.useRef(document.documentElement);
  React.useLayoutEffect(function () {
    var spatNavCb = function spatNavCb(event) {
      if (!isSpatNavEvent(event)) {
        return;
      }

      var detail = event.detail;
      var target = event.target;

      if (!target) {
        return;
      }

      if (dirByAxis[axis].includes(detail.dir)) {
        if (axis === 'x' && prevTarget.current.offsetLeft !== target.offsetLeft || axis === 'y' && prevTarget.current.offsetTop !== target.offsetTop) {
          callback(target);
        }
      }

      prevTarget.current = target;
      return false;
    };

    document.body.addEventListener('navbeforefocus', spatNavCb);
    return function () {
      document.body.removeEventListener('navbeforefocus', spatNavCb);
    };
  });
};
export var useSpatNavStop = function useSpatNavStop(axis) {
  React.useLayoutEffect(function () {
    var callback = function callback(event) {
      if (!isSpatNavEvent(event)) {
        return;
      }

      var detail = event.detail;

      if (dirByAxis[axis].includes(detail.dir)) {
        event.preventDefault();
      }
    };

    document.body.addEventListener('navbeforefocus', callback);
    return function () {
      document.body.removeEventListener('navbeforefocus', callback);
    };
  });
};
//# sourceMappingURL=useSpatNav.js.map