diff --git a/dist/components/DraggableView.js b/dist/components/DraggableView.js index c4384f8..05cbf70 100644 --- a/dist/components/DraggableView.js +++ b/dist/components/DraggableView.js @@ -1 +1 @@ -Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i_this.props.swipeThreshold||Math.abs(_this.pan.x._value)>_this.props.swipeThreshold){_this.props.onSwipingOut(event);_reactNative.Animated.spring(_this.pan,{toValue:_this.getDisappearDirection(),velocity:0,tension:65,friction:11}).start(function(){_this.props.onSwipeOut(event);});return;}_this.currentSwipeDirection=null;_this.props.onRelease(event);_reactNative.Animated.spring(_this.pan,{toValue:{x:0,y:0},velocity:0,tension:65,friction:11}).start();}});_this.pan=new _reactNative.Animated.ValueXY();_this.allowedDirections=[].concat(props.swipeDirection);_this.layout=null;return _this;}_createClass(DraggableView,[{key:'componentDidMount',value:function componentDidMount(){var _this2=this;this.panEventListenerId=this.pan.addListener(function(axis){_this2.props.onMove(_this2.createDragEvent(axis));});}},{key:'componentWillUnmount',value:function componentWillUnmount(){this.pan.removeListener(this.panEventListenerId);}},{key:'getSwipeDirection',value:function getSwipeDirection(gestureState){if(this.isValidHorizontalSwipe(gestureState)){return gestureState.dx>0?'right':'left';}else if(this.isValidVerticalSwipe(gestureState)){return gestureState.dy>0?'down':'up';}return null;}},{key:'getDisappearDirection',value:function getDisappearDirection(){var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var vertical=height/2+this.layout.height/2;var horizontal=width/2+this.layout.width/2;var toValue=void 0;if(this.currentSwipeDirection==='up'){toValue={x:0,y:-vertical};}else if(this.currentSwipeDirection==='down'){toValue={x:0,y:vertical};}else if(this.currentSwipeDirection==='left'){toValue={x:-horizontal,y:0};}else if(this.currentSwipeDirection==='right'){toValue={x:horizontal,y:0};}return toValue;}},{key:'isValidHorizontalSwipe',value:function isValidHorizontalSwipe(_ref){var vx=_ref.vx,dy=_ref.dy;return this.isValidSwipe(vx,dy);}},{key:'isValidVerticalSwipe',value:function isValidVerticalSwipe(_ref2){var vy=_ref2.vy,dx=_ref2.dx;return this.isValidSwipe(vy,dx);}},{key:'isValidSwipe',value:function isValidSwipe(velocity,directionalOffset){var velocityThreshold=0.3;var directionalOffsetThreshold=80;return Math.abs(velocity)>velocityThreshold&&Math.abs(directionalOffset)0;var draggedUp=dy<0;var draggedLeft=dx<0;var draggedRight=dx>0;var isAllowedDirection=function isAllowedDirection(d){return _this3.currentSwipeDirection===d&&_this3.allowedDirections.includes(d);};if(draggedDown&&isAllowedDirection('down')){return true;}else if(draggedUp&&isAllowedDirection('up')){return true;}else if(draggedLeft&&isAllowedDirection('left')){return true;}else if(draggedRight&&isAllowedDirection('right')){return true;}return false;}},{key:'createDragEvent',value:function createDragEvent(axis){return{axis:axis,layout:this.layout,swipeDirection:this.currentSwipeDirection};}},{key:'render',value:function render(){var _props=this.props,style=_props.style,renderContent=_props.children;var content=renderContent({pan:this.pan,onLayout:this.onLayout});return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.panResponder.panHandlers,{style:style,__source:{fileName:_jsxFileName,lineNumber:214}}),content);}}]);return DraggableView;}(_react.Component);DraggableView.defaultProps={style:null,onMove:function onMove(){},onSwiping:function onSwiping(){},onSwipingOut:function onSwipingOut(){},onSwipeOut:null,onRelease:function onRelease(){},swipeThreshold:100,swipeDirection:[]};DraggableView.propTypes={style:require('prop-types').any,onMove:require('prop-types').func,onSwiping:require('prop-types').func,onRelease:require('prop-types').func,onSwipingOut:require('prop-types').func,onSwipeOut:require('prop-types').func,swipeThreshold:require('prop-types').number,swipeDirection:require('prop-types').oneOfType([typeof babelPluginFlowReactPropTypes_proptype_SwipeDirection==='function'?babelPluginFlowReactPropTypes_proptype_SwipeDirection:require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_SwipeDirection),require('prop-types').arrayOf(typeof babelPluginFlowReactPropTypes_proptype_SwipeDirection==='function'?babelPluginFlowReactPropTypes_proptype_SwipeDirection:require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_SwipeDirection))]),children:require('prop-types').func.isRequired};exports.default=DraggableView; \ No newline at end of file +Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i2||dx<-2||dy>2||dy<-2;},onStartShouldSetPanResponder:function onStartShouldSetPanResponder(){return true;},onPanResponderMove:function onPanResponderMove(event,gestureState){var isVerticalSwipe=function isVerticalSwipe(d){return['up','down'].includes(d);};var isHorizontalSwipe=function isHorizontalSwipe(d){return['left','right'].includes(d);};var newSwipeDirection=_this.getSwipeDirection(gestureState);var isSameDirection=isVerticalSwipe(_this.currentSwipeDirection)===isVerticalSwipe(newSwipeDirection)||isHorizontalSwipe(_this.currentSwipeDirection)===isHorizontalSwipe(newSwipeDirection);if(newSwipeDirection&&isSameDirection){_this.currentSwipeDirection=newSwipeDirection;}if(_this.isAllowedDirection(gestureState)){var animEvent=void 0;if(isVerticalSwipe(_this.currentSwipeDirection)){animEvent={dy:_this.pan.y};}else if(isHorizontalSwipe(_this.currentSwipeDirection)){animEvent={dx:_this.pan.x};}_reactNative.Animated.event([null,animEvent])(event,gestureState);_this.props.onSwiping(_this.createDragEvent({x:_this.pan.x._value,y:_this.pan.y._value}));}},onPanResponderRelease:function onPanResponderRelease(){_this.pan.flattenOffset();var event=_this.createDragEvent({x:_this.pan.x._value,y:_this.pan.y._value});if(_this.props.onSwipeOut&&Math.abs(_this.pan.y._value)>_this.props.swipeThreshold||Math.abs(_this.pan.x._value)>_this.props.swipeThreshold){_this.props.onSwipingOut(event);_reactNative.Animated.spring(_this.pan,{toValue:_this.getDisappearDirection(),velocity:0,tension:65,friction:11}).start(function(){_this.props.onSwipeOut(event);});return;}_this.currentSwipeDirection=null;_this.props.onRelease(event);_reactNative.Animated.spring(_this.pan,{toValue:{x:0,y:0},velocity:0,tension:65,friction:11}).start();}});_this.pan=new _reactNative.Animated.ValueXY();_this.allowedDirections=[].concat(props.swipeDirection);_this.layout=null;return _this;}_createClass(DraggableView,[{key:'componentDidMount',value:function componentDidMount(){var _this2=this;this.panEventListenerId=this.pan.addListener(function(axis){_this2.props.onMove(_this2.createDragEvent(axis));});}},{key:'componentWillUnmount',value:function componentWillUnmount(){this.pan.removeListener(this.panEventListenerId);}},{key:'getSwipeDirection',value:function getSwipeDirection(gestureState){if(this.isValidHorizontalSwipe(gestureState)){return gestureState.dx>0?'right':'left';}else if(this.isValidVerticalSwipe(gestureState)){return gestureState.dy>0?'down':'up';}return null;}},{key:'getDisappearDirection',value:function getDisappearDirection(){var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var vertical=height/2+this.layout.height/2;var horizontal=width/2+this.layout.width/2;var toValue=void 0;if(this.currentSwipeDirection==='up'){toValue={x:0,y:-vertical};}else if(this.currentSwipeDirection==='down'){toValue={x:0,y:vertical};}else if(this.currentSwipeDirection==='left'){toValue={x:-horizontal,y:0};}else if(this.currentSwipeDirection==='right'){toValue={x:horizontal,y:0};}return toValue;}},{key:'isValidHorizontalSwipe',value:function isValidHorizontalSwipe(_ref){var vx=_ref.vx,dy=_ref.dy;return this.isValidSwipe(vx,dy);}},{key:'isValidVerticalSwipe',value:function isValidVerticalSwipe(_ref2){var vy=_ref2.vy,dx=_ref2.dx;return this.isValidSwipe(vy,dx);}},{key:'isValidSwipe',value:function isValidSwipe(velocity,directionalOffset){var velocityThreshold=0.3;var directionalOffsetThreshold=80;return Math.abs(velocity)>velocityThreshold&&Math.abs(directionalOffset)0;var draggedUp=dy<0;var draggedLeft=dx<0;var draggedRight=dx>0;var isAllowedDirection=function isAllowedDirection(d){return _this3.currentSwipeDirection===d&&_this3.allowedDirections.includes(d);};if(draggedDown&&isAllowedDirection('down')){return true;}else if(draggedUp&&isAllowedDirection('up')){return true;}else if(draggedLeft&&isAllowedDirection('left')){return true;}else if(draggedRight&&isAllowedDirection('right')){return true;}return false;}},{key:'createDragEvent',value:function createDragEvent(axis){return{axis:axis,layout:this.layout,swipeDirection:this.currentSwipeDirection};}},{key:'render',value:function render(){var _props=this.props,style=_props.style,renderContent=_props.children;var content=renderContent({pan:this.pan,onLayout:this.onLayout});return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.panResponder.panHandlers,{style:style,__source:{fileName:_jsxFileName,lineNumber:216}}),content);}}]);return DraggableView;}(_react.Component);DraggableView.defaultProps={style:null,onMove:function onMove(){},onSwiping:function onSwiping(){},onSwipingOut:function onSwipingOut(){},onSwipeOut:null,onRelease:function onRelease(){},swipeThreshold:100,swipeDirection:[]};DraggableView.propTypes={style:require('prop-types').any,onMove:require('prop-types').func,onSwiping:require('prop-types').func,onRelease:require('prop-types').func,onSwipingOut:require('prop-types').func,onSwipeOut:require('prop-types').func,swipeThreshold:require('prop-types').number,swipeDirection:require('prop-types').oneOfType([typeof babelPluginFlowReactPropTypes_proptype_SwipeDirection==='function'?babelPluginFlowReactPropTypes_proptype_SwipeDirection:require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_SwipeDirection),require('prop-types').arrayOf(typeof babelPluginFlowReactPropTypes_proptype_SwipeDirection==='function'?babelPluginFlowReactPropTypes_proptype_SwipeDirection:require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_SwipeDirection))]),children:require('prop-types').func.isRequired};exports.default=DraggableView; \ No newline at end of file