Integrating new form binder

website/src/ui/BoundCheckbox.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Checkbox } from 'ui'
 import { reactAutoBind } from 'auto-bind2'
+import { fontInfo } from 'ui/style'
 
 export default class BoundCheckbox extends React.Component {
   static propTypes = {
@@ -36,7 +37,20 @@ export default class BoundCheckbox extends React.Component {
     const { visible, disabled, value } = this.state
 
     return (
-      <Checkbox visible={visible} disabled={disabled} value={!!value} name={name} label={label} />
+      <div style={visible ? {} : { display: 'none' }}>
+        <Checkbox id={name} disabled={disabled} value={value} onChange={this.handleChange} />
+        <label
+          htmlFor={name}
+          style={{
+            marginLeft: 10,
+            verticalAlign: 'top',
+            fontSize: fontInfo.size.medium,
+            fontFamily: fontInfo.family,
+            color: disabled ? fontInfo.color.dimmed : fontInfo.color.normal,
+          }}>
+          {label}
+        </label>
+      </div>
     )
   }
 }

website/src/ui/Box.js

@@ -17,15 +17,36 @@ class Box extends Component {
   }
 
   render() {
-    const { children, background, borderTop, borderBottom, borderLeft,
-      borderRight, border, radius } = this.props
+    let {
+      children, background,
+      borderTop, borderBottom, borderLeft, borderRight,
+      border, radius } = this.props
+    const flatten = (border) => {
+      if (!border) {
+        return null
+      }
+
+      border.style = border.style || 'solid'
+      border.width = border.width || 1
+      border.color = border.color || 'black'
+
+      return (border.width.toString() + 'px ' + border.style + ' ' + border.color)
+    }
+
+    if (border) {
+      borderTop = borderBottom = borderLeft = borderRight = flatten(border)
+    } else {
+      borderTop = flatten(borderTop)
+      borderBottom = flatten(borderBottom)
+      borderLeft = flatten(borderLeft)
+      borderRight = flatten(borderRight)
+    }
 
     return (
       <div style={[
-        { height: '100%', width: '100%' },
+        { height: '100%', width: '100%', borderTop, borderBottom, borderLeft, borderRight },
         background && { backgroundColor: background },
         radius && { borderRadius: radius },
-        border ? { border } : { borderTop, borderBottom, borderLeft, borderRight },
       ]}>
         {children}
       </div>

website/src/ui/Checkbox.js

@@ -2,15 +2,14 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { reactAutoBind } from 'auto-bind2'
-import { fontInfo, colorInfo, sizeInfo } from './style'
+import { colorInfo, sizeInfo } from './style'
 
 class Checkbox extends Component {
   static propTypes = {
     value: PropTypes.bool,
-    label: PropTypes.string,
-    visible: PropTypes.bool,
     disabled: PropTypes.bool,
-    name: PropTypes.string,
+    id: PropTypes.string,
+    onChange: PropTypes.func,
   }
 
   static style = {
@@ -59,10 +58,6 @@ class Checkbox extends Component {
     checkmarkUnchecked: {
       display: 'none'
     },
-
-    label: {
-      marginLeft: 10,
-    }
   }
 
   constructor(props) {
@@ -73,31 +68,31 @@ class Checkbox extends Component {
     }
   }
 
-  onClick() {
-    this.setState({ checked: !this.state.checked })
+  componentWillReceiveProps(nextProps) {
+    if (nextProps !== this.props) {
+      this.setState({ checked: nextProps.value })
+    }
+  }
+
+  onClick(e) {
+    const checked = !this.state.checked
+
+    this.setState({ checked })
+
+    if (this.props.onChange) {
+      this.props.onChange(e, { checked })
+    }
   }
 
   render() {
-    const { visible, name, label, disabled } = this.props
+    const { id, disabled } = this.props
     const { checked } = this.state
 
     return (
-      <div style={[!visible && { display: 'none' }]}>
-        <div style={[Checkbox.style.checkbox, disabled ? Checkbox.style.checkboxDisabled : !checked ? Checkbox.style.checkboxUnchecked : null]}
-          onClick={disabled ? null : this.onClick}>
-          <input id={name} type='checkbox' style={Checkbox.style.input} disabled={disabled} />
-          <div style={[Checkbox.style.checkmark, !checked && Checkbox.style.checkmarkUnchecked]} />
-        </div>
-        <label
-          htmlFor={name}
-          style={[Checkbox.style.label, {
-            verticalAlign: 'top',
-            fontSize: fontInfo.size.medium,
-            fontFamily: fontInfo.family,
-            color: disabled ? fontInfo.color.dimmed : fontInfo.color.normal,
-          }]}>
-          {label}
-        </label>
+      <div style={[Checkbox.style.checkbox, disabled ? Checkbox.style.checkboxDisabled : !checked ? Checkbox.style.checkboxUnchecked : null]}
+        onClick={disabled ? null : this.onClick}>
+        <input id={id} type='checkbox' style={Checkbox.style.input} disabled={disabled} />
+        <div style={[Checkbox.style.checkmark, !checked && Checkbox.style.checkmarkUnchecked]} />
       </div>
     )
   }

website/src/ui/List.js

@@ -21,12 +21,12 @@ class List extends Component {
         fontFamily: fontInfo.family,
       }}>
         <Box
-          border={`${sizeInfo.listBorderWidth}px solid ${colorInfo.listBorder}`}
+          border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
           radius={sizeInfo.formBoxRadius}>
           <div style={{
             height: '100%',
             width: '100%',
-            overflow: 'scroll'
+            overflowY: 'scroll',
           }}>
             {children}
           </div>
@@ -49,7 +49,7 @@ List.Item = Radium(class ListItem extends Component {
     return (
       <div style={{
         display: 'table-row',
-        background: active ? colorInfo.listBackgroundActive : colorInfo.listBackground,
+        background: active ? colorInfo.listBackgroundActive : 'transparent',
         ':hover': {
           background: colorInfo.listBackgroundHover
         },