add lock/disabled functionality to form

This commit is contained in:
Tim Daubenschütz 2015-08-19 17:06:14 +02:00
parent 1f7f84dcea
commit 862cd7986c
5 changed files with 62 additions and 12 deletions

View File

@ -33,6 +33,9 @@ let Form = React.createClass({
React.PropTypes.arrayOf(React.PropTypes.element)
]),
// Can be used to freeze the whole form
disabled: React.PropTypes.bool,
// You can use the form for inline requests, like the submit click on a button.
// For the form to then not display the error on top, you need to enable this option.
// It will make use of the GlobalNotification
@ -203,7 +206,8 @@ let Form = React.createClass({
if (child) {
return ReactAddons.addons.cloneWithProps(child, {
handleChange: this.handleChangeChild,
ref: child.props.name
ref: child.props.name,
editable: !this.props.disabled
});
}
});

View File

@ -86,6 +86,7 @@ let RegisterPieceForm = React.createClass({
enableLocalHashing = enableLocalHashing && this.props.enableLocalHashing;
return (
<Form
disabled={false}
className="ascribe-form-bordered"
ref='form'
url={ApiUrls.pieces_list}
@ -160,10 +161,23 @@ let FileUploader = React.createClass({
isFineUploaderActive: React.PropTypes.bool,
onLoggedOut: React.PropTypes.func,
editable: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool
enableLocalHashing: React.PropTypes.bool,
// provided by Property
disabled: React.PropTypes.bool
},
render() {
let editable = this.props.isFineUploaderActive;
// if disabled is actually set by property, we want to override
// isFineUploaderActive
if(typeof this.props.disabled !== 'undefined') {
editable = !this.props.disabled;
}
return (
<ReactS3FineUploader
onClick={this.props.onClick}
@ -182,7 +196,7 @@ let FileUploader = React.createClass({
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
areAssetsDownloadable={false}
areAssetsEditable={this.props.isFineUploaderActive}
areAssetsEditable={editable}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {

View File

@ -21,7 +21,11 @@ let InputCheckbox = React.createClass({
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
])
]),
// provided by Property
disabled: React.PropTypes.bool,
onChange: React.PropTypes.func
},
// As HTML inputs, we're setting the default value for an input to checked === false
@ -56,6 +60,12 @@ let InputCheckbox = React.createClass({
},
onChange() {
// if this.props.disabled is true, we're just going to ignore every click,
// as the value should then not be changable by the user
if(this.props.disabled) {
return;
}
// On every change, we're inversing the input's value
let inverseValue = !this.refs.checkbox.getDOMNode().checked;
@ -74,6 +84,18 @@ let InputCheckbox = React.createClass({
},
render() {
let style = {};
// Some conditional styling if the component is disabled
if(!this.props.disabled) {
style.cursor = 'pointer';
style.color = 'rgba(0, 0, 0, 0.5)';
} else {
style.cursor = 'not-allowed';
style.color = 'rgba(0, 0, 0, 0.35)';
}
return (
<span
onClick={this.onChange}>
@ -83,7 +105,9 @@ let InputCheckbox = React.createClass({
onChange={this.onChange}
checked={this.state.value}
defaultChecked={this.props.defaultChecked}/>
<span className="checkbox">
<span
className="checkbox"
style={style}>
{this.props.children}
</span>
</span>

View File

@ -6,6 +6,8 @@ import ReactAddons from 'react/addons';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import { mergeOptions } from '../../utils/general_utils';
let Property = React.createClass({
propTypes: {
hidden: React.PropTypes.bool,
@ -167,9 +169,10 @@ let Property = React.createClass({
}
},
renderChildren() {
renderChildren(style) {
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
style,
onChange: this.handleChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
@ -181,25 +184,32 @@ let Property = React.createClass({
render() {
let tooltip = <span/>;
if (this.props.tooltip){
let style = this.props.style ? mergeOptions({}, this.props.style) : {};
if(this.props.tooltip){
tooltip = (
<Tooltip>
{this.props.tooltip}
</Tooltip>);
}
let footer = null;
if (this.props.footer){
if(this.props.footer){
footer = (
<div className="ascribe-property-footer">
{this.props.footer}
</div>);
}
if(!this.props.editable) {
style.cursor = 'not-allowed';
}
return (
<div
className={'ascribe-settings-wrapper ' + this.getClassName()}
onClick={this.handleFocus}
onFocus={this.handleFocus}
style={this.props.style}>
style={style}>
<OverlayTrigger
delay={500}
placement="top"
@ -207,7 +217,7 @@ let Property = React.createClass({
<div className={'ascribe-settings-property ' + this.props.className}>
{this.state.errors}
<span>{ this.props.label}</span>
{this.renderChildren()}
{this.renderChildren(style)}
{footer}
</div>
</OverlayTrigger>

View File

@ -153,12 +153,10 @@
/* Taken from: http://www.htmllion.com/css3-checkbox.html */
.checkbox {
display: inline-block;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: .9em;
color: rgba(0, 0, 0, .5);
vertical-align:middle;
> span {