import React , { FunctionComponent } from 'react' ; import { View , Text , TouchableHighlight , TouchableHighlightProps , ActivityIndicator , GestureResponderEvent , } from 'react-native' ; import { useStyle , useIndicatorColor } from './style' ; interface ButtonProps extends TouchableHighlightProps { children ? : React . ReactNode ; description description type ? : 'default' | 'primary' | 'info' | 'warning' | 'danger' ; description description plain ? : boolean ; description description hairline ? : boolean ; description description loading ? : boolean ; description description loadingText ? : string ; description description square ? : boolean ; description description round ? : boolean ; description description color ? : string ; description description size ? : 'large' | 'normal' | 'small' | 'mini' ; description description onDoublePress ? : ( event : GestureResponderEvent ) => void ; description description delayDoublePress ? : number ; } const Button = props => { const styles = useStyle ( props ) ; const indicatorColor = useIndicatorColor ( props ) ; const { style , ... restProps } = props ; let lastTime = 0 ; let clickCount = 1 ; let timeout = null ; const _onPress = ( event ) => { const now = Date . now ( ) ; if ( timeout ) { clearTimeout ( timeout ) ; } timeout = setTimeout ( ( ) => { props . onPress ( event ) ; clickCount = 1 ; lastTime = 0 ; } , props . delayDoublePress ) ; if ( clickCount === 2 && now - lastTime <= props . delayDoublePress ) { clearTimeout ( timeout ) ; clickCount = 1 ; lastTime = 0 ; props . onDoublePress ( event ) ; } else { clickCount ++ ; lastTime = now ; } } ; return ( < TouchableHighlight style = { [ styles . wrapper , style ] } { ... restProps } onPress = { _onPress } > < View style = { styles . container } > { props . loading ? ( < > < ActivityIndicator size = "small" animating color = { indicatorColor } style = { styles . indicator } / > { props . loadingText ? < Text style = { styles . textStyle } > { props . loadingText } < /Text> : null} < />) : null} { typeof props . children === 'string' ? ( < Text style = { styles . textStyle } > { props . children } < /Text>) : (props.children)} < /View> < /TouchableHighlight>); } ; Button . defaultProps = { type : 'default' , plain : false , hairline : false , loading : false , square : false , round : false , size : 'normal' , color : '' , onDoublePress : ( ) => { } , delayDoublePress : 200 , } ; Button . displayName = 'Button' ; export default Button ;