29 lines
734 B
TypeScript
29 lines
734 B
TypeScript
import React, { SyntheticEvent, useRef, useEffect } from "react";
|
|
import styles from "./horizontal-scroll.module.css";
|
|
|
|
export const HorizontalScroll: React.FC<{
|
|
scroll: number;
|
|
svgWidth: number;
|
|
taskListWidth: number;
|
|
onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
|
|
}> = ({ scroll, svgWidth, taskListWidth, onScroll }) => {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollLeft = scroll;
|
|
}
|
|
}, [scroll]);
|
|
|
|
return (
|
|
<div
|
|
style={{ marginLeft: taskListWidth }}
|
|
className={styles.scroll}
|
|
onScroll={onScroll}
|
|
ref={scrollRef}
|
|
>
|
|
<div style={{ width: svgWidth, height: 1 }} />
|
|
</div>
|
|
);
|
|
};
|