tuya-panel-kit/lib/components/progress/gesture.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _jsxFileName = 'src/components/progress/gesture.js';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator'](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if ((typeof Symbol === 'function' ? Symbol.iterator : '@@iterator') in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

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 _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

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 eTargetId = 0;
var isRtl = _reactNative.I18nManager.isRTL;

var Gesture = function (_PureComponent) {
  _inherits(Gesture, _PureComponent);

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

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

    _this.eTargetId = eTargetId++;
    _this.notHandleReceivePropsWhenTouching = false;

    var fixedEvent = {};

    var fixEventHandle = function fixEventHandle(e, gesture) {
      return [{
        nativeEvent: _extends({}, e.nativeEvent, fixedEvent),
        originEvent: e
      }, _this.fixRtl(fixedEvent, gesture)];
    };

    var responder = _reactNative.PanResponder.create({
      onStartShouldSetPanResponder: function onStartShouldSetPanResponder(e, gesture) {
        if (_this.props.disabled) return false;
        return _this.onStartShouldSetResponder.call(_this, e, gesture);
      },
      onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder(e, gesture) {
        if (_this.props.disabled) return false;
        return _this.onMoveShouldSetResponder.call(_this, e, gesture);
      },
      onPanResponderGrant: function onPanResponderGrant(e, gesture) {
        var _this$onGrant;

        var nativeEvent = e.nativeEvent;
        var locationX = nativeEvent.locationX,
            locationY = nativeEvent.locationY,
            pageX = nativeEvent.pageX,
            pageY = nativeEvent.pageY;


        fixedEvent = { locationX: locationX, locationY: locationY, pageX: pageX, pageY: pageY };
        var event = fixEventHandle(e, gesture);
        (_this$onGrant = _this.onGrant).call.apply(_this$onGrant, [_this].concat(_toConsumableArray(event)));
      },
      onPanResponderMove: function onPanResponderMove(e, gesture) {
        var event = fixEventHandle(e, gesture);
        if (_this._initialMoveDirection === undefined) {
          var _event = _slicedToArray(event, 2),
              _e = _event[0],
              _gesture = _event[1];

          if (Math.abs(gesture.dx) < 5 && Math.abs(gesture.dy) < 5) return;
          var horizontal = Math.abs(gesture.dx) >= Math.abs(gesture.dy);
          var toRight = horizontal && _e.nativeEvent.locationX < _gesture.locationX;
          var toLeft = horizontal && !toRight;
          var toBottom = !horizontal && _e.nativeEvent.locationY < _gesture.locationY;
          var toTop = !horizontal && !toBottom;

          _this._initialMoveDirection = {
            horizontal: horizontal,
            toTop: toTop,
            toRight: toRight,
            toBottom: toBottom,
            toLeft: toLeft
          };
        } else {
          var _this$onMove;

          _this.notHandleReceivePropsWhenTouching = true;
          (_this$onMove = _this.onMove).call.apply(_this$onMove, [_this].concat(_toConsumableArray(event)));
        }
      },

      onPanResponderRelease: function onPanResponderRelease(e, gesture) {
        var _this$onRelease;

        _this.notHandleReceivePropsWhenTouching = false;
        var event = fixEventHandle(e, gesture);
        (_this$onRelease = _this.onRelease).call.apply(_this$onRelease, [_this].concat(_toConsumableArray(event)));
        _this._initialMoveDirection = undefined;
      },

      onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
        return false;
      },

      onPanResponderTerminate: function onPanResponderTerminate(e, gesture) {
        var _this$onRelease2;

        _this.notHandleReceivePropsWhenTouching = false;
        var event = fixEventHandle(e, gesture);
        (_this$onRelease2 = _this.onRelease).call.apply(_this$onRelease2, [_this].concat(_toConsumableArray(event)));
        _this._initialMoveDirection = undefined;
      },

      onStartShouldSetResponderCapture: function onStartShouldSetResponderCapture() {
        return false;
      },
      onMoveShouldSetPanResponderCapture: function onMoveShouldSetPanResponderCapture() {
        return false;
      }
    });

    _this.getResponder = function () {
      return _extends({}, responder.panHandlers, {
        onLayout: _this.onLayout,
        pointerEvents: _this.props.pointerEvents
      });
    };

    _this.onLayout = _this.onLayout.bind(_this);
    _this.getLayout = _this.getLayout.bind(_this);
    _this.getETargetElement = _this.getETargetElement.bind(_this);
    _this.getETargetId = _this.getETargetId.bind(_this);
    _this.getInitialMoveDirection = _this.getInitialMoveDirection.bind(_this);
    _this.getTouchDirection = _this.getTouchDirection.bind(_this);
    _this.checkETargetIsExpected = _this.checkETargetIsExpected.bind(_this);
    return _this;
  }

  _createClass(Gesture, [{
    key: 'onLayout',
    value: function onLayout(_ref) {
      var nativeEvent = _ref.nativeEvent;

      if (this._layout !== undefined && this._layout === nativeEvent.layout) return;

      this._layout = _extends({}, nativeEvent.layout);
      this.forceUpdate();
    }
  }, {
    key: 'onStartShouldSetResponder',
    value: function onStartShouldSetResponder() {
      return true;
    }
  }, {
    key: 'onMoveShouldSetResponder',
    value: function onMoveShouldSetResponder() {
      return true;
    }
  }, {
    key: 'onMove',
    value: function onMove() {}
  }, {
    key: 'onGrant',
    value: function onGrant() {}
  }, {
    key: 'onRelease',
    value: function onRelease() {}
  }, {
    key: 'getETargetInstance',
    value: function getETargetInstance(e) {
      return _reactNative.ReactNativeComponentTree.getInstanceFromNode(e.target);
    }
  }, {
    key: 'getETargetElement',
    value: function getETargetElement(e) {
      var inst = this.getETargetInstance(e);
      return inst._currentElement;
    }
  }, {
    key: 'getETargetId',
    value: function getETargetId() {
      return this.eTargetId;
    }
  }, {
    key: 'getInitialMoveDirection',
    value: function getInitialMoveDirection() {
      return this._initialMoveDirection;
    }
  }, {
    key: 'getTouchDirection',
    value: function getTouchDirection(x, y) {
      var rect = this.getLayout();
      if (!rect) return;

      var _y = -y;
      var x1 = rect.x;
      var y1 = -rect.y;

      var x4 = rect.x + rect.width;
      var y4 = -(rect.y + rect.height);

      var x0 = rect.x + rect.width / 2;
      var y0 = -(rect.y + rect.height / 2);

      if (Math.abs(x1 - x4) < 0.0001) return 4;

      var k = (y1 - y4) / (x1 - x4);

      var range = [k, -k];

      var kk = (_y - y0) / (x - x0);

      if (isFinite(kk) && range[0] < kk && kk < range[1]) {
        return x > x0 ? 1 : 3;
      }

      return _y > y0 ? 0 : 2;
    }
  }, {
    key: 'getLayout',
    value: function getLayout() {
      return this._layout;
    }
  }, {
    key: 'fixRtl',
    value: function fixRtl(fixedEvent, gesture) {
      var _ref2 = this._layout || {},
          width = _ref2.width;

      var dx = isRtl ? -gesture.dx : gesture.dx;
      var locationX = isRtl && width ? width - fixedEvent.locationX : fixedEvent.locationX;
      return _extends({}, gesture, {
        locationX: locationX + dx,
        locationY: fixedEvent.locationY + gesture.dy,
        pageX: fixedEvent.pageX + gesture.dx,
        pageY: fixedEvent.pageY + gesture.dy,
        dx: dx
      });
    }
  }, {
    key: 'checkETargetIsExpected',
    value: function checkETargetIsExpected(e) {
      var element = this.getETargetElement(e);
      return this.eTargetId === element.props.eTargetId;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          props = _objectWithoutProperties(_props, ['children']);

      var responder = this.getResponder();
      delete props.pointerEvents;

      return _react2.default.createElement(
        _reactNative.View,
        _extends({}, props, responder, {
          __source: {
            fileName: _jsxFileName,
            lineNumber: 224
          }
        }),
        children
      );
    }
  }]);

  return Gesture;
}(_react.PureComponent);

Gesture.propTypes = {
  children: _propTypes2.default.any,
  pointerEvents: _propTypes2.default.oneOf(['box-none', 'none', 'box-only', 'auto']),
  disabled: _propTypes2.default.bool
};
Gesture.defaultProps = {
  children: null,
  pointerEvents: 'box-only',
  disabled: false
};
exports.default = Gesture;