diff --git a/src/components/List/ListItemText/index.jsx b/src/components/List/ListItemText/index.jsx new file mode 100644 index 00000000..0ee309ab --- /dev/null +++ b/src/components/List/ListItemText/index.jsx @@ -0,0 +1,38 @@ +// @flow +import * as React from 'react' +import { ListItemText } from 'material-ui/List' +import { withStyles } from 'material-ui/styles' +import { type WithStyles } from '~/theme/mui' + +type Props = WithStyles & { + primary: string, + secondary: string, + cut?: boolean, +} + +const styles = { + itemTextSecondary: { + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + }, +} + +const GnoListItemText = ({ + primary, secondary, classes, cut = false, +}: Props) => { + const cutStyle = cut ? { + secondary: classes.itemTextSecondary, + } : undefined + + return ( + + ) +} + +export default withStyles(styles)(GnoListItemText) diff --git a/src/routes/safe/component/Safe/Address.jsx b/src/routes/safe/component/Safe/Address.jsx index 7bd3d890..3a21532e 100644 --- a/src/routes/safe/component/Safe/Address.jsx +++ b/src/routes/safe/component/Safe/Address.jsx @@ -1,8 +1,9 @@ // @flow import * as React from 'react' -import { ListItem, ListItemText } from 'material-ui/List' +import { ListItem } from 'material-ui/List' import Avatar from 'material-ui/Avatar' import Mail from 'material-ui-icons/Mail' +import ListItemText from '~/components/List/ListItemText' type Props = { address: string, @@ -13,7 +14,7 @@ const Address = ({ address }: Props) => ( - + ) diff --git a/src/routes/safe/component/Safe/Confirmations.jsx b/src/routes/safe/component/Safe/Confirmations.jsx index 5838f6c0..91c192d9 100644 --- a/src/routes/safe/component/Safe/Confirmations.jsx +++ b/src/routes/safe/component/Safe/Confirmations.jsx @@ -1,8 +1,9 @@ // @flow import * as React from 'react' -import { ListItem, ListItemText } from 'material-ui/List' +import { ListItem } from 'material-ui/List' import Avatar from 'material-ui/Avatar' import DoneAll from 'material-ui-icons/DoneAll' +import ListItemText from '~/components/List/ListItemText' type Props = { confirmations: number, @@ -13,7 +14,11 @@ const Confirmations = ({ confirmations }: Props) => ( - + ) diff --git a/src/routes/safe/component/Safe/Owners.jsx b/src/routes/safe/component/Safe/Owners.jsx index f2a22946..e552beb1 100644 --- a/src/routes/safe/component/Safe/Owners.jsx +++ b/src/routes/safe/component/Safe/Owners.jsx @@ -3,7 +3,8 @@ import * as React from 'react' import openHoc, { type Open } from '~/components/hoc/OpenHoc' import { withStyles } from 'material-ui/styles' import Collapse from 'material-ui/transitions/Collapse' -import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List' +import ListItemText from '~/components/List/ListItemText' +import List, { ListItem, ListItemIcon } from 'material-ui/List' import Avatar from 'material-ui/Avatar' import Group from 'material-ui-icons/Group' import Person from 'material-ui-icons/Person' @@ -16,10 +17,6 @@ const styles = { nested: { paddingLeft: '40px', }, - itemTextSecondary: { - textOverflow: 'ellipsis', - overflow: 'hidden', - }, } type Props = Open & WithStyles & { @@ -28,41 +25,34 @@ type Props = Open & WithStyles & { const Owners = openHoc(({ open, toggle, owners, classes, -}: Props) => { - const itemTextClasses = { - secondary: classes.itemTextSecondary, - } - - return ( - - - - - - - - {open ? : } - - - - - {owners.map(owner => ( - - - - - - - ))} - - - - ) -}) +}: Props) => ( + + + + + + + + {open ? : } + + + + + {owners.map(owner => ( + + + + + + + ))} + + + +)) export default withStyles(styles)(Owners)