Commit fb75b98 1 parent 2d39078 commit fb75b98 Copy full SHA for fb75b98
File tree 2 files changed +25
-21
lines changed
2 files changed +25
-21
lines changed Original file line number Diff line number Diff line change @@ -14,36 +14,34 @@ const StyledAvatars = styled('div')(({ theme }) => ({
14
14
justifyContent : 'start' ,
15
15
} ) ) ;
16
16
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
+ } ) ) ;
26
25
27
26
type User = {
28
27
name : string ;
29
28
description ?: string ;
30
29
imageUrl ?: string ;
31
30
} ;
31
+
32
32
type AvatarGroupProps = {
33
33
users : User [ ] ;
34
34
avatarLimit ?: number ;
35
35
AvatarComponent ?: typeof UserAvatar ;
36
36
className ?: string ;
37
37
} ;
38
38
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
+ ) ;
47
45
48
46
type AvatarGroupInnerProps = Omit < AvatarGroupProps , 'AvatarComponent' > & {
49
47
AvatarComponent : typeof UserAvatar ;
Original file line number Diff line number Diff line change 1
1
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' ;
4
6
import type { Collaborator } from 'interfaces/featureToggle' ;
5
7
import type { FC } from 'react' ;
6
8
import { Link } from 'react-router-dom' ;
7
9
8
- const StyledAvatar = styled ( UserAvatar ) ( ( { theme } ) => ( {
10
+ const StyledAvatarComponent = styled ( AvatarComponent ) ( ( { theme } ) => ( {
9
11
width : theme . spacing ( 3 ) ,
10
12
height : theme . spacing ( 3 ) ,
11
13
} ) ) ;
12
14
15
+ const StyledAvatar = styled ( StyledAvatarComponent ) ( ( ) => ( {
16
+ marginLeft : 0 ,
17
+ } ) ) ;
18
+
13
19
const SectionContainer = styled ( 'div' ) ( ( { theme } ) => ( {
14
20
display : 'flex' ,
15
21
flexFlow : 'column' ,
@@ -50,7 +56,7 @@ const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
50
56
< StyledAvatarGroup
51
57
users = { collaborators }
52
58
avatarLimit = { 6 }
53
- AvatarComponent = { StyledAvatar }
59
+ AvatarComponent = { StyledAvatarComponent }
54
60
/>
55
61
</ SectionContainer >
56
62
) ;
You can’t perform that action at this time.
0 commit comments