mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Merge pull request #2237 from paulkaplan/fix-formsy-perf
Keep each input in its own formsy wrapper to improve performance
This commit is contained in:
Paul Kaplan
GitHub
commit
d9fa10316b
3 changed files with 111 additions and 97 deletions
|
|
@ -21,6 +21,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.full-width-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textarea-row {
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ const classNames = require('classnames');
|
|||
const keyMirror = require('keymirror');
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
|
||||
const Formsy = require('formsy-react').default;
|
||||
const FlexRow = require('../../../components/flex-row/flex-row.jsx');
|
||||
const Avatar = require('../../../components/avatar/avatar.jsx');
|
||||
const InplaceInput = require('../../../components/forms/inplace-input.jsx');
|
||||
|
|
@ -111,46 +112,49 @@ class ComposeComment extends React.Component {
|
|||
</div>
|
||||
</FlexRow>
|
||||
) : null}
|
||||
<InplaceInput
|
||||
className={classNames('compose-input',
|
||||
MAX_COMMENT_LENGTH - this.state.message.length >= 0 ? 'compose-valid' : 'compose-invalid')}
|
||||
handleUpdate={onUpdate}
|
||||
name="compose-comment"
|
||||
type="textarea"
|
||||
value={this.state.message}
|
||||
onInput={this.handleInput}
|
||||
/>
|
||||
<FlexRow className="compose-bottom-row">
|
||||
<Button
|
||||
className="compose-post"
|
||||
disabled={this.state.status === ComposeStatus.SUBMITTING}
|
||||
onClick={this.handlePost}
|
||||
>
|
||||
{this.state.status === ComposeStatus.SUBMITTING ? (
|
||||
<FormattedMessage id="comments.posting" />
|
||||
) : (
|
||||
<FormattedMessage id="comments.post" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
className="compose-cancel"
|
||||
onClick={this.handleCancel}
|
||||
>
|
||||
<FormattedMessage id="comments.cancel" />
|
||||
</Button>
|
||||
<span
|
||||
className={classNames('compose-limit',
|
||||
<Formsy className="full-width-form">
|
||||
<InplaceInput
|
||||
className={classNames('compose-input',
|
||||
MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
|
||||
'compose-valid' : 'compose-invalid')}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="comments.lengthWarning"
|
||||
values={{
|
||||
remainingCharacters: MAX_COMMENT_LENGTH - this.state.message.length
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</FlexRow>
|
||||
handleUpdate={onUpdate}
|
||||
name="compose-comment"
|
||||
type="textarea"
|
||||
value={this.state.message}
|
||||
onInput={this.handleInput}
|
||||
/>
|
||||
<FlexRow className="compose-bottom-row">
|
||||
<Button
|
||||
className="compose-post"
|
||||
disabled={this.state.status === ComposeStatus.SUBMITTING}
|
||||
onClick={this.handlePost}
|
||||
>
|
||||
{this.state.status === ComposeStatus.SUBMITTING ? (
|
||||
<FormattedMessage id="comments.posting" />
|
||||
) : (
|
||||
<FormattedMessage id="comments.post" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
className="compose-cancel"
|
||||
onClick={this.handleCancel}
|
||||
>
|
||||
<FormattedMessage id="comments.cancel" />
|
||||
</Button>
|
||||
<span
|
||||
className={classNames('compose-limit',
|
||||
MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
|
||||
'compose-valid' : 'compose-invalid')}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="comments.lengthWarning"
|
||||
values={{
|
||||
remainingCharacters: MAX_COMMENT_LENGTH - this.state.message.length
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</FlexRow>
|
||||
</Formsy>
|
||||
</FlexRow>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ const PreviewPresentation = ({
|
|||
<ShareBanner onShare={onShare} />
|
||||
)}
|
||||
{ projectInfo && projectInfo.author && projectInfo.author.id && (
|
||||
<Formsy onKeyPress={onKeyPress}>
|
||||
<React.Fragment>
|
||||
<div className="inner">
|
||||
<FlexRow className="preview-row force-row">
|
||||
<FlexRow className="project-header">
|
||||
|
|
@ -109,20 +109,22 @@ const PreviewPresentation = ({
|
|||
</a>
|
||||
<div className="title">
|
||||
{editable ?
|
||||
<InplaceInput
|
||||
className="project-title"
|
||||
handleUpdate={onUpdate}
|
||||
name="title"
|
||||
validationErrors={{
|
||||
maxLength: intl.formatMessage({
|
||||
id: 'project.titleMaxLength'
|
||||
})
|
||||
}}
|
||||
validations={{
|
||||
maxLength: 100
|
||||
}}
|
||||
value={projectInfo.title}
|
||||
/> :
|
||||
<Formsy onKeyPress={onKeyPress}>
|
||||
<InplaceInput
|
||||
className="project-title"
|
||||
handleUpdate={onUpdate}
|
||||
name="title"
|
||||
validationErrors={{
|
||||
maxLength: intl.formatMessage({
|
||||
id: 'project.titleMaxLength'
|
||||
})
|
||||
}}
|
||||
validations={{
|
||||
maxLength: 100
|
||||
}}
|
||||
value={projectInfo.title}
|
||||
/>
|
||||
</Formsy> :
|
||||
<React.Fragment>
|
||||
<div
|
||||
className="project-title no-edit"
|
||||
|
|
@ -217,27 +219,29 @@ const PreviewPresentation = ({
|
|||
<FormattedMessage id="project.instructionsLabel" />
|
||||
</div>
|
||||
{editable ?
|
||||
<InplaceInput
|
||||
className={classNames(
|
||||
'project-description-edit',
|
||||
{remixes: parentInfo && parentInfo.author}
|
||||
)}
|
||||
handleUpdate={onUpdate}
|
||||
name="instructions"
|
||||
placeholder="Tell people how to use your project (such as which keys to press)."
|
||||
type="textarea"
|
||||
validationErrors={{
|
||||
maxLength: 'Sorry description is too long'
|
||||
// maxLength: props.intl.formatMessage({
|
||||
// id: 'project.descriptionMaxLength'
|
||||
// })
|
||||
}}
|
||||
validations={{
|
||||
// TODO: actual 5000
|
||||
maxLength: 1000
|
||||
}}
|
||||
value={projectInfo.instructions}
|
||||
/> :
|
||||
<Formsy onKeyPress={onKeyPress}>
|
||||
<InplaceInput
|
||||
className={classNames(
|
||||
'project-description-edit',
|
||||
{remixes: parentInfo && parentInfo.author}
|
||||
)}
|
||||
handleUpdate={onUpdate}
|
||||
name="instructions"
|
||||
placeholder="Tell people how to use your project (such as which keys to press)."
|
||||
type="textarea"
|
||||
validationErrors={{
|
||||
maxLength: 'Sorry description is too long'
|
||||
// maxLength: props.intl.formatMessage({
|
||||
// id: 'project.descriptionMaxLength'
|
||||
// })
|
||||
}}
|
||||
validations={{
|
||||
// TODO: actual 5000
|
||||
maxLength: 1000
|
||||
}}
|
||||
value={projectInfo.instructions}
|
||||
/>
|
||||
</Formsy> :
|
||||
<div className="project-description">
|
||||
{decorateText(projectInfo.instructions)}
|
||||
</div>
|
||||
|
|
@ -248,28 +252,30 @@ const PreviewPresentation = ({
|
|||
<FormattedMessage id="project.notesAndCreditsLabel" />
|
||||
</div>
|
||||
{editable ?
|
||||
<InplaceInput
|
||||
className={classNames(
|
||||
'project-description-edit',
|
||||
'last',
|
||||
{remixes: parentInfo && parentInfo.author}
|
||||
)}
|
||||
handleUpdate={onUpdate}
|
||||
name="description"
|
||||
placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
|
||||
type="textarea"
|
||||
validationErrors={{
|
||||
maxLength: 'Sorry description is too long'
|
||||
// maxLength: props.intl.formatMessage({
|
||||
// id: 'project.descriptionMaxLength'
|
||||
// })
|
||||
}}
|
||||
validations={{
|
||||
// TODO: actual 5000
|
||||
maxLength: 1000
|
||||
}}
|
||||
value={projectInfo.description}
|
||||
/> :
|
||||
<Formsy onKeyPress={onKeyPress}>
|
||||
<InplaceInput
|
||||
className={classNames(
|
||||
'project-description-edit',
|
||||
'last',
|
||||
{remixes: parentInfo && parentInfo.author}
|
||||
)}
|
||||
handleUpdate={onUpdate}
|
||||
name="description"
|
||||
placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
|
||||
type="textarea"
|
||||
validationErrors={{
|
||||
maxLength: 'Sorry description is too long'
|
||||
// maxLength: props.intl.formatMessage({
|
||||
// id: 'project.descriptionMaxLength'
|
||||
// })
|
||||
}}
|
||||
validations={{
|
||||
// TODO: actual 5000
|
||||
maxLength: 1000
|
||||
}}
|
||||
value={projectInfo.description}
|
||||
/>
|
||||
</Formsy> :
|
||||
<div className="project-description last">
|
||||
{decorateText(projectInfo.description)}
|
||||
</div>
|
||||
|
|
@ -401,7 +407,7 @@ const PreviewPresentation = ({
|
|||
</FlexRow>
|
||||
</div>
|
||||
</div>
|
||||
</Formsy>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue