import React , { memo , forwardRef } from 'react' ; import Flex from '../../primitives/Flex' ; import { usePropsResolution } from '../../../hooks/useThemeProps' ; import isNil from 'lodash.isnil' ; import type { IAvatarGroupProps } from './types' ; import { default as Avatar } from './Avatar' ; import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps' ; const getAvatarGroupChildren = ( children ? , space ? , max ? , plusAvatarBg ? , props ? ) => { let childrenArray = React . Children . toArray ( children ) ; let plusAvatars = 0 ; if ( ! isNil ( max ) && max < childrenArray . length && max > 0 ) { plusAvatars = childrenArray . length - max ; childrenArray = childrenArray . slice ( 0 , max ) ; } const trailingChildren = childrenArray . slice ( 1 ) ; const defaultProps = { ml : space , } ; return [ plusAvatars > 0 ? ( < Avatar bg = { plusAvatarBg } { ... defaultProps } { ... props } > { '+ ' + plusAvatars } < /Avatar>) : null, React . Children . map ( trailingChildren . reverse ( ) , ( child , index ) => { return React . cloneElement ( child , { key : `avatar-group-child-${ index }` , ... props , ... defaultProps , ... child . props , } , child . props . children ) ; } ) , React . cloneElement ( childrenArray [ 0 ] , { ... props , ... childrenArray [ 0 ] . props , } , childrenArray [ 0 ] . props . children ) , ] ; } ; const AvatarGroup = ( allProps , ref ) => { const { children , ... props } = allProps ; const { borderColor , borderWidth , bg , space , max } = usePropsResolution ( 'AvatarGroup' , props ) ; if ( useHasResponsiveProps ( props ) ) { return null ; } return ( < Flex flexDirection = "row-reverse" ref = { ref } > { getAvatarGroupChildren ( children , space , max , bg , { borderColor , borderWidth , ... props , } ) } < /Flex>); } ; export default memo ( forwardRef ( AvatarGroup ) ) ;