Skip to content

Commit fb75b98

Browse files
Tymekpull[bot]
authored andcommitted
refactor: make avatar group more customizable (#7989)
1 parent 2d39078 commit fb75b98

File tree

2 files changed

+25
-21
lines changed

2 files changed

+25
-21
lines changed

frontend/src/component/common/AvatarGroup/AvatarGroup.tsx

+15-17
Original file line numberDiff line numberDiff line change
@@ -14,36 +14,34 @@ const StyledAvatars = styled('div')(({ theme }) => ({
1414
justifyContent: 'start',
1515
}));
1616

17-
const StyledAvatar = (component: typeof UserAvatar) =>
18-
styled(component)(({ theme }) => ({
19-
outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
20-
margin: 0,
21-
marginLeft: theme.spacing(-1),
22-
'&:hover': {
23-
outlineColor: theme.palette.primary.main,
24-
},
25-
}));
17+
export const AvatarComponent = styled(UserAvatar)(({ theme }) => ({
18+
outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
19+
margin: 0,
20+
marginLeft: theme.spacing(-1),
21+
'&:hover': {
22+
outlineColor: theme.palette.primary.main,
23+
},
24+
}));
2625

2726
type User = {
2827
name: string;
2928
description?: string;
3029
imageUrl?: string;
3130
};
31+
3232
type AvatarGroupProps = {
3333
users: User[];
3434
avatarLimit?: number;
3535
AvatarComponent?: typeof UserAvatar;
3636
className?: string;
3737
};
3838

39-
export const AvatarGroup = ({
40-
AvatarComponent,
41-
...props
42-
}: AvatarGroupProps) => {
43-
const Avatar = StyledAvatar(AvatarComponent ?? UserAvatar);
44-
45-
return <AvatarGroupInner AvatarComponent={Avatar} {...props} />;
46-
};
39+
export const AvatarGroup = ({ ...props }: AvatarGroupProps) => (
40+
<AvatarGroupInner
41+
AvatarComponent={props.AvatarComponent ?? AvatarComponent}
42+
{...props}
43+
/>
44+
);
4745

4846
type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
4947
AvatarComponent: typeof UserAvatar;

frontend/src/component/feature/FeatureView/Collaborators.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
import { styled } from '@mui/material';
2-
import { AvatarGroup } from 'component/common/AvatarGroup/AvatarGroup';
3-
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
2+
import {
3+
AvatarComponent,
4+
AvatarGroup,
5+
} from 'component/common/AvatarGroup/AvatarGroup';
46
import type { Collaborator } from 'interfaces/featureToggle';
57
import type { FC } from 'react';
68
import { Link } from 'react-router-dom';
79

8-
const StyledAvatar = styled(UserAvatar)(({ theme }) => ({
10+
const StyledAvatarComponent = styled(AvatarComponent)(({ theme }) => ({
911
width: theme.spacing(3),
1012
height: theme.spacing(3),
1113
}));
1214

15+
const StyledAvatar = styled(StyledAvatarComponent)(() => ({
16+
marginLeft: 0,
17+
}));
18+
1319
const SectionContainer = styled('div')(({ theme }) => ({
1420
display: 'flex',
1521
flexFlow: 'column',
@@ -50,7 +56,7 @@ const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
5056
<StyledAvatarGroup
5157
users={collaborators}
5258
avatarLimit={6}
53-
AvatarComponent={StyledAvatar}
59+
AvatarComponent={StyledAvatarComponent}
5460
/>
5561
</SectionContainer>
5662
);

0 commit comments

Comments
 (0)