ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-30 13:41:57 +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 React from 'react';
import ReactAddons from 'react/addons'; import ReactAddons from 'react/addons';
import classNames from 'classnames';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip'; import Tooltip from 'react-bootstrap/lib/Tooltip';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
import { mergeOptions } from '../../utils/general_utils';
let Property = React.createClass({ let Property = React.createClass({
propTypes: { propTypes: {
hidden: React.PropTypes.bool, hidden: React.PropTypes.bool,
@ -231,44 +229,44 @@ let Property = React.createClass({
}, },
render() { render() {
let footer = null; const { className, editable, footer, label, tooltip } = this.props;
let tooltip = <span/>; const style = Object.assign({}, this.props.style, { cursor: !editable ? 'not-allowed' : null });
let style = this.props.style ? mergeOptions({}, this.props.style) : {};
if(this.props.tooltip){ let tooltipEl = tooltip ? <Tooltip>{tooltip}</Tooltip>
tooltip = ( : <span />;
<Tooltip>
{this.props.tooltip} let labelEl;
</Tooltip>); 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){ let footerEl;
footer = ( if (footer) {
footerEl = (
<div className="ascribe-property-footer"> <div className="ascribe-property-footer">
{this.props.footer} {footer}
</div>); </div>
} );
if(!this.props.editable) {
style.cursor = 'not-allowed';
} }
return ( return (
<div <div
className={'ascribe-property-wrapper ' + this.getClassName()} className={classNames('ascribe-property-wrapper', this.getClassName())}
onClick={this.handleFocus} onClick={this.handleFocus}
style={style}> style={style}>
<OverlayTrigger <OverlayTrigger
delay={500} delay={500}
placement="top" placement="top"
overlay={tooltip}> overlay={tooltipEl}>
<div className={'ascribe-property ' + this.props.className}> <div className={classNames('ascribe-property', this.props.className)}>
<p> {labelEl}
<span className="pull-left">{this.props.label}</span>
<span className="pull-right">{this.state.errors}</span>
</p>
{this.renderChildren(style)} {this.renderChildren(style)}
{footer} {footerEl}
</div> </div>
</OverlayTrigger> </OverlayTrigger>
</div> </div>