license import React from 'react' ; import { GestureResponderEvent , ImageProps , Platform , StyleSheet , View , ViewProps , } from 'react-native' ; import { FalsyFC , FalsyText , RenderProp , TouchableWeb , TouchableWebElement , TouchableWebProps , Overwrite , LiteralUnion , } from '../../devsupport' ; import { Interaction , styled , StyledComponentProps , StyleType , } from '../../theme' ; import { TextProps } from '../text/text.component' ; type ListItemStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'default' > ; } > ; export interface ListItemProps extends TouchableWebProps , ListItemStyledProps { title ? : RenderProp < TextProps > | React . ReactText ; description ? : RenderProp < TextProps > | React . ReactText ; accessoryLeft ? : RenderProp < Partial < ImageProps > > ; accessoryRight ? : RenderProp < ViewProps > ; children ? : React . ReactNode ; } export type ListItemElement = React . ReactElement < ListItemProps > ; extends React . Component property property property property property property overview-example overview-example @ styled ( 'ListItem' ) export class ListItem extends React . Component < ListItemProps > { private onPressIn = ( event ) : void => { this . props . eva . dispatch ( [ Interaction . ACTIVE ] ) ; this . props . onPressIn && this . props . onPressIn ( event ) ; } ; private onPressOut = ( event ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onPressOut && this . props . onPressOut ( event ) ; } ; private getComponentStyle = ( source ) => { const { iconWidth , iconHeight , iconMarginHorizontal , iconTintColor , titleMarginHorizontal , titleFontFamily , titleFontSize , titleFontWeight , titleColor , descriptionFontFamily , descriptionFontSize , descriptionFontWeight , descriptionColor , descriptionMarginHorizontal , accessoryMarginHorizontal , ... containerParameters } = source ; return { container : containerParameters , icon : { width : iconWidth , height : iconHeight , marginHorizontal : iconMarginHorizontal , tintColor : iconTintColor , } , title : { marginHorizontal : titleMarginHorizontal , fontFamily : titleFontFamily , fontSize : titleFontSize , fontWeight : titleFontWeight , color : titleColor , } , description : { color : descriptionColor , fontFamily : descriptionFontFamily , fontSize : descriptionFontSize , fontWeight : descriptionFontWeight , marginHorizontal : descriptionMarginHorizontal , } , accessory : { marginHorizontal : accessoryMarginHorizontal , } , } ; } ; private renderTemplateChildren = ( props , evaStyle ) : React . ReactFragment => { return ( < React . Fragment > < FalsyFC style = { evaStyle . icon } component = { props . accessoryLeft } / > < View style = { styles . contentContainer } > < FalsyText style = { [ evaStyle . title , styles . title ] } component = { props . title } / > < FalsyText style = { [ evaStyle . description , styles . description ] } component = { props . description } / > < /View> < FalsyFC style = { evaStyle . icon } component = { props . accessoryRight } / > < /React.Fragment>); } ; public render ( ) { const { eva , style , children , title , description , accessoryLeft , accessoryRight , ... touchableProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; return ( < TouchableWeb { ... touchableProps } style = { [ evaStyle . container , styles . container , webStyles . container , style ] } onPressIn = { this . onPressIn } onPressOut = { this . onPressOut } > { children || this . renderTemplateChildren ( this . props , evaStyle ) } < /TouchableWeb>); } } const styles = StyleSheet . create ( { container : { flexDirection : 'row' , alignItems : 'center' , } , contentContainer : { flex : 1 , } , title : { textAlign : 'left' , } , description : { textAlign : 'left' , } , } ) ; const webStyles = Platform . OS === 'web' && StyleSheet . create ( { container : { outlineWidth : 0 , } , } ) ;