Include PropertyCollapsible's functionality into Property

js/components/ascribe_forms/form_contract_agreement.js

@@ -11,7 +11,6 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import Form from './form';
 import Property from './property';
-import PropertyCollapsible from './property_collapsible';
 import InputTextAreaToggable from './input_textarea_toggable';
 
 import ApiUrls from '../../constants/api_urls';
@@ -122,9 +121,10 @@ let ContractAgreementForm = React.createClass({
                             required/>
                     </Property>
                     {this.getContracts()}
-                    <PropertyCollapsible
+                    <Property
                         name='appendix'
-                        checkboxLabel={getLangText('Add appendix to the contract')}>
+                        checkboxLabel={getLangText('Add appendix to the contract')}
+                        expanded={false}>
                         <span>{getLangText('Appendix')}</span>
                         {/* We're using disabled on a form here as PropertyCollapsible currently
                         does not support the disabled + overrideForm functionality */}
@@ -132,7 +132,7 @@ let ContractAgreementForm = React.createClass({
                             rows={1}
                             disabled={false}
                             placeholder={getLangText('This will be appended to the contract selected above')}/>
-                    </PropertyCollapsible>
+                    </Property>
                 </Form>
             );
         }

js/components/ascribe_forms/form_register_piece.js

@@ -7,7 +7,6 @@ import UserActions from '../../actions/user_actions';
 
 import Form from './form';
 import Property from './property';
-import PropertyCollapsible from './property_collapsible';
 import InputFineUploader from './input_fineuploader';
 import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
 

js/components/ascribe_forms/property.js

@@ -41,7 +41,8 @@ const Property = React.createClass({
             element
         ]),
         style: object,
-        expanded: bool
+        expanded: bool,
+        checkboxLabel: string
     },
 
     getDefaultProps() {
@@ -53,7 +54,17 @@ const Property = React.createClass({
     },
 
     getInitialState() {
+        const { expanded, ignoreFocus, checkboxLabel } = this.props;
+
         return {
+            // We're mirroring expanded here as a state
+            // React's docs do NOT consider this an antipattern as long as it's
+            // not a "source of truth"-duplication
+            expanded,
+
+            // When a checkboxLabel is defined in the props, we want to set
+            // `ignoreFocus` to true
+            ignoreFocus: ignoreFocus || checkboxLabel,
             // Please don't confuse initialValue with react's defaultValue.
             // initialValue is set by us to ensure that a user can reset a specific
             // property (after editing) to its initial value
@@ -64,9 +75,19 @@ const Property = React.createClass({
         };
     },
 
-    componentWillReceiveProps() {
+    componentWillReceiveProps(nextProps) {
         let childInput = this.refs.input;
 
+        // For expanded there are actually two use cases:
+        //
+        // 1. Control its value from the outside completely (do not define `checkboxLabel`)
+        // 2. Let it be controlled from the inside (default value can be set though via `expanded`)
+        //
+        // This handles case 1.
+        if(nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
+            this.setState({ expanded: nextProps.expanded });
+        }
+
         // In order to set this.state.value from another component
         // the state of value should only be set if its not undefined and
         // actually references something
@@ -137,7 +158,7 @@ const Property = React.createClass({
     handleFocus() {
         // if ignoreFocus (bool) is defined, then just ignore focusing on
         // the property and input
-        if(this.props.ignoreFocus) {
+        if(this.state.ignoreFocus) {
             return;
         }
 
@@ -189,7 +210,7 @@ const Property = React.createClass({
     },
 
     getClassName() {
-        if(!this.props.expanded){
+        if(!this.state.expanded && !this.props.checkboxLabel){
             return 'is-hidden';
         }
         if(!this.props.editable){
@@ -232,6 +253,31 @@ const Property = React.createClass({
         }
     },
 
+    handleCheckboxToggle() {
+        this.setState({expanded: !this.state.expanded});
+    },
+
+    getCheckbox() {
+        const { checkboxLabel } = this.props;
+
+        if(checkboxLabel) {
+            return (
+                <div
+                    className="ascribe-property-collapsible-toggle"
+                    onClick={this.handleCheckboxToggle}>
+                    <input
+                        onChange={this.handleCheckboxToggle}
+                        type="checkbox"
+                        checked={this.state.expanded}
+                        ref="checkboxCollapsible"/>
+                    <span className="checkbox">{' ' + checkboxLabel}</span>
+                </div>
+            );
+        } else {
+            return null;
+        }
+    },
+
     render() {
         let footer = null;
         let style = this.props.style ? mergeOptions({}, this.props.style) : {};
@@ -243,18 +289,18 @@ const Property = React.createClass({
                 </div>);
         }
 
-        if(!this.props.editable) {
-            style.cursor = 'not-allowed';
-        }
+        style.paddingBottom = !this.state.expanded ? 0 : null;
+        style.cursor = !this.props.editable ? 'not-allowed' : null;
 
         return (
             <div
                 className={'ascribe-property-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
                 style={style}>
+                {this.getCheckbox()}
                 <Panel
                     collapsible
-                    expanded={this.props.expanded}
+                    expanded={this.state.expanded}
                     className="bs-custom-panel">
                     <div className={'ascribe-property ' + this.props.className}>
                         {this.getLabelAndErrors()}

js/components/register_piece.js

@@ -17,7 +17,7 @@ import UserStore from '../stores/user_store';
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
-import PropertyCollapsible from './ascribe_forms/property_collapsible';
+import Property from './ascribe_forms/property';
 import RegisterPieceForm from './ascribe_forms/form_register_piece';
 
 import { mergeOptions } from '../utils/general_utils';
@@ -96,15 +96,16 @@ let RegisterPiece = React.createClass( {
     getSpecifyEditions() {
         if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
             return (
-                <PropertyCollapsible
+                <Property
                     name="num_editions"
-                    checkboxLabel={getLangText('Specify editions')}>
+                    checkboxLabel={getLangText('Specify editions')}
+                    expanded={false}>
                     <span>{getLangText('Editions')}</span>
                     <input
                         type="number"
                         placeholder="(e.g. 32)"
                         min={0}/>
-                </PropertyCollapsible>
+                </Property>
             );
         }
     },

sass/ascribe_property.scss

@@ -166,7 +166,7 @@ $ascribe-red-error: rgb(169, 68, 66);
 .ascribe-property-collapsible-toggle {
     border-top: 1px solid rgba(0, 0, 0, .05);
     display: inline-block;
-    padding: .5em 1.5em;
+    padding: .75em 0 .75em 1.5em;
     text-align: left;
     width: 100%;
 }