feat(demo): add smart auto scroll to grid

This commit is contained in:
Simon Chan 2022-05-22 23:28:01 +08:00
parent 12a991eab8
commit 76fd15c46b
No known key found for this signature in database
GPG key ID: A8B69F750B9BCEDD
2 changed files with 19 additions and 2 deletions

View file

@ -1,5 +1,5 @@
import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { ComponentType, CSSProperties, useLayoutEffect, useMemo, useState } from "react"; import { ComponentType, CSSProperties, useEffect, useLayoutEffect, useMemo, useState } from "react";
import { useStableCallback, withDisplayName } from "../utils"; import { useStableCallback, withDisplayName } from "../utils";
import { ResizeObserver, Size } from './resize-observer'; import { ResizeObserver, Size } from './resize-observer';
@ -167,8 +167,18 @@ export const Grid = withDisplayName('Grid')(({
const [bodyRef, setBodyRef] = useState<HTMLDivElement | null>(null); const [bodyRef, setBodyRef] = useState<HTMLDivElement | null>(null);
const [bodySize, setBodySize] = useState<Size>({ width: 0, height: 0 }); const [bodySize, setBodySize] = useState<Size>({ width: 0, height: 0 });
const [autoScroll, setAutoScroll] = useState(true);
const handleScroll = useStableCallback(() => { const handleScroll = useStableCallback(() => {
if (bodyRef) { if (bodyRef) {
if (autoScroll) {
if (scrollTop < bodyRef.scrollHeight - bodyRef.clientHeight && bodyRef.scrollTop < scrollTop) {
setAutoScroll(false);
}
} else if (bodyRef.scrollTop + bodyRef.offsetHeight >= bodyRef.scrollHeight - 50) {
setAutoScroll(true);
}
setScrollLeft(bodyRef.scrollLeft); setScrollLeft(bodyRef.scrollLeft);
setScrollTop(bodyRef.scrollTop); setScrollTop(bodyRef.scrollTop);
} }
@ -267,6 +277,13 @@ export const Grid = withDisplayName('Grid')(({
}; };
}, [columns, bodySize.width]); }, [columns, bodySize.width]);
useEffect(() => {
if (autoScroll && bodyRef) {
void bodyRef.offsetLeft;
bodyRef.scrollTop = bodyRef.scrollHeight;
}
});
const headers = useMemo(() => ( const headers = useMemo(() => (
columnMetadata.columns.map((column, index) => ( columnMetadata.columns.map((column, index) => (
<HeaderComponent <HeaderComponent

View file

@ -168,7 +168,7 @@ export class Logcat extends AdbCommandBase {
...(options?.pid ? ['--pid', options.pid.toString()] : []), ...(options?.pid ? ['--pid', options.pid.toString()] : []),
...(options?.ids ? ['-b', Logcat.joinLogId(options.ids)] : []) ...(options?.ids ? ['-b', Logcat.joinLogId(options.ids)] : [])
], { ], {
// PERF: None protocol is 25% faster then Shell protocol // PERF: None protocol is 150% faster then Shell protocol
protocols: [AdbSubprocessNoneProtocol], protocols: [AdbSubprocessNoneProtocol],
}); });
bufferedStream = new BufferedStream(stdout); bufferedStream = new BufferedStream(stdout);