mopinion-react-native-sdk/dist/components/FormGroup.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=FormGroup;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _TextBlock=_interopRequireDefault(require("./TextBlock"));var _RadioCheckBlock=_interopRequireDefault(require("./RadioCheckBlock"));var _SelectBlock=_interopRequireDefault(require("./SelectBlock"));var _RatingBlock=_interopRequireDefault(require("./RatingBlock"));var _SectionBlock=_interopRequireDefault(require("./SectionBlock"));var _ContactBlock=_interopRequireDefault(require("./ContactBlock"));var _ThumbsBlock=_interopRequireDefault(require("./ThumbsBlock"));var _ScreenshotBlock=_interopRequireDefault(require("./ScreenshotBlock"));var _LinkBlock=_interopRequireDefault(require("./LinkBlock"));var _MultimediaBlock=_interopRequireDefault(require("./MultimediaBlock"));var _ErrorMessage=_interopRequireDefault(require("./ErrorMessage"));var _Tooltip=_interopRequireDefault(require("./Tooltip"));var _FormContext=require("./FormContext");var _styles=require("../styles");var _utils=require("../utils");var _optionals=require("../utils/optionals");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;}var blockMap={input:_TextBlock.default,textarea:_TextBlock.default,radio:_RadioCheckBlock.default,checkbox:_RadioCheckBlock.default,category:_RadioCheckBlock.default,gcr:_RadioCheckBlock.default,thumbs:_ThumbsBlock.default,select:_SelectBlock.default,rating:_RatingBlock.default,nps:_RatingBlock.default,ces:_RatingBlock.default,section_break:_SectionBlock.default,contact:_ContactBlock.default,screenshot:_optionals.captureScreen||_optionals.launchImageLibrary?_ScreenshotBlock.default:null,multimedia:_MultimediaBlock.default,link:_LinkBlock.default};function getErrorMessage(_ref){var _text$errors,_text$defaultErrors,_text$errors2,_text$defaultErrors2;var reason=_ref.reason,_ref$text=_ref.text,text=_ref$text===void 0?{}:_ref$text,_ref$block=_ref.block,block=_ref$block===void 0?{}:_ref$block;if((_text$errors=text.errors)!=null&&_text$errors[reason]){return text.errors[reason];}if((_text$defaultErrors=text.defaultErrors)!=null&&_text$defaultErrors[reason]){return text.defaultErrors[reason];}if((_text$errors2=text.errors)!=null&&_text$errors2.required){return text.errors.required;}if((_text$defaultErrors2=text.defaultErrors)!=null&&_text$defaultErrors2.required){return text.defaultErrors.required;}return'This field is required';}function FormGroup(props){var page=props.page,_props$block=props.block,block=_props$block===void 0?{}:_props$block,firstOnPage=props.firstOnPage;var _useFormContext=(0,_FormContext.useFormContext)(),isSwiping=_useFormContext.isSwiping,_setValue=_useFormContext.setValue,setLayout=_useFormContext.setLayout,_setScreenshot=_useFormContext.setScreenshot,getBlockState=_useFormContext.getBlockState,showErrors=_useFormContext.showErrors,formConfig=_useFormContext.formConfig,currentPage=_useFormContext.currentPage;var theme=(0,_styles.useTheme)();var errorMessagesRef=(0,_react.useRef)({});var blockState=getBlockState(block.id);var text=formConfig.text;var errorMessage=blockState.showError?getErrorMessage({reason:blockState.errorReason,text:text,block:block}):'';var errorMessages=(0,_react.useMemo)(function(){if(block.typeName!=='contact'){return errorMessagesRef.current;}return(0,_utils.objectKeys)(blockState).reduce(function(dataFields,currentPropKey){if(!isNaN(Number(currentPropKey))){dataFields[currentPropKey]=getErrorMessage({reason:blockState[currentPropKey].errorReason,text:text});}return dataFields;},{});},[block.typeName,blockState,text]);var Block=blockMap[block.typeName];if(!Block){return null;}var setBlockLayout=function setBlockLayout(event){var layout=event.nativeEvent.layout;setTimeout(function(){setLayout(block.id,layout);});};var BlockProps={block:block,blockState:blockState,errorMessage:errorMessage,errorMessages:errorMessages,setValue:function setValue(value){_setValue({block:block,value:value});},setNestedValue:function setNestedValue(value,datafieldId){_setValue({block:block,value:value,datafieldId:datafieldId});},setScreenshot:function setScreenshot(_ref2){var screenshot=_ref2.screenshot,screenshotType=_ref2.screenshotType;_setScreenshot({block:block,screenshot:screenshot,screenshotType:screenshotType});},isSwiping:isSwiping,showErrors:showErrors};var textStyle=[styles.text,block.typeName==='section_break'?[styles.headerText,{color:theme.darkTextColor,fontSize:theme.typography.sectionHeader.fontSize}]:[]];var groupStyle=[styles.group,theme.groupsAsCards&&data.typeName!=='section_break'?styles.cards:null,blockState.isVisible?{display:'flex'}:{display:'none'}];return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:groupStyle,onLayout:page===currentPage?setBlockLayout:null,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.textContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:textStyle,children:[block.title,block.properties.required&&(0,_jsxRuntime.jsx)(RequiredMark,{})]}),block.tooltip&&(0,_jsxRuntime.jsx)(_Tooltip.default,{title:block.tooltip,align:firstOnPage?'bottom':'top'})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_jsxRuntime.jsx)(Block,Object.assign({},BlockProps))}),block.typeName!=='contact'&&(0,_jsxRuntime.jsx)(_ErrorMessage.default,{show:showErrors&&blockState.showError,children:errorMessage}),block.properties.elements_extra&&(0,_jsxRuntime.jsx)(ElementsExtra,Object.assign({},BlockProps))]});}function RequiredMark(){var theme=(0,_styles.useTheme)();return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:theme.requiredMarkColor},children:" *"});}function ElementsExtra(_ref3){var block=_ref3.block,blockState=_ref3.blockState,setNestedValue=_ref3.setNestedValue;var inputElement=block.properties.elements_extra[(0,_utils.objectKeys)(block.properties.elements_extra).pop()];if(!blockState[inputElement.data_field].isVisible){return null;}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.elementsExtra,children:(0,_jsxRuntime.jsx)(_TextBlock.default,{blockState:blockState[inputElement.data_field],setValue:function setValue(value){return setNestedValue(value,inputElement.data_field);},block:inputElement})});}var styles=_reactNative.StyleSheet.create({group:{paddingVertical:(0,_styles.spacing)(2),marginVertical:(0,_styles.spacing)(1),paddingHorizontal:(0,_styles.spacing)(1.5),overflow:'visible'},cards:{backgroundColor:'#fff',marginBottom:(0,_styles.spacing)(2),shadowColor:'#000',shadowOpacity:0.075,shadowRadius:_styles.baseTheme.borderRadius,shadowOffset:{width:1,height:1},borderRadius:_styles.baseTheme.borderRadius},textContainer:{flexDirection:'row',justifyContent:'space-between',gap:(0,_styles.spacing)(1),zIndex:1},text:Object.assign({marginBottom:(0,_styles.spacing)(2)},_styles.baseTheme.typography.base),headerText:{fontWeight:'600',color:'#000',fontSize:16,marginBottom:(0,_styles.spacing)(0.5)},tooltipStyle:{backgroundColor:'#616161',color:'#fff',fontSize:12,height:20,width:20,borderRadius:100},elementsExtra:{marginTop:(0,_styles.spacing)(0.5)}});