add click to reply

src/Common.js

@@ -72,6 +72,7 @@ export class SafeTextarea extends Component {
         this.clear=this.clear.bind(this);
         this.area_ref=React.createRef();
         this.change_callback=props.on_change;
+        this.change_callback(this.state.text);
     }
 
     componentWillUnmount() {
@@ -91,6 +92,17 @@ export class SafeTextarea extends Component {
             text: '',
         });
     }
+    set_and_focus(text) {
+        this.change_callback(text);
+        this.setState({
+            text: text,
+        },()=>{
+            this.area_ref.current.focus();
+        });
+    }
+    get() {
+        return this.state.text;
+    }
 
     render() {
         return (

src/Flows.js

@@ -143,6 +143,7 @@ class FlowSidebar extends PureComponent {
         this.color_picker=props.color_picker;
         this.show_pid=load_single_meta(this.props.show_sidebar,this.props.token);
         this.syncState=props.sync_state||(()=>{});
+        this.reply_ref=React.createRef();
     }
 
     set_variant(cid,variant) {
@@ -252,6 +253,13 @@ class FlowSidebar extends PureComponent {
         }
     }
 
+    do_reply(name,event) {
+        if(event.target.tagName.toLowerCase()!=='a') {
+            let text=this.reply_ref.current.get();
+            this.reply_ref.current.set_and_focus('Re '+name+': ');
+        }
+    }
+
     render() {
         const star_brush=localStorage['STAR_BRUSH']==='on';
 
@@ -287,25 +295,30 @@ class FlowSidebar extends PureComponent {
                         </span>
                     }
                 </div>
-                <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
-                    color_picker={this.color_picker} show_pid={this.show_pid} replies={this.state.replies}
-                    set_variant={(variant)=>{this.set_variant(null,variant);}}
-                />
+                <div onClick={(e)=>{this.do_reply('',e);}}>
+                    <FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
+                        color_picker={this.color_picker} show_pid={this.show_pid} replies={this.state.replies}
+                        set_variant={(variant)=>{this.set_variant(null,variant);}}
+                    />
+                </div>
                 {(this.props.deletion_detect && parseInt(this.state.info.reply)>this.state.replies.length) &&
                     <div className="box box-tip flow-item box-danger">
                         {parseInt(this.state.info.reply)-this.state.replies.length} 条回复被删除
                     </div>
                 }
                 {this.state.replies.map((reply)=>(
-                    <LazyLoad key={reply.cid} offset={500} height="5em" overflow={true} once={true}>
-                        <Reply
-                            info={reply} color_picker={this.color_picker} show_pid={this.show_pid}
-                            set_variant={(variant)=>{this.set_variant(reply.cid,variant);}}
-                        />
+                    <LazyLoad key={reply.cid} offset={1500} height="5em" overflow={true} once={true}>
+                        <div onClick={(e)=>{this.do_reply(reply.name,e);}}>
+                            <Reply
+                                info={reply} color_picker={this.color_picker} show_pid={this.show_pid}
+                                set_variant={(variant)=>{this.set_variant(reply.cid,variant);}}
+                            />
+                        </div>
                     </LazyLoad>
                 ))}
                 {!!this.props.token ?
-                    <ReplyForm pid={this.state.info.pid} token={this.props.token} on_complete={this.load_replies.bind(this)} /> :
+                    <ReplyForm pid={this.state.info.pid} token={this.props.token}
+                               area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :
                     <div className="box box-tip flow-item">登录后可以回复树洞</div>
                 }
             </div>

src/UserAction.css

@@ -8,6 +8,11 @@
 .reply-form {
     display: flex;
 }
+.reply-sticky {
+    position: sticky;
+    bottom: 0;
+}
+
 .reply-form textarea {
     resize: vertical;
     flex: 1;

src/UserAction.js

@@ -181,7 +181,7 @@ export class ReplyForm extends Component {
             loading_status: 'done',
         };
         this.on_change_bound=this.on_change.bind(this);
-        this.area_ref=React.createRef();
+        this.area_ref=this.props.area_ref||React.createRef();
     }
 
     on_change(value) {
@@ -234,7 +234,7 @@ export class ReplyForm extends Component {
 
     render() {
         return (
-            <form onSubmit={this.on_submit.bind(this)} className="reply-form box">
+            <form onSubmit={this.on_submit.bind(this)} className={'reply-form box'+(this.state.text?' reply-sticky':'')}>
                 <SafeTextarea ref={this.area_ref} id={this.props.pid} on_change={this.on_change_bound} />
                 {this.state.loading_status==='loading' ?
                     <button disabled="disabled">