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

Create useScrollToBottomButton hook

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

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

@ -7,18 +7,19 @@ import type { LogTabViewModel } from './logs-view-model';
import { LogRow } from "./log-row";
import { cssNames } from "../../../utils";
import { v4 as getRandomId } from "uuid";
import { useScrollToBottomButton } from "./use-scroll-to-bottom";
export interface LogListProps {
model: LogTabViewModel;
}
export const LogList = observer(({ model }: LogListProps) => {
const [toBottomVisible, setToBottomVisible] = React.useState(false);
const [lastLineVisible, setLastLineVisible] = React.useState(true);
const [rowKeySuffix, setRowKeySuffix] = React.useState(getRandomId());
const { visibleLogs } = model;
const parentRef = useRef<HTMLDivElement>(null)
const [toBottomVisible, setButtonVisibility] = useScrollToBottomButton(parentRef.current);
const rowVirtualizer = useVirtualizer({
count: visibleLogs.get().length,
getScrollElement: () => parentRef.current,
@ -31,22 +32,11 @@ export const LogList = observer(({ model }: LogListProps) => {
const onScroll = (event: React.UIEvent<HTMLDivElement>) => {
if (!parentRef.current) return;
setToBottomVisibility();
setButtonVisibility();
setLastLineVisibility();
onScrollToTop();
}
// TODO: Move to its own hook
const setToBottomVisibility = () => {
const { scrollTop, scrollHeight } = parentRef.current as HTMLDivElement;
// console.log("scrolling", scrollHeight, scrollTop, rowVirtualizer.getTotalSize())
if (scrollHeight - scrollTop > 4000) {
setToBottomVisible(true);
} else {
setToBottomVisible(false);
}
}
const setLastLineVisibility = () => {
const { scrollTop, scrollHeight } = parentRef.current as HTMLDivElement;

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

@ -0,0 +1,19 @@
import { useState } from 'react';
export function useScrollToBottomButton(scrolledParent: HTMLDivElement | null): [isVisible: boolean, setVisibility: () => void] {
const [isVisible, setToBottomVisible] = useState(false);
const setVisibility = () => {
if (!scrolledParent) return;
const { scrollTop, scrollHeight } = scrolledParent;
if (scrollHeight - scrollTop > 4000) {
setToBottomVisible(true);
} else {
setToBottomVisible(false);
}
}
return [isVisible, setVisibility];
}