Make scroller controlled

ebigram · Feb 24, 2019 · a884327 · a884327
1 parent 91bb225
commit a884327
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/scroller.js b/src/scroller.js
@@ -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

diff --git a/src/slide.js b/src/slide.js
@@ -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} />;
+}