import React from 'react' ; import { TouchableOpacity } from 'react-native' ; import { Enhancer } from '../enhancer' ; import ButtonContent from './ButtonContent' ; import { useThemedStyle , useOverrideComponent } from '../../hooks' ; import { stylesCreator } from './styles' ; import { BUTTON_KIND , BUTTON_SHAPE , BUTTON_SIZE } from './constants' ; import type { ButtonProps } from './types' ; const Button = ( { overrides , kind = BUTTON_KIND . primary , size = BUTTON_SIZE . default , shape = BUTTON_SHAPE . default , isLoading = false , isSelected = false , disabled = false , $style , onPress , startEnhancer , endEnhancer , children , } ) => { const styles = useThemedStyle ( stylesCreator , kind , size , shape , isLoading , isSelected , disabled ) ; const [ BaseButton , baseButtonProps ] = useOverrideComponent ( TouchableOpacity , [ styles . baseButton , $style ] , overrides ?. baseButton ) ; const [ StartEnhancer , startEnhancerProps ] = useOverrideComponent ( Enhancer , styles . startEnhancer , overrides ?. startEnhancer ) ; const [ EndEnhancer , endEnhancerProps ] = useOverrideComponent ( Enhancer , styles . endEnhancer , overrides ?. endEnhancer ) ; const [ Content , contentProps ] = useOverrideComponent ( ButtonContent , styles . content , overrides ?. content ) ; return ( < BaseButton { ... baseButtonProps } onPress = { onPress } > < > < StartEnhancer { ... startEnhancerProps } children = { startEnhancer } / > < Content { ... contentProps } children = { children } / > < EndEnhancer { ... endEnhancerProps } children = { endEnhancer } / > < /> < /BaseButton>); } ; Button . displayName = 'Button' ; export default Button ;