mopinion-react-native-sdk/dist/components/Header.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=Header;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _styles=require("../styles");var _Ripple=require("./Ripple");var _Progress=_interopRequireDefault(require("./Progress"));var _FormContext=require("./FormContext");var _jsxRuntime=require("react/jsx-runtime");function Header(props){var _theme$uiComponentsGr,_theme$headerBgColor,_formConfig$propertie,_formConfig$propertie2,_formConfig$propertie3,_formConfig$propertie4;var _props$onPressLeft=props.onPressLeft,onPressLeft=_props$onPressLeft===void 0?function(){}:_props$onPressLeft,title=props.title,formType=props.formType,_props$onLayout=props.onLayout,onLayout=_props$onLayout===void 0?function(){}:_props$onLayout;var _useFormContext=(0,_FormContext.useFormContext)(),formConfig=_useFormContext.formConfig;var theme=(0,_styles.useTheme)();var buttonStyle={alignSelf:'center',left:0,width:32,height:32,borderRadius:32,zIndex:20,justifyContent:'center',alignItems:'center',overflow:'hidden'};var iconStyle={fontSize:24,fontWeight:600,color:theme.headerTextColor?theme.headerTextColor:(_theme$uiComponentsGr=theme.uiComponentsGrey)!=null?_theme$uiComponentsGr:'#fff'};var headerBg={backgroundColor:(_theme$headerBgColor=theme.headerBgColor)!=null?_theme$headerBgColor:'transparent'};var headerTextColor=theme.headerTextColor?{color:theme.headerTextColor}:{};var containerStyle=[styles.container,headerBg,formType==='slide'&&styles.slideStyle];var innerHeaderStyle=[styles.header,headerBg];var headerTextStyle=[styles.text,headerTextColor,{fontSize:theme.typography.header.fontSize}];var safeViewStyle=[styles.safeView,headerBg,headerTextColor];var showProgressbar=((_formConfig$propertie=formConfig.properties)==null?void 0:(_formConfig$propertie2=_formConfig$propertie.advanced)==null?void 0:_formConfig$propertie2.showProgressbar)&&!((_formConfig$propertie3=formConfig.properties)!=null&&(_formConfig$propertie4=_formConfig$propertie3.advanced)!=null&&_formConfig$propertie4.toggleDotview);return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[formType==='modal'&&(0,_jsxRuntime.jsx)(_reactNative.StatusBar,{backgroundColor:headerBg.backgroundColor}),(0,_jsxRuntime.jsxs)(_reactNative.SafeAreaView,{style:safeViewStyle,children:[showProgressbar&&(0,_jsxRuntime.jsx)(_Progress.default,{}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:containerStyle,onLayout:onLayout,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:innerHeaderStyle,children:[(0,_jsxRuntime.jsx)(_Ripple.Ripple,{style:buttonStyle,rippleColor:iconStyle.color,onPress:onPressLeft,accessible:true,accessibilityLabel:"Close",accessibilityRole:"button",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{accessible:false,style:iconStyle,children:"\xD7"})}),title&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:headerTextStyle,children:title})]})})]})]});}var styles=_reactNative.StyleSheet.create({container:{flex:0,alignSelf:'stretch',flexDirection:'row',justifyContent:'flex-start',alignItems:'center',justifyContent:'center',paddingHorizontal:0,zIndex:10,position:'relative',overflow:'hidden'},slideStyle:{borderTopLeftRadius:20,borderTopRightRadius:20},header:{justifyContent:'flex-start',alignItems:'center',flexDirection:'row',flex:1,paddingHorizontal:(0,_styles.spacing)(1),paddingVertical:(0,_styles.spacing)(1.5)},safeView:{shadowColor:'#000',shadowRadius:1,shadowOpacity:0.01,shadowOffset:{height:1,width:0},zIndex:11,elevation:1},text:Object.assign({},_styles.baseTheme.typography.header,{flex:1,textAlign:'left',marginLeft:(0,_styles.spacing)(1)})});