From 1a1bdc77af88783707dba0c270b823748b24d478 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 15 Dec 2017 16:50:37 +0000
Subject: [PATCH] Add our own list widget.

The material ui one is extremely inefficient and was causing noticeable
delays.
---
 src/AddressBook.tsx | 32 ++++++++++++++++++++++----------
 src/List.css        | 14 ++++++++++++++
 src/List.tsx        | 19 +++++++++++++++++++
 3 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 src/List.css
 create mode 100644 src/List.tsx

diff --git a/src/AddressBook.tsx b/src/AddressBook.tsx
index 0e6cd74..01181da 100644
--- a/src/AddressBook.tsx
+++ b/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
-            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>
       );
     });
 
diff --git a/src/List.css b/src/List.css
new file mode 100644
index 0000000..80f489d
--- /dev/null
+++ b/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;
+}
+
diff --git a/src/List.tsx b/src/List.tsx
new file mode 100644
index 0000000..f893a91
--- /dev/null
+++ b/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>
+));