@devloops/react-native-variant/lib/module/Components/FormControl/index.js

react-native material ui library

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/devloops/Desktop/reactNative/reactNativeMUI/src/Components/FormControl/index.tsx";import React,{useState,useEffect,useRef}from'react';import{View,Animated,Easing}from'react-native';import*as Palette from'../../Helpers/palette';import Icon from'../Core/Icon';import Color from'color';import Ripple from'../Core/Ripple';var FormControl=function FormControl(_ref){var _ref$type=_ref.type,type=_ref$type===void 0?'checkbox':_ref$type,_ref$color=_ref.color,color=_ref$color===void 0?Palette.blue500:_ref$color,_ref$size=_ref.size,size=_ref$size===void 0?16:_ref$size,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),selected=_useState2[0],setSelected=_useState2[1];var selectAnimation=useRef(new Animated.Value(selected?size:0)).current;useEffect(function(){Animated.timing(selectAnimation,{toValue:selected?size:0,duration:100,easing:Easing.cubic}).start();},[selected]);return React.createElement(View,{style:{alignSelf:'flex-start',borderRadius:30,overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:29}},React.createElement(Ripple,{rippleSequential:true,rippleColor:disabled?'#111111':color,onPress:disabled===false?function(){return setSelected(!selected);}:undefined,style:{padding:10},__source:{fileName:_jsxFileName,lineNumber:36}},React.createElement(Animated.View,{style:{overflow:'hidden',borderRadius:type==='radio'?30:2,width:size,height:size,backgroundColor:disabled?Color('#111111').fade(0.7).alpha(0.1).toString():'transparent',borderColor:disabled?Color('#111111').fade(0.4).alpha(0.2).toString():selectAnimation.interpolate({inputRange:[0,12],outputRange:['#111111',disabled?Color(color).darken(0.8).fade(0.5).toString():color]}),borderWidth:type==='radio'?1.5:1.5,alignItems:'center',justifyContent:'center'},__source:{fileName:_jsxFileName,lineNumber:41}},React.createElement(Animated.View,{style:[{borderRadius:type==='radio'?30:0,width:selectAnimation,height:selectAnimation,alignItems:'center',alignContent:'center',justifyContent:'center',backgroundColor:disabled?Color(color).darken(0.8).fade(0.8).toString():color}],__source:{fileName:_jsxFileName,lineNumber:74}},type==='checkbox'&&selected&&React.createElement(Icon,{name:"check",size:size-4,style:{marginTop:1.5,marginLeft:1},color:disabled&&selected?Color(color).darken(0.8).fade(0.8).toString():Color(color).isDark()?'white':'black',__source:{fileName:_jsxFileName,lineNumber:92}})))));};export default FormControl;
//# sourceMappingURL=index.js.map