mopinion-react-native-sdk/dist/components/Control.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=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _Ripple=require("./Ripple");var _styles=require("../styles");var _Images=require("./Images");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;}function _callSuper(t,o,e){return o=(0,_getPrototypeOf2.default)(o),(0,_possibleConstructorReturn2.default)(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2.default)(t).constructor):o.apply(t,e));}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}var Control=function(_Component){function Control(props){var _this;(0,_classCallCheck2.default)(this,Control);_this=_callSuper(this,Control,[props]);_this.state={focus:false,circle:new _reactNative.Animated.Value(0),inside:new _reactNative.Animated.Value(0)};return _this;}(0,_inherits2.default)(Control,_Component);return(0,_createClass2.default)(Control,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){_reactNative.Animated.timing(this.state.inside,{toValue:nextProps.checked?1:0,duration:125,useNativeDriver:false}).start();}},{key:"_focus",value:function _focus(press){_reactNative.Animated.timing(this.state.circle,{toValue:press?1:0,duration:175,useNativeDriver:false}).start();}},{key:"_centerElement",value:function _centerElement(){var _this$props=this.props,checked=_this$props.checked,size=_this$props.size,type=_this$props.type,borderWidth=_this$props.borderWidth,theme=_this$props.theme;var innerColor=theme.selectedControlColor;var animatedStyle={position:'absolute',left:-borderWidth,top:-borderWidth,borderRadius:size/2,width:size,height:size,opacity:this.state.circle.interpolate({inputRange:[0,1],outputRange:[0,0.2]}),backgroundColor:innerColor,transform:[{scale:this.state.circle.interpolate({inputRange:[0,1],outputRange:[0,2.25]})}],zIndex:10};if(type==='radio'){var innerStyle={width:size/2,height:size/2,borderRadius:size/2/2,backgroundColor:this.state.inside.interpolate({inputRange:[0,1],outputRange:['transparent',innerColor]}),transform:[{scale:this.state.inside.interpolate({inputRange:[0,1],outputRange:[0,1]})}],position:'absolute',top:size/4-borderWidth,left:size/4-borderWidth};return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:animatedStyle}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:innerStyle})]});}else if(type==='checkbox'){var _innerStyle={width:size,height:size,position:'absolute',top:-borderWidth,left:-borderWidth,opacity:this.state.inside.interpolate({inputRange:[0,1],outputRange:[0,1]}),transform:[{scale:this.state.inside.interpolate({inputRange:[0,1],outputRange:[0,1]})}]};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:'relative'},children:[(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:animatedStyle}),(0,_jsxRuntime.jsx)(_reactNative.Animated.Image,{style:_innerStyle,source:{uri:_Images.base64Images.icons.ic_check_white}})]});}}},{key:"render",value:function render(){var _this2=this;var _this$props2=this.props,type=_this$props2.type,size=_this$props2.size,checked=_this$props2.checked,onPress=_this$props2.onPress,borderWidth=_this$props2.borderWidth,theme=_this$props2.theme;var outerColor=theme.selectedControlColor;var outerStyle={borderColor:checked?outerColor:'rgba(0,0,0,.54)',width:size,height:size,borderRadius:type==='radio'?size/2:3,borderWidth:borderWidth};if(type=='checkbox'&&checked){outerStyle.backgroundColor=outerColor;}var labelStyle={color:theme.darkTextColor};return(0,_jsxRuntime.jsxs)(_Ripple.Ripple,{style:styles.ripple,onPressIn:function onPressIn(){_this2._focus(true);},onPressOut:function onPressOut(){_this2._focus(false);onPress();},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[outerStyle,styles.selectable],children:this._centerElement()}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.label,labelStyle],children:this.props.label})]});}}]);}(_react.Component);Control.defaultProps={size:18,innerColor:'#03a9f4',outerColor:'#03a9f4',labelColor:'#212121',isSelected:false,onPress:function onPress(){return null;},borderWidth:2};var styles=_reactNative.StyleSheet.create({ripple:{justifyContent:'flex-start',flex:1,flexDirection:'row',paddingVertical:(0,_styles.spacing)(1.5),paddingLeft:(0,_styles.spacing)(0.5),borderRadius:_styles.baseTheme.borderRadius,alignItems:'center'},label:Object.assign({alignSelf:'center',textAlign:'left',marginLeft:(0,_styles.spacing)(1.5)},_styles.baseTheme.typography.base),selectable:{alignSelf:'flex-start',zIndex:10}});var _default=exports.default=(0,_styles.withTheme)(Control);