@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
96 lines (93 loc) • 3.06 kB
JavaScript
"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { AvatarGroupProvider } from './AvatarGroupContext.mjs';
import { Avatar } from './Avatar.mjs';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useSlotClasses } from '../utils/useSlotClasses.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { avatarGroupRecipe } from '../../theme/recipes/avatar.mjs';
const slots = [
'root',
'surplus'
];
const AvatarGroup = (inProps)=>{
const props = useDefaultProps({
name: 'AvatarGroup',
props: inProps
});
const { children, total, slotProps, spacing, renderSurplus, classNames, size = 'md', color = 'gray', outlined = false, radius = size, max: maxProp = 5, ...remainingProps } = props;
const max = Math.max(1, maxProp);
const ownerState = {
...props,
size,
color,
outlined,
radius,
max
};
const slotClasses = useSlotClasses({
name: 'AvatarGroup',
slots,
classNames
});
const style = useStyles({
ownerState,
name: 'AvatarGroup',
recipe: avatarGroupRecipe
});
const [AvatarGroupRoot, getAvatarGroupRootProps] = useSlot({
style,
elementType: 'div',
externalForwardedProps: remainingProps,
classNames: slotClasses.root,
additionalProps: {
style: {
[`--avatar-group-spacing`]: spacing !== undefined ? `${spacing}px` : undefined
}
}
});
const [AvatarSurplus, getAvatarSurplusProps] = useSlot({
elementType: Avatar,
externalSlotProps: slotProps?.surplus,
classNames: slotClasses.surplus,
shouldForwardComponent: false
});
const ctx = useMemo(()=>({
size,
color,
outlined,
radius
}), [
color,
outlined,
radius,
size
]);
const childrenLength = Array.isArray(children) ? children.length : 1;
if (childrenLength === 1 && (total === undefined || total < 2)) {
return children;
}
const lastAvatar = Math.min(childrenLength, max);
const totalAvatars = total ?? childrenLength;
const extraAvatars = Math.max(0, totalAvatars - lastAvatar);
return /*#__PURE__*/ jsx(AvatarGroupRoot, {
...getAvatarGroupRootProps(),
children: /*#__PURE__*/ jsxs(AvatarGroupProvider, {
value: ctx,
children: [
Array.isArray(children) ? children.slice(0, lastAvatar) : children,
!!extraAvatars && (renderSurplus ? renderSurplus(extraAvatars) : /*#__PURE__*/ jsxs(AvatarSurplus, {
...getAvatarSurplusProps(),
children: [
"+",
extraAvatars
]
}))
]
})
});
};
AvatarGroup.displayName = 'AvatarGroup';
export { AvatarGroup };