{
+ ref.current.scrollTop = top;
+ }, [top]);
+
+ return (
+ setTop(e.target.scrollTop)}
+ children={children}
+ />
+ );
+}
+
+function useHeight(ref) {
+ let [height, setHeight] = React.useState(null);
+
+ function handleResize() {
+ setHeight(ref.current.clientHeight);
+ }
+
+ React.useEffect(() => {
+ handleResize();
+ window.addEventListener("resize", handleResize);
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+ }, [ref.current]);
+
+ return height;
+}
diff --git a/src/slide.js b/src/slide.js
index 7cd698e..0c9f107 100644
--- a/src/slide.js
+++ b/src/slide.js
@@ -1,6 +1,7 @@
import React from "react";
import animation from "./animation";
import theme from "./nightOwl";
+import Scroller from "./scroller";
const themeStylesByType = Object.create(null);
theme.styles.forEach(({ types, style }) => {
@@ -12,9 +13,17 @@ theme.styles.forEach(({ types, style }) => {
});
});
-function Line({ line, style }) {
+function getLineHeight(line, i, { styles }) {
+ return styles[i].height != null ? styles[i].height : 15;
+}
+
+function getLine(line, i, { styles }) {
+ const style = styles[i];
return (
-
+
{line.tokens.map((token, i) => {
const style = themeStylesByType[token.type] || {};
return (
@@ -27,17 +36,18 @@ function Line({ line, style }) {
);
}
-export default function Slide({ time, lines }) {
- const styles = animation((time + 1) / 2, lines);
+function Slide({ lines, styles }) {
+ const [top, setTop] = React.useState(0);
return (
- {lines.map((line, i) => (
-
);
}
+
+export default function SlideWrapper({ time, lines }) {
+ const styles = animation((time + 1) / 2, lines);
+
+ return