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

SberDevices CanvasApp Templates.

"use strict";

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

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

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

var useTouchHandler = function useTouchHandler(ref, callback, params) {
  var _ref = params || {},
      _ref$axis = _ref.axis,
      axis = _ref$axis === void 0 ? 'x' : _ref$axis,
      _ref$callDistance = _ref.callDistance,
      callDistance = _ref$callDistance === void 0 ? 25 : _ref$callDistance;

  (0, _react.useLayoutEffect)(function () {
    if (!ref.current || (0, _deviceFamily.isSberBoxLike)()) {
      return;
    }

    var target = ref.current;
    var startPoint;

    var startHandler = function startHandler(event) {
      startPoint = event.changedTouches.item(event.changedTouches.length - 1);
    };

    var moveHandler = function moveHandler(event) {
      var _startPoint;

      // зона для нативного свайпа `назад`
      if (startPoint && ((_startPoint = startPoint) === null || _startPoint === void 0 ? void 0 : _startPoint.clientX) > 50) {
        event.preventDefault();
      }
    };

    var endHandler = function endHandler(event) {
      var endPoint = event.changedTouches.item(event.changedTouches.length - 1);

      if (!startPoint || !endPoint) {
        return;
      }

      var start = startPoint.clientX;
      var end = endPoint.clientX;
      var nodeSize = target.clientWidth;

      if (axis === 'y') {
        start = startPoint.clientY;
        end = endPoint.clientY;
        nodeSize = target.clientHeight;
      }

      var diffByAxis = end - start;
      var percenteageDist = diffByAxis / nodeSize * 100;

      if (Math.abs(percenteageDist) >= callDistance) {
        callback(Math.sign(percenteageDist) * -1);
      }
    };

    target.addEventListener('touchstart', startHandler);
    target.addEventListener('touchmove', moveHandler);
    target.addEventListener('touchend', endHandler);
    return function () {
      target.removeEventListener('touchstart', startHandler);
      target.removeEventListener('touchmove', moveHandler);
      target.removeEventListener('touchend', endHandler);
    };
  }, [axis, callDistance, callback, ref]);
};

exports.useTouchHandler = useTouchHandler;
//# sourceMappingURL=useTouchHander.js.map