mirror of
https://github.com/yume-chan/ya-webadb.git
synced 2025-10-05 10:49:24 +02:00
feat(demo): add smart auto scroll to grid
This commit is contained in:
parent
12a991eab8
commit
76fd15c46b
2 changed files with 19 additions and 2 deletions
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue