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

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 {
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 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,9 +112,11 @@ class ComposeComment extends React.Component {
</div>
</FlexRow>
) : null}
<Formsy className="full-width-form">
<InplaceInput
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}
name="compose-comment"
type="textarea"
@ -151,6 +154,7 @@ class ComposeComment extends React.Component {
/>
</span>
</FlexRow>
</Formsy>
</FlexRow>
</div>
);

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

@ -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,6 +109,7 @@ const PreviewPresentation = ({
</a>
<div className="title">
{editable ?
<Formsy onKeyPress={onKeyPress}>
<InplaceInput
className="project-title"
handleUpdate={onUpdate}
@ -122,7 +123,8 @@ const PreviewPresentation = ({
maxLength: 100
}}
value={projectInfo.title}
/> :
/>
</Formsy> :
<React.Fragment>
<div
className="project-title no-edit"
@ -217,6 +219,7 @@ const PreviewPresentation = ({
<FormattedMessage id="project.instructionsLabel" />
</div>
{editable ?
<Formsy onKeyPress={onKeyPress}>
<InplaceInput
className={classNames(
'project-description-edit',
@ -237,7 +240,8 @@ const PreviewPresentation = ({
maxLength: 1000
}}
value={projectInfo.instructions}
/> :
/>
</Formsy> :
<div className="project-description">
{decorateText(projectInfo.instructions)}
</div>
@ -248,6 +252,7 @@ const PreviewPresentation = ({
<FormattedMessage id="project.notesAndCreditsLabel" />
</div>
{editable ?
<Formsy onKeyPress={onKeyPress}>
<InplaceInput
className={classNames(
'project-description-edit',
@ -269,7 +274,8 @@ const PreviewPresentation = ({
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>
);