1
0
mirror of https://github.com/flarum/core.git synced 2025-08-08 09:26:34 +02:00

update: forum/components/ReplyPlaceholder

- The preview has been extracted to ReplyPlaceholderPreview
This commit is contained in:
Alexander Skvortsov
2020-08-09 22:32:43 -04:00
committed by Franz Liedke
parent 1ce06611ce
commit ed3b923f58

View File

@@ -4,18 +4,19 @@ import Component from '../../common/Component';
import avatar from '../../common/helpers/avatar'; import avatar from '../../common/helpers/avatar';
import username from '../../common/helpers/username'; import username from '../../common/helpers/username';
import DiscussionControls from '../utils/DiscussionControls'; import DiscussionControls from '../utils/DiscussionControls';
import ReplyPlaceholderPreview from './ReplyPlaceholderPreview';
/** /**
* The `ReplyPlaceholder` component displays a placeholder for a reply, which, * The `ReplyPlaceholder` component displays a placeholder for a reply, which,
* when clicked, opens the reply composer. * when clicked, opens the reply composer.
* *
* ### Props * ### Attrs
* *
* - `discussion` * - `discussion`
*/ */
export default class ReplyPlaceholder extends Component { export default class ReplyPlaceholder extends Component {
view() { view() {
if (app.composer.composingReplyTo(this.props.discussion)) { if (app.composer.composingReplyTo(this.attrs.discussion)) {
return ( return (
<article className="Post CommentPost editing"> <article className="Post CommentPost editing">
<header className="Post-header"> <header className="Post-header">
@@ -26,13 +27,13 @@ export default class ReplyPlaceholder extends Component {
</h3> </h3>
</div> </div>
</header> </header>
<div className="Post-body" config={this.configPreview.bind(this)} /> <ReplyPlaceholderPreview />
</article> </article>
); );
} }
const reply = () => { const reply = () => {
DiscussionControls.replyAction.call(this.props.discussion, true); DiscussionControls.replyAction.call(this.attrs.discussion, true);
}; };
return ( return (
@@ -43,33 +44,4 @@ export default class ReplyPlaceholder extends Component {
</article> </article>
); );
} }
configPreview(element, isInitialized, context) {
if (isInitialized) return;
// Every 50ms, if the composer content has changed, then update the post's
// body with a preview.
let preview;
const updateInterval = setInterval(() => {
// Since we're polling, the composer may have been closed in the meantime,
// so we bail in that case.
if (!app.composer.isVisible()) return;
const content = app.composer.fields.content();
if (preview === content) return;
preview = content;
const anchorToBottom = $(window).scrollTop() + $(window).height() >= $(document).height();
s9e.TextFormatter.preview(preview || '', element);
if (anchorToBottom) {
$(window).scrollTop($(document).height());
}
}, 50);
context.onunload = () => clearInterval(updateInterval);
}
} }