mopinion-react-native-sdk/dist/components/ScreenshotBlock.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=ScreenshotBlock;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _Control=_interopRequireDefault(require("./Control"));var _Buttons=require("./Buttons");var _FormContext=require("./FormContext");var _styles=require("../styles");var _optionals=require("../utils/optionals");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}var styles=_reactNative.StyleSheet.create({overlayImage:{position:'absolute',alignItems:'center',justifyContent:'center',width:`100%`,height:`100%`,resizeMode:'contain'},modalBackgroundView:{margin:20,flex:1,width:'100%',height:'100%',alignItems:'center',justifyContent:'center',backgroundColor:'#40404080'},centeredView:{flex:1,justifyContent:'center',alignItems:'center',marginTop:30},buttonContainer:{alignItems:'flex-start',marginVertical:(0,_styles.spacing)(1)}});function ScreenshotBlock(props){var blockState=props.blockState,block=props.block,setValue=props.setValue,setScreenshot=props.setScreenshot;var _useFormContext=(0,_FormContext.useFormContext)(),screenshot=_useFormContext.screenshot,screenshotImageType=_useFormContext.screenshotImageType,formConfig=_useFormContext.formConfig;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),modalOpen=_useState2[0],setModalOpen=_useState2[1];var theme=(0,_styles.useTheme)();var uri=blockState.screenshot||screenshot||'';var type=blockState.screenshotImageType||screenshotImageType||'';return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[uri&&(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:function onPress(){return setModalOpen(function(prev){return!prev;});},children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:`data:${type};base64,${uri}`},style:{flex:1,aspectRatio:'1',width:'50%',borderRadius:theme.borderRadius}})})}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{transparent:true,supportedOrientations:['landscape','portrait'],visible:modalOpen,animationType:"fade",onRequestClose:function onRequestClose(){return setModalOpen(false);},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.centeredView,children:(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:styles.modalBackgroundView,onPress:function onPress(){return setModalOpen(false);},children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:`data:${type};base64,${uri}`},style:styles.overlayImage})})})}),_optionals.launchImageLibrary&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.buttonContainer,children:(0,_jsxRuntime.jsx)(_Buttons.OpenButton,{text:blockState.screenshot?block.properties.undoLabel:block.properties.pickLabel,icon:blockState.screenshot?'undo':'filePhotoO',onPress:function onPress(){if(blockState.screenshot){setScreenshot({screenshot:null,screenshotImageType:null});return;}if(_optionals.launchImageLibrary){(0,_optionals.launchImageLibrary)({mediaType:'photo',includeBase64:true,maxWidth:_reactNative.Dimensions.get('screen').width,maxHeight:_reactNative.Dimensions.get('screen').height},function(response){if(['image/jpeg','image/jpg','image/png'].includes(response.type)){setScreenshot({screenshot:response.base64,screenshotImageType:response.type});return;}if(!response.didCancel){_reactNative.Alert.alert('Image not supported',`Sorry, ${response.type} is not supported. Please select a JPG or PNG image.`);}});}else{console.log('Feature not available','Image picker is not available. Please install react-native-image-picker to use this feature.');}}})}),(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_jsxRuntime.jsx)(_Control.default,{checked:blockState.value==='send_screenshot',onPress:function onPress(){return setValue(blockState.value==='send_screenshot'?'':'send_screenshot');},label:formConfig.text.screenshotCheckboxLabel,type:"checkbox"})})]});}