native-forms-test
Version:
Build your own forms, surveys and polls for your React Native apps.
1 lines • 4.37 kB
JavaScript
var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard"),_interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")),_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_theme=require("../theme"),_icons=require("../assets/icons"),_QuestionHeader=_interopRequireDefault(require("../components/QuestionHeader")),_utils=require("../utils"),SingleSelection=function(a){var b=a.form,c=a.block,d=a.isPreview,e=a.currentPageIndex,f=a.blockIndex,g=a.allBlocks,h=b.backgroundColor,j=void 0===h?_theme.colors.white:h,k=b.color,l=void 0===k?_theme.colors.main:k,m=b.textColor,n=void 0===m?_theme.colors.primary:m,o=c.answers,p=c.other,q=void 0===p?{}:p,r=(0,_utils.lightOrDark)(j),s=!!c.value&&0===o.filter(function(b){return b.value===c.value}).length,t=(0,_react.useState)(s),u=(0,_slicedToArray2.default)(t,2),v=u[0],w=u[1],x=(0,_react.useState)(s?c.value:""),y=(0,_slicedToArray2.default)(x,2),z=y[0],A=y[1],B=(0,_react.useState)(c.value),C=(0,_slicedToArray2.default)(B,2),D=C[0],E=C[1];(0,_react.useEffect)(function(){if(!D&&c.value){var a=!!c.value&&0===o.filter(function(b){return b.value===c.value}).length;w(a,c.value),A(a?c.value:""),E(c.value)}},[o,c.value,D]);var F=function(a){return function(){d||(a===q.label?(c.value=z,E(""),w(!v),G("")):(c.value=a,E(a),w(!1)))}},G=function(a){c.value=a,A(a)},H={borderColor:v?l+"80":"dark"===r?_theme.colors.darkgrey:_theme.colors.border,borderWidth:1,borderStyle:"solid",backgroundColor:v?l+"10":j},I={backgroundColor:v?l:j,borderColor:v?"transparent":"dark"===r?_theme.colors.white:_theme.colors.lightgrey,borderWidth:1,borderStyle:"solid"},J={fontWeight:v?"bold":"android"===_reactNative.Platform.OS?"400":"500",color:v?l:n,opacity:v?1:.9,fontSize:15},K={color:n,borderColor:"dark"===r?_theme.colors.darkgrey:_theme.colors.buttonBorder,backgroundColor:j};return _react.default.createElement(_reactNative.View,{style:styles.container},_react.default.createElement(_QuestionHeader.default,{form:b,block:c,currentPageIndex:e,blockIndex:f,allBlocks:g}),_react.default.createElement(_reactNative.View,{style:styles.answersContainer},o.map(function(a,b){var c=a.value,d=D===c,e={borderColor:d?l+"80":"dark"===r?_theme.colors.darkgrey:_theme.colors.border,borderWidth:1,borderStyle:"solid",backgroundColor:d?l+"10":j},f={backgroundColor:d?l:j,borderColor:d?"transparent":"dark"===r?_theme.colors.white:_theme.colors.lightgrey,borderWidth:1,borderStyle:"solid"},g={fontWeight:d?"bold":"android"===_reactNative.Platform.OS?"400":"500",color:d?l:n,opacity:d?1:.9,fontSize:15};return _react.default.createElement(_reactNative.TouchableOpacity,{key:c+b,onPress:F(c),activeOpacity:.5,style:[styles.answer,e]},_react.default.createElement(_reactNative.View,{style:[styles.box,f]},d&&_react.default.createElement(_icons.CheckIcon,{size:12,color:_theme.colors.white})),_react.default.createElement(_reactNative.Text,{style:g},c))}),q.label&&_react.default.createElement(_react.Fragment,null,_react.default.createElement(_reactNative.TouchableOpacity,{onPress:F(q.label),activeOpacity:.5,style:[styles.answer,H]},_react.default.createElement(_reactNative.View,{style:[styles.box,I]},v&&_react.default.createElement(_icons.CheckIcon,{size:12})),_react.default.createElement(_reactNative.Text,{style:J},q.label)),v&&_react.default.createElement(_reactNative.TextInput,{editable:!d,maxLength:500,style:[K,styles.input],onChangeText:G,value:z,placeholder:q.placeholder||"Enter here..."}))))},styles=_reactNative.StyleSheet.create({container:{display:"flex",flexDirection:"column",alignItems:"center"},answersContainer:{display:"flex",flexDirection:"column",width:"100%",backgroundColor:"transparent",maxWidth:_theme.MAX_FORM_WIDTH,paddingVertical:24,paddingHorizontal:22},answer:{display:"flex",flexDirection:"row",width:"100%",alignItems:"center",padding:16,borderRadius:6,marginBottom:20},box:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,borderRadius:16,marginRight:16},input:{borderWidth:1,borderStyle:"solid",borderRadius:6,fontSize:15,minHeight:46,maxHeight:46,padding:16,width:"100%"}}),_default=(0,_react.memo)(SingleSelection);exports.default=_default;