mirror of
https://github.com/D4M13N-D3V/comissions-app-ui.git
synced 2025-03-13 07:45:07 +00:00
31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
|
import { useEffect, useRef } from "react"
|
||
|
|
|
||
|
|
export default function SwipeableViews(
|
||
|
|
{ className = "", index, onChangeIndex, ...rootProps }:
|
||
|
|
{ index: number, onChangeIndex: (index: number) => void } & React.HTMLProps<HTMLDivElement>
|
||
|
|
) {
|
||
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
||
|
|
const scrollTimeout = useRef<number>()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
containerRef.current?.children[index]?.scrollIntoView({ behavior: "smooth" })
|
||
|
|
}, [index])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
{...rootProps}
|
||
|
|
ref={containerRef}
|
||
|
|
className={
|
||
|
|
"flex snap-x snap-mandatory items-stretch overflow-x-scroll " +
|
||
|
|
"*:w-full *:flex-shrink-0 *:snap-center " + className
|
||
|
|
}
|
||
|
|
onScroll={({ currentTarget }) => {
|
||
|
|
if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
|
||
|
|
scrollTimeout.current = window.setTimeout(() => {
|
||
|
|
const pageWidth = currentTarget.scrollWidth / currentTarget.children.length
|
||
|
|
onChangeIndex(Math.round(currentTarget.scrollLeft / pageWidth))
|
||
|
|
}, 100)
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|