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

SberDevices CanvasApp Templates.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSpatNavStop = exports.useSpatNavBetweenTargets = exports.useSpatNav = exports.useActiveElementClick = void 0;

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

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

var useSpatNav = function useSpatNav(callback) {
  var prevContainer = _react["default"].useRef(document.documentElement);

  _react["default"].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);
    };
  });
};

exports.useSpatNav = useSpatNav;

var useActiveElementClick = function useActiveElementClick() {
  var conditionCb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
    return true;
  };

  _react["default"].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]);
};

exports.useActiveElementClick = useActiveElementClick;
var dirByAxis = {
  x: 'left,right',
  y: 'up,down'
};

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

var useSpatNavBetweenTargets = function useSpatNavBetweenTargets(axis, callback) {
  var prevTarget = _react["default"].useRef(document.documentElement);

  _react["default"].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);
    };
  });
};

exports.useSpatNavBetweenTargets = useSpatNavBetweenTargets;

var useSpatNavStop = function useSpatNavStop(axis) {
  _react["default"].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);
    };
  });
};

exports.useSpatNavStop = useSpatNavStop;
//# sourceMappingURL=useSpatNav.js.map