mopinion-react-native-sdk/dist/components/FormContent.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=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _ThankYouPage=_interopRequireDefault(require("./ThankYouPage"));var _Page=_interopRequireDefault(require("./Page"));var _FormContext=require("./FormContext");var _styles=require("../styles");var _utils=require("../utils");var _jsxRuntime=require("react/jsx-runtime");function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}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 FormContent=function(_React$Component){function FormContent(props){var _this$props$pages;var _this;(0,_classCallCheck2.default)(this,FormContent);_this=_callSuper(this,FormContent,[props]);_this.getPageStyle=function(page){var _this$props=_this.props,currentPage=_this$props.currentPage,formIsFullySubmitted=_this$props.formIsFullySubmitted;var offset=_reactNative.Dimensions.get('window').width;var isCurrent=page==='thanks'?formIsFullySubmitted:!formIsFullySubmitted&&currentPage===page;var pageStyle=[{opacity:_this.anim[page].interpolate({inputRange:[0,1,2],outputRange:[0,1,0]}),transform:[{translateX:_this.anim[page].interpolate({inputRange:[0,1,2],outputRange:[offset,0,-offset]})}],position:isCurrent?'relative':'absolute',flex:1}];return pageStyle;};_this.state={};_this.anim={thanks:new _reactNative.Animated.Value(0)};(_this$props$pages=_this.props.pages)==null?void 0:_this$props$pages.forEach(function(blockArr,index){var pageNumber=index+1;var animValue=pageNumber===_this.props.currentPage?1:pageNumber>_this.props.currentPage?0:2;_this.anim[pageNumber]=new _reactNative.Animated.Value(animValue);});return _this;}(0,_inherits2.default)(FormContent,_React$Component);return(0,_createClass2.default)(FormContent,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){this.handlePageAnimation(prevProps);}},{key:"handlePageAnimation",value:function handlePageAnimation(prevProps){if(prevProps.currentPage===this.props.currentPage&&prevProps.formIsFullySubmitted===this.props.formIsFullySubmitted){return;}if(this.props.formIsFullySubmitted){_reactNative.Animated.timing(this.anim[this.props.currentPage],{toValue:2,duration:275,easing:_reactNative.Easing.bezier(0.4,0.0,0.2,1),useNativeDriver:true}).start();_reactNative.Animated.timing(this.anim.thanks,{toValue:1,duration:425,easing:_reactNative.Easing.bezier(0.4,0.0,0.2,1),useNativeDriver:true}).start();return;}_reactNative.Animated.timing(this.anim[prevProps.currentPage],{toValue:this.props.direction==='next'?2:0,duration:275,easing:_reactNative.Easing.bezier(0.4,0.0,0.2,1),useNativeDriver:true}).start();_reactNative.Animated.timing(this.anim[this.props.currentPage],{toValue:1,delay:75,duration:275,easing:_reactNative.Easing.bezier(0.4,0.0,0.2,1),useNativeDriver:true}).start();}},{key:"render",value:function render(){var _this2=this;var _this$props2=this.props,formConfig=_this$props2.formConfig,theme=_this$props2.theme,pages=_this$props2.pages;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.fill,theme.groupsAsCards?{backgroundColor:theme.groupsAsCardsBgColor}:null],children:[pages.map(function(blockArr,index){var pageNumber=index+1;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:_this2.getPageStyle(pageNumber),children:(0,_jsxRuntime.jsx)(_Page.default,{pageNumber:pageNumber,pageBlocks:blockArr})},pageNumber);}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:this.getPageStyle('thanks'),children:(0,_jsxRuntime.jsx)(_ThankYouPage.default,{})})]});}}]);}(_react.default.Component);var styles=_reactNative.StyleSheet.create({fill:{flex:1,flexGrow:1,justifyContent:'space-between'},background:{backgroundColor:'#eee'}});var _default=exports.default=(0,_styles.withTheme)((0,_FormContext.withFormContext)(FormContent));