react-swipeable/lib/index.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var defaultProps = {
  preventDefaultTouchmoveEvent: false,
  delta: 10,
  rotationAngle: 0,
  trackMouse: false,
  trackTouch: true
};
var initialState = {
  xy: [0, 0],
  swiping: false,
  lastEventData: undefined,
  start: undefined
};
var LEFT = 'Left';
var RIGHT = 'Right';
var UP = 'Up';
var DOWN = 'Down';
var touchMove = 'touchmove';
var touchEnd = 'touchend';
var mouseMove = 'mousemove';
var mouseUp = 'mouseup';

function getDirection(absX, absY, deltaX, deltaY) {
  if (absX > absY) {
    if (deltaX > 0) {
      return LEFT;
    }

    return RIGHT;
  } else if (deltaY > 0) {
    return UP;
  }

  return DOWN;
}

function rotateXYByAngle(pos, angle) {
  if (angle === 0) return pos;
  var angleInRadians = Math.PI / 180 * angle;
  var x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
  var y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
  return [x, y];
}

var getTouchHandlerOption = function getTouchHandlerOption(props) {
  if (props.touchHandlerOption) return props.touchHandlerOption;
  return props.preventDefaultTouchmoveEvent ? {
    passive: false
  } : {
    passive: true
  };
};

function getHandlers(set, props) {
  var onStart = function onStart(event) {
    // if more than a single touch don't track, for now...
    if (event.touches && event.touches.length > 1) return;
    set(function () {
      var _ref = event.touches ? event.touches[0] : event,
          clientX = _ref.clientX,
          clientY = _ref.clientY;

      var xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
      return _extends({}, initialState, {
        xy: xy,
        start: event.timeStamp || 0
      });
    });
  };

  var onMove = function onMove(event) {
    set(function (state) {
      if (!state.xy[0] || !state.xy[1] || event.touches && event.touches.length > 1) {
        return state;
      }

      var _ref2 = event.touches ? event.touches[0] : event,
          clientX = _ref2.clientX,
          clientY = _ref2.clientY;

      var _rotateXYByAngle = rotateXYByAngle([clientX, clientY], props.rotationAngle),
          x = _rotateXYByAngle[0],
          y = _rotateXYByAngle[1];

      var deltaX = state.xy[0] - x;
      var deltaY = state.xy[1] - y;
      var absX = Math.abs(deltaX);
      var absY = Math.abs(deltaY);
      var time = (event.timeStamp || 0) - state.start;
      var velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1); // if swipe is under delta and we have not started to track a swipe: skip update

      if (absX < props.delta && absY < props.delta && !state.swiping) return state;
      var dir = getDirection(absX, absY, deltaX, deltaY);
      var eventData = {
        event: event,
        absX: absX,
        absY: absY,
        deltaX: deltaX,
        deltaY: deltaY,
        velocity: velocity,
        dir: dir
      };
      props.onSwiping && props.onSwiping(eventData); // track if a swipe is cancelable(handler for swiping or swiped(dir) exists)
      // so we can call preventDefault if needed

      var cancelablePageSwipe = false;

      if (props.onSwiping || props.onSwiped || props["onSwiped" + dir]) {
        cancelablePageSwipe = true;
      }

      if (cancelablePageSwipe && props.preventDefaultTouchmoveEvent && props.trackTouch) event.preventDefault();
      return _extends({}, state, {
        lastEventData: eventData,
        swiping: true
      });
    });
  };

  var onEnd = function onEnd(event) {
    set(function (state) {
      if (state.swiping) {
        var eventData = _extends({}, state.lastEventData, {
          event: event
        });

        props.onSwiped && props.onSwiped(eventData);
        props["onSwiped" + eventData.dir] && props["onSwiped" + eventData.dir](eventData);
      }

      return _extends({}, initialState);
    });
  };

  var onDown = function onDown(e) {
    if (props.trackMouse) {
      document.addEventListener(mouseMove, onMove);
      document.addEventListener(mouseUp, onUp);
    }

    if (props.trackTouch) {
      var touchHandlerOption = getTouchHandlerOption(props);
      document.addEventListener(touchMove, onMove, touchHandlerOption);
      document.addEventListener(touchEnd, onUp, touchHandlerOption);
    }

    onStart(e);
  };

  var stop = function stop() {
    if (props.trackMouse) {
      document.removeEventListener(mouseMove, onMove);
      document.removeEventListener(mouseUp, onUp);
    }

    if (props.trackTouch) {
      var touchHandlerOption = getTouchHandlerOption(props);
      document.removeEventListener(touchMove, onMove, touchHandlerOption);
      document.removeEventListener(touchEnd, onUp, touchHandlerOption);
    }
  };

  var onUp = function onUp(e) {
    stop();
    onEnd(e);
  };

  var output = {};

  if (props.trackMouse) {
    output.onMouseDown = onDown;
  }

  if (props.trackTouch) {
    output.onTouchStart = onDown;
  }

  return output;
}

function useSwipeable(props) {
  var transientState = React.useRef(initialState);

  var _React$useState = React.useState(function () {
    return function (currentProps) {
      return getHandlers(function (cb) {
        return transientState.current = cb(transientState.current);
      }, _extends({}, defaultProps, currentProps));
    };
  }),
      spread = _React$useState[0];

  return spread(props);
}
var Swipeable =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Swipeable, _React$PureComponent);

  function Swipeable(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this._state = initialState;

    _this._set = function (cb) {
      return _this._state = cb(_this._state);
    };

    return _this;
  }

  var _proto = Swipeable.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        className = _this$props.className,
        style = _this$props.style,
        _this$props$nodeName = _this$props.nodeName,
        nodeName = _this$props$nodeName === void 0 ? 'div' : _this$props$nodeName,
        innerRef = _this$props.innerRef,
        children = _this$props.children,
        rest = _objectWithoutPropertiesLoose(_this$props, ["className", "style", "nodeName", "innerRef", "children"]);

    var handlers = getHandlers(this._set, rest);
    return React.createElement(nodeName, _extends({}, handlers, {
      className: className,
      style: style,
      ref: innerRef
    }), children);
  };

  return Swipeable;
}(React.PureComponent);
Swipeable.propTypes = {
  onSwiped: PropTypes.func,
  onSwiping: PropTypes.func,
  onSwipedUp: PropTypes.func,
  onSwipedRight: PropTypes.func,
  onSwipedDown: PropTypes.func,
  onSwipedLeft: PropTypes.func,
  delta: PropTypes.number,
  preventDefaultTouchmoveEvent: PropTypes.bool,
  nodeName: PropTypes.string,
  trackMouse: PropTypes.bool,
  trackTouch: PropTypes.bool,
  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.any
  })]),
  rotationAngle: PropTypes.number
};
Swipeable.defaultProps = defaultProps;

exports.LEFT = LEFT;
exports.RIGHT = RIGHT;
exports.UP = UP;
exports.DOWN = DOWN;
exports.useSwipeable = useSwipeable;
exports.Swipeable = Swipeable;