-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
ReplyPlaceholder.js
69 lines (63 loc) · 2.33 KB
/
ReplyPlaceholder.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import app from '../../forum/app';
import Component from '../../common/Component';
import username from '../../common/helpers/username';
import DiscussionControls from '../utils/DiscussionControls';
import ComposerPostPreview from './ComposerPostPreview';
import listItems from '../../common/helpers/listItems';
import Avatar from '../../common/components/Avatar';
/**
* The `ReplyPlaceholder` component displays a placeholder for a reply, which,
* when clicked, opens the reply composer.
*
* ### Attrs
*
* - `discussion`
*/
export default class ReplyPlaceholder extends Component {
view() {
if (app.composer.composingReplyTo(this.attrs.discussion)) {
return (
<article className="Post CommentPost editing" aria-busy="true">
<div className="Post-container">
<div className="Post-side">
<Avatar user={app.session.user} className="Post-avatar" />
</div>
<div className="Post-main">
<header className="Post-header">
<div className="PostUser">
<h3 className="PostUser-name">{username(app.session.user)}</h3>
<ul className="PostUser-badges badges badges--packed">{listItems(app.session.user.badges().toArray())}</ul>
</div>
</header>
<div className="Post-body">
<ComposerPostPreview className="Post-body" composer={app.composer} surround={this.anchorPreview.bind(this)} />
</div>
</div>
</div>
</article>
);
}
const reply = () => {
DiscussionControls.replyAction.call(this.attrs.discussion, true).catch(() => {});
};
return (
<button className="Post ReplyPlaceholder" onclick={reply}>
<div className="Post-container">
<div className="Post-side">
<Avatar user={app.session.user} className="Post-avatar" />
</div>
<div className="Post-main">
<span className="Post-header">{app.translator.trans('core.forum.post_stream.reply_placeholder')}</span>
</div>
</div>
</button>
);
}
anchorPreview(preview) {
const anchorToBottom = $(window).scrollTop() + $(window).height() >= $(document).height();
preview();
if (anchorToBottom) {
$(window).scrollTop($(document).height());
}
}
}