pomber/git-history
1
1
Fork 0
mirror of https://github.com/pomber/git-history.git synced 2024-09-11 14:35:57 +03:00
Code Issues Projects Releases Wiki Activity

Make scroller controlled

Browse Source
This commit is contained in:
Rodrigo Pombo 2019-02-24 18:28:52 -03:00
parent 91bb2250e4
commit a884327841
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/scroller.js
View File

@ -3,9 +3,14 @@ import React from "react";
import useChildren from "./use-virtual-children";
import { Scrollbars } from "react-custom-scrollbars";
export default function Scroller({ items, getRow, getRowHeight, data }) {
const [top, setTop] = React.useState(0);
export default function Scroller({
items,
getRow,
getRowHeight,
data,
top,
setTop
}) {
const ref = React.useRef(null);
const height = useHeight(ref);
@ -18,6 +23,10 @@ export default function Scroller({ items, getRow, getRowHeight, data }) {
data
});
React.useLayoutEffect(() => {
ref.current.scrollTop(top);
}, [top]);
return (
<Scrollbars
autoHide

12
src/slide.js
View File

@ -36,8 +36,8 @@ function getLine(line, i, { styles }) {
return <Line line={line} style={styles[i]} key={line.key} />;
}
export default function Slide({ time, lines }) {
const styles = animation((time + 1) / 2, lines);
function Slide({ lines, styles }) {
const [top, setTop] = React.useState(0);
return (
<pre
style={{
@ -66,8 +66,16 @@ export default function Slide({ time, lines }) {
getRow={getLine}
getRowHeight={getLineHeight}
data={{ styles }}
top={top}
setTop={setTop}
/>
</code>
</pre>
);
}
export default function SlideWrapper({ time, lines }) {
const styles = animation((time + 1) / 2, lines);
return <Slide lines={lines} styles={styles} />;
}