import React from 'react' ; import { ChildrenWithProps } from '../../devsupport' ; import { CheckBox , CheckBoxElement , CheckBoxProps , } from '../checkbox/checkbox.component' ; import { SelectItem , SelectItemElement , SelectItemProps , } from './selectItem.component' ; export interface SelectGroupProps extends SelectItemProps { children ? : ChildrenWithProps < SelectItemProps > ; } export type SelectGroupElement = React . ReactElement < SelectItemProps > ; extends React . Component property property property property property overview-example export class SelectGroup extends React . Component < SelectGroupProps > { private get isMultiSelect ( ) : boolean { if ( this . props . descriptor ) { return this . props . descriptor . multiSelect ; } return false ; } private get groupAccessoryState ( ) : CheckBoxProps { const nestedElements = React . Children . toArray ( this . props . children ) as SelectItemElement [ ] ; const selectedElements = nestedElements . filter ( el => el . props . selected ) ; const indeterminate = selectedElements . length > 0 && selectedElements . length < nestedElements . length ; const checked = selectedElements . length === nestedElements . length ; return { checked , indeterminate } ; } private get groupAccessoryProps ( ) : CheckBoxProps { return { ... this . createAccessoryProps ( this . props ) , ... this . groupAccessoryState , } ; } private createAccessoryProps = ( props ) : CheckBoxProps => { return { checked : props . selected , onChange : ( ) => props . onPress && props . onPress ( props . descriptor ) , } ; } ; private createGroupedItemProps = ( props ) : SelectItemProps => { const accessoryProps = this . createAccessoryProps ( props ) ; return { appearance : 'grouped' , accessoryLeft : evaProps => this . renderAccessory ( { ... evaProps , ... accessoryProps } ) , } ; } ; private renderAccessory = ( props ) : CheckBoxElement => { if ( ! this . isMultiSelect ) { return null ; } return ( < CheckBox { ... props } / > ) ; } ; private renderGroupedItems = ( source ) : SelectItemElement [ ] => { return React . Children . map ( source , ( item , key ) : SelectItemElement => { const groupedProps = this . createGroupedItemProps ( item . props ) ; return React . cloneElement ( item , { key , ... groupedProps , ... item . props } ) ; } ) ; } ; public render ( ) { const { children , ... itemProps } = this . props ; return ( < React . Fragment > < SelectItem accessoryLeft = { evaProps => this . renderAccessory ( { ... evaProps , ... this . groupAccessoryProps } ) } { ... itemProps } /> { this . renderGroupedItems ( children ) } < /React.Fragment>); } }