diff options
author | 2018-06-20 17:04:38 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 466aa625567db617149479b7b8f446d5537d320c (patch) | |
tree | c1ed1152159f33198714e535fe7e5e455931fb84 /vnext | |
parent | 889f5564332de78c982ac1bb4f9964f393482449 (diff) |
floating message input
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/components/Thread.js | 18 |
1 files changed, 12 insertions, 6 deletions
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index cfef2372..5b57fe0e 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -15,7 +15,8 @@ export default class Thread extends React.Component { super(props); this.state = { msg: {}, - replies: [] + replies: [], + active: 0 }; this.loaded = this.loaded.bind(this); this.postComment = this.postComment.bind(this); @@ -43,7 +44,8 @@ export default class Thread extends React.Component { let msg = data.shift(); this.setState({ msg: msg, - replies: data + replies: data, + active: 0 }) } ).catch(ex => { @@ -53,7 +55,11 @@ export default class Thread extends React.Component { loaded() { return this.state.msg.mid; } - + setActive(msg, event) { + this.setState({ + active: msg.rid || 0 + }) + } postComment(template) { const url = `https://api.juick.com/comment?hash=${this.props.visitor.hash}`; let form = new FormData(); @@ -81,7 +87,7 @@ export default class Thread extends React.Component { { this.loaded() ? ( <Message data={msg} visitor={this.props.visitor}> - <MessageInput data={msg} onSend={this.postComment} /> + { this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment} /> } <Recommendations src={msg.recommendations} /> </Message> ) : ( @@ -143,8 +149,8 @@ export default class Thread extends React.Component { this.props.visitor.uid > 0 ? ( <React.Fragment> <span>· </span> - <a href={`/post?body=%23${msg.mid}/${msg.rid}%20`} className="a-thread-comment">Reply</a> - <div className="msg-comment-target msg-comment-hidden"></div> + <button onClick={this.setActive.bind(this, msg)} className="badge">Reply</button> + { this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} /> } </React.Fragment> ) : ( <React.Fragment> |