bug fixes

- click handler event binding
- click handler on img elem
- trailing space in content
- sidebar will-change optimization
- sidebar auto to top
- sidebar not closed after post
- reply form bottom position

src/Common.js

@@ -195,7 +195,7 @@ export class ClickHandler extends PureComponent {
         return (
             <div onTouchStart={this.on_begin_bound} onMouseDown={this.on_begin_bound}
                  onTouchMove={this.on_move_bound} onMouseMove={this.on_move_bound}
-                 onTouchEnd={this.on_end_bound} onMouseUp={this.on_end_bound} >
+                 onClick={this.on_end_bound} >
                 {this.props.children}
             </div>
         )

src/Flows.js

@@ -281,7 +281,7 @@ class FlowSidebar extends PureComponent {
     }
 
     show_reply_bar(name,event) {
-        if(this.reply_ref.current && event.target.tagName.toLowerCase()!=='a') {
+        if(this.reply_ref.current && !event.target.closest('a')) {
             let text=this.reply_ref.current.get();
             if(/^\s*(Re (洞主|\b[A-Z][a-z]+){0,2}:)?\s*$/.test(text)) {// text is nearly empty so we can replace it
                 let should_text='Re '+name+': ';

src/Sidebar.css

@@ -1,4 +1,5 @@
 .sidebar-shadow {
+    will-change: opacity;
     opacity: 0;
     background-color: black;
     pointer-events: none;
@@ -27,6 +28,7 @@
 }
 
 .sidebar, .sidebar-title {
+    will-change: left;
     left: 100%;
     transition: left 150ms ease-out;
     z-index: 21;

src/Sidebar.js

@@ -1,17 +1,29 @@
-import React, {Component} from 'react';
+import React, {Component, PureComponent} from 'react';
 import './Sidebar.css';
 
-export function Sidebar(props) {
+export class Sidebar extends PureComponent {
-    return (
+    constructor(props) {
-        <div className={props.title!==null ? 'sidebar-on' : ''}>
+        super(props);
-            <div className="sidebar-shadow" onClick={props.do_close} />
+        this.sidebar_ref=React.createRef();
-            <div className="sidebar">
+    }
-                {props.content}
+
+    componentWillReceiveProps(nextProps) {
+        //console.log('sidebar top');
+        this.sidebar_ref.current.scrollTo(0,0);
+    }
+
+    render() {
+        return (
+            <div className={this.props.title!==null ? 'sidebar-on' : ''}>
+                <div className="sidebar-shadow" onClick={this.props.do_close} />
+                <div ref={this.sidebar_ref} className="sidebar">
+                    {this.props.content}
+                </div>
+                <div className="sidebar-title">
+                    <a onClick={this.props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
+                    {this.props.title}
+                </div>
             </div>
-            <div className="sidebar-title">
+        );
-                <a onClick={props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
+    }
-                {props.title}
-            </div>
-        </div>
-    );
 }

src/Title.js

@@ -138,7 +138,7 @@ class ControlBar extends PureComponent {
                             this.props.show_sidebar(
                                 '发表树洞',
                                 <PostForm token={token} on_complete={()=>{
-                                    this.props.show_sidebar('',null);
+                                    this.props.show_sidebar(null,null);
                                     this.do_refresh();
                                 }} />
                             )

src/UserAction.css

@@ -10,7 +10,7 @@
 }
 .reply-sticky {
     position: sticky;
-    bottom: 1em;
+    bottom: 0;
 }
 
 .reply-form textarea {

src/UserAction.js

@@ -107,7 +107,7 @@ export class LoginForm extends Component {
                     set_token(token);
                 })
                 .catch((e)=>{
-                    alert('Token检验失败');
+                    alert('Token检验失败\n'+e);
                     this.setState({
                         loading_status: 'done',
                     });

src/index.css

@@ -50,7 +50,7 @@ audio {
 }
 
 pre {
-    white-space: pre-wrap;
+    white-space: pre-line;
 }
 
 button, .button {