Cherry-pick from 1ac2fe7f96:

- Integrate PropertyCollapsible's functionality to Property

js/components/ascribe_detail/edition_action_panel.js

@@ -127,7 +127,7 @@ let EditionActionPanel = React.createClass({
                                     isInline={true}>
                                     <Property
                                         name="bitcoin_id"
-                                        hidden={true}>
+                                        expanded={false}>
                                         <input
                                             type="text"
                                             value={edition.bitcoin_id}
@@ -148,7 +148,7 @@ let EditionActionPanel = React.createClass({
                                     isInline={true}>
                                     <Property
                                         name="bitcoin_id"
-                                        hidden={true}>
+                                        expanded={false}>
                                         <input
                                             type="text"
                                             value={edition.bitcoin_id}

js/components/ascribe_forms/form_create_contract.js

@@ -91,14 +91,14 @@ let CreateContractForm = React.createClass({
                 <Property
                     name='name'
                     label={getLangText('Contract name')}
-                    hidden={true}>
+                    expanded={false}>
                     <input
                         type="text"
                         value={this.state.contractName}/>
                 </Property>
                 <Property
                     name="is_public"
-                    hidden={true}>
+                    expanded={false}>
                     <input
                         type="checkbox"
                         value={this.props.isPublic} />

js/components/ascribe_forms/form_loan.js

@@ -64,7 +64,7 @@ let LoanForm = React.createClass({
         });
     },
 
-    handleReset(event) {
+    handleReset() {
         this.handleEmailOnChange();
     },
 
@@ -163,7 +163,7 @@ let LoanForm = React.createClass({
                     label={getLangText('Start date')}
                     editable={!startDate}
                     overrideForm={!!startDate}
-                    hidden={!showStartDate}>
+                    expanded={showStartDate}>
                     <InputDate
                         defaultValue={startDate}
                         placeholderText={getLangText('Loan start date')} />
@@ -173,7 +173,7 @@ let LoanForm = React.createClass({
                     editable={!endDate}
                     overrideForm={!!endDate}
                     label={getLangText('End date')}
-                    hidden={!showEndDate}>
+                    expanded={showEndDate}>
                     <InputDate
                         defaultValue={endDate}
                         placeholderText={getLangText('Loan end date')} />
@@ -183,7 +183,7 @@ let LoanForm = React.createClass({
                     label={getLangText('Personal Message')}
                     editable={true}
                     overrideForm={true}
-                    hidden={!showPersonalMessage}>
+                    expanded={showPersonalMessage}>
                     <InputTextAreaToggable
                         rows={1}
                         defaultValue={message}
@@ -200,7 +200,7 @@ let LoanForm = React.createClass({
                 <Property
                     name='password'
                     label={getLangText('Password')}
-                    hidden={!showPassword}>
+                    expanded={showPassword}>
                     <input
                         type="password"
                         placeholder={getLangText('Enter your password')}

js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js

@@ -122,7 +122,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Biography')}
-                        hidden={disabled && !piece.extra_data.artist_bio}>
+                        expanded={!disabled && piece.extra_data.artist_bio}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_bio}
@@ -131,7 +131,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_contact_information'
                         label={getLangText('Artist Contact Information')}
-                        hidden={disabled && !piece.extra_data.artist_contact_information}>
+                        expanded={!disabled && piece.extra_data.artist_contact_information}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_contact_information}
@@ -140,7 +140,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Conceptual Overview')}
-                        hidden={disabled && !piece.extra_data.conceptual_overview}>
+                        expanded={!disabled && piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.conceptual_overview}
@@ -149,7 +149,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium (technical specifications)')}
-                        hidden={disabled && !piece.extra_data.medium}>
+                        expanded={!disabled && piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.medium}
@@ -158,7 +158,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='size_duration'
                         label={getLangText('Size / Duration')}
-                        hidden={disabled && !piece.extra_data.size_duration}>
+                        expanded={!disabled && piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.size_duration}
@@ -167,7 +167,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='display_instructions'
                         label={getLangText('Display instructions')}
-                        hidden={disabled && !piece.extra_data.display_instructions}>
+                        expanded={!disabled && piece.extra_data.display_instructions}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.display_instructions}
@@ -176,7 +176,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='additional_details'
                         label={getLangText('Additional details')}
-                        hidden={disabled && !piece.extra_data.additional_details}>
+                        expanded={!disabled && piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.additional_details}

js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js

@@ -104,7 +104,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='artist_website'
                         label={getLangText('Artist Website')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.artist_website}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.artist_website}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.artist_website}
@@ -113,7 +113,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='gallery_website'
                         label={getLangText('Website of related Gallery, Museum, etc.')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.gallery_website}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.gallery_website}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.gallery_website}
@@ -122,7 +122,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='additional_websites'
                         label={getLangText('Additional Websites/Publications/Museums/Galleries')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.additional_websites}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.additional_websites}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.additional_websites}
@@ -131,7 +131,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Short text about the Artist')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.conceptual_overview}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.conceptual_overview}

js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js

@@ -103,7 +103,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.medium}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.medium}
@@ -112,7 +112,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='size_duration'
                         label={getLangText('Size/Duration')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.size_duration}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.size_duration}
@@ -121,7 +121,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='copyright'
                         label={getLangText('Copyright')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.copyright}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.copyright}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.copyright}
@@ -130,7 +130,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='courtesy_of'
                         label={getLangText('Courtesy of')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.courtesy_of}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.courtesy_of}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.courtesy_of}
@@ -139,7 +139,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='copyright_of_photography'
                         label={getLangText('Copyright of Photography')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.copyright_of_photography}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.copyright_of_photography}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.copyright_of_photography}
@@ -148,7 +148,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='additional_details'
                         label={getLangText('Additional Details about the artwork')}
-                        hidden={this.props.disabled && !this.props.piece.extra_data.additional_details}>
+                        expanded={!this.props.disabled && this.props.piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.additional_details}