mirror of
https://github.com/pomber/git-history.git
synced 2024-09-11 14:35:57 +03:00
Refactor scroller
This commit is contained in:
parent
76dacf2fe2
commit
91bb2250e4
54
src/scroller.js
Normal file
54
src/scroller.js
Normal file
@ -0,0 +1,54 @@
|
||||
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);
|
||||
|
||||
const ref = React.useRef(null);
|
||||
const height = useHeight(ref);
|
||||
|
||||
const children = useChildren({
|
||||
height,
|
||||
top,
|
||||
items,
|
||||
getRow,
|
||||
getRowHeight,
|
||||
data
|
||||
});
|
||||
|
||||
return (
|
||||
<Scrollbars
|
||||
autoHide
|
||||
ref={ref}
|
||||
// onScrollFrame={({ scrollTop }) => setTop(scrollTop)}
|
||||
onScroll={e => setTop(e.target.scrollTop)}
|
||||
renderThumbVertical={({ style, ...props }) => (
|
||||
<div
|
||||
style={{ ...style, backgroundColor: "rgb(173, 219, 103, 0.3)" }}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
children={children}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function useHeight(ref) {
|
||||
let [height, setHeight] = React.useState(null);
|
||||
|
||||
function handleResize() {
|
||||
setHeight(ref.current.getClientHeight());
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, [ref.current]);
|
||||
|
||||
return height;
|
||||
}
|
87
src/slide.js
87
src/slide.js
@ -1,8 +1,7 @@
|
||||
import React from "react";
|
||||
import animation from "./animation";
|
||||
import theme from "./nightOwl";
|
||||
import useChildren from "./useVirtualChildren";
|
||||
import { Scrollbars } from "react-custom-scrollbars";
|
||||
import Scroller from "./scroller";
|
||||
|
||||
const themeStylesByType = Object.create(null);
|
||||
theme.styles.forEach(({ types, style }) => {
|
||||
@ -37,42 +36,8 @@ function getLine(line, i, { styles }) {
|
||||
return <Line line={line} style={styles[i]} key={line.key} />;
|
||||
}
|
||||
|
||||
function Lines({ height, top, lines, styles }) {
|
||||
const children = useChildren({
|
||||
height,
|
||||
top,
|
||||
items: lines,
|
||||
getRow: getLine,
|
||||
getRowHeight: getLineHeight,
|
||||
data: { styles }
|
||||
});
|
||||
return children;
|
||||
}
|
||||
|
||||
function useHeight(ref) {
|
||||
let [height, setHeight] = React.useState(null);
|
||||
|
||||
function handleResize() {
|
||||
setHeight(ref.current.getClientHeight());
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, [ref.current]);
|
||||
|
||||
return height;
|
||||
}
|
||||
|
||||
function Slide({ lines, styles }) {
|
||||
const [top, setTop] = React.useState(0);
|
||||
|
||||
let ref = React.useRef(null);
|
||||
let height = useHeight(ref);
|
||||
|
||||
export default function Slide({ time, lines }) {
|
||||
const styles = animation((time + 1) / 2, lines);
|
||||
return (
|
||||
<pre
|
||||
style={{
|
||||
@ -85,36 +50,24 @@ function Slide({ lines, styles }) {
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<Scrollbars
|
||||
autoHide
|
||||
ref={ref}
|
||||
onScrollFrame={({ scrollTop }) => setTop(scrollTop)}
|
||||
renderThumbVertical={({ style, ...props }) => (
|
||||
<div
|
||||
style={{ ...style, backgroundColor: "rgb(173, 219, 103, 0.3)" }}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
<code
|
||||
style={{
|
||||
display: "block",
|
||||
width: "calc(100% - 20px)",
|
||||
maxWidth: "900px",
|
||||
margin: "auto",
|
||||
padding: "10px",
|
||||
height: "100%",
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<code
|
||||
style={{
|
||||
display: "block",
|
||||
width: "calc(100% - 20px)",
|
||||
maxWidth: "900px",
|
||||
margin: "auto",
|
||||
padding: "10px",
|
||||
height: "100%",
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<Lines height={height} top={top} lines={lines} styles={styles} />
|
||||
</code>
|
||||
</Scrollbars>
|
||||
<Scroller
|
||||
items={lines}
|
||||
getRow={getLine}
|
||||
getRowHeight={getLineHeight}
|
||||
data={{ styles }}
|
||||
/>
|
||||
</code>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SlideWrapper({ time, lines }) {
|
||||
const styles = animation((time + 1) / 2, lines);
|
||||
return <Slide styles={styles} lines={lines} />;
|
||||
}
|
||||
|
@ -10,7 +10,7 @@ export default function useChildren({
|
||||
}) {
|
||||
const children = [];
|
||||
|
||||
const extraRender = 300;
|
||||
const extraRender = 500;
|
||||
|
||||
const topT = top - extraRender;
|
||||
const bottomT = top + height + extraRender;
|
Loading…
Reference in New Issue
Block a user