From 55bdd4e03f72f58348c19e0c985d5fd5a3b7b8e0 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 3 Dec 2015 00:49:26 +0100
Subject: [PATCH] Only show the label or errors part of a Property if they
 exist
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix weird spacing for properties that don’t have labels (ie. checkboxes
for terms of service, etc)
---
 js/components/ascribe_forms/property.js | 54 ++++++++++++-------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 8039e636..dce6b49b 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -2,15 +2,13 @@
 
 import React from 'react';
 import ReactAddons from 'react/addons';
+import classNames from 'classnames';
 
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
 import AppConstants from '../../constants/application_constants';
 
-import { mergeOptions } from '../../utils/general_utils';
-
-
 let Property = React.createClass({
     propTypes: {
         hidden: React.PropTypes.bool,
@@ -231,44 +229,44 @@ let Property = React.createClass({
     },
 
     render() {
-        let footer = null;
-        let tooltip = <span/>;
-        let style = this.props.style ? mergeOptions({}, this.props.style) : {};
+        const { className, editable, footer, label, tooltip } = this.props;
+        const style = Object.assign({}, this.props.style, { cursor: !editable ? 'not-allowed' : null });
 
-        if(this.props.tooltip){
-            tooltip = (
-                <Tooltip>
-                    {this.props.tooltip}
-                </Tooltip>);
+        let tooltipEl = tooltip ? <Tooltip>{tooltip}</Tooltip>
+                                : <span />;
+
+        let labelEl;
+        if (label || this.state.errors) {
+            labelEl = (
+                <p>
+                    <span className="pull-left">{label}</span>
+                    <span className="pull-right">{this.state.errors}</span>
+                </p>
+            );
         }
-        
-        if(this.props.footer){
-            footer = (
+
+        let footerEl;
+        if (footer) {
+            footerEl = (
                 <div className="ascribe-property-footer">
-                    {this.props.footer}
-                </div>);
-        }
-
-        if(!this.props.editable) {
-            style.cursor = 'not-allowed';
+                    {footer}
+                </div>
+            );
         }
 
         return (
             <div
-                className={'ascribe-property-wrapper ' + this.getClassName()}
+                className={classNames('ascribe-property-wrapper', this.getClassName())}
                 onClick={this.handleFocus}
                 style={style}>
                 <OverlayTrigger
                     delay={500}
                     placement="top"
-                    overlay={tooltip}>
-                    <div className={'ascribe-property ' + this.props.className}>
-                        <p>
-                            <span className="pull-left">{this.props.label}</span>
-                            <span className="pull-right">{this.state.errors}</span>
-                        </p>
+                    overlay={tooltipEl}>
+                    <div className={classNames('ascribe-property', this.props.className)}>
+                        {labelEl}
                         {this.renderChildren(style)}
-                        {footer}
+                        {footerEl}
                     </div>
                 </OverlayTrigger>
             </div>