Add infinite scrolling (#59)

Author: HunterCFigueroa

src/components/LazyLog/index.tsx

@@ -201,6 +201,10 @@ export interface LazyLogProps {
      * Specify an additional className to append to lines.
      */
     lineClassName?: string;
+    /**
+     * Manually display the loading component
+     */
+    loading?: boolean;
     /**
      * Specify an alternate component to use when loading.
      */
@@ -244,6 +248,13 @@ export interface LazyLogProps {
         clientHeight: number;
     }): void;
 
+    /**
+     * Callback invoked when visible items range changes.
+     * @param startIndex - The start index of viewable items.
+     * @param endIndex - The end index of viewable items.
+     */
+    onRangeChange?(startIndex: number, endIndex: number): void;
+
     /**
      * Number of rows to render above/below the visible bounds of the list.
      * This can help reduce flickering during scrolling on
@@ -368,6 +379,8 @@ export default class LazyLog extends Component<LazyLogProps, LazyLogState> {
         onHighlight: undefined,
         onLineNumberClick: undefined,
         onLoad: undefined,
+        onRangeChange: undefined,
+        loading: undefined,
         overscanRowCount: 100,
         rowHeight: 19,
         scrollToLine: 0,
@@ -1229,13 +1242,16 @@ export default class LazyLog extends Component<LazyLogProps, LazyLogState> {
                             this.props.onScroll(args);
                         }
                     }}
+                    onRangeChange={this.props.onRangeChange}
                 >
                     {Array.from({
                         length:
                             rowCount === 0
                                 ? rowCount
                                 : rowCount + (this.props.extraLines || 0),
                     }).map((_, i) => this.renderRow({ index: i }))}
+                    {this.props.loading === true &&
+                        (this.props.loadingComponent || <Loading />)}
                 </VList>
             </Fragment>
         );

src/stories/LazyLog.stories.tsx

@@ -719,3 +719,59 @@ export const LineWrapping: Story = {
 [taskcluster 2018-11-14 21:19:42.433Z] Successful task run with exit code: 0 completed in 669.981 seconds`,
     },
 };
+
+const delay = (time: number) => {
+    return new Promise((res) => {
+        setTimeout(res, time);
+    });
+};
+
+export const InfiniteScrolling: Story = {
+    args: {
+        ...BaseStory,
+        height: 400,
+    },
+    render: (args) => {
+        const createLines = (num: number, offset: number = 0) => {
+            return Array.from({
+                length: num,
+            }).map((_, i) => {
+                i += offset;
+                return `Line: ${i}\n`;
+            });
+        };
+        const [fetching, setFetching] = React.useState(false);
+
+        const fetchItems = async () => {
+            setFetching(true);
+            await delay(1000);
+            setFetching(false);
+        };
+
+        const ITEM_BATCH_COUNT = 100;
+        const [items, setItems] = React.useState(() =>
+            createLines(ITEM_BATCH_COUNT)
+        );
+
+        const fetchedCountRef = React.useRef(-1);
+        const count = items.length;
+
+        return (
+            <LazyLog
+                {...args}
+                onRangeChange={async (_, end) => {
+                    if (end + 50 > count && fetchedCountRef.current < count) {
+                        fetchedCountRef.current = count;
+                        await fetchItems();
+                        setItems((prev) => [
+                            ...prev,
+                            ...createLines(ITEM_BATCH_COUNT, prev.length),
+                        ]);
+                    }
+                }}
+                loading={fetching}
+                text={items.join("")}
+            ></LazyLog>
+        );
+    },
+};