From aa5934cd25d1520db041c0ee0bef1e258b345eb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 14 Jul 2015 19:53:49 +0200 Subject: [PATCH 1/6] made inputcheckbox component generic --- js/components/ascribe_forms/form_signup.js | 9 ++++++++- js/components/ascribe_forms/input_checkbox.js | 12 +++++------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js index 3a5ce94e..f0c3323b 100644 --- a/js/components/ascribe_forms/form_signup.js +++ b/js/components/ascribe_forms/form_signup.js @@ -126,7 +126,14 @@ let SignupForm = React.createClass({ name="terms" className="ascribe-settings-property-collapsible-toggle" style={{paddingBottom: 0}}> - + + + {' ' + getLangText('I agree to the Terms of Service') + ' '} + ( + {getLangText('read')} + ) + + ); diff --git a/js/components/ascribe_forms/input_checkbox.js b/js/components/ascribe_forms/input_checkbox.js index 7dc2f9ac..ef870a02 100644 --- a/js/components/ascribe_forms/input_checkbox.js +++ b/js/components/ascribe_forms/input_checkbox.js @@ -7,7 +7,10 @@ import { getLangText } from '../../utils/lang_utils'; let InputCheckbox = React.createClass({ propTypes: { required: React.PropTypes.string.isRequired, - label: React.PropTypes.string.isRequired + children: React.PropTypes.oneOfType([ + React.PropTypes.arrayOf(React.PropTypes.element), + React.PropTypes.element + ]).isRequired }, getInitialState() { @@ -31,12 +34,7 @@ let InputCheckbox = React.createClass({ onFocus={this.handleFocus}> - - {' ' + getLangText('I agree to the Terms of Service') + ' '} - ( - {getLangText('read')} - ) - + {this.props.children} ); From 18898b6f8a77b6a3b4f410fc2f468b995ae5d749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 14 Jul 2015 20:07:55 +0200 Subject: [PATCH 2/6] start working on register piece for price - WIP --- js/components/ascribe_forms/form.js | 2 ++ js/components/whitelabel/prize/app.js | 1 - .../whitelabel/prize/components/register_piece.js | 9 ++++++++- sass/whitelabel/prize/index.scss | 1 + sass/whitelabel/prize/landing.scss | 2 -- 5 files changed, 11 insertions(+), 4 deletions(-) diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 7e0d6b42..c7fbb588 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -56,9 +56,11 @@ let Form = React.createClass({ getFormData(){ let data = {}; + console.log(this.refs); for (let ref in this.refs){ data[this.refs[ref].props.name] = this.refs[ref].state.value; } + console.log(data); if ('getFormData' in this.props){ data = mergeOptionsWithDuplicates(data, this.props.getFormData()); } diff --git a/js/components/whitelabel/prize/app.js b/js/components/whitelabel/prize/app.js index 64657922..819f4502 100644 --- a/js/components/whitelabel/prize/app.js +++ b/js/components/whitelabel/prize/app.js @@ -9,7 +9,6 @@ import GlobalNotification from '../../global_notification'; let RouteHandler = Router.RouteHandler; - let PrizeApp = React.createClass({ mixins: [Router.State], diff --git a/js/components/whitelabel/prize/components/register_piece.js b/js/components/whitelabel/prize/components/register_piece.js index a1009b4b..280b9b50 100644 --- a/js/components/whitelabel/prize/components/register_piece.js +++ b/js/components/whitelabel/prize/components/register_piece.js @@ -40,7 +40,14 @@ let PrizeRegisterPiece = React.createClass({ name="terms" className="ascribe-settings-property-collapsible-toggle" style={{paddingBottom: 0}}> - + + + {' ' + getLangText('I agree to the Terms of Service the art price') + ' '} + ( + {getLangText('read')} + ) + + ); diff --git a/sass/whitelabel/prize/index.scss b/sass/whitelabel/prize/index.scss index f2e97965..2496260b 100644 --- a/sass/whitelabel/prize/index.scss +++ b/sass/whitelabel/prize/index.scss @@ -1,6 +1,7 @@ @import 'landing'; .ascribe-prize-app { + background-color: #FDFDFD; border-radius: 0; padding-top: 70px; } diff --git a/sass/whitelabel/prize/landing.scss b/sass/whitelabel/prize/landing.scss index de6d6b94..5f605376 100644 --- a/sass/whitelabel/prize/landing.scss +++ b/sass/whitelabel/prize/landing.scss @@ -1,6 +1,4 @@ .wp { - background-color: #FDFDFD; - height: 100%; /* We need this, otherwise piece list will have a scrollbar */ From 6a04a1a05301894a3d850135ac17ed9c24b045ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 14 Jul 2015 20:10:41 +0200 Subject: [PATCH 3/6] fix fineuploader issue after unmounting react-s3-fineuploader --- js/components/ascribe_uploader/react_s3_fine_uploader.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index b9ef09fc..9d60e3ba 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -163,6 +163,13 @@ var ReactS3FineUploader = React.createClass({ } }, + componentWillUnmount() { + // Without this method, fineuploader will continue to try to upload artworks + // even though this component is not mounted any more. + // Therefore we cancel all uploads + this.state.uploader.cancelAll(); + }, + propsToConfig() { let objectProperties = this.props.objectProperties; objectProperties.key = this.requestKey; From f8b87a884970b52086ef49d4db88d69335ba2166 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 14 Jul 2015 20:35:16 +0200 Subject: [PATCH 4/6] finish register artwork for prize --- js/components/ascribe_forms/input_checkbox.js | 14 +++++++++++--- js/components/ascribe_forms/property.js | 19 +++++++++++++++---- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/js/components/ascribe_forms/input_checkbox.js b/js/components/ascribe_forms/input_checkbox.js index ef870a02..aafba067 100644 --- a/js/components/ascribe_forms/input_checkbox.js +++ b/js/components/ascribe_forms/input_checkbox.js @@ -2,8 +2,6 @@ import React from 'react'; -import { getLangText } from '../../utils/lang_utils'; - let InputCheckbox = React.createClass({ propTypes: { required: React.PropTypes.string.isRequired, @@ -19,12 +17,22 @@ let InputCheckbox = React.createClass({ }; }, - handleFocus() { + handleFocus(event) { this.refs.checkbox.getDOMNode().checked = !this.refs.checkbox.getDOMNode().checked; + + // This is calling property.js's method handleChange which + // expects an event object + // Since we don't have a valid one, we'll just manipulate the one we get and send + // it to handleChange + event.target.value = this.refs.checkbox.getDOMNode().checked; + this.props.onChange(event); + event.stopPropagation(); + this.setState({ show: this.refs.checkbox.getDOMNode().checked, value: this.refs.checkbox.getDOMNode().checked }); + }, render() { diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 6ff25712..08129662 100644 --- a/js/components/ascribe_forms/property.js +++ b/js/components/ascribe_forms/property.js @@ -46,10 +46,19 @@ let Property = React.createClass({ }; }, - componentWillReceiveProps(){ + componentWillReceiveProps() { + + // 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 + if(typeof this.refs.input.getDOMNode().value !== 'undefined') { + this.setState({ + value: this.refs.input.getDOMNode().value + }); + } + this.setState({ - initialValue: this.refs.input.getDOMNode().defaultValue, - value: this.refs.input.getDOMNode().value + initialValue: this.refs.input.getDOMNode().defaultValue }); }, @@ -67,11 +76,13 @@ let Property = React.createClass({ }, handleChange(event) { + this.props.handleChange(event); if ('onChange' in this.props) { this.props.onChange(event); } - this.setState({value: event.target.value}); + + this.setState({value: true}); }, handleFocus() { From b52d000ac70772a779129d682921a7b1fe68c58a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 14 Jul 2015 21:06:11 +0200 Subject: [PATCH 5/6] made add work conditional --- js/components/header.js | 12 +++++++++++- js/components/whitelabel/prize/app.js | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/js/components/header.js b/js/components/header.js index 7c0c7ead..3b9dc7a3 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -27,8 +27,18 @@ import { getLangText } from '../utils/lang_utils'; let Header = React.createClass({ + propTypes: { + showAddWork: React.PropTypes.bool + }, + mixins: [Router.Navigation, Router.State], + getDefaultProps() { + return { + showAddWork: true + }; + }, + getInitialState() { return mergeOptions(WhitelabelStore.getState(), UserStore.getState()); }, @@ -96,7 +106,7 @@ let Header = React.createClass({ ); collection = {getLangText('COLLECTION')}; - addNewWork = + {getLangText('NEW WORK')}; + addNewWork = this.props.showAddWork ? + {getLangText('NEW WORK')} : null; } else { account = {getLangText('LOGIN')}; diff --git a/js/components/whitelabel/prize/app.js b/js/components/whitelabel/prize/app.js index 819f4502..8876aa8c 100644 --- a/js/components/whitelabel/prize/app.js +++ b/js/components/whitelabel/prize/app.js @@ -17,7 +17,7 @@ let PrizeApp = React.createClass({ if (this.isActive('landing') || this.isActive('login') || this.isActive('signup')) { header = ; } else { - header =
; + header =
; } return ( From d2b2bdf7d572cf2f6a54afeb9024767346961621 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 14 Jul 2015 21:13:15 +0200 Subject: [PATCH 6/6] add custom submit button to piece list --- .../ascribe_piece_list_toolbar/piece_list_toolbar.js | 12 ++++++++---- js/components/piece_list.js | 7 +++++-- .../whitelabel/prize/components/piece_list.js | 12 +++++++----- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index a4b24722..3f9d04ab 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -4,16 +4,17 @@ import React from 'react'; import Input from 'react-bootstrap/lib/Input'; import Glyphicon from 'react-bootstrap/lib/Glyphicon'; -import ButtonLink from 'react-router-bootstrap/lib/ButtonLink'; -import Row from 'react-bootstrap/lib/Row'; -import Col from 'react-bootstrap/lib/Col'; import { getLangText } from '../../utils/lang_utils'; let PieceListToolbar = React.createClass({ propTypes: { className: React.PropTypes.string, - searchFor: React.PropTypes.func + searchFor: React.PropTypes.func, + children: React.PropTypes.oneOfType([ + React.PropTypes.arrayOf(React.PropTypes.element), + React.PropTypes.element + ]) }, searchFor() { @@ -29,6 +30,9 @@ let PieceListToolbar = React.createClass({
+ + {this.props.children} + + searchFor={this.searchFor}> + {this.props.customSubmitButton} + - - Submit a new artwork to the prize - - - + + Submit a new artwork to the prize + + }/>
); }