WA-238 created GnoListItemText with cut ellipsis prop

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 (
+    <ListItemText
+      classes={cutStyle}
+      inset
+      primary={primary}
+      secondary={secondary}
+    />
+  )
+}
+
+export default withStyles(styles)(GnoListItemText)

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) => (
     <Avatar>
       <Mail />
     </Avatar>
-    <ListItemText primary="Safe Address" secondary={address} />
+    <ListItemText primary="Safe Address" secondary={address} cut />
   </ListItem>
 )
 

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) => (
     <Avatar>
       <DoneAll />
     </Avatar>
-    <ListItemText primary="Confirmations" secondary={`${confirmations} required confirmations per transaction`} />
+    <ListItemText
+      primary="Confirmations"
+      secondary={`${confirmations} required confirmations per transaction`}
+      cut
+    />
   </ListItem>
 )
 

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,12 +25,7 @@ type Props = Open & WithStyles & {
 
 const Owners = openHoc(({
   open, toggle, owners, classes,
-}: Props) => {
-  const itemTextClasses = {
-    secondary: classes.itemTextSecondary,
-  }
-
-  return (
+}: Props) => (
   <React.Fragment>
     <ListItem onClick={toggle}>
       <Avatar>
@@ -52,8 +44,7 @@ const Owners = openHoc(({
               <Person />
             </ListItemIcon>
             <ListItemText
-                classes={itemTextClasses}
-                inset
+              cut
               primary={owner.name}
               secondary={owner.address}
             />
@@ -62,7 +53,6 @@ const Owners = openHoc(({
       </List>
     </Collapse>
   </React.Fragment>
-  )
-})
+))
 
 export default withStyles(styles)(Owners)