Add our own list widget.

The material ui one is extremely inefficient and was causing noticeable
delays.
master
Tom Hacohen 7 years ago
parent 08022994f2
commit 1a1bdc77af

@ -1,9 +1,9 @@
import * as React from 'react';
import Avatar from 'material-ui/Avatar';
import { List, ListItem } from 'material-ui/List';
import * as colors from 'material-ui/styles/colors';
import { List, ListItem } from './List';
import { ContactType } from './pim-types';
class AddressBook extends React.PureComponent {
@ -61,22 +61,34 @@ class AddressBook extends React.PureComponent {
let itemProps: any = {
leftAvatar: (
<Avatar
backgroundColor={getContactColor(entry)}
style={{left: 8}}
<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()}
</Avatar>
</div>
),
};
return (
<ListItem
key={uid}
primaryText={name}
onClick={() => (this.props.onItemClick(entry))}
{...itemProps}
/>
onClick={(e: any) => {
e.preventDefault();
this.props.onItemClick(entry);
}}
>
{itemProps.leftAvatar} {name}
</ListItem>
);
});

@ -0,0 +1,14 @@
.List {
list-style: none;
padding: 0;
}
.ListItem {
padding: 10px;
}
.ListItem:hover {
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}

@ -0,0 +1,19 @@
import * as React from 'react';
import { pure } from 'recompose';
import './List.css';
export const ListItem = pure((props: any) => (
<li
{...props}
className="ListItem"
>
{props.children}
</li>
));
export const List = pure((props: { children: React.ReactNode[] | React.ReactNode }) => (
<ul className="List">
{props.children}
</ul>
));
Loading…
Cancel
Save