@devloops/react-native-variant/lib/module/Components/TextField/TextFieldOutlined.js

react-native material ui library

import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/devloops/Desktop/reactNative/reactNativeMUI/src/Components/TextField/TextFieldOutlined.tsx";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){_defineProperty(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}import React,{useState,useRef,useEffect}from'react';import{View,TextInput,Animated,Easing,StyleSheet,Keyboard}from'react-native';import*as Palette from'../../Helpers/palette';import BottomBar from'./BottomHelper';var TextFieldOutlined=function TextFieldOutlined(_ref){var defaultValue=_ref.defaultValue,label=_ref.label,value=_ref.value,error=_ref.error,success=_ref.success,warning=_ref.warning,count=_ref.count,Left=_ref.Left,Right=_ref.Right,onChange=_ref.onChange,disabled=_ref.disabled,ripple=_ref.ripple,helperText=_ref.helperText,bottomWrapperStyle=_ref.bottomWrapperStyle,clearButtonMode=_ref.clearButtonMode,placeholder=_ref.placeholder,min=_ref.min,max=_ref.max,rest=_objectWithoutProperties(_ref,["defaultValue","label","value","error","success","warning","count","Left","Right","onChange","disabled","ripple","helperText","bottomWrapperStyle","clearButtonMode","placeholder","min","max"]);var _useState=useState({active:false,nativeEvent:{}}),_useState2=_slicedToArray(_useState,2),state=_useState2[0],setStateBase=_useState2[1];var labelAnim=useRef(new Animated.Value(0)).current;var setState=function setState(newState){return setStateBase(_objectSpread({},state,{},newState));};useEffect(function(){var count=value?value.length:defaultValue?defaultValue.length:0;setState({nativeEvent:{eventCount:count,text:value||defaultValue}});count>0&&_active();},[]);var _active=function _active(){setState({active:true});Animated.timing(labelAnim,{toValue:1,easing:Easing.bezier(0.25,0.5,0.75,0.1),duration:200}).start();},_passive=function _passive(){if(state.nativeEvent.eventCount>0)return;setState({active:false});Animated.timing(labelAnim,{toValue:0,easing:Easing.bezier(1,0.75,0.5,0.25),duration:200}).start();},_onChange=function _onChange(prop){prop.nativeEvent.eventCount=prop.nativeEvent.text.length;setState({nativeEvent:prop.nativeEvent});if(max!=undefined&&prop.nativeEvent.text.length>max)return;onChange&&onChange(prop);};var borderWidth=disabled?1.5:1,variantStyle={backgroundColor:'transparent',borderRadius:4,borderWidth:borderWidth,paddingTop:0},labelPosArr=[16,-10],labelFontSize=labelAnim.interpolate({inputRange:[0,1],outputRange:[16,12]}),labelLocationTranslateY=labelAnim.interpolate({inputRange:[0,1],outputRange:labelPosArr}),colors=state.active?Palette.blue500:Palette.grey700;colors=error?Palette.red500:warning?Palette.amber800:success?Palette.green500:colors;var style=StyleSheet.create({container:{minHeight:56,margin:8},wrapper:{borderColor:colors,paddingHorizontal:12},contentWrapper:{flexDirection:'row',alignItems:'center',alignContent:'center',minHeight:56,minWidth:280,margin:0,padding:0},label:{position:'absolute',backgroundColor:state.active?'white':'transparent',paddingHorizontal:4,top:0,left:Left?40:12},labelWrapper:{flex:1,zIndex:999,width:'auto',padding:3},leftAction:{fontSize:20,color:colors,marginRight:4,marginLeft:0,paddingTop:14,paddingBottom:4,marginBottom:4},rightAction:{fontSize:20,color:colors,marginLeft:4,marginRight:0,marginBottom:4},fieldInput:{flexGrow:1,height:'100%',fontSize:16,color:Palette.grey700,marginHorizontal:8,minHeight:28},bottomWrapper:_objectSpread({flexDirection:'row',justifyContent:'space-between',paddingLeft:14,paddingRight:8},bottomWrapperStyle),helperWrapper:{flexDirection:'row',alignItems:'center',alignSelf:'center',marginVertical:6},helperText:{height:16,color:colors,fontSize:12}});return React.createElement(View,{style:style.container,__source:{fileName:_jsxFileName,lineNumber:204}},React.createElement(Animated.View,{style:[style.wrapper,variantStyle],__source:{fileName:_jsxFileName,lineNumber:205}},label&&React.createElement(Animated.View,{style:[style.label,{transform:[{translateY:labelLocationTranslateY}]}],__source:{fileName:_jsxFileName,lineNumber:207}},React.createElement(View,{style:style.labelWrapper,__source:{fileName:_jsxFileName,lineNumber:218}},React.createElement(Animated.Text,{style:{color:colors,fontSize:labelFontSize},__source:{fileName:_jsxFileName,lineNumber:219}},label))),React.createElement(View,{style:style.contentWrapper,__source:{fileName:_jsxFileName,lineNumber:229}},Left&&React.createElement(Left,{style:style.leftAction,__source:{fileName:_jsxFileName,lineNumber:230}}),React.createElement(TextInput,_extends({placeholderTextColor:Palette.grey700,placeholder:state.active?'':placeholder,style:style.fieldInput,onChange:_onChange,onFocus:_active,onBlur:_passive,clearButtonMode:clearButtonMode,blurOnSubmit:true,onSubmitEditing:Keyboard.dismiss},rest,{__source:{fileName:_jsxFileName,lineNumber:231}})),Right&&React.createElement(Right,{style:style.rightAction,__source:{fileName:_jsxFileName,lineNumber:244}}))),React.createElement(BottomBar,{helperText:helperText,success:success,error:error,warning:warning,count:count,max:max,bottomWrapperStyle:style.bottomWrapper,helperTextStyle:style.helperText,helperWrapperStyle:style.helperWrapper,eventCount:state.nativeEvent?state.nativeEvent.eventCount:0,__source:{fileName:_jsxFileName,lineNumber:247}}));};export default TextFieldOutlined;
//# sourceMappingURL=TextFieldOutlined.js.map