Gabriel Kaszewski
b9c0b10740
- React + TanStack Router + shadcn/ui SPA under spa/ - serve spa/dist at /app/ with index.html fallback for client routing - Dockerfile: node build stage for SPA, copy dist into runtime image - README: document SPA, CORS_ORIGINS env var, architecture entry - vite base set to /app/, manifest.json paths fixed
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { useRef, useState } from "react"
|
|
import { useDrag } from "@use-gesture/react"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
|
|
type PullToRefreshProps = {
|
|
onRefresh: () => Promise<unknown>
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export function PullToRefresh({ onRefresh, children }: PullToRefreshProps) {
|
|
const [pullY, setPullY] = useState(0)
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
|
|
const bind = useDrag(
|
|
({ movement: [, my], active, first, memo }) => {
|
|
if (first) {
|
|
const scrollTop = containerRef.current?.closest("[data-scroll]")?.scrollTop
|
|
?? document.documentElement.scrollTop
|
|
?? 0
|
|
memo = scrollTop <= 0
|
|
}
|
|
if (!memo) return memo
|
|
|
|
if (active) {
|
|
setPullY(Math.max(0, Math.min(my * 0.4, 80)))
|
|
} else {
|
|
if (my > 80 && !refreshing) {
|
|
setRefreshing(true)
|
|
setPullY(40)
|
|
onRefresh().finally(() => {
|
|
setRefreshing(false)
|
|
setPullY(0)
|
|
})
|
|
} else {
|
|
setPullY(0)
|
|
}
|
|
}
|
|
return memo
|
|
},
|
|
{ axis: "y", filterTaps: true },
|
|
)
|
|
|
|
return (
|
|
<div ref={containerRef} {...bind()} className="touch-pan-y">
|
|
<div
|
|
className="flex items-center justify-center overflow-hidden transition-[height] duration-200"
|
|
style={{ height: pullY }}
|
|
>
|
|
{(pullY > 0 || refreshing) && (
|
|
<Spinner className="size-5" />
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|