From ee23a77e0866a8b36d341894c1af7714d7197d6c Mon Sep 17 00:00:00 2001
From: apanizo <adolfo.panizo@gmail.com>
Date: Thu, 26 Apr 2018 15:24:08 +0200
Subject: [PATCH] WA-238 Owners ListItem component of Safe

---
 src/routes/safe/component/Safe/Owners.jsx | 68 +++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/routes/safe/component/Safe/Owners.jsx

diff --git a/src/routes/safe/component/Safe/Owners.jsx b/src/routes/safe/component/Safe/Owners.jsx
new file mode 100644
index 00000000..f2a22946
--- /dev/null
+++ b/src/routes/safe/component/Safe/Owners.jsx
@@ -0,0 +1,68 @@
+// @flow
+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 Avatar from 'material-ui/Avatar'
+import Group from 'material-ui-icons/Group'
+import Person from 'material-ui-icons/Person'
+import ExpandLess from 'material-ui-icons/ExpandLess'
+import ExpandMore from 'material-ui-icons/ExpandMore'
+import { type OwnerProps } from '~/routes/safe/store/model/owner'
+import { type WithStyles } from '~/theme/mui'
+
+const styles = {
+  nested: {
+    paddingLeft: '40px',
+  },
+  itemTextSecondary: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+}
+
+type Props = Open & WithStyles & {
+  owners: List<OwnerProps>,
+}
+
+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>
+  )
+})
+
+export default withStyles(styles)(Owners)