license import React from 'react' ; import { StyleSheet , View , ViewProps , ViewStyle , } from 'react-native' ; import { ChildrenWithProps , EvaSize , EvaStatus , Overwrite , LiteralUnion , } from '../../devsupport' ; import { styled , StyledComponentProps , StyleType , } from '../../theme' ; import { ButtonElement , ButtonProps , } from '../button/button.component' ; type ButtonGroupStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'filled' | 'outline' | 'ghost' > ; } > ; export interface ButtonGroupProps extends ViewProps , ButtonGroupStyledProps { children : ChildrenWithProps < ButtonProps > ; status ? : EvaStatus ; size ? : EvaSize ; } export type ButtonGroupElement = React . ReactElement < ButtonGroupProps > ; extends React . Component property property property property property overview-example overview-example overview-example overview-example overview-example overview-example @ styled ( 'ButtonGroup' ) export class ButtonGroup extends React . Component < ButtonGroupProps > { private getComponentStyle = ( source ) => { const { dividerBackgroundColor , dividerWidth , ... containerParameters } = source ; return { container : { ... containerParameters , borderWidth : containerParameters . borderWidth + 0.25 , } , button : { borderWidth : dividerWidth , borderColor : dividerBackgroundColor , } , } ; } ; private isFirstElement = ( index ) : boolean => { return index === 0 ; } ; private isLastElement = ( index ) : boolean => { return index === React . Children . count ( this . props . children ) - 1 ; } ; private renderButtonElement = ( element , index , style ) : ButtonElement => { const { appearance , size , status } = this . props ; const { borderRadius } = style . container ; const { borderWidth , borderColor } = style . button ; const shapeStyle = ! this . isLastElement ( index ) && { borderEndWidth : borderWidth , borderEndColor : borderColor , } ; const startShapeStyle = this . isFirstElement ( index ) && { borderTopStartRadius : borderRadius , borderBottomStartRadius : borderRadius , } ; const endShapeStyle = this . isLastElement ( index ) && { borderTopEndRadius : borderRadius , borderBottomEndRadius : borderRadius , } ; return React . cloneElement ( element , { key : index , appearance : appearance , size : size , status : status , style : [ element . props . style , styles . button , shapeStyle , startShapeStyle , endShapeStyle ] , } ) ; } ; private renderButtonElements = ( source , style ) : ButtonElement [ ] => { return React . Children . map ( source , ( element , index ) : ButtonElement => { return this . renderButtonElement ( element , index , style ) ; } ) ; } ; public render ( ) { const { eva , style , children , ... viewProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; return ( < View { ... viewProps } style = { [ evaStyle . container , styles . container , style ] } > { this . renderButtonElements ( children , evaStyle ) } < /View>); } } const styles = StyleSheet . create ( { container : { flexDirection : 'row' , overflow : 'hidden' , } , button : { borderRadius : 0 , borderWidth : 0 , } , } ) ;