import React , { FunctionComponent , HTMLAttributes , ReactNode , ReactComponentElement } from 'react' ; import { Alignment , BlockWidth } from './settings' ; import { OverviewBlockGroupContext } from './OverviewBlockGroupContext' ; import OverviewBlockRow from '../OverviewBlockRow' ; type Props = HTMLAttributes < HTMLDivElement > & { /** Value and label alignment for blocks. By default content is aligned to the left. */ align ? : Alignment ; /** The block width variant */ blockWidth ? : BlockWidth ; } ; const shouldInjectRow = ( children ? ) => { if ( ! children ) { return false ; } return ! React . Children . toArray ( children ) . filter ( ( el ) : el is ReactComponentElement < typeof OverviewBlockRow > => React . isValidElement ( el ) ) . some ( el => el . type . displayName === OverviewBlockRow . displayName ) ; } ; const OverviewBlockGroup = props => { const { children , align = 'default' , blockWidth = 'regular' , ... rest } = props ; return ( < section { ... rest } > < OverviewBlockGroupContext . Provider value = { { align , blockWidth } } > { shouldInjectRow ( children ) ? ( < OverviewBlockRow > { children } < /OverviewBlockRow>) : (children)} < /OverviewBlockGroupContext.Provider> < /section>); } ; OverviewBlockGroup . displayName = 'OverviewBlockGroup' ; OverviewBlockGroup . defaultProps = { align : 'default' , blockWidth : 'regular' } ; export default OverviewBlockGroup ;