Add our own list widget.

The material ui one is extremely inefficient and was causing noticeable
delays.

src/AddressBook.tsx

@@ -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
+          <div
-            backgroundColor={getContactColor(entry)}
+            style={{
-            style={{left: 8}}
+              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={(e: any) => {
-          onClick={() => (this.props.onItemClick(entry))}
+            e.preventDefault();
-          {...itemProps}
+            this.props.onItemClick(entry);
-        />
+          }}
+        >
+          {itemProps.leftAvatar} {name}
+        </ListItem>
       );
     });
 

src/List.css

@@ -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;
+}
+

src/List.tsx

@@ -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>
+));