mopinion-react-native-sdk/dist/components/Progress.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=Progress;var _react=require("react");var _reactNative=require("react-native");var _FormContext=require("./FormContext");var _styles=require("../styles");var _Icon=_interopRequireDefault(require("./Icon"));var _jsxRuntime=require("react/jsx-runtime");var styles=_reactNative.StyleSheet.create({barContainer:{height:4,width:'100%'},bar:{backgroundColor:'blue',height:4},dotProgressContainer:{justifyContent:'space-between',alignItems:'center',flexDirection:'row',width:'80%',marginTop:(0,_styles.spacing)(2),alignSelf:'center'},dot:{width:24,height:24,borderRadius:24,justifyContent:'center',alignItems:'center',backgroundColor:'#b6b6b6',marginHorizontal:(0,_styles.spacing)(1)},line:{height:1,flex:1,backgroundColor:'#ddd'},text:{fontSize:12,fontWeight:'600',color:'#fff'}});function Progress(_ref){var _ref$variant=_ref.variant,variant=_ref$variant===void 0?'bar':_ref$variant;if(variant==='dot'){return(0,_jsxRuntime.jsx)(ProgressDots,{});}return(0,_jsxRuntime.jsx)(ProgressBar,{});}function ProgressBar(){var theme=(0,_styles.useTheme)();var _useFormContext=(0,_FormContext.useFormContext)(),currentPage=_useFormContext.currentPage,pages=_useFormContext.pages,formCompletionPercentage=_useFormContext.formCompletionPercentage;var pageCount=pages.length;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.barContainer,{backgroundColor:theme.progressBgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{"aria-label":`Page ${currentPage} of ${pageCount}`,style:[styles.bar,{width:`${formCompletionPercentage}%`,backgroundColor:theme.progressColor}]})});}function ProgressDots(){var _useFormContext2=(0,_FormContext.useFormContext)(),currentPage=_useFormContext2.currentPage,pages=_useFormContext2.pages;var pageCount=pages.length;var theme=(0,_styles.useTheme)();return(0,_jsxRuntime.jsx)(_reactNative.View,{"aria-label":`Page ${currentPage} of ${pageCount}`,style:styles.dotProgressContainer,children:pages.map(function(_,index){var pageNumber=index+1;return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,{backgroundColor:theme.darkGreyAccentColor},pageNumber<=currentPage&&{backgroundColor:theme.progressColor}],children:currentPage>pageNumber?(0,_jsxRuntime.jsx)(_Icon.default,{style:styles.text,icon:"check"}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.text,children:pageNumber})}),pageNumber!==pages.length&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.line,{backgroundColor:theme.borderColor}]})]},`dot${pageNumber}`);})});}