weex-nuke/lib/Swipe/index.js

基于 Rax 、Weex 的高性能组件体系 ~~

/* @jsx createElement */
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = require('rax');

var _nukeView = require('../View/index.js');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _universalPanresponder = require('universal-panresponder');

var _universalPanresponder2 = _interopRequireDefault(_universalPanresponder);

var _proptypes = require('./proptypes.js');

var _proptypes2 = _interopRequireDefault(_proptypes);

var _isValidSwipe = require('./isValidSwipe.js');

var _isValidSwipe2 = _interopRequireDefault(_isValidSwipe);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var directions = {
  SWIPE_UP: 'SWIPE_UP',
  SWIPE_DOWN: 'SWIPE_DOWN',
  SWIPE_LEFT: 'SWIPE_LEFT',
  SWIPE_RIGHT: 'SWIPE_RIGHT'
};

var propTypes = {
  onSwipeBegin: _proptypes2.default.func,
  onSwipe: _proptypes2.default.func,
  onSwipeEnd: _proptypes2.default.func,
  swipeDecoratorStyle: _proptypes2.default.object
};

var SwipeEvent = function (_Component) {
  _inherits(SwipeEvent, _Component);

  function SwipeEvent(props) {
    _classCallCheck(this, SwipeEvent);

    var _this = _possibleConstructorReturn(this, (SwipeEvent.__proto__ || Object.getPrototypeOf(SwipeEvent)).call(this, props));

    _this.state = {
      swipe: {
        direction: null,
        distance: 0,
        velocity: 0
      }
    };

    // 监听swipe是否发生
    _this.swipeDetected = false;
    // 当前手势速度
    _this.velocityProp = null;
    // 当前手势距离
    _this.distanceProp = null;
    // 当前手势的方向
    _this.swipeDirection = null;
    return _this;
  }

  _createClass(SwipeEvent, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      var that = this;
      this.panResponder = _universalPanresponder2.default.create({

        onStartShouldSetPanResponder: function onStartShouldSetPanResponder(evt) {
          return true;
        },
        onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder(evt) {
          return true;
        },
        onPanResponderMove: function onPanResponderMove(evt, gestureState) {
          var dx = gestureState.dx,
              dy = gestureState.dy,
              vx = gestureState.vx,
              vy = gestureState.vy;
          var _props = _this2.props,
              onSwipeBegin = _props.onSwipeBegin,
              onSwipe = _props.onSwipe,
              onSwipeEnd = _props.onSwipeEnd;

          // 没有swipe的时候return掉

          if (!_this2.props.continuous && _this2.swipeDetected) {
            return;
          }

          var initialDetection = false;
          var validHorizontal = false;
          var validVertical = false;

          if (!_this2.swipeDetected) {
            initialDetection = true;
            // 判断手势是否能够算得上是水平swipe
            validHorizontal = that.props.horizontal ? (0, _isValidSwipe2.default)(vx, dy, that.props.initialVelocityThreshold, that.props.verticalThreshold) : '';

            // 判断手势是否能够算得上是垂直swipe
            validVertical = that.props.vertical ? (0, _isValidSwipe2.default)(vy, dx, that.props.initialVelocityThreshold, that.props.horizontalThreshold) : '';

            if (validHorizontal) {
              evt.preventDefault && evt.preventDefault();
              _this2.velocityProp = 'vx';
              _this2.distanceProp = 'dx';

              // 左滑
              if ((_this2.props.horizontal || _this2.props.left) && dx < 0) {
                _this2.swipeDirection = directions.SWIPE_LEFT;
                // 右滑
              } else if ((_this2.props.horizontal || _this2.props.right) && dx > 0) {
                _this2.swipeDirection = directions.SWIPE_RIGHT;
              }
            } else if (validVertical) {
              _this2.velocityProp = 'vy';
              _this2.distanceProp = 'dy';

              // 上滑
              if ((_this2.props.vertical || _this2.props.up) && dy < 0) {
                _this2.swipeDirection = directions.SWIPE_UP;
                // 下滑
              } else if ((_this2.props.vertical || _this2.props.down) && dy > 0) {
                _this2.swipeDirection = directions.SWIPE_DOWN;
              }
            }

            if (_this2.swipeDirection) {
              _this2.swipeDetected = true;
            }
          }

          if (_this2.swipeDetected) {
            // gestureState.dx || gestureState.dy 横向和竖向距离
            var distance = gestureState[_this2.distanceProp];
            // gestureState.vx || gestureState.vx 横向和竖向的速度
            var velocity = gestureState[_this2.velocityProp];

            var swipeState = {
              direction: _this2.swipeDirection,
              distance: distance,
              velocity: velocity
            };

            if (initialDetection) {
              onSwipeBegin && onSwipeBegin(swipeState);
            } else {
              onSwipe && onSwipe(swipeState);
            }

            if (_this2.props.setGestureState) {
              _this2.setState({
                swipe: swipeState
              });
            }
          }
        },
        onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
          return true;
        },
        onPanResponderTerminate: this.handleTerminationAndRelease.bind(this),
        onPanResponderRelease: this.handleTerminationAndRelease.bind(this)
      });
    }
    // 释放当前手势

  }, {
    key: 'handleTerminationAndRelease',
    value: function handleTerminationAndRelease() {
      var that = this;

      if (this.swipeDetected) {
        var onSwipeEnd = this.props.onSwipeEnd;

        onSwipeEnd && onSwipeEnd({
          direction: this.swipeDirection,
          distance: that.state.swipe.distance,
          velocity: that.state.swipe.velocity
        });
      }

      this.swipeDetected = false;
      this.velocityProp = null;
      this.distanceProp = null;
      this.swipeDirection = null;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          onSwipeBegin = _props2.onSwipeBegin,
          onSwipe = _props2.onSwipe,
          onSwipeEnd = _props2.onSwipeEnd,
          props = _objectWithoutProperties(_props2, ['onSwipeBegin', 'onSwipe', 'onSwipeEnd']);

      var style = {
        alignSelf: 'flex-start'
      };

      var state = this.props.setGestureState ? this.state : null;

      return (0, _rax.createElement)(
        _nukeView2.default,
        _extends({}, this.panResponder.panHandlers, { style: _extends({ style: style }, props.handlerStyle) }),
        (0, _rax.createElement)(
          _nukeView2.default,
          _extends({}, props, state),
          this.props.children
        )
      );
    }
  }]);

  return SwipeEvent;
}(_rax.Component);

exports.default = SwipeEvent;


SwipeEvent.defaultProps = {
  horizontal: true,
  vertical: true,
  left: false,
  right: false,
  up: false,
  down: false,
  continuous: true,
  initialVelocityThreshold: 0.2,
  verticalThreshold: 1,
  horizontalThreshold: 5,
  setGestureState: true,
  handlerStyle: {}
};
SwipeEvent.propTypes = propTypes;
module.exports = exports['default'];