List: move the list widget to use the material ui list.

Fixes #79.

src/Journals/JournalsList.tsx

@@ -43,7 +43,7 @@ export default function JournalsList(props: PropsType) {
       const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
       const cryptoManager = journal.getCryptoManager(derived, keyPair);
       const info = journal.getInfo(cryptoManager);
-      let colorBox: React.ReactNode;
+      let colorBox: React.ReactElement | undefined;
       switch (info.type) {
         case 'CALENDAR':
         case 'TASKS':
@@ -100,4 +100,4 @@ export default function JournalsList(props: PropsType) {
       </List>
     </Container>
   );
-}
+}

src/Journals/JournalsListImport.tsx

@@ -31,7 +31,7 @@ export default function JournalsList(props: PropsType) {
       const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
       const cryptoManager = journal.getCryptoManager(derived, keyPair);
       const info = journal.getInfo(cryptoManager);
-      let colorBox: React.ReactNode;
+      let colorBox: React.ReactElement | undefined;
       switch (info.type) {
         case 'CALENDAR':
         case 'TASKS':
@@ -86,4 +86,4 @@ export default function JournalsList(props: PropsType) {
       )}
     </Container>
   );
-}
+}

src/widgets/List.css

@@ -1,82 +0,0 @@
-.List {
-  list-style: none;
-  padding: 0;
-}
-
-.ListItem {
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  height: 60px;
-}
-
-.ListItem-href {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-
-  color: inherit;
-  text-decoration:  none;
-  border: none;
-}
-
-.ListItem-href:visited, .ListItem-href:active, .ListItem-href:focus {
-  color: inherit;
-  outline: 0;
-}
-
-.ListItem .ListIconLeft {
-  margin-left: 5px;
-  margin-right: 20px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.ListItem .ListIconRight {
-  margin-left: auto;
-  margin-right: 5px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.ListItem-Item:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.ListItem-inset {
-  margin-left: 49px;
-}
-
-.ListItem-nested-holder {
-  margin-left: 20px;
-}
-
-.ListItem-text-holder {
-  display: flex;
-  flex-direction: column;
-}
-
-.ListItem-primary-text {
-}
-
-.ListItem-secondary-text {
-  margin-top: 1px;
-  font-size: 85%;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.ListSubheader {
-  font-size: 90%;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.ListDivider {
-  height: 1px;
-  border: medium none;
-  background-color: rgb(224, 224, 224);
-}
-
-.ListDivider.ListDivider-inset {
-  margin-left: 59px;
-}

src/widgets/List.tsx

@@ -3,119 +3,98 @@
 
 import * as React from 'react';
 
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import MuiList from '@material-ui/core/List';
+import MuiListItem from '@material-ui/core/ListItem';
+import MuiListSubheader from '@material-ui/core/ListSubheader';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+
 import ExternalLink from './ExternalLink';
 
-import './List.css';
+const useStyles = makeStyles((theme) => (createStyles({
+  inset: {
+    marginLeft: 64,
+  },
+  nested: {
+    paddingLeft: theme.spacing(4),
+  },
+})));
 
-export const List = React.memo((props: { children: React.ReactNode[] | React.ReactNode }) => (
-  <ul className="List">
-    {props.children}
-  </ul>
-));
+export const List = MuiList;
 
-export const ListItemRaw = React.memo((_props: any) => {
-  const {
-    href,
-    children,
-    nestedItems,
-    insetChildren,
-    ...props
-  } = _props;
-
-  const inner = href ?
-    (
-      <ExternalLink href={href} className="ListItem-href">
-        {children}
-      </ExternalLink>
-    ) :
-    children
-  ;
-
-  const nestedContent = nestedItems ?
-    (
-      <List>
-        {nestedItems}
-      </List>
-    ) :
-    undefined
-  ;
+export const ListSubheader = MuiListSubheader;
 
+export const ListDivider = React.memo(function ListDivider(props: { inset?: boolean }) {
+  const classes = useStyles();
+  const insetClass = (props.inset) ? classes.inset : undefined;
   return (
-    <React.Fragment>
-      <li
-        {...props}
-        className={'ListItem ListItem-Item ' + ((insetChildren) ? 'ListItem-inset' : '')}
-      >
-        {inner}
-      </li>
-      <li className="ListItem-nested-holder">
-        {nestedContent}
-      </li>
-    </React.Fragment>
+    <Divider className={insetClass} />
   );
 });
 
-export const ListSubheader = React.memo((props: any) => (
-  <li
-    {...props}
-    className="ListItem ListSubheader"
-  >
-    {props.children}
-  </li>
-));
-
-export const ListDivider = React.memo((_props: any) => {
-  const {
-    inset,
-    ...props
-  } = _props;
-  return (
-    <li>
-      <hr className={'ListDivider ' + (inset ? 'ListDivider-inset' : '')} {...props} />
-    </li>
-  );
-});
-
-export const ListItem = React.memo((_props: any) => {
+interface ListItemPropsType {
+  leftIcon?: React.ReactElement;
+  rightIcon?: React.ReactElement;
+  style?: React.CSSProperties;
+  primaryText?: string;
+  secondaryText?: string;
+  children?: React.ReactNode | React.ReactNode[];
+  onClick?: () => void;
+  href?: string;
+  insetChildren?: boolean;
+  nestedItems?: React.ReactNode[];
+}
+
+export const ListItem = React.memo(function ListItem(_props: ListItemPropsType) {
+  const classes = useStyles();
   const {
     leftIcon,
     rightIcon,
     primaryText,
     secondaryText,
     children,
+    onClick,
+    href,
     style,
-    ...props
+    insetChildren,
+    nestedItems,
   } = _props;
 
-  const leftIconHolder = (leftIcon) ? (
-    <div className="ListIconLeft">{leftIcon}</div>
-  ) : undefined;
-
-  const rightIconHolder = (rightIcon) ? (
-    <div className="ListIconRight">{rightIcon}</div>
-  ) : undefined;
-
-  let textHolder = primaryText;
-  if (secondaryText) {
-    textHolder = (
-      <div className="ListItem-text-holder">
-        <span className="ListItem-primary-text">{primaryText}</span>
-        <span className="ListItem-secondary-text">{secondaryText}</span>
-      </div>
-    );
-  }
-
-  const pressedStyle = (_props.onClick) ? { cursor: 'pointer' } : undefined;
+  const extraProps = (onClick || href) ? {
+    button: true,
+    href,
+    onClick,
+    component: (href) ? ExternalLink : 'div',
+  } : undefined;
 
   return (
-    <ListItemRaw
-      style={{ ...pressedStyle, ...style }}
-      {...props}
-    >
-      {leftIconHolder}
-      {textHolder}
-      {children}
-      {rightIconHolder}
-    </ListItemRaw>
+    <>
+      <MuiListItem
+        style={style}
+        onClick={onClick}
+        {...(extraProps as any)}
+      >
+        {leftIcon && (
+          <ListItemIcon>
+            {leftIcon}
+          </ListItemIcon>
+        )}
+        <ListItemText inset={insetChildren} primary={primaryText} secondary={secondaryText}>
+          {children}
+        </ListItemText>
+        {rightIcon && (
+          <ListItemIcon>
+            {rightIcon}
+          </ListItemIcon>
+        )}
+      </MuiListItem>
+      {nestedItems && (
+        <List className={classes.nested} disablePadding>
+          {nestedItems}
+        </List>
+      )}
+    </>
   );
 });