import React from 'react' ; import { Text as RNText , StyleSheet , TextProps as RNTextProps , TextStyle , Animated , StyleProp } from 'react-native' ; import _ from 'lodash' ; import Tooltip from '../Tooltip' ; import { rnTextType , getTextPartsByHighlight , sliceText } from '../utils/rn-text' ; export type RnTextProps = RNTextProps & { type ? : 'header' | 'title' | 'label' | 'subLabel' ; label ? : string ; color ? : string ; center ? : boolean ; uppercase ? : boolean ; animated ? : boolean ; highlightText ? : string ; highlightTextStyle ? : TextStyle ; backgroundColor ? : any ; tooltipProps ? : { number ? : number ; content ? : string ; } ; children ? : React . ReactNode ; style ? : StyleProp < TextStyle | Animated . AnimatedProps < TextStyle > > ; } ; const TooltipContainer = ( { content , children } ) => { return content ? < Tooltip title = { content } > { children } < /Tooltip> : <React.Fragment>{children}</React . Fragment > ; } ; export default ( props ) => { const { type , color , center , uppercase , animated , backgroundColor , style , children , label , highlightText , highlightTextStyle , tooltipProps = { number : 0 , content : '' , } , ... others } = props ; const { number , content } = tooltipProps ; const TextContainer = animated ? Animated . createAnimatedComponent ( RNText ) : RNText ; param children returns const renderText = ( children ) : any => { if ( ! _ . isEmpty ( highlightText ) ) { if ( _ . isArray ( children ) ) { return children . map ( ( child ) => renderText ( child ) ) ; } if ( _ . isString ( children ) ) { const textParts = getTextPartsByHighlight ( children , highlightText ) ; return textParts . map ( ( text , index ) => { const shouldHighlight = _ . lowerCase ( text ) === _ . lowerCase ( highlightText ) ; return ( < RNText key = { index } style = { shouldHighlight ? [ styles . highlight , highlightTextStyle ] : styles . notHighlight } > { text } < /RNText>); } ) ; } } return children ; } ; const textStyle = [ { ... rnTextType ( type ) , } , styles . container , color && { color } , backgroundColor && { backgroundColor } , center && styles . centered , uppercase && styles . uppercase , style , ] ; return ( < TooltipContainer content = { content } > < TextContainer { ... others } style = { textStyle } > { number ? sliceText ( renderText ( label || children ) , number ) : renderText ( label || children ) } < /TextContainer> < /TooltipContainer>); } ; const styles = StyleSheet . create ( { container : { backgroundColor : 'transparent' , textAlign : 'left' , } , centered : { textAlign : 'center' , } , uppercase : { textTransform : 'uppercase' , } , highlight : { color : '#333333' , fontSize : 14 , } , notHighlight : { color : undefined , } , } ) ;