license import React from 'react' ; import { GestureResponderEvent , StyleSheet , View , ViewProps , } from 'react-native' ; import { EvaStatus , FalsyFC , RenderProp , TouchableWeb , TouchableWebElement , TouchableWebProps , Overwrite , LiteralUnion , } from '../../devsupport' ; import { Interaction , styled , StyledComponentProps , StyleType , } from '../../theme' ; import { Divider } from '../divider/divider.component' ; type CardStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'filled' | 'outline' > ; } > ; export interface CardProps extends TouchableWebProps , CardStyledProps { children ? : React . ReactNode ; header ? : RenderProp < ViewProps > ; footer ? : RenderProp < ViewProps > ; accent ? : RenderProp < ViewProps > ; status ? : EvaStatus ; } export type CardElement = React . ReactElement < CardProps > ; extends React . Component property property property property property property property overview-example overview-example overview-example @ styled ( 'Card' ) export class Card extends React . Component < CardProps > { 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 { bodyPaddingVertical , bodyPaddingHorizontal , accentHeight , accentBackgroundColor , headerPaddingVertical , headerPaddingHorizontal , footerPaddingVertical , footerPaddingHorizontal , ... containerParameters } = source ; return { container : containerParameters , body : { paddingVertical : bodyPaddingVertical , paddingHorizontal : bodyPaddingHorizontal , } , accent : { height : accentHeight , backgroundColor : accentBackgroundColor , } , header : { paddingHorizontal : headerPaddingHorizontal , paddingVertical : headerPaddingVertical , } , footer : { paddingHorizontal : footerPaddingHorizontal , paddingVertical : footerPaddingVertical , } , } ; } ; private renderStatusAccent = ( evaStyle ) : React . ReactElement => { return ( < View style = { evaStyle } / > ) ; } ; public render ( ) { const { eva , style , children , accent , header , footer , ... touchableProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; return ( < TouchableWeb { ... touchableProps } style = { [ styles . container , evaStyle . container , style ] } onPressIn = { this . onPressIn } onPressOut = { this . onPressOut } > < FalsyFC style = { evaStyle . accent } fallback = { this . renderStatusAccent ( evaStyle . accent ) } component = { accent } / > < FalsyFC style = { [ styles . transparent , evaStyle . header ] } component = { header } / > { header && < Divider />} < View style = { evaStyle . body } > { children } < /View> { footer && < Divider />} < FalsyFC style = { [ styles . transparent , evaStyle . footer ] } component = { footer } / > < /TouchableWeb>); } } const styles = StyleSheet . create ( { container : { overflow : 'hidden' , } , transparent : { backgroundColor : 'transparent' , } , } ) ;