1 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
2 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3 | import _extends from "@babel/runtime/helpers/esm/extends";
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import { isFragment } from 'react-is';
|
7 | import clsx from 'clsx';
|
8 | import { chainPropTypes } from '@mui/utils';
|
9 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
10 | import styled from '../styles/styled';
|
11 | import useThemeProps from '../styles/useThemeProps';
|
12 | import Avatar, { avatarClasses } from '../Avatar';
|
13 | import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
|
14 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
15 | var SPACINGS = {
|
16 | small: -16,
|
17 | medium: null
|
18 | };
|
19 |
|
20 | var useUtilityClasses = function useUtilityClasses(ownerState) {
|
21 | var classes = ownerState.classes;
|
22 | var slots = {
|
23 | root: ['root'],
|
24 | avatar: ['avatar']
|
25 | };
|
26 | return composeClasses(slots, getAvatarGroupUtilityClass, classes);
|
27 | };
|
28 |
|
29 | var AvatarGroupRoot = styled('div', {
|
30 | name: 'MuiAvatarGroup',
|
31 | slot: 'Root',
|
32 | overridesResolver: function overridesResolver(props, styles) {
|
33 | return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses.avatar), styles.avatar), styles.root);
|
34 | }
|
35 | })(function (_ref) {
|
36 | var _ref2;
|
37 |
|
38 | var theme = _ref.theme;
|
39 | return _ref2 = {}, _defineProperty(_ref2, "& .".concat(avatarClasses.root), {
|
40 | border: "2px solid ".concat((theme.vars || theme).palette.background.default),
|
41 | boxSizing: 'content-box',
|
42 | marginLeft: -8,
|
43 | '&:last-child': {
|
44 | marginLeft: 0
|
45 | }
|
46 | }), _defineProperty(_ref2, "display", 'flex'), _defineProperty(_ref2, "flexDirection", 'row-reverse'), _ref2;
|
47 | });
|
48 | var AvatarGroupAvatar = styled(Avatar, {
|
49 | name: 'MuiAvatarGroup',
|
50 | slot: 'Avatar',
|
51 | overridesResolver: function overridesResolver(props, styles) {
|
52 | return styles.avatar;
|
53 | }
|
54 | })(function (_ref3) {
|
55 | var theme = _ref3.theme;
|
56 | return {
|
57 | border: "2px solid ".concat((theme.vars || theme).palette.background.default),
|
58 | boxSizing: 'content-box',
|
59 | marginLeft: -8,
|
60 | '&:last-child': {
|
61 | marginLeft: 0
|
62 | }
|
63 | };
|
64 | });
|
65 | var AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
|
66 | var _componentsProps$addi, _componentsProps$addi2;
|
67 |
|
68 | var props = useThemeProps({
|
69 | props: inProps,
|
70 | name: 'MuiAvatarGroup'
|
71 | });
|
72 |
|
73 | var childrenProp = props.children,
|
74 | className = props.className,
|
75 | _props$componentsProp = props.componentsProps,
|
76 | componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
|
77 | _props$max = props.max,
|
78 | max = _props$max === void 0 ? 5 : _props$max,
|
79 | _props$spacing = props.spacing,
|
80 | spacing = _props$spacing === void 0 ? 'medium' : _props$spacing,
|
81 | total = props.total,
|
82 | _props$variant = props.variant,
|
83 | variant = _props$variant === void 0 ? 'circular' : _props$variant,
|
84 | other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "max", "spacing", "total", "variant"]);
|
85 |
|
86 | var clampedMax = max < 2 ? 2 : max;
|
87 |
|
88 | var ownerState = _extends({}, props, {
|
89 | max: max,
|
90 | spacing: spacing,
|
91 | variant: variant
|
92 | });
|
93 |
|
94 | var classes = useUtilityClasses(ownerState);
|
95 | var children = React.Children.toArray(childrenProp).filter(function (child) {
|
96 | if (process.env.NODE_ENV !== 'production') {
|
97 | if (isFragment(child)) {
|
98 | console.error(["MUI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
99 | }
|
100 | }
|
101 |
|
102 | return React.isValidElement(child);
|
103 | });
|
104 | var totalAvatars = total || children.length;
|
105 |
|
106 | if (totalAvatars === clampedMax) {
|
107 | clampedMax += 1;
|
108 | }
|
109 |
|
110 | clampedMax = Math.min(totalAvatars + 1, clampedMax);
|
111 | var maxAvatars = Math.min(children.length, clampedMax - 1);
|
112 | var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
|
113 | var marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
|
114 | return _jsxs(AvatarGroupRoot, _extends({
|
115 | ownerState: ownerState,
|
116 | className: clsx(classes.root, className),
|
117 | ref: ref
|
118 | }, other, {
|
119 | children: [extraAvatars ? _jsxs(AvatarGroupAvatar, _extends({
|
120 | ownerState: ownerState,
|
121 | variant: variant
|
122 | }, componentsProps.additionalAvatar, {
|
123 | className: clsx(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
|
124 | style: _extends({
|
125 | marginLeft: marginLeft
|
126 | }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
|
127 | children: ["+", extraAvatars]
|
128 | })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
|
129 | return React.cloneElement(child, {
|
130 | className: clsx(child.props.className, classes.avatar),
|
131 | style: _extends({
|
132 |
|
133 |
|
134 | marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
|
135 | }, child.props.style),
|
136 | variant: child.props.variant || variant
|
137 | });
|
138 | })]
|
139 | }));
|
140 | });
|
141 | process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
|
142 |
|
143 | = {
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 | |
150 |
|
151 |
|
152 | children: PropTypes.node,
|
153 |
|
154 | |
155 |
|
156 |
|
157 | classes: PropTypes.object,
|
158 |
|
159 | |
160 |
|
161 |
|
162 | className: PropTypes.string,
|
163 |
|
164 | |
165 |
|
166 |
|
167 |
|
168 | componentsProps: PropTypes.shape({
|
169 | additionalAvatar: PropTypes.object
|
170 | }),
|
171 |
|
172 | |
173 |
|
174 |
|
175 |
|
176 | max: chainPropTypes(PropTypes.number, function (props) {
|
177 | if (props.max < 2) {
|
178 | return new Error(['MUI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
|
179 | }
|
180 |
|
181 | return null;
|
182 | }),
|
183 |
|
184 | |
185 |
|
186 |
|
187 |
|
188 | spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
|
189 |
|
190 | |
191 |
|
192 |
|
193 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
194 |
|
195 | |
196 |
|
197 |
|
198 |
|
199 | total: PropTypes.number,
|
200 |
|
201 | |
202 |
|
203 |
|
204 |
|
205 | variant: PropTypes
|
206 |
|
207 | .oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
|
208 | } : void 0;
|
209 | export default AvatarGroup; |
\ | No newline at end of file |