From 862cd7986c208ccf488e3771f6bf770c3fd9b897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 19 Aug 2015 17:06:14 +0200
Subject: [PATCH] add lock/disabled functionality to form

---
 js/components/ascribe_forms/form.js           |  6 +++-
 .../ascribe_forms/form_register_piece.js      | 18 ++++++++++--
 js/components/ascribe_forms/input_checkbox.js | 28 +++++++++++++++++--
 js/components/ascribe_forms/property.js       | 20 +++++++++----
 sass/ascribe_settings.scss                    |  2 --
 5 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index 2b956a7e..eac91d42 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -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
                 });
             }
         });
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 6545007c..a47ab00e 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -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: {
diff --git a/js/components/ascribe_forms/input_checkbox.js b/js/components/ascribe_forms/input_checkbox.js
index a71dd4b6..275b2374 100644
--- a/js/components/ascribe_forms/input_checkbox.js
+++ b/js/components/ascribe_forms/input_checkbox.js
@@ -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>
diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 5a72270c..acb38234 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -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>
diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss
index e8a57832..ad498646 100644
--- a/sass/ascribe_settings.scss
+++ b/sass/ascribe_settings.scss
@@ -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 {