0844ee6875
* chore: configure WDYR for react profiling * perf: reduced post content re-rendering * perf: post content view and it child optimization * perf: add memoization in post editor * perf: add memoization in postCommnetsView * perf: improved endorsed comment view rendering * perf: improved re-rendering in reply component * fix: uncomment questionType commentsView * fix: removed console errors in postContent area * perf: reduced postType and postId dependancy * perf: improved re-rendering in discussionHome * perf: improved re-rendering of postsList and its child components * perf: improved re-rendering of legacyTopic and learner sidebar * fix: postFilterBar filter was not updating * fix: resolve duplicate comment posts issue * fix: memory leaking issue in comments view * fix: duplicate topic posts in inContext sidebar * perf: add lazy loading * chore: remove WDYR configuration * fix: alert banner padding * chore: update package-lock file * fix: bind tour API call with buttons
76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
import { Button, Icon, IconButton } from '@edx/paragon';
|
|
import { Close } from '@edx/paragon/icons';
|
|
|
|
import messages from '../discussions/posts/post-editor/messages';
|
|
import HTMLLoader from './HTMLLoader';
|
|
|
|
const PostPreviewPanel = ({
|
|
htmlNode, isPost, editExisting,
|
|
}) => {
|
|
const intl = useIntl();
|
|
const [showPreviewPane, setShowPreviewPane] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
{showPreviewPane && (
|
|
<div
|
|
className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
|
|
style={{ minHeight: '200px', wordBreak: 'break-word' }}
|
|
>
|
|
<IconButton
|
|
onClick={() => setShowPreviewPane(false)}
|
|
alt={intl.formatMessage(messages.actionsAlt)}
|
|
src={Close}
|
|
iconAs={Icon}
|
|
size="inline"
|
|
className="float-right p-3"
|
|
iconClassNames="icon-size"
|
|
data-testid="hide-preview-button"
|
|
/>
|
|
{htmlNode && (
|
|
<HTMLLoader
|
|
htmlNode={htmlNode}
|
|
cssClassName="text-primary"
|
|
componentId="post-preview"
|
|
testId="post-preview"
|
|
delay={500}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="d-flex justify-content-end">
|
|
{!showPreviewPane && (
|
|
<Button
|
|
variant="link"
|
|
size="sm"
|
|
onClick={() => setShowPreviewPane(true)}
|
|
className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
|
|
style={{ lineHeight: '26px' }}
|
|
data-testid="show-preview-button"
|
|
>
|
|
{intl.formatMessage(messages.showPreviewButton)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
PostPreviewPanel.propTypes = {
|
|
htmlNode: PropTypes.node,
|
|
isPost: PropTypes.bool,
|
|
editExisting: PropTypes.bool,
|
|
};
|
|
|
|
PostPreviewPanel.defaultProps = {
|
|
htmlNode: '',
|
|
isPost: false,
|
|
editExisting: false,
|
|
};
|
|
|
|
export default React.memo(PostPreviewPanel);
|