license import React from 'react' ; import { ImageProps , NativeSyntheticEvent , Platform , StyleProp , StyleSheet , TextInput , TextInputFocusEventData , TextInputProps , TextStyle , View , ViewProps , ViewStyle , } from 'react-native' ; import { EvaSize , EvaStatus , FalsyFC , FalsyText , FlexViewCrossStyleProps , PropsService , RenderProp , WebEventResponder , WebEventResponderCallbacks , WebEventResponderInstance , Overwrite , LiteralUnion , TouchableWithoutFeedback , } from '../../devsupport' ; import { Interaction , styled , StyledComponentProps , StyleType , } from '../../theme' ; import { TextProps } from '../text/text.component' ; type InputStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'default' > ; } > ; export interface InputProps extends TextInputProps , InputStyledProps { status ? : EvaStatus ; size ? : EvaSize ; disabled ? : boolean ; label ? : RenderProp < TextProps > | React . ReactText ; caption ? : RenderProp < TextProps > | React . ReactText ; accessoryLeft ? : RenderProp < Partial < ImageProps > > ; accessoryRight ? : RenderProp < Partial < ImageProps > > ; textStyle ? : StyleProp < TextStyle > ; } export type InputElement = React . ReactElement < InputProps > ; extends React . Component property property property property property property property property property property property property property property overview-example overview-example overview-example overview-example overview-example overview-example overview-example @ styled ( 'Input' ) export class Input extends React . Component < InputProps > implements WebEventResponderCallbacks { private textInputRef = React . createRef < TextInput > ( ) ; private webEventResponder : WebEventResponderInstance = WebEventResponder . create ( this ) ; public focus = ( ) : void => { this . textInputRef . current ?. focus ( ) ; } ; public blur = ( ) : void => { this . textInputRef . current ?. blur ( ) ; } ; public isFocused = ( ) : boolean => { return this . textInputRef . current ?. isFocused ( ) ; } ; public clear = ( ) : void => { this . textInputRef . current ?. clear ( ) ; } ; public onMouseEnter = ( ) : void => { this . props . eva . dispatch ( [ Interaction . HOVER ] ) ; } ; public onMouseLeave = ( ) : void => { this . props . eva . dispatch ( [ ] ) ; } ; private onTextFieldFocus = ( event ) : void => { this . props . eva . dispatch ( [ Interaction . FOCUSED ] ) ; this . props . onFocus && this . props . onFocus ( event ) ; } ; private onTextFieldBlur = ( event ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onBlur && this . props . onBlur ( event ) ; } ; private getComponentStyle = ( source ) => { const flatStyles = StyleSheet . flatten ( this . props . style ) ; const { rest : inputContainerStyle , ... containerStyle } = PropsService . allWithRest ( flatStyles , FlexViewCrossStyleProps ) ; const { textMarginHorizontal , textFontFamily , textFontSize , textFontWeight , textColor , placeholderColor , iconWidth , iconHeight , iconMarginHorizontal , iconTintColor , labelColor , labelFontSize , labelMarginBottom , labelFontWeight , labelFontFamily , captionMarginTop , captionColor , captionFontSize , captionFontWeight , captionFontFamily , ... containerParameters } = source ; return { container : containerStyle , inputContainer : { ... containerParameters , ... inputContainerStyle , } , text : { marginHorizontal : textMarginHorizontal , fontFamily : textFontFamily , fontSize : textFontSize , fontWeight : textFontWeight , color : textColor , } , placeholder : { color : placeholderColor , } , icon : { width : iconWidth , height : iconHeight , marginHorizontal : iconMarginHorizontal , tintColor : iconTintColor , } , label : { color : labelColor , fontSize : labelFontSize , marginBottom : labelMarginBottom , fontWeight : labelFontWeight , fontFamily : labelFontFamily , } , captionLabel : { fontSize : captionFontSize , fontWeight : captionFontWeight , fontFamily : captionFontFamily , color : captionColor , } , } ; } ; public render ( ) { const { eva , textStyle , label , caption , accessoryLeft , accessoryRight , testID , ... textInputProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; return ( < TouchableWithoutFeedback testID = { testID } style = { evaStyle . container } onPress = { this . focus } > < FalsyText style = { [ evaStyle . label , styles . label ] } component = { label } / > < View style = { [ evaStyle . inputContainer , styles . inputContainer ] } > < FalsyFC style = { evaStyle . icon } component = { accessoryLeft } / > < TextInput ref = { this . textInputRef } placeholderTextColor = { evaStyle . placeholder . color } { ... textInputProps } { ... this . webEventResponder . eventHandlers } style = { [ evaStyle . text , styles . text , platformStyles . text , textStyle ] } editable = { ! textInputProps . disabled } onFocus = { this . onTextFieldFocus } onBlur = { this . onTextFieldBlur } / > < FalsyFC style = { evaStyle . icon } component = { accessoryRight } / > < /View> < FalsyText style = { [ evaStyle . captionLabel , styles . captionLabel ] } component = { caption } / > < /TouchableWithoutFeedback>); } } const styles = StyleSheet . create ( { inputContainer : { flexDirection : 'row' , alignItems : 'center' , width : '100%' , } , text : { flexGrow : 1 , flexShrink : 1 , flexBasis : 'auto' , } , label : { textAlign : 'left' , } , captionLabel : { textAlign : 'left' , } , } ) ; const platformStyles = StyleSheet . create ( { text : Platform . select ( { default : null , android : { paddingVertical : 0 , marginVertical : - 2 , } , web : { outlineWidth : 0 , } , } ) , } ) ;