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,41 +25,34 @@ type Props = Open & WithStyles & {
 
 const Owners = openHoc(({
   open, toggle, owners, classes,
-}: Props) => {
-  const itemTextClasses = {
-    secondary: classes.itemTextSecondary,
-  }
-
-  return (
-    <React.Fragment>
-      <ListItem onClick={toggle}>
-        <Avatar>
-          <Group />
-        </Avatar>
-        <ListItemText primary="Owners" secondary={`${owners.size} owners`} />
-        <ListItemIcon>
-          {open ? <ExpandLess /> : <ExpandMore />}
-        </ListItemIcon>
-      </ListItem>
-      <Collapse in={open} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          {owners.map(owner => (
-            <ListItem key={owner.address} button className={classes.nested}>
-              <ListItemIcon>
-                <Person />
-              </ListItemIcon>
-              <ListItemText
-                classes={itemTextClasses}
-                inset
-                primary={owner.name}
-                secondary={owner.address}
-              />
-            </ListItem>
-          ))}
-        </List>
-      </Collapse>
-    </React.Fragment>
-  )
-})
+}: Props) => (
+  <React.Fragment>
+    <ListItem onClick={toggle}>
+      <Avatar>
+        <Group />
+      </Avatar>
+      <ListItemText primary="Owners" secondary={`${owners.size} owners`} />
+      <ListItemIcon>
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemIcon>
+    </ListItem>
+    <Collapse in={open} timeout="auto" unmountOnExit>
+      <List component="div" disablePadding>
+        {owners.map(owner => (
+          <ListItem key={owner.address} button className={classes.nested}>
+            <ListItemIcon>
+              <Person />
+            </ListItemIcon>
+            <ListItemText
+              cut
+              primary={owner.name}
+              secondary={owner.address}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Collapse>
+  </React.Fragment>
+))
 
 export default withStyles(styles)(Owners)