scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Use formik for feedback form

Browse source 
cleanup
This commit is contained in:
seotts 2021-01-21 18:31:25 -05:00
parent 5e4fc154c6
commit 512358e9af
2 changed files with 88 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/components/modal/mute/modal.jsx
View file

@ -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 {
<p className="feedback-text">
<FormattedMessage id="comments.muted.mistakeInstructions" />
</p>
<Formsy className="full-width-form">
<InplaceInput
className={classNames('compose-feedback',
this.state.feedback.length > 0 ?
'compose-valid' : 'compose-invalid')}
handleUpdate={onUpdate}
name="compose-feedback"
rows="5"
type="textarea"
value={this.state.feedback}
onInput={this.handleFeedbackInput}
/>
</Formsy>
<Formik
initialValues={{
feedback: ''
}}
validate={this.validateFeedback}
validateOnBlur={false}
validateOnChange={false}
>
{props => {
const {
errors,
setFieldError,
setFieldTouched,
setFieldValue,
validateField
} = props;
return (
<FormikInput
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className={classNames(
'compose-feedback',
)}
component="textarea"
error={errors.feedback}
id="feedback"
maxLength={MAX_FEEDBACK_LENGTH}
name="feedback"
rows={5}
type="text"
validate={this.validateFeedback}
validationClassName="validation-full-width-input"
/* eslint-disable react/jsx-no-bind */
onBlur={() => 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}
/>
);
}}
</Formik>
<div className="character-limit">
<FormattedMessage id="comments.muted.characterLimit" />
</div>

12
src/components/modal/mute/modal.scss
View file

@ -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;
}
}