From 5cb8dda9cce94abe4aa57735548960706bce61c1 Mon Sep 17 00:00:00 2001 From: Tom Hacohen Date: Fri, 13 Mar 2020 16:15:34 +0200 Subject: [PATCH] List: move the list widget to use the material ui list. Fixes #79. --- src/Journals/JournalsList.tsx | 4 +- src/Journals/JournalsListImport.tsx | 4 +- src/widgets/List.css | 82 -------------- src/widgets/List.tsx | 167 ++++++++++++---------------- 4 files changed, 77 insertions(+), 180 deletions(-) delete mode 100644 src/widgets/List.css diff --git a/src/Journals/JournalsList.tsx b/src/Journals/JournalsList.tsx index 6da3c95..e0c2d2b 100644 --- a/src/Journals/JournalsList.tsx +++ b/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) { ); -} \ No newline at end of file +} diff --git a/src/Journals/JournalsListImport.tsx b/src/Journals/JournalsListImport.tsx index 1b56224..707999b 100644 --- a/src/Journals/JournalsListImport.tsx +++ b/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) { )} ); -} \ No newline at end of file +} diff --git a/src/widgets/List.css b/src/widgets/List.css deleted file mode 100644 index 8bc9cec..0000000 --- a/src/widgets/List.css +++ /dev/null @@ -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; -} diff --git a/src/widgets/List.tsx b/src/widgets/List.tsx index c225437..53e96c2 100644 --- a/src/widgets/List.tsx +++ b/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 }) => ( - -)); +export const List = MuiList; -export const ListItemRaw = React.memo((_props: any) => { - const { - href, - children, - nestedItems, - insetChildren, - ...props - } = _props; - - const inner = href ? - ( - - {children} - - ) : - children - ; - - const nestedContent = nestedItems ? - ( - - {nestedItems} - - ) : - 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 ( - -
  • - {inner} -
    • -
  • - {nestedContent} -
    • -     + ); }); -export const ListSubheader = React.memo((props: any) => ( -
  • - {props.children} -
    • -)); - -export const ListDivider = React.memo((_props: any) => { - const { - inset, - ...props - } = _props; - return ( -
  • -
    -
    • - ); -}); - -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) ? ( -
    {leftIcon}
    - ) : undefined; - - const rightIconHolder = (rightIcon) ? ( -
    {rightIcon}
    - ) : undefined; - - let textHolder = primaryText; - if (secondaryText) { - textHolder = ( -
    - {primaryText} - {secondaryText} -
    - ); - } - - const pressedStyle = (_props.onClick) ? { cursor: 'pointer' } : undefined; + const extraProps = (onClick || href) ? { + button: true, + href, + onClick, + component: (href) ? ExternalLink : 'div', + } : undefined; return ( - - {leftIconHolder} - {textHolder} - {children} - {rightIconHolder} - + <> + + {leftIcon && ( + + {leftIcon} + + )} + + {children} + + {rightIcon && ( + + {rightIcon} + + )} + + {nestedItems && ( + + {nestedItems} + + )} + ); });