license import React from 'react' ; import { GestureResponderEvent , ImageProps , NativeSyntheticEvent , TargetedEvent , } from 'react-native' ; import { FalsyFC , RenderProp , TouchableWeb , TouchableWebElement , TouchableWebProps , Overwrite , LiteralUnion , } from '../../devsupport' ; import { Interaction , styled , StyledComponentProps , StyleType , } from '../../theme' ; type TopNavigationActionStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'default' | 'control' > ; } > ; export interface TopNavigationActionProps extends TouchableWebProps , TopNavigationActionStyledProps { icon ? : RenderProp < Partial < ImageProps > > ; } export type TopNavigationActionElement = React . ReactElement < TopNavigationActionProps > ; extends React . Component property property property overview-example @ styled ( 'TopNavigationAction' ) export class TopNavigationAction extends React . Component < TopNavigationActionProps > { public onBlur = ( event ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onBlur && this . props . onBlur ( event ) ; } ; private onMouseEnter = ( event ) : void => { this . props . eva . dispatch ( [ Interaction . HOVER ] ) ; this . props . onMouseEnter && this . props . onMouseEnter ( event ) ; } ; private onMouseLeave = ( event ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onMouseLeave && this . props . onMouseLeave ( event ) ; } ; private onFocus = ( event ) : void => { this . props . eva . dispatch ( [ Interaction . FOCUSED ] ) ; this . props . onFocus && this . props . onFocus ( event ) ; } ; 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 { iconTintColor , iconWidth , iconHeight , iconMarginHorizontal , } = source ; return { container : { marginHorizontal : iconMarginHorizontal , } , icon : { width : iconWidth , height : iconHeight , tintColor : iconTintColor , } , } ; } ; public render ( ) { const { eva , style , icon , ... touchableProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; return ( < TouchableWeb { ... touchableProps } style = { [ evaStyle . container , style ] } onMouseEnter = { this . onMouseEnter } onMouseLeave = { this . onMouseLeave } onFocus = { this . onFocus } onBlur = { this . onBlur } onPressIn = { this . onPressIn } onPressOut = { this . onPressOut } > < FalsyFC style = { evaStyle . icon } component = { icon } / > < /TouchableWeb>); } }