Create our own dedicated avatar widget.

master
Tom Hacohen 7 years ago
parent 1a1bdc77af
commit 360a6ad826

@ -2,6 +2,7 @@ import * as React from 'react';
import * as colors from 'material-ui/styles/colors'; import * as colors from 'material-ui/styles/colors';
import { Avatar } from './Avatar';
import { List, ListItem } from './List'; import { List, ListItem } from './List';
import { ContactType } from './pim-types'; import { ContactType } from './pim-types';
@ -59,26 +60,6 @@ class AddressBook extends React.PureComponent {
const uid = entry.uid; const uid = entry.uid;
const name = entry.fn; const name = entry.fn;
let itemProps: any = {
leftAvatar: (
<div
style={{
backgroundColor: getContactColor(entry),
color: 'white',
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%',
height: 40,
width: 40,
marginRight: 15,
}}
>
{name[0].toUpperCase()}
</div>
),
};
return ( return (
<ListItem <ListItem
key={uid} key={uid}
@ -87,7 +68,10 @@ class AddressBook extends React.PureComponent {
this.props.onItemClick(entry); this.props.onItemClick(entry);
}} }}
> >
{itemProps.leftAvatar} {name} <Avatar style={{backgroundColor: getContactColor(entry)}}>
{name[0].toUpperCase()}
</Avatar>
{name}
</ListItem> </ListItem>
); );
}); });

@ -0,0 +1,25 @@
import * as React from 'react';
import { pure } from 'recompose';
export const Avatar = pure((props: { children: React.ReactNode[] | React.ReactNode, size?: number, style?: any }) => {
const size = (props.size) ? props.size : 40;
return (
<div
style={{
backgroundColor: 'grey',
color: 'white',
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%',
height: size,
width: size,
marginRight: 15,
...props.style,
}}
>
{props.children}
</div>
);
});
Loading…
Cancel
Save