license import React from 'react' ; import { View , ViewProps , } from 'react-native' ; import { ChildrenWithProps , Overwrite , LiteralUnion , } from '../../devsupport' ; import { styled , StyledComponentProps , StyleType , } from '../../theme' ; import { RadioElement , RadioProps , } from '../radio/radio.component' ; type RadioGroupStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'default' > ; } > ; export interface RadioGroupProps extends ViewProps , RadioGroupStyledProps { children ? : ChildrenWithProps < RadioProps > ; selectedIndex ? : number ; onChange ? : ( index : number ) => void ; } export type RadioGroupElement = React . ReactElement < RadioGroupProps > ; extends React . Component property property property overview-example @ styled ( 'RadioGroup' ) export class RadioGroup extends React . Component < RadioGroupProps > { static defaultProps : Partial < RadioGroupProps > = { selectedIndex : - 1 , } ; private onRadioChange = ( index ) : void => { this . props . onChange && this . props . onChange ( index ) ; } ; private getComponentStyle = ( source ) => { const { itemMarginVertical , ... containerParameters } = source ; return { container : containerParameters , item : { marginVertical : itemMarginVertical , } , } ; } ; private renderRadioElements = ( source , style ) : RadioElement [ ] => { return React . Children . map ( source , ( element , index ) : RadioElement => { return React . cloneElement ( element , { key : index , style : [ style , element . props . style ] , checked : this . props . selectedIndex === index , onChange : ( ) => this . onRadioChange ( index ) , } ) ; } ) ; } ; public render ( ) { const { eva , style , children , ... viewProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; const radioElements = this . renderRadioElements ( children , evaStyle . item ) ; return ( < View { ... viewProps } style = { [ evaStyle . container , style ] } > { radioElements } < /View>); } }