@gravityforms/components/react/admin/modules/AvatarGroup/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, classnames } from '@gravityforms/libraries';
import { spacerClasses } from '@gravityforms/utils';
import Avatar from '../Avatar';

const { forwardRef } = React;

/**
 * @module AvatarGroup
 * @description Renders an avatar group component with optional extra count.
 *
 * @since 5.4.6
 *
 * @param {array}                                      [avatars]                - Array of avatar component props to render
 * @param {React.ReactNode|React.ReactNode[]}          [children]               - React element children
 * @param {Record<string, any>}                        [customAttributes]       - Custom attributes for the component
 * @param {string|string[]|Record<string, boolean>}    [customClasses]          - Custom classes for the component
 * @param {number}                                     [overflowCount=0]        - Number of avatars to show in overflow count
 * @param {boolean}                                    [showOverflowCount=true] - Whether to show the overflow count
 * @param {string|number|string[]|Record<string, any>} [spacing='']             - The spacing for the component
 * @param {React.RefObject<HTMLElement>|null}          ref                      - Ref to the component
 *
 * @return {JSX.Element} The avatar component.
 *
 * @example
 * import AvatarGroup from '@gravityforms/components/react/admin/modules/AvatarGroup';
 *
 * return (
 *     <AvatarGroup>
 *         { 'children' }
 *     </AvatarGroup>
 * );
 *
 */
const AvatarGroup = forwardRef( ( {
	avatars = [],
	children = null,
	customAttributes = {},
	customClasses = [],
	overflowCount = 0,
	showOverflowCount = true,
	spacing = '',
}, ref ) => {
	const size = avatars[ 0 ]?.size || 'lg';
	const attributes = {
		className: classnames( {
			'gform-avatar-group': true,
			'gform-avatar-group--has-overflow': overflowCount > 0 && showOverflowCount,
			[ `gform-avatar-group--size-${ size }` ]: true,
			...spacerClasses( spacing ),
		}, customClasses ),
		ref,
		...customAttributes,
	};

	const overflowAttributes = {
		className: classnames( {
			'gform-avatar-group__overflow-count': true,
		} ),
	};

	return (
		<div { ...attributes }>
			{ avatars.map( ( avatar, index ) => (
				<Avatar key={ index } { ...avatar } />
			) ) }
			{ showOverflowCount && overflowCount > 0 && (
				<span { ...overflowAttributes }>{ `+${ overflowCount }` }</span>
			) }
			{ children }
		</div>
	);
} );

AvatarGroup.displayName = 'AvatarGroup';

export default AvatarGroup;