Fix follow property and the ScrollFollow component. (issue #14) (#31)

* Updated dependencies

* Added onScroll callback to LazyLog component

* Fixed scroll following logic

* Fixed ScrollFollow logic

* Fixed the startFollowing property

Author: ClemensElflein

package-lock.json

@@ -192,6 +192,17 @@ export interface LazyLogProps {
      * @param {React.MouseEvent<HTMLElement>} event - Browser event.
      */
     onLineContentClick?(event: React.MouseEvent<HTMLSpanElement>): void;
+
+    /**
+     * Callback to invoke on user scroll. Args matches the ScrollFollow onScroll callback.
+     * @param args
+     */
+    onScroll?(args: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+    }): void;
+
     /**
      * Number of rows to render above/below the visible bounds of the list.
      * This can help reduce flickering during scrolling on
@@ -405,6 +416,12 @@ export default class LazyLog extends Component<LazyLogProps, LazyLogState> {
             update();
         }
 
+        // If follow is activated, and we're not currently searching, scroll to offset
+        if (this.props.follow && !this.state.isSearching) {
+            this.state.listRef?.current?.scrollToItem(this.state.scrollToIndex, "auto");
+            this.state.listRef?.current?.forceUpdate();
+        }
+
         if (
             !this.state.loaded &&
             prevState.loaded !== this.state.loaded &&
@@ -1116,6 +1133,18 @@ export default class LazyLog extends Component<LazyLogProps, LazyLogState> {
                                     this.setState({
                                         scrollOffset: options.scrollOffset,
                                     });
+                                    // If there is an onScroll callback, call it.
+                                    if(this.props.onScroll) {
+                                        const args = {
+                                            scrollTop: options.scrollOffset,
+                                            scrollHeight: this.getItemSize(0) * (rowCount === 0
+                                                ? rowCount
+                                                : rowCount +
+                                                (this.props.extraLines || 0)),
+                                            clientHeight: this.calculateListHeight(height) as number
+                                        }
+                                        this.props.onScroll(args);
+                                    }
                                 }}
                             >
                                 {/* 

src/components/LazyLog/index.tsx

@@ -57,19 +57,22 @@ export default class ScrollFollow extends Component<
         startFollowing: false,
     };
 
-    static getDerivedStateFromProps(nextProps: { startFollowing: boolean }) {
-        return {
-            follow: nextProps.startFollowing,
-        };
-    }
-
+    // Initial state is the startFollowing prop.
     state: ScrollFollowState = {
-        follow: false,
+        follow: this.props.startFollowing ?? false,
     };
 
     handleScroll = ({ scrollTop, scrollHeight, clientHeight }: any) => {
-        if (this.state.follow && scrollHeight - scrollTop !== clientHeight) {
-            this.setState({ follow: false });
+        // Only update the state if the content exceeds the available space
+        // otherwise the follow will be disabled before the screen is filled.
+        if(scrollHeight > clientHeight) {
+            if (this.state.follow && scrollHeight - scrollTop !== clientHeight) {
+                // Disable follow, if we're currently following and have manually scrolled away from the bottom.
+                this.setState({follow: false});
+            } else if (!this.state.follow && scrollHeight - scrollTop === clientHeight) {
+                // Enable follow if we are not currently following and have scrolled to the bottom.
+                this.setState({follow: true});
+            }
         }
     };