import React , { Component } from 'react' ; import { ViewStyle , TextStyle , Text } from 'react-native' ; import ButtonGroup , { ButtonGroupProps } from '../ButtonGroup' ; import Button from '../Button' ; export interface TextColorType { actived ? : string ; unactived ? : string ; } export interface SegmentedControlProps < T > extends ButtonGroupProps { value ? : string [ ] | T [ ] ; selectedIndex ? : number ; renderItem ? : ( label : string | T , selectedIndex : number , props : ButtonGroupProps ) => JSX . Element ; onValueChange ? : ( label : string | T , selectedIndex : number ) => void ; textColor ? : TextColorType ; } export interface SegmentedControlState { selectedIndex : number ; } export default class SegmentedControl < T > extends Component < SegmentedControlProps < T > , SegmentedControlState > { constructor ( props ) { super ( props ) ; this . state = { selectedIndex : props . selectedIndex || 0 , } ; } static defaultProps : SegmentedControlProps < { } > = { value : [ ] , size : 'small' , selectedIndex : 0 , color : '#108ee9' , } ; handlePress = ( label , selectedIndex ) => { const { onValueChange } = this . props ; this . setState ( { selectedIndex } , ( ) => { onValueChange && onValueChange ( label , selectedIndex ) ; } ) ; } ; render ( ) { const { value , selectedIndex , renderItem , textColor = { actived : '#fff' , unactived : this . props . color ?? '#108ee9' , } , ... otherProps } = this . props ; return ( < ButtonGroup { ... otherProps } > { value && ( value as ( string | T ) [ ] ) . map ( ( label , key ) => { const styl = { } ; const textStyle = { } ; let textStyleColor = textColor . actived ! ; if ( this . state . selectedIndex !== key + 1 ) { styl . backgroundColor = '#fff' ; textStyle . color = otherProps . color ; textStyleColor = textColor . unactived ! ; } const props = { type : 'primary' , style : [ styl , otherProps . textStyle ] , textStyle : [ textStyle ] , onPress : this . handlePress . bind ( this , label , key + 1 ) , } ; if ( renderItem ) { return renderItem ( label , key + 1 , props ) ; } return React . cloneElement ( < Button key = { key } / > , { ... props } , < Text style = { { color : textStyleColor } } > { label } < /Text>); } ) } < /ButtonGroup>); } }