diff --git a/src/components/modal/mute/modal.jsx b/src/components/modal/mute/modal.jsx index d1af75cd5..44936168b 100644 --- a/src/components/modal/mute/modal.jsx +++ b/src/components/modal/mute/modal.jsx @@ -10,8 +10,8 @@ const Button = require('../../forms/button.jsx'); const Progression = require('../../progression/progression.jsx'); const FlexRow = require('../../flex-row/flex-row.jsx'); const MuteStep = require('./mute-step.jsx'); -const Formsy = require('formsy-react').default; -const InplaceInput = require('../../../components/forms/inplace-input.jsx'); +import {Formik} from 'formik'; +const FormikInput = require('../../../components/formik-forms/formik-input.jsx'); const classNames = require('classnames'); require('./modal.scss'); @@ -23,7 +23,7 @@ const steps = { FEEDBACK_SENT: 4 }; -const onUpdate = update => update; +const MAX_FEEDBACK_LENGTH = 500; class MuteModal extends React.Component { constructor (props) { @@ -33,7 +33,9 @@ class MuteModal extends React.Component { 'handlePrevious', 'handleGoToFeedback', 'handleFeedbackInput', - 'handleFeedbackSubmit' + 'handleFeedbackSubmit', + 'handleSetFeedbackRef', + 'validateFeedback' ]); this.numSteps = 2; if (this.props.showWarning) { @@ -63,16 +65,34 @@ class MuteModal extends React.Component { } handleFeedbackSubmit () { - console.log(this.state.feedback); + const noError = !this.validateFeedback(this.state.feedback); + + if (noError) { + /* eslint-disable no-console */ + console.log(this.state.feedback); + /* eslint-enable no-console */ + this.setState({ + step: steps.FEEDBACK_SENT + }); + } + } + + handleFeedbackInput (feedback) { this.setState({ - step: steps.FEEDBACK_SENT + feedback: feedback }); } - handleFeedbackInput (event) { - this.setState({ - feedback: event.target.value, - }); + handleSetFeedbackRef (feedbackInputRef) { + this.feedbackInput = feedbackInputRef; + } + + validateFeedback (feedback) { + if (feedback.length === 0) { + return 'Can\'t be empty'; + } + + return null; } render () { @@ -155,19 +175,53 @@ class MuteModal extends React.Component {

- - 0 ? - 'compose-valid' : 'compose-invalid')} - handleUpdate={onUpdate} - name="compose-feedback" - rows="5" - type="textarea" - value={this.state.feedback} - onInput={this.handleFeedbackInput} - /> - + + {props => { + const { + errors, + setFieldError, + setFieldTouched, + setFieldValue, + validateField + } = props; + return ( + validateField('feedback')} + onChange={e => { + setFieldValue('feedback', e.target.value); + setFieldTouched('feedback'); + setFieldError('feedback', null); + this.handleFeedbackInput(e.target.value); + }} + /* eslint-enable react/jsx-no-bind */ + onSetRef={this.handleSetFeedbackRef} + /> + ); + }} +
diff --git a/src/components/modal/mute/modal.scss b/src/components/modal/mute/modal.scss index 60c2d080d..f8e25733d 100644 --- a/src/components/modal/mute/modal.scss +++ b/src/components/modal/mute/modal.scss @@ -87,14 +87,24 @@ .feedback-text { text-align: center; + max-width: 360px; } - .full-width-form { + textarea, .row-with-tooltip { height: 180px; width: 100%; } + textarea { + padding: 16px; + } + .character-limit { font-size: .75rem; } + + .validation-message { + top: 30%; + margin-left: 4rem; + } }