Selectable List in place

website/src/ui/List.js

@@ -1,30 +1,99 @@
 import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { fontInfo } from './style'
+import { Box, Icon } from '.'
+import { sizeInfo, colorInfo, fontInfo } from './style'
 
 class List extends Component {
   static propTypes = {
-    size: PropTypes.string,
-    margin: PropTypes.number,
     children: PropTypes.node
   }
 
-  static defaultProps = {
-    size: 'medium',
-    margin: 0
-  }
-
   render() {
+    const { children } = this.props
+    const listGapItem = (<div style={{ background: 'transparent', height: sizeInfo.listTopBottomGap }} />)
+
     return (
-      <span style={{
-        display: 'inline-block',
-        fontSize: fontInfo.size[this.props.size],
+      <div style={{
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        fontSize: fontInfo.size.medium,
         fontFamily: fontInfo.family,
-        margin: this.props.margin
-      }}>{this.props.children}</span>
+      }}>
+        <Box border={`${sizeInfo.listBorderWidth}px solid ${colorInfo.listBorder}`} radius={sizeInfo.formBoxRadius}>
+          {listGapItem}
+          <div style={{ overflow: scroll }}>
+            {children}
+          </div>
+          {listGapItem}
+        </Box>
+      </div>
     )
   }
 }
 
+List.Item = Radium(class ListItem extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    active: PropTypes.bool,
+    onClick: PropTypes.func
+  }
+
+  render() {
+    const { children, active, onClick } = this.props
+
+    return (
+      <div style={{
+        display: 'table-row',
+        background: active ? colorInfo.listBackgroundActive : colorInfo.listBackground,
+      }} onClick={onClick}>
+        {children}
+      </div>
+    )
+  }
+})
+
+List.Icon = Radium(class ListIcon extends Component {
+  static propTypes = {
+    name: PropTypes.string,
+    size: PropTypes.number,
+  }
+
+  render() {
+    const { size, name } = this.props
+    let source = Icon.svgs[name] || Icon.svgs['placeholder']
+
+    return (
+      <img src={source} style={{
+        display: 'table-cell',
+        verticalAlign: 'middle',
+        width: size,
+        height: size,
+        margin: '5px 10px 5px 10px', // TODO: Put in style.js
+      }} />
+    )
+  }
+})
+List.Text = Radium(class ListText extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render() {
+    const { children } = this.props
+
+    return (
+      <span style={{
+        display: 'table-cell',
+        width: '100%',
+        color: fontInfo.color.normal,
+        align: 'left',
+        verticalAlign: 'middle',
+        textAlign: 'left'
+      }}>{children}</span>
+    )
+  }
+})
+
 export default Radium(List)