make new scrollbar scroll to the highlighted line

go1t · go1t · commit dd0e387e1c91 · 2016-07-19T19:55:38.000-07:00
diff --git a/src/client/app/modules/components/file-viewer.jsx b/src/client/app/modules/components/file-viewer.jsx
@@ -45,7 +45,6 @@ export class FileViewer extends React.Component {
     this.closePanel = this.closePanel.bind(this);
     this.toggleFullScreen = this.toggleFullScreen.bind(this);
     this.scrollToFocusedLine = this.scrollToFocusedLine.bind(this);
-    this.scrollAmount = 0;
   }
 
   closePanel() {
@@ -59,16 +58,17 @@ export class FileViewer extends React.Component {
   }
 
   scrollToFocusedLine() {
-    this.parentView.scrollTop = (this.props.line-1)*20 + 16 - screen.height/4;
+    var scrollAmount =  (this.props.line-1)*20 + 16 - screen.height/4;
+    this.scrollbars.scrollTop(scrollAmount);
   }
 
   render() {
     var {currentFilePath, line, className = ''} = this.props;
     return (
-      <div className={"FullView " + className} ref={(ref) => this.parentView = this.parentView || ref}>
+      <div className={"FullView " + className}>
         <CloseButton onClose={this.closePanel} toggleFull={this.toggleFullScreen}/>
         <Header filePath={currentFilePath} lno={line}/>
-        <SuperFuckingAwesomeScrollbars>
+        <SuperFuckingAwesomeScrollbars className="scrollParent" ref={(ref) => this.scrollbars = this.scrollbars || ref}>
           <div className="FullCode">
             <ConnectedCodeView
               key={currentFilePath}
diff --git a/src/client/app/modules/components/super-fucking-awesome-scrollbars.jsx b/src/client/app/modules/components/super-fucking-awesome-scrollbars.jsx
@@ -2,14 +2,19 @@ import React, {Component} from 'react';
 import { Scrollbars } from 'react-custom-scrollbars';
 
 export class SuperFuckingAwesomeScrollbars extends Component {
+  scrollTop(scrollAmount) {
+      this.scrollbars.scrollTop(scrollAmount);
+  }
+
   render() {
     return (
       <Scrollbars
         autoHide={true}
         autoHideTimeout={500}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
         renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
-        {...this.props}>
+        {...this.props}
+        ref={(ref) => this.scrollbars = ref}>
         {this.props.children}
       </Scrollbars>
     );
