From 5bc447ecc8898e8c15613beaeefbc15818883f5c Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Tue, 8 Dec 2015 18:23:02 +0100 Subject: [PATCH] Allow warnings to be set from inside properties to change appearance --- .../ascribe_forms/input_fineuploader.js | 3 +++ js/components/ascribe_forms/property.js | 21 ++++++++++++------- .../react_s3_fine_uploader.js | 19 +++++++++++++++++ sass/ascribe_property.scss | 7 +++++-- 4 files changed, 40 insertions(+), 10 deletions(-) diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js index a6028cf9..b25056a3 100644 --- a/js/components/ascribe_forms/input_fineuploader.js +++ b/js/components/ascribe_forms/input_fineuploader.js @@ -25,6 +25,7 @@ const InputFineUploader = React.createClass({ // Props for ReactS3FineUploader areAssetsDownloadable: bool, + setWarning: func, showErrorPrompt: bool, handleChangedFile: func, // TODO: rename to onChangedFile @@ -122,6 +123,7 @@ const InputFineUploader = React.createClass({ fileClassToUpload, uploadMethod, handleChangedFile, + setWarning, showErrorPrompt, disabled } = this.props; let editable = isFineUploaderActive; @@ -144,6 +146,7 @@ const InputFineUploader = React.createClass({ isReadyForFormSubmission={isReadyForFormSubmission} areAssetsDownloadable={areAssetsDownloadable} areAssetsEditable={editable} + setWarning={setWarning} showErrorPrompt={showErrorPrompt} signature={{ endpoint: AppConstants.serverUrl + 's3/signature/', diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 063d27dd..7f2a34e2 100644 --- a/js/components/ascribe_forms/property.js +++ b/js/components/ascribe_forms/property.js @@ -71,7 +71,8 @@ const Property = React.createClass({ initialValue: null, value: null, isFocused: false, - errors: null + errors: null, + hasWarning: false }; }, @@ -209,17 +210,20 @@ const Property = React.createClass({ this.setState({errors: null}); }, + setWarning(hasWarning) { + this.setState({ hasWarning }); + }, + getClassName() { - if(!this.state.expanded && !this.props.checkboxLabel){ + if (!this.state.expanded && !this.props.checkboxLabel) { return 'is-hidden'; - } - if(!this.props.editable){ + } else if (!this.props.editable) { return 'is-fixed'; - } - if (this.state.errors){ + } else if (this.state.errors) { return 'is-error'; - } - if(this.state.isFocused) { + } else if (this.state.hasWarning) { + return 'is-warning'; + } else if (this.state.isFocused) { return 'is-focused'; } else { return ''; @@ -245,6 +249,7 @@ const Property = React.createClass({ onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, + setWarning: this.setWarning, disabled: !this.props.editable, ref: 'input', name: this.props.name diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 172940e6..b022fe27 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -8,10 +8,13 @@ import S3Fetcher from '../../fetchers/s3_fetcher'; import FileDragAndDrop from './ascribe_file_drag_and_drop/file_drag_and_drop'; +import ErrorQueueStore from '../../stores/error_queue_store'; + import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; import AppConstants from '../../constants/application_constants'; +import { ErrorClasses, testErrorAgainstAll } from '../../constants/error_constants'; import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils'; import { computeHashOfFile } from '../../utils/file_utils'; @@ -31,12 +34,16 @@ const { shape, element, arrayOf } = React.PropTypes; +// After 5 manual retries, show the contact us prompt. +const RETRY_ATTEMPT_TO_SHOW_CONTACT_US = 5; + const ReactS3FineUploader = React.createClass({ propTypes: { areAssetsDownloadable: bool, areAssetsEditable: bool, errorNotificationMessage: string, showErrorPrompt: bool, + setWarning: func, // for when the parent component wants to be notified of uploader warnings (ie. upload failed) handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile @@ -301,6 +308,9 @@ const ReactS3FineUploader = React.createClass({ // proclaim that upload is not ready this.props.setIsUploadReady(false); + // reset any warnings propagated to parent + this.setWarning(false); + // reset internal data structures of component this.setState(this.getInitialState()); }, @@ -423,6 +433,12 @@ const ReactS3FineUploader = React.createClass({ } }, + setWarning(hasWarning) { + if (typeof this.props.setWarning === 'function') { + this.props.setWarning(hasWarning); + } + }, + checkFormSubmissionReady() { const { isReadyForFormSubmission, setIsUploadReady } = this.props; @@ -597,6 +613,7 @@ const ReactS3FineUploader = React.createClass({ }); this.setState({ errorState }); + this.setWarning(true); } } else { notificationMessage = errorReason || errorNotificationMessage; @@ -766,6 +783,8 @@ const ReactS3FineUploader = React.createClass({ }, filesToUpload }); + + this.setWarning(false); }, handleUploadFile(files) { diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss index d214c57e..e3a4c914 100644 --- a/sass/ascribe_property.scss +++ b/sass/ascribe_property.scss @@ -37,7 +37,6 @@ $ascribe-red-error: rgb(169, 68, 66); margin-right: 1em; } } - > input, > textarea { @@ -50,6 +49,10 @@ $ascribe-red-error: rgb(169, 68, 66); } } +.is-warning { + border-left: 3px solid $ascribe-pink +} + .is-fixed { cursor: default; @@ -233,4 +236,4 @@ $ascribe-red-error: rgb(169, 68, 66); > span > span { margin-top: 0; } -} \ No newline at end of file +}