ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-28 08:37:59 +02:00
Code Issues Releases Wiki Activity

Only show the label or errors part of a Property if they exist

Browse Source 
Fix weird spacing for properties that don’t have labels (ie. checkboxes
for terms of service, etc)
This commit is contained in:
Brett Sun 2015-12-03 00:49:26 +01:00
parent 61908a82f6
commit 55bdd4e03f
1 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/components/ascribe_forms/property.js
View File

@ -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>