Snap to bottom when near bottom and job is finished

Author: drew-gross

src/views/2_SessionComponent.tsx

@@ -12,6 +12,9 @@ interface Props {
     updateStatusBar: (() => void) | undefined; // Only the focused session can update the status bar.
 }
 
+// The height to snap to bottom when scroll. TODO: Make this the actual height
+const FOOTER_HEIGHT = 50;
+
 export class SessionComponent extends React.Component<Props, {}> {
     RENDER_JOBS_COUNT = 25;
 
@@ -26,7 +29,19 @@ export class SessionComponent extends React.Component<Props, {}> {
 
     componentDidMount() {
         this.props.session
-            .on("job", () => this.props.updateStatusBar && this.props.updateStatusBar())
+            .on("job", () => {
+                const s = (this.refs as any).session;
+                if (s) {
+                    if (s.scrollHeight - s.offsetHeight - s.scrollTop > FOOTER_HEIGHT) {
+                        // If we are already close to the bottom,
+                        // scroll all the way to the bottom
+                        s.scrollTop = s.scrollHeight;
+                    }
+                }
+                if (this.props.updateStatusBar) {
+                    this.props.updateStatusBar();
+                }
+            })
             .on("vcs-data", () => this.props.updateStatusBar && this.props.updateStatusBar());
     }
 
@@ -46,8 +61,9 @@ export class SessionComponent extends React.Component<Props, {}> {
 
         return (
             <div className="session"
-                 style={css.session(this.props.isFocused)}
-                 onClick={this.handleClick.bind(this)}>
+                ref="session"
+                style={css.session(this.props.isFocused)}
+                onClick={this.handleClick.bind(this)}>
 
                 <div className="jobs" style={css.jobs(this.props.isFocused)}>{jobs}</div>
                 <div className="shutter" style={css.sessionShutter(this.props.isFocused)}></div>