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 = ; - 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 = ( - - {this.props.tooltip} - ); + let tooltipEl = tooltip ? {tooltip} + : ; + + let labelEl; + if (label || this.state.errors) { + labelEl = ( +

+ {label} + {this.state.errors} +

+ ); } - - if(this.props.footer){ - footer = ( + + let footerEl; + if (footer) { + footerEl = (
- {this.props.footer} -
); - } - - if(!this.props.editable) { - style.cursor = 'not-allowed'; + {footer} + + ); } return (
-
-

- {this.props.label} - {this.state.errors} -

+ overlay={tooltipEl}> +
+ {labelEl} {this.renderChildren(style)} - {footer} + {footerEl}