Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

refactor: make avatar group more customizable (#7989)

Browse Source
This commit is contained in:
Tymoteusz Czech 2024-08-27 14:37:45 +02:00 committed by GitHub
parent 25617f7a24
commit 742504793c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
View File

@ -14,21 +14,21 @@ const StyledAvatars = styled('div')(({ theme }) => ({
justifyContent: 'start', justifyContent: 'start',
})); }));
const StyledAvatar = (component: typeof UserAvatar) => export const AvatarComponent = styled(UserAvatar)(({ theme }) => ({
styled(component)(({ theme }) => ({
outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`, outline: `${theme.spacing(0.25)} solid ${theme.palette.background.paper}`,
margin: 0, margin: 0,
marginLeft: theme.spacing(-1), marginLeft: theme.spacing(-1),
'&:hover': { '&:hover': {
outlineColor: theme.palette.primary.main, outlineColor: theme.palette.primary.main,
}, },
})); }));
type User = { type User = {
name: string; name: string;
description?: string; description?: string;
imageUrl?: string; imageUrl?: string;
}; };
type AvatarGroupProps = { type AvatarGroupProps = {
users: User[]; users: User[];
avatarLimit?: number; avatarLimit?: number;
@ -36,14 +36,12 @@ type AvatarGroupProps = {
className?: string; className?: string;
}; };
export const AvatarGroup = ({ export const AvatarGroup = ({ ...props }: AvatarGroupProps) => (
AvatarComponent, <AvatarGroupInner
...props AvatarComponent={props.AvatarComponent ?? AvatarComponent}
}: AvatarGroupProps) => { {...props}
const Avatar = StyledAvatar(AvatarComponent ?? UserAvatar); />
);
return <AvatarGroupInner AvatarComponent={Avatar} {...props} />;
};
type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & { type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
AvatarComponent: typeof UserAvatar; AvatarComponent: typeof UserAvatar;

14
frontend/src/component/feature/FeatureView/Collaborators.tsx
View File

@ -1,15 +1,21 @@
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import { AvatarGroup } from 'component/common/AvatarGroup/AvatarGroup'; import {
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; AvatarComponent,
AvatarGroup,
} from 'component/common/AvatarGroup/AvatarGroup';
import type { Collaborator } from 'interfaces/featureToggle'; import type { Collaborator } from 'interfaces/featureToggle';
import type { FC } from 'react'; import type { FC } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
const StyledAvatar = styled(UserAvatar)(({ theme }) => ({ const StyledAvatarComponent = styled(AvatarComponent)(({ theme }) => ({
width: theme.spacing(3), width: theme.spacing(3),
height: theme.spacing(3), height: theme.spacing(3),
})); }));
const StyledAvatar = styled(StyledAvatarComponent)(() => ({
marginLeft: 0,
}));
const SectionContainer = styled('div')(({ theme }) => ({ const SectionContainer = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
flexFlow: 'column', flexFlow: 'column',
@ -50,7 +56,7 @@ const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
<StyledAvatarGroup <StyledAvatarGroup
users={collaborators} users={collaborators}
avatarLimit={6} avatarLimit={6}
AvatarComponent={StyledAvatar} AvatarComponent={StyledAvatarComponent}
/> />
</SectionContainer> </SectionContainer>
); );