hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add useInitialScrollToBottom() hook

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-09-06 18:26:16 +03:00
parent 8ed40ffb8f
commit 4c74d5a780
2 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/renderer/components/dock/logs/log-list.tsx
View File

@ -8,6 +8,7 @@ import { LogRow } from "./log-row";
import { cssNames } from "../../../utils"; import { cssNames } from "../../../utils";
import { v4 as getRandomId } from "uuid"; import { v4 as getRandomId } from "uuid";
import { useScrollToBottomButton } from "./use-scroll-to-bottom"; import { useScrollToBottomButton } from "./use-scroll-to-bottom";
import { useInitialScrollToBottom } from "./use-initial-scroll-to-bottom";
export interface LogListProps { export interface LogListProps {
model: LogTabViewModel; model: LogTabViewModel;
@ -25,10 +26,16 @@ export const LogList = observer(({ model }: LogListProps) => {
getScrollElement: () => parentRef.current, getScrollElement: () => parentRef.current,
estimateSize: () => 38, estimateSize: () => 38,
overscan: 5, overscan: 5,
scrollPaddingEnd: 0,
scrollPaddingStart: 0,
}); });
const scrollTo = (index: number) => {
rowVirtualizer.scrollToIndex(index, { align: 'start', smoothScroll: false });
}
const scrollToBottom = () => {
scrollTo(visibleLogs.get().length - 1);
}
const onScroll = (event: React.UIEvent<HTMLDivElement>) => { const onScroll = (event: React.UIEvent<HTMLDivElement>) => {
if (!parentRef.current) return; if (!parentRef.current) return;
@ -48,7 +55,7 @@ export const LogList = observer(({ model }: LogListProps) => {
} }
/** /**
* Check if user scrolled to top and new logs should be loaded * Loads new logs if user scrolled to the top
*/ */
const onScrollToTop = async () => { const onScrollToTop = async () => {
const { scrollTop } = parentRef.current as HTMLDivElement; const { scrollTop } = parentRef.current as HTMLDivElement;
@ -61,19 +68,14 @@ export const LogList = observer(({ model }: LogListProps) => {
const scrollToIndex = model.logs.get().findIndex(log => log === firstLog); const scrollToIndex = model.logs.get().findIndex(log => log === firstLog);
rowVirtualizer.scrollToIndex(scrollToIndex, { align: 'start', smoothScroll: false }); scrollTo(scrollToIndex);
} }
}; };
useEffect(() => { useInitialScrollToBottom(model, scrollToBottom);
setTimeout(() => {
// Initial scroll to bottom
rowVirtualizer.scrollToIndex(visibleLogs.get().length - 1, { align: 'end', smoothScroll: false });
}, 200)
}, [model.logTabData.get()?.selectedPodId])
useEffect(() => { useEffect(() => {
rowVirtualizer.scrollToIndex(visibleLogs.get().length - 1, { align: 'end', smoothScroll: false }); // rowVirtualizer.scrollToIndex(visibleLogs.get().length - 1, { align: 'end', smoothScroll: false });
setRowKeySuffix(getRandomId()); setRowKeySuffix(getRandomId());
}, [model.logTabData.get()]); }, [model.logTabData.get()]);

10
src/renderer/components/dock/logs/use-initial-scroll-to-bottom.ts Normal file
View File

@ -0,0 +1,10 @@
import { useEffect } from "react";
import type { LogTabViewModel } from "./logs-view-model";
export function useInitialScrollToBottom(model: LogTabViewModel, callback: () => void) {
useEffect(() => {
setTimeout(() => {
callback();
}, 300) // Giving some time virtual library to render its rows
}, [model.logTabData.get()?.selectedPodId])
}