const injectIntl = require('react-intl').injectIntl; const PropTypes = require('prop-types'); const intlShape = require('react-intl').intlShape; const FormattedMessage = require('react-intl').FormattedMessage; const MediaQuery = require('react-responsive').default; const React = require('react'); const Formsy = require('formsy-react').default; const classNames = require('classnames'); const GUI = require('scratch-gui').default; const IntlGUI = injectIntl(GUI); const decorateText = require('../../lib/decorate-text.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx'); const Button = require('../../components/forms/button.jsx'); const Avatar = require('../../components/avatar/avatar.jsx'); const ShareBanner = require('./share-banner.jsx'); const RemixCredit = require('./remix-credit.jsx'); const RemixList = require('./remix-list.jsx'); const Stats = require('./stats.jsx'); const StudioList = require('./studio-list.jsx'); const Subactions = require('./subactions.jsx'); const InplaceInput = require('../../components/forms/inplace-input.jsx'); const TopLevelComment = require('./comment/top-level-comment.jsx'); const ComposeComment = require('./comment/compose-comment.jsx'); const ExtensionChip = require('./extension-chip.jsx'); const projectShape = require('./projectshape.jsx').projectShape; require('./preview.scss'); const frameless = require('../../lib/frameless'); // disable enter key submission on formsy input fields; otherwise formsy thinks // we meant to trigger the "See inside" button. Instead, treat these keypresses // as a blur, which will trigger a save. const onKeyPress = e => { if (e.target.type === 'text' && e.which === 13 /* Enter */) { e.preventDefault(); e.target.blur(); } }; const PreviewPresentation = ({ assetHost, backpackOptions, canAddToStudio, canDeleteComments, canReport, canRestoreComments, comments, editable, extensions, faved, favoriteCount, intl, isFullScreen, isLoggedIn, isShared, loved, loveCount, moreCommentsToLoad, originalInfo, parentInfo, projectHost, projectId, projectInfo, remixes, reportOpen, replies, addToStudioOpen, projectStudios, singleCommentId, userOwnsProject, onAddComment, onDeleteComment, onFavoriteClicked, onLoadMore, onLoveClicked, onReportClicked, onReportClose, onReportComment, onReportSubmit, onRestoreComment, onAddToStudioClicked, onAddToStudioClosed, onToggleStudio, onToggleComments, onSeeInside, onShare, onUpdate }) => { const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : ''; return (
{!isShared && ( )} { projectInfo && projectInfo.author && projectInfo.author.id && (
{editable ? :
{projectInfo.title}
{'by '} {projectInfo.author.username}
}
{/* TODO: Hide Remix button for now until implemented */} {(!userOwnsProject && false) && }
{/* eslint-disable max-len */} {extensions && extensions.map(extension => ( ))}
{editable ? :
{decorateText(projectInfo.instructions, { usernames: true, hashtags: true, scratchLinks: false })}
}
{editable ? :
{decorateText(projectInfo.description, { usernames: true, hashtags: true, scratchLinks: false })}
}
{/* eslint-enable max-len */}
{extensions && extensions.map(extension => ( ))}

{userOwnsProject ? (
) : null}
{projectInfo.comments_allowed ? ( isLoggedIn ? ( ) : ( /* TODO add box for signing in to leave a comment */ null ) ) : (
)}
{comments.map(comment => ( ))} {moreCommentsToLoad && }
)}
); }; PreviewPresentation.propTypes = { addToStudioOpen: PropTypes.bool, assetHost: PropTypes.string, backpackOptions: PropTypes.shape({ host: PropTypes.string, visible: PropTypes.bool }), canAddToStudio: PropTypes.bool, canDeleteComments: PropTypes.bool, canReport: PropTypes.bool, canRestoreComments: PropTypes.bool, comments: PropTypes.arrayOf(PropTypes.object), editable: PropTypes.bool, extensions: PropTypes.arrayOf(PropTypes.object), faved: PropTypes.bool, favoriteCount: PropTypes.number, intl: intlShape, isFullScreen: PropTypes.bool, isLoggedIn: PropTypes.bool, isShared: PropTypes.bool, loveCount: PropTypes.number, loved: PropTypes.bool, moreCommentsToLoad: PropTypes.bool, onAddComment: PropTypes.func, onAddToStudioClicked: PropTypes.func, onAddToStudioClosed: PropTypes.func, onDeleteComment: PropTypes.func, onFavoriteClicked: PropTypes.func, onLoadMore: PropTypes.func, onLoveClicked: PropTypes.func, onReportClicked: PropTypes.func.isRequired, onReportClose: PropTypes.func.isRequired, onReportComment: PropTypes.func.isRequired, onReportSubmit: PropTypes.func.isRequired, onRestoreComment: PropTypes.func, onSeeInside: PropTypes.func, onShare: PropTypes.func, onToggleComments: PropTypes.func, onToggleStudio: PropTypes.func, onUpdate: PropTypes.func, originalInfo: projectShape, parentInfo: projectShape, projectHost: PropTypes.string, projectId: PropTypes.string, projectInfo: projectShape, projectStudios: PropTypes.arrayOf(PropTypes.object), remixes: PropTypes.arrayOf(PropTypes.object), replies: PropTypes.objectOf(PropTypes.array), reportOpen: PropTypes.bool, singleCommentId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), userOwnsProject: PropTypes.bool }; module.exports = injectIntl(PreviewPresentation);