From 2c8990ae7e59ab6b807c366264644d4a36357d3c Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Thu, 2 Aug 2018 17:54:43 -0400 Subject: [PATCH] report project POSTs to scratchr2, displays modal reactively --- src/components/forms/validations.jsx | 4 +- src/components/modal/addtostudio/modal.scss | 1 - src/components/modal/base/modal.scss | 25 +++ src/components/modal/report/modal.jsx | 222 +++++++++++++------- src/components/modal/report/modal.scss | 37 +++- src/l10n.json | 8 +- src/redux/preview.js | 29 +++ src/views/preview/presentation.jsx | 11 +- src/views/preview/preview.jsx | 42 +--- 9 files changed, 260 insertions(+), 119 deletions(-) diff --git a/src/components/forms/validations.jsx b/src/components/forms/validations.jsx index c83ce63cb..c882aa40d 100644 --- a/src/components/forms/validations.jsx +++ b/src/components/forms/validations.jsx @@ -28,8 +28,8 @@ module.exports.validationHOCFactory = defaultValidationErrors => (Component => { diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss index 7503271c6..08b4c1abc 100644 --- a/src/components/modal/addtostudio/modal.scss +++ b/src/components/modal/addtostudio/modal.scss @@ -35,7 +35,6 @@ .addToStudio-modal-content { margin: 0 auto; width: 100%; - line-height: 1.5rem; font-size: .875rem; } diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss index 1a6e46262..cb878ae12 100644 --- a/src/components/modal/base/modal.scss +++ b/src/components/modal/base/modal.scss @@ -64,11 +64,20 @@ $modal-close-size: 1rem; .action-buttons { display: flex; margin: 1.125rem .8275rem .9375rem .8275rem; + line-height: 1.5rem; justify-content: flex-end !important; align-items: flex-start; flex-wrap: nowrap; } +/* setting overall modal to contain overflow looks good, but isn't +compatible with elements (like validation popups) that need to bleed +past modal boundary. This class can be used to force modal button +row to appear to contain overflow. */ +.action-buttons-overflow-fix { + margin-bottom: .9375rem; +} + .action-button { margin: 0 0 0 .54625rem; border-radius: .25rem; @@ -83,3 +92,19 @@ $modal-close-size: 1rem; .action-button-text { display: flex; } + +.action-button.disabled { + background-color: $active-dark-gray; +} + +.error-text +{ + display: block; + border: 1px solid $active-gray; + border-radius: 5px; + background-color: $ui-orange; + padding: 1rem; + min-height: 1rem; + overflow: visible; + color: $type-white; +} diff --git a/src/components/modal/report/modal.jsx b/src/components/modal/report/modal.jsx index 7b78379a0..7271458fd 100644 --- a/src/components/modal/report/modal.jsx +++ b/src/components/modal/report/modal.jsx @@ -1,10 +1,12 @@ const bindAll = require('lodash.bindall'); const PropTypes = require('prop-types'); const React = require('react'); +const connect = require('react-redux').connect; const FormattedMessage = require('react-intl').FormattedMessage; const injectIntl = require('react-intl').injectIntl; const intlShape = require('react-intl').intlShape; const Modal = require('../base/modal.jsx'); +const classNames = require('classnames'); const Form = require('../../forms/form.jsx'); const Button = require('../../forms/button.jsx'); @@ -12,6 +14,7 @@ const Select = require('../../forms/select.jsx'); const Spinner = require('../../spinner/spinner.jsx'); const TextArea = require('../../forms/textarea.jsx'); const FlexRow = require('../../flex-row/flex-row.jsx'); +const previewActions = require('../../../redux/preview.js'); require('../../forms/button.scss'); require('./modal.scss'); @@ -68,12 +71,24 @@ class ReportModal extends React.Component { constructor (props) { super(props); bindAll(this, [ - 'handleReportCategorySelect' + 'handleCategorySelect', + 'handleValid', + 'handleInvalid' ]); - this.state = {reportCategory: this.props.report.category}; + this.state = { + category: '', + notes: '', + valid: false + }; } - handleReportCategorySelect (name, value) { - this.setState({reportCategory: value}); + handleCategorySelect (name, value) { + this.setState({category: value}); + } + handleValid () { + this.setState({valid: true}); + } + handleInvalid () { + this.setState({valid: false}); } lookupPrompt (value) { const prompt = REPORT_OPTIONS.find(item => item.value === value).prompt; @@ -82,17 +97,24 @@ class ReportModal extends React.Component { render () { const { intl, + isConfirmed, + isError, + isOpen, + isWaiting, onReport, // eslint-disable-line no-unused-vars - report, + onRequestClose, type, ...modalProps } = this.props; + const submitEnabled = this.state.valid && !isWaiting; + const submitDisabledParam = submitEnabled ? {} : {disabled: 'disabled'}; const contentLabel = intl.formatMessage({id: `report.${type}`}); return (
@@ -104,68 +126,115 @@ class ReportModal extends React.Component {
- - - - ) - }} - /> -