mopinion-react-native-sdk/dist/components/ModalBox.js

Collect in-app feedback with Mopinion for React Native. Built fully in React Native for optimal integration with your React Native app.

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;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 _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");function _callSuper(t,o,e){return o=(0,_getPrototypeOf2.default)(o),(0,_possibleConstructorReturn2.default)(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2.default)(t).constructor):o.apply(t,e));}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}var _Dimensions$get=_reactNative.Dimensions.get('window'),SCREEN_HEIGHT=_Dimensions$get.height,SCREEN_WIDTH=_Dimensions$get.width;var styles=_reactNative.StyleSheet.create({wrapper:{backgroundColor:'white'},transparent:{zIndex:2,backgroundColor:'rgba(0,0,0,0)',shadowColor:'#000',shadowOpacity:0.15,shadowRadius:8},absolute:{position:'absolute',top:0,bottom:0,left:0,right:0}});var ModalBox=exports.default=function(_React$PureComponent){function ModalBox(props){var _this;(0,_classCallCheck2.default)(this,ModalBox);_this=_callSuper(this,ModalBox,[props]);_this.onBackPress=_this.onBackPress.bind(_this);_this.handleOpenning=_this.handleOpenning.bind(_this);_this.onKeyboardHide=_this.onKeyboardHide.bind(_this);_this.onKeyboardChange=_this.onKeyboardChange.bind(_this);_this.animateBackdropOpen=_this.animateBackdropOpen.bind(_this);_this.animateBackdropClose=_this.animateBackdropClose.bind(_this);_this.stopAnimateOpen=_this.stopAnimateOpen.bind(_this);_this.animateOpen=_this.animateOpen.bind(_this);_this.stopAnimateClose=_this.stopAnimateClose.bind(_this);_this.animateClose=_this.animateClose.bind(_this);_this.calculateModalPosition=_this.calculateModalPosition.bind(_this);_this.createPanResponder=_this.createPanResponder.bind(_this);_this.onViewLayout=_this.onViewLayout.bind(_this);_this.onContainerLayout=_this.onContainerLayout.bind(_this);_this.renderBackdrop=_this.renderBackdrop.bind(_this);_this.renderContent=_this.renderContent.bind(_this);_this.open=_this.open.bind(_this);_this.close=_this.close.bind(_this);var position=props.startOpen?new _reactNative.Animated.Value(0):new _reactNative.Animated.Value(props.entry==='top'?-SCREEN_HEIGHT:SCREEN_HEIGHT);_this.state={position:position,backdropOpacity:new _reactNative.Animated.Value(0),isOpen:props.startOpen,isAnimateClose:false,isAnimateOpen:false,swipeToClose:false,height:SCREEN_HEIGHT,width:SCREEN_WIDTH,containerHeight:SCREEN_HEIGHT,containerWidth:SCREEN_WIDTH,isInitialized:false,keyboardOffset:0,pan:_this.createPanResponder(position)};if(_reactNative.Platform.OS==='ios'){_this.subscriptions=[_reactNative.Keyboard.addListener('keyboardWillChangeFrame',_this.onKeyboardChange),_reactNative.Keyboard.addListener('keyboardDidHide',_this.onKeyboardHide)];}return _this;}(0,_inherits2.default)(ModalBox,_React$PureComponent);return(0,_createClass2.default)(ModalBox,[{key:"componentDidMount",value:function componentDidMount(){this.handleOpenning();}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.isOpen!=prevProps.isOpen){this.handleOpenning();}}},{key:"componentWillUnmount",value:function componentWillUnmount(){var _this$onPressBackHand;if(this.subscriptions)this.subscriptions.forEach(function(sub){return sub.remove();});if(this.props.backButtonClose&&_reactNative.Platform.OS==='android')(_this$onPressBackHand=this.onPressBackHandler)==null?void 0:_this$onPressBackHand.remove==null?void 0:_this$onPressBackHand.remove();}},{key:"onBackPress",value:function onBackPress(){this.close();return true;}},{key:"handleOpenning",value:function handleOpenning(){if(typeof this.props.isOpen=='undefined')return;if(this.props.isOpen)this.open();else this.close();}},{key:"onKeyboardHide",value:function onKeyboardHide(evt){this.setState({keyboardOffset:0});}},{key:"onKeyboardChange",value:function onKeyboardChange(evt){var _this2=this;if(!evt)return;if(!this.state.isOpen)return;var keyboardFrame=evt.endCoordinates;var keyboardHeight=this.state.containerHeight-keyboardFrame.screenY;this.setState({keyboardOffset:keyboardHeight},function(){_this2.animateOpen();});}},{key:"animateBackdropOpen",value:function animateBackdropOpen(){var _this3=this;if(this.state.isAnimateBackdrop&&this.state.animBackdrop){this.state.animBackdrop.stop();}this.setState({isAnimateBackdrop:true});var animBackdrop=_reactNative.Animated.timing(this.state.backdropOpacity,{toValue:1,duration:this.props.animationDuration,easing:this.props.easing,useNativeDriver:this.props.useNativeDriver}).start(function(){_this3.setState({isAnimateBackdrop:false,animBackdrop:animBackdrop});});}},{key:"animateBackdropClose",value:function animateBackdropClose(){var _this4=this;if(this.state.isAnimateBackdrop&&this.state.animBackdrop){this.state.animBackdrop.stop();}this.setState({isAnimateBackdrop:true});var animBackdrop=_reactNative.Animated.timing(this.state.backdropOpacity,{toValue:0,duration:this.props.animationDuration,easing:this.props.easing,useNativeDriver:this.props.useNativeDriver}).start(function(){_this4.setState({isAnimateBackdrop:false,animBackdrop:animBackdrop});});}},{key:"stopAnimateOpen",value:function stopAnimateOpen(){if(this.state.isAnimateOpen){if(this.state.animOpen)this.state.animOpen.stop();this.setState({isAnimateOpen:false});}}},{key:"animateOpen",value:function animateOpen(){var _this5=this;this.stopAnimateClose();if(this.props.backdrop)this.animateBackdropOpen();this.setState({isAnimateOpen:true,isOpen:true},function(){requestAnimationFrame(function(){var positionDest=_this5.calculateModalPosition(_this5.state.containerHeight-_this5.state.keyboardOffset,_this5.state.containerWidth);if(_this5.state.keyboardOffset&&positionDest<_this5.props.keyboardTopOffset){positionDest=_this5.props.keyboardTopOffset;}var animOpen=_reactNative.Animated.timing(_this5.state.position,{toValue:positionDest,duration:_this5.props.animationDuration,easing:_this5.props.easing,useNativeDriver:_this5.props.useNativeDriver}).start(function(){_this5.setState({isAnimateOpen:false,animOpen:animOpen,positionDest:positionDest});if(_this5.props.onOpened)_this5.props.onOpened();});});});}},{key:"stopAnimateClose",value:function stopAnimateClose(){if(this.state.isAnimateClose){if(this.state.animClose)this.state.animClose.stop();this.setState({isAnimateClose:false});}}},{key:"animateClose",value:function animateClose(){var _this6=this;this.stopAnimateOpen();if(this.props.backdrop)this.animateBackdropClose();this.setState({isAnimateClose:true,isOpen:false},function(){var animClose=_reactNative.Animated.timing(_this6.state.position,{toValue:_this6.props.entry==='top'?-_this6.state.containerHeight:_this6.state.containerHeight,duration:_this6.props.animationDuration,easing:_this6.props.easing,useNativeDriver:_this6.props.useNativeDriver}).start(function(){_this6.setState({isAnimateClose:false,animClose:animClose},function(){_this6.state.position.setValue(_this6.props.entry==='top'?-_this6.state.containerHeight:_this6.state.containerHeight);});if(_this6.props.onClosed)_this6.props.onClosed();});});}},{key:"calculateModalPosition",value:function calculateModalPosition(containerHeight,containerWidth){var position=0;if(this.props.position=='bottom'){position=containerHeight-this.state.height;}else if(this.props.position=='center'){position=containerHeight/2-this.state.height/2;}if(position<0)position=0;return position;}},{key:"createPanResponder",value:function createPanResponder(position){var _this7=this;var closingState=false;var inSwipeArea=false;var onPanStart=function onPanStart(evt,state){if(!_this7.props.swipeToClose||_this7.props.isDisabled||_this7.props.swipeArea&&evt.nativeEvent.pageY-_this7.state.positionDest>_this7.props.swipeArea){inSwipeArea=false;return false;}inSwipeArea=true;return true;};var animEvt=_reactNative.Animated.event([null,{customY:position}],{useNativeDriver:false});var onPanMove=function onPanMove(evt,state){var newClosingState=_this7.props.entry==='top'?-state.dy>_this7.props.swipeThreshold:state.dy>_this7.props.swipeThreshold;if(_this7.props.entry==='top'?state.dy>0:state.dy<0)return;if(newClosingState!=closingState&&_this7.props.onClosingState)_this7.props.onClosingState(newClosingState);closingState=newClosingState;state.customY=state.dy+_this7.state.positionDest;animEvt(evt,state);};var onPanRelease=function onPanRelease(evt,state){if(!inSwipeArea)return;inSwipeArea=false;if(_this7.props.entry==='top'?-state.dy>_this7.props.swipeThreshold:state.dy>_this7.props.swipeThreshold){_this7.close();}else if(!_this7.state.isOpen){_this7.animateOpen();}};return _reactNative.PanResponder.create({onStartShouldSetPanResponder:onPanStart,onPanResponderMove:onPanMove,onPanResponderRelease:onPanRelease,onPanResponderTerminate:onPanRelease});}},{key:"onViewLayout",value:function onViewLayout(evt){var height=evt.nativeEvent.layout.height;var width=evt.nativeEvent.layout.width;var newState={};if(height!==this.state.height)newState.height=height;if(width!==this.state.width)newState.width=width;this.setState(newState);if(this.onViewLayoutCalculated)this.onViewLayoutCalculated();}},{key:"onContainerLayout",value:function onContainerLayout(evt){var height=evt.nativeEvent.layout.height;var width=evt.nativeEvent.layout.width;if(height==this.state.containerHeight&&width==this.state.containerWidth){this.setState({isInitialized:true});return;}if(this.state.isOpen||this.state.isAnimateOpen){this.animateOpen();}if(this.props.onLayout)this.props.onLayout(evt);this.setState({isInitialized:true,containerHeight:height,containerWidth:width});}},{key:"renderBackdrop",value:function renderBackdrop(){var backdrop=null;if(this.props.backdrop){backdrop=(0,_jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback,{onPress:this.props.backdropPressToClose?this.close:null,children:(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{importantForAccessibility:"no",style:[styles.absolute,{opacity:this.state.backdropOpacity}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.absolute,{backgroundColor:this.props.backdropColor,opacity:this.props.backdropOpacity}]}),this.props.backdropContent||[]]})});}return backdrop;}},{key:"renderContent",value:function renderContent(){var size={height:this.state.containerHeight,width:this.state.containerWidth};var offsetX=(this.state.containerWidth-this.state.width)/2;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,Object.assign({onLayout:this.onViewLayout,style:[styles.wrapper,size,this.props.style,{transform:[{translateY:this.state.position},{translateX:offsetX}]}]},this.state.pan.panHandlers,{children:this.props.children}));}},{key:"render",value:function render(){var _this8=this;var visible=this.state.isOpen||this.state.isAnimateOpen||this.state.isAnimateClose;if(!visible)return(0,_jsxRuntime.jsx)(_reactNative.View,{});var content=(0,_jsxRuntime.jsx)(_reactNative.View,{importantForAccessibility:"yes",accessibilityViewIsModal:true,style:[styles.transparent,styles.absolute],pointerEvents:'box-none',children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1},pointerEvents:'box-none',onLayout:this.onContainerLayout,children:[visible&&this.renderBackdrop(),visible&&this.renderContent()]})});if(!this.props.coverScreen)return content;return(0,_jsxRuntime.jsx)(_reactNative.Modal,{onRequestClose:function onRequestClose(){if(_this8.props.backButtonClose){_this8.close();}},supportedOrientations:['landscape','portrait','portrait-upside-down'],transparent:true,visible:visible,hardwareAccelerated:true,children:content});}},{key:"open",value:function open(){var _this9=this;if(this.props.isDisabled)return;if(!this.state.isAnimateOpen&&(!this.state.isOpen||this.state.isAnimateClose)){this.onViewLayoutCalculated=function(){_this9.animateOpen();if(_this9.props.backButtonClose&&_reactNative.Platform.OS==='android')_this9.onPressBackHandler=_reactNative.BackHandler.addEventListener('hardwareBackPress',_this9.onBackPress);_this9.onViewLayoutCalculated=null;};this.setState({isAnimateOpen:true});}}},{key:"close",value:function close(){if(this.props.isDisabled)return;if(!this.state.isAnimateClose&&(this.state.isOpen||this.state.isAnimateOpen)){var _this$onPressBackHand2;this.animateClose();if(this.props.backButtonClose&&_reactNative.Platform.OS==='android')(_this$onPressBackHand2=this.onPressBackHandler)==null?void 0:_this$onPressBackHand2.remove==null?void 0:_this$onPressBackHand2.remove();}}}]);}(_react.default.PureComponent);ModalBox.defaultProps={startOpen:false,backdropPressToClose:true,swipeToClose:true,swipeThreshold:50,position:'center',backdrop:true,backdropOpacity:0.5,backdropColor:'black',backdropContent:null,animationDuration:400,backButtonClose:false,easing:_reactNative.Easing.elastic(0.8),coverScreen:false,keyboardTopOffset:0,useNativeDriver:true};