diff --git a/src/Common.js b/src/Common.js index 8be6f82..68c959f 100644 --- a/src/Common.js +++ b/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 ( diff --git a/src/Flows.js b/src/Flows.js index 5a4a0a2..2fc8de1 100644 --- a/src/Flows.js +++ b/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 { } - {this.set_variant(null,variant);}} - /> +
{this.do_reply('',e);}}> + {this.set_variant(null,variant);}} + /> +
{(this.props.deletion_detect && parseInt(this.state.info.reply)>this.state.replies.length) &&
{parseInt(this.state.info.reply)-this.state.replies.length} 条回复被删除
} {this.state.replies.map((reply)=>( - - {this.set_variant(reply.cid,variant);}} - /> + +
{this.do_reply(reply.name,e);}}> + {this.set_variant(reply.cid,variant);}} + /> +
))} {!!this.props.token ? - : + :
登录后可以回复树洞
} diff --git a/src/UserAction.css b/src/UserAction.css index e9d4cb0..d64f9f8 100644 --- a/src/UserAction.css +++ b/src/UserAction.css @@ -8,6 +8,11 @@ .reply-form { display: flex; } +.reply-sticky { + position: sticky; + bottom: 0; +} + .reply-form textarea { resize: vertical; flex: 1; diff --git a/src/UserAction.js b/src/UserAction.js index c3c1335..893bd4b 100644 --- a/src/UserAction.js +++ b/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 ( -
+ {this.state.loading_status==='loading' ?