nexxtway/react-rainbow

import React from 'react';
import PropTypes from 'prop-types';
import StyledContainer from './styled/container';
import Avatars from './avatars';
import RenderIf from '../RenderIf';
import Counter from './counter';

/**
 * An AvatarGroup is an element that communicates to the user
 *  that there are many entities associated to an item.
 */
export default function AvatarGroup(props) {
    const { size, className, style, avatars, maxAvatars, showCounter } = props;

    return (
        <StyledContainer className={className} style={style} size={size}>
            <RenderIf isTrue={showCounter}>
                <Counter size={size} avatars={avatars} maxAvatars={maxAvatars} />
            </RenderIf>
            <Avatars
                size={size}
                avatars={avatars}
                showCounter={showCounter}
                maxAvatars={maxAvatars}
            />
        </StyledContainer>
    );
}

AvatarGroup.propTypes = {
    /** The size of the AvatarGroup. Valid values are x-small, small, medium, and large.
     * This value defaults to medium. */
    size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
    /** A CSS class for the outer element, in addition to the component’s base classes. */
    className: PropTypes.string,
    /** An object with custom style applied to the outer element. */
    style: PropTypes.object,
    /** An array with the Avatars data. */
    avatars: PropTypes.arrayOf(
        PropTypes.shape({
            src: PropTypes.string,
            initials: PropTypes.string,
            icon: PropTypes.node,
            title: PropTypes.string,
            assistiveText: PropTypes.string,
        }),
    ),
    /** Specify how many Avatars will render. */
    maxAvatars: PropTypes.number,
    /** This shows a counter with the total value of the number of avatars.
     * It is independent of the number of avatars displayed in the component. */
    showCounter: PropTypes.bool,
};

AvatarGroup.defaultProps = {
    size: 'medium',
    className: undefined,
    style: undefined,
    avatars: [],
    maxAvatars: 3,
    showCounter: false,
};