react-native-popup-navigation/src/commonjs/components/bottom_sheet/index.js

popup navigation

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.BottomSheet=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _jsxFileName="/Users/mnshkv/develop/opensource/popupNavigation/lib/components/bottom_sheet/index.js";var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var BottomSheet=function(_Component){(0,_inherits2.default)(BottomSheet,_Component);function BottomSheet(props){var _this;(0,_classCallCheck2.default)(this,BottomSheet);_this=(0,_possibleConstructorReturn2.default)(this,(0,_getPrototypeOf3.default)(BottomSheet).call(this,props));_this.masterdrawer=_react.default.createRef();_this.drawer=_react.default.createRef();_this.drawerheader=_react.default.createRef();_this.scroll=_react.default.createRef();_this.scrollView=_react.default.createRef();_this._onHeaderHandlerStateChange=function(_ref){var nativeEvent=_ref.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.BEGAN){_this._lastScrollY.setValue(0);}_this._onHandlerStateChange({nativeEvent:nativeEvent});};_this.snapTo=function(value){_reactNative.Animated.spring(_this._translateYOffset,{tension:68,friction:12,toValue:value,useNativeDriver:_this.props.nativeDriver}).start(function(){_this.setState({lastSnap:value});});};_this._onHandlerStateChange=function(_ref2){var nativeEvent=_ref2.nativeEvent;if(nativeEvent.oldState===_reactNativeGestureHandler.State.ACTIVE){var velocityY=nativeEvent.velocityY,translationY=nativeEvent.translationY;translationY-=_this._lastScrollYValue;var dragToss=0.05;var endOffsetY=_this.state.lastSnap+translationY+dragToss*velocityY;var destSnapPoint=_this.props.snapPoints[0];for(var i=0;i<_this.props.snapPoints.length;i++){var snapPoint=_this.props.snapPoints[i];var distFromSnap=Math.abs(snapPoint-endOffsetY);if(distFromSnap<Math.abs(destSnapPoint-endOffsetY)){destSnapPoint=snapPoint;}}_this.setState({lastSnap:destSnapPoint});_this._translateYOffset.extractOffset();_this._translateYOffset.setValue(translationY);_this._translateYOffset.flattenOffset();_this._dragY.setValue(0);_reactNative.Animated.spring(_this._translateYOffset,{velocity:velocityY,tension:68,friction:12,toValue:destSnapPoint,useNativeDriver:_this.props.nativeDriver}).start();}};_this.START=props.snapPoints[0];_this.AFTER_START=props.snapPoints[1];_this.END=props.snapPoints[props.snapPoints.length-1];_this.state={lastSnap:_this.END,bounces:props.bounces};_this._lastScrollYValue=0;_this._lastScrollY=new _reactNative.Animated.Value(0);_this._onRegisterLastScroll=_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:_this._lastScrollY}}}],{useNativeDriver:props.nativeDriver});_this._lastScrollY.addListener(function(_ref3){var value=_ref3.value;_this._lastScrollYValue=value;if(value<=20&&props.bounces){_this.setState({bounces:false});}else{_this.setState({bounces:true});}});_this._dragY=new _reactNative.Animated.Value(0);_this._onGestureEvent=_reactNative.Animated.event([{nativeEvent:{translationY:_this._dragY}}],{useNativeDriver:props.nativeDriver});_this._reverseLastScrollY=_reactNative.Animated.multiply(new _reactNative.Animated.Value(-1),_this._lastScrollY);_this._translateYOffset=new _reactNative.Animated.Value(_this.END);_this._translateY=_reactNative.Animated.add(_this._translateYOffset,_reactNative.Animated.add(_this._dragY,_this._reverseLastScrollY)).interpolate({inputRange:[_this.START,_this.END],outputRange:[_this.START,_this.END],extrapolate:'clamp'});_this._radius=_reactNative.Animated.add(_this._translateYOffset,_reactNative.Animated.add(_this._dragY,_this._reverseLastScrollY)).interpolate({inputRange:[_this.START,_this.AFTER_START/2],outputRange:[0,props.corderRadius],extrapolate:'clamp'});return _this;}(0,_createClass2.default)(BottomSheet,[{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){this.START=nextProps.snapPoints[0];this.AFTER_START=nextProps.snapPoints[1];this.END=nextProps.snapPoints[nextProps.snapPoints.length-1];this._translateY=_reactNative.Animated.add(this._translateYOffset,_reactNative.Animated.add(this._dragY,this._reverseLastScrollY)).interpolate({inputRange:[this.START,this.END],outputRange:[this.START,this.END],extrapolate:'clamp'});return true;}},{key:"render",value:function render(){var _this2=this;return _react.default.createElement(_reactNativeGestureHandler.TapGestureHandler,{maxDurationMs:100000,ref:this.masterdrawer,maxDeltaY:this.state.lastSnap-this.props.snapPoints[0],__source:{fileName:_jsxFileName,lineNumber:154}},_react.default.createElement(_reactNative.View,{style:_reactNative.Platform.OS==='ios'&&_reactNative.StyleSheet.absoluteFillObject,pointerEvents:"box-none",__source:{fileName:_jsxFileName,lineNumber:158}},_react.default.createElement(_reactNative.Animated.View,{style:[{width:width,height:height,transform:[{translateY:this._translateY}]},this.props.style],__source:{fileName:_jsxFileName,lineNumber:159}},_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler,{ref:this.drawer,simultaneousHandlers:[this.scroll,this.masterdrawer],shouldCancelWhenOutside:false,onGestureEvent:this._onGestureEvent,onHandlerStateChange:this._onHandlerStateChange,__source:{fileName:_jsxFileName,lineNumber:169}},_react.default.createElement(_reactNative.Animated.View,{style:[styles.container,this.props.animateBorder&&{overflow:'hidden',borderTopLeftRadius:this._radius,borderTopRightRadius:this._radius}],__source:{fileName:_jsxFileName,lineNumber:175}},_react.default.createElement(_reactNativeGestureHandler.NativeViewGestureHandler,{ref:this.scroll,waitFor:this.masterdrawer,simultaneousHandlers:this.drawer,__source:{fileName:_jsxFileName,lineNumber:185}},_react.default.createElement(_reactNative.Animated.ScrollView,{ref:function ref(_ref4){_this2.scrollView=_ref4;_this2.props.setScrollViewRef(_ref4);},style:this.props.scrollStyle,bounces:this.state.bounces,onScrollBeginDrag:this._onRegisterLastScroll,scrollEventThrottle:16,__source:{fileName:_jsxFileName,lineNumber:189}},this.props.renderContent())))))));}}]);return BottomSheet;}(_react.Component);exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bounces:true,nativeDriver:true,animateBorder:false,corderRadius:20};var BottomSheetContainer=function(_Component2){(0,_inherits2.default)(BottomSheetContainer,_Component2);function BottomSheetContainer(){var _getPrototypeOf2;var _this3;(0,_classCallCheck2.default)(this,BottomSheetContainer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this3=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(BottomSheetContainer)).call.apply(_getPrototypeOf2,[this].concat(args)));_this3.bottomSheet=_react.default.createRef();_this3.scrollView=_react.default.createRef();_this3.snapTo=function(value){_this3.bottomSheet.snapTo(value);};_this3.setScrollViewRef=function(ref){_this3.scrollView=ref;};return _this3;}(0,_createClass2.default)(BottomSheetContainer,[{key:"render",value:function render(){var _this4=this;return _react.default.createElement(_reactNative.View,{style:[styles.container,{position:'absolute',top:0,left:0}],__source:{fileName:_jsxFileName,lineNumber:231}},_react.default.createElement(BottomSheet,(0,_extends2.default)({ref:function ref(_ref5){_this4.bottomSheet=_ref5;},setScrollViewRef:this.setScrollViewRef},this.props,{__source:{fileName:_jsxFileName,lineNumber:232}})));}}]);return BottomSheetContainer;}(_react.Component);exports.default=BottomSheetContainer;var styles=_reactNative.StyleSheet.create({container:{flex:1}});
//# sourceMappingURL=index.js.map