/
avatar-group.tsx
121 lines (106 loc) · 2.88 KB
/
avatar-group.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import {
chakra,
forwardRef,
omitThemingProps,
SystemProps,
SystemStyleObject,
ThemingProps,
useMultiStyleConfig,
HTMLChakraProps,
} from "@chakra-ui/system"
import { cx } from "@chakra-ui/utils"
import { compact } from "@chakra-ui/object-utils"
import { getValidChildren } from "@chakra-ui/react-utils"
import { baseStyle } from "./avatar"
import { cloneElement } from "react"
interface AvatarGroupOptions {
/**
* The children of the avatar group.
*
* Ideally should be `Avatar` and `MoreIndicator` components
*/
children: React.ReactNode
/**
* The space between the avatars in the group.
* @default "-0.75rem"
* @type SystemProps["margin"]
*/
spacing?: SystemProps["margin"]
/**
* The maximum number of visible avatars
*/
max?: number
}
export interface AvatarGroupProps
extends AvatarGroupOptions,
Omit<HTMLChakraProps<"div">, "children">,
ThemingProps<"Avatar"> {}
/**
* AvatarGroup displays a number of avatars grouped together in a stack.
*/
export const AvatarGroup = forwardRef<AvatarGroupProps, "div">(
function AvatarGroup(props, ref) {
const styles = useMultiStyleConfig("Avatar", props)
const {
children,
borderColor,
max,
spacing = "-0.75rem",
borderRadius = "full",
...rest
} = omitThemingProps(props)
const validChildren = getValidChildren(children)
/**
* get the avatars within the max
*/
const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren
/**
* get the remaining avatar count
*/
const excess = max != null && validChildren.length - max
/**
* Reversing the children is a great way to avoid using zIndex
* to overlap the avatars
*/
const reversedChildren = childrenWithinMax.reverse()
const clones = reversedChildren.map((child, index) => {
const isFirstAvatar = index === 0
const childProps = {
marginEnd: isFirstAvatar ? 0 : spacing,
size: props.size,
borderColor: child.props.borderColor ?? borderColor,
showBorder: true,
}
return cloneElement(child, compact(childProps))
})
const groupStyles: SystemStyleObject = {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
flexDirection: "row-reverse",
}
const excessStyles: SystemStyleObject = {
borderRadius,
marginStart: spacing,
...baseStyle,
...styles.excessLabel,
}
return (
<chakra.div
ref={ref}
role="group"
__css={groupStyles}
{...rest}
className={cx("chakra-avatar__group", props.className)}
>
{excess > 0 && (
<chakra.span className="chakra-avatar__excess" __css={excessStyles}>
{`+${excess}`}
</chakra.span>
)}
{clones}
</chakra.div>
)
},
)
AvatarGroup.displayName = "AvatarGroup"