scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 02:56:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #2237 from paulkaplan/fix-formsy-perf

Browse source 
Keep each input in its own formsy wrapper to improve performance
This commit is contained in:
Paul Kaplan 2018-10-25 10:50:07 -04:00 committed by GitHub
commit d9fa10316b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 111 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/views/preview/comment/comment.scss
View file

@ -21,6 +21,10 @@
} }
} }
.full-width-form {
width: 100%;
}
.textarea-row { .textarea-row {
width: 100%; width: 100%;

6
src/views/preview/comment/compose-comment.jsx
View file

@ -5,6 +5,7 @@ const classNames = require('classnames');
const keyMirror = require('keymirror'); const keyMirror = require('keymirror');
const FormattedMessage = require('react-intl').FormattedMessage; const FormattedMessage = require('react-intl').FormattedMessage;
const Formsy = require('formsy-react').default;
const FlexRow = require('../../../components/flex-row/flex-row.jsx'); const FlexRow = require('../../../components/flex-row/flex-row.jsx');
const Avatar = require('../../../components/avatar/avatar.jsx'); const Avatar = require('../../../components/avatar/avatar.jsx');
const InplaceInput = require('../../../components/forms/inplace-input.jsx'); const InplaceInput = require('../../../components/forms/inplace-input.jsx');
@ -111,9 +112,11 @@ class ComposeComment extends React.Component {
</div> </div>
</FlexRow> </FlexRow>
) : null} ) : null}
<Formsy className="full-width-form">
<InplaceInput <InplaceInput
className={classNames('compose-input', className={classNames('compose-input',
MAX_COMMENT_LENGTH - this.state.message.length >= 0 ? 'compose-valid' : 'compose-invalid')} MAX_COMMENT_LENGTH - this.state.message.length >= 0 ?
'compose-valid' : 'compose-invalid')}
handleUpdate={onUpdate} handleUpdate={onUpdate}
name="compose-comment" name="compose-comment"
type="textarea" type="textarea"
@ -151,6 +154,7 @@ class ComposeComment extends React.Component {
/> />
</span> </span>
</FlexRow> </FlexRow>
</Formsy>
</FlexRow> </FlexRow>
</div> </div>
); );

16
src/views/preview/presentation.jsx
View file

@ -97,7 +97,7 @@ const PreviewPresentation = ({
<ShareBanner onShare={onShare} /> <ShareBanner onShare={onShare} />
)} )}
{ projectInfo && projectInfo.author && projectInfo.author.id && ( { projectInfo && projectInfo.author && projectInfo.author.id && (
<Formsy onKeyPress={onKeyPress}> <React.Fragment>
<div className="inner"> <div className="inner">
<FlexRow className="preview-row force-row"> <FlexRow className="preview-row force-row">
<FlexRow className="project-header"> <FlexRow className="project-header">
@ -109,6 +109,7 @@ const PreviewPresentation = ({
</a> </a>
<div className="title"> <div className="title">
{editable ? {editable ?
<Formsy onKeyPress={onKeyPress}>
<InplaceInput <InplaceInput
className="project-title" className="project-title"
handleUpdate={onUpdate} handleUpdate={onUpdate}
@ -122,7 +123,8 @@ const PreviewPresentation = ({
maxLength: 100 maxLength: 100
}} }}
value={projectInfo.title} value={projectInfo.title}
/> : />
</Formsy> :
<React.Fragment> <React.Fragment>
<div <div
className="project-title no-edit" className="project-title no-edit"
@ -217,6 +219,7 @@ const PreviewPresentation = ({
<FormattedMessage id="project.instructionsLabel" /> <FormattedMessage id="project.instructionsLabel" />
</div> </div>
{editable ? {editable ?
<Formsy onKeyPress={onKeyPress}>
<InplaceInput <InplaceInput
className={classNames( className={classNames(
'project-description-edit', 'project-description-edit',
@ -237,7 +240,8 @@ const PreviewPresentation = ({
maxLength: 1000 maxLength: 1000
}} }}
value={projectInfo.instructions} value={projectInfo.instructions}
/> : />
</Formsy> :
<div className="project-description"> <div className="project-description">
{decorateText(projectInfo.instructions)} {decorateText(projectInfo.instructions)}
</div> </div>
@ -248,6 +252,7 @@ const PreviewPresentation = ({
<FormattedMessage id="project.notesAndCreditsLabel" /> <FormattedMessage id="project.notesAndCreditsLabel" />
</div> </div>
{editable ? {editable ?
<Formsy onKeyPress={onKeyPress}>
<InplaceInput <InplaceInput
className={classNames( className={classNames(
'project-description-edit', 'project-description-edit',
@ -269,7 +274,8 @@ const PreviewPresentation = ({
maxLength: 1000 maxLength: 1000
}} }}
value={projectInfo.description} value={projectInfo.description}
/> : />
</Formsy> :
<div className="project-description last"> <div className="project-description last">
{decorateText(projectInfo.description)} {decorateText(projectInfo.description)}
</div> </div>
@ -401,7 +407,7 @@ const PreviewPresentation = ({
</FlexRow> </FlexRow>
</div> </div>
</div> </div>
</Formsy> </React.Fragment>
)} )}
</div> </div>
); );