license import React from 'react' ; import { ImageProps , StyleSheet , View , ViewProps , } from 'react-native' ; import { FalsyFC , FalsyText , RenderProp , Overwrite , } from '../../devsupport' ; import { styled , StyleType , } from '../../theme' ; import { Popover , PopoverElement , PopoverProps , } from '../popover/popover.component' ; import { PopoverIndicator } from '../popover/popoverIndicator.component' ; import { TextProps } from '../text/text.component' ; type TooltipPopoverProps = Overwrite < PopoverProps , { children : RenderProp < TextProps > | React . ReactText ; } > ; export interface TooltipProps extends TooltipPopoverProps { accessoryLeft ? : RenderProp < Partial < ImageProps > > ; accessoryRight ? : RenderProp < Partial < ImageProps > > ; } export type TooltipElement = React . ReactElement < TooltipProps > ; extends React . Component method method property property property property property property property property property overview-example overview-example overview-example overview-example overview-example @ styled ( 'Tooltip' ) export class Tooltip extends React . Component < TooltipProps > { private popoverRef = React . createRef < Popover > ( ) ; public show = ( ) : void => { this . popoverRef . current ?. show ( ) ; } ; public hide = ( ) : void => { this . popoverRef . current ?. hide ( ) ; } ; private getComponentStyle = ( source ) => { const { indicatorBackgroundColor , iconWidth , iconHeight , iconMarginHorizontal , iconTintColor , textMarginHorizontal , textFontSize , textFontWeight , textFontFamily , textColor , ... containerParameters } = source ; return { container : containerParameters , indicator : { backgroundColor : indicatorBackgroundColor , } , icon : { width : iconWidth , height : iconHeight , marginHorizontal : iconMarginHorizontal , tintColor : iconTintColor , } , text : { marginHorizontal : textMarginHorizontal , fontSize : textFontSize , fontWeight : textFontWeight , fontFamily : textFontFamily , color : textColor , } , } ; } ; private renderPopoverIndicatorElement = ( props ) : React . ReactElement => { const evaStyle = this . getComponentStyle ( this . props . eva . style ) ; return ( < PopoverIndicator { ... props } style = { [ props . style , evaStyle . indicator ] } / > ) ; } ; public render ( ) { const { eva , style , accessoryLeft , accessoryRight , children , ... popoverProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; return ( < Popover { ... popoverProps } ref = { this . popoverRef } style = { [ evaStyle . container , style ] } indicator = { this . renderPopoverIndicatorElement } > < View style = { styles . content } > < FalsyFC style = { evaStyle . icon } component = { accessoryLeft } / > < FalsyText style = { evaStyle . text } component = { children } / > < FalsyFC style = { evaStyle . icon } component = { accessoryRight } / > < /View> < /Popover>); } } const styles = StyleSheet . create ( { content : { flexDirection : 'row' , justifyContent : 'center' , } , } ) ;