release: bump version to 0.26.1
This commit is contained in:
rayd1o
301
frontend/src/components/Scrollbar/Scrollbar.tsx
Normal file
301
frontend/src/components/Scrollbar/Scrollbar.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
import {
|
||||
type PointerEvent as ReactPointerEvent,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
|
||||
type Axis = 'x' | 'y'
|
||||
type ScrollbarAxis = 'x' | 'y' | 'both'
|
||||
|
||||
interface AxisScrollbarState {
|
||||
visible: boolean
|
||||
dragging: boolean
|
||||
thumbSize: number
|
||||
thumbOffset: number
|
||||
}
|
||||
|
||||
interface ScrollbarState {
|
||||
x: AxisScrollbarState
|
||||
y: AxisScrollbarState
|
||||
}
|
||||
|
||||
interface ScrollbarProps {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
minThumbSize?: number
|
||||
axis?: ScrollbarAxis
|
||||
suppressScrollX?: boolean
|
||||
suppressScrollY?: boolean
|
||||
}
|
||||
|
||||
interface DragState {
|
||||
axis: Axis
|
||||
pointerId: number
|
||||
pointerOffset: number
|
||||
}
|
||||
|
||||
const INITIAL_AXIS_STATE: AxisScrollbarState = {
|
||||
visible: false,
|
||||
dragging: false,
|
||||
thumbSize: 0,
|
||||
thumbOffset: 0,
|
||||
}
|
||||
|
||||
const INITIAL_STATE: ScrollbarState = {
|
||||
x: INITIAL_AXIS_STATE,
|
||||
y: INITIAL_AXIS_STATE,
|
||||
}
|
||||
|
||||
function Scrollbar({
|
||||
children,
|
||||
className = '',
|
||||
minThumbSize = 28,
|
||||
axis = 'both',
|
||||
suppressScrollX = false,
|
||||
suppressScrollY = false,
|
||||
}: ScrollbarProps) {
|
||||
const viewportRef = useRef<HTMLDivElement | null>(null)
|
||||
const trackXRef = useRef<HTMLDivElement | null>(null)
|
||||
const trackYRef = useRef<HTMLDivElement | null>(null)
|
||||
const dragStateRef = useRef<DragState | null>(null)
|
||||
const [scrollbar, setScrollbar] = useState<ScrollbarState>(INITIAL_STATE)
|
||||
|
||||
const updateScrollbar = useCallback(() => {
|
||||
const viewport = viewportRef.current
|
||||
const trackX = trackXRef.current
|
||||
const trackY = trackYRef.current
|
||||
if (!viewport || !trackX || !trackY) return
|
||||
|
||||
const {
|
||||
clientWidth,
|
||||
clientHeight,
|
||||
scrollWidth,
|
||||
scrollHeight,
|
||||
scrollLeft,
|
||||
scrollTop,
|
||||
} = viewport
|
||||
|
||||
const enableX = axis === 'x' || axis === 'both'
|
||||
const enableY = axis === 'y' || axis === 'both'
|
||||
const hasOverflowX = enableX && !suppressScrollX && scrollWidth - clientWidth > 1
|
||||
const hasOverflowY = enableY && !suppressScrollY && scrollHeight - clientHeight > 1
|
||||
|
||||
const nextX: AxisScrollbarState = hasOverflowX && clientWidth > 0
|
||||
? (() => {
|
||||
const trackSize = trackX.clientWidth
|
||||
const thumbSize = Math.max(minThumbSize, (clientWidth / scrollWidth) * trackSize)
|
||||
const maxThumbOffset = Math.max(0, trackSize - thumbSize)
|
||||
const scrollRange = Math.max(1, scrollWidth - clientWidth)
|
||||
return {
|
||||
visible: true,
|
||||
dragging: scrollbar.x.dragging && dragStateRef.current?.axis === 'x',
|
||||
thumbSize,
|
||||
thumbOffset: (scrollLeft / scrollRange) * maxThumbOffset,
|
||||
}
|
||||
})()
|
||||
: { ...INITIAL_AXIS_STATE }
|
||||
|
||||
const nextY: AxisScrollbarState = hasOverflowY && clientHeight > 0
|
||||
? (() => {
|
||||
const trackSize = trackY.clientHeight
|
||||
const thumbSize = Math.max(minThumbSize, (clientHeight / scrollHeight) * trackSize)
|
||||
const maxThumbOffset = Math.max(0, trackSize - thumbSize)
|
||||
const scrollRange = Math.max(1, scrollHeight - clientHeight)
|
||||
return {
|
||||
visible: true,
|
||||
dragging: scrollbar.y.dragging && dragStateRef.current?.axis === 'y',
|
||||
thumbSize,
|
||||
thumbOffset: (scrollTop / scrollRange) * maxThumbOffset,
|
||||
}
|
||||
})()
|
||||
: { ...INITIAL_AXIS_STATE }
|
||||
|
||||
setScrollbar({ x: nextX, y: nextY })
|
||||
}, [minThumbSize, scrollbar.x.dragging, scrollbar.y.dragging, suppressScrollX, suppressScrollY])
|
||||
|
||||
useEffect(() => {
|
||||
const viewport = viewportRef.current
|
||||
const trackX = trackXRef.current
|
||||
const trackY = trackYRef.current
|
||||
if (!viewport || !trackX || !trackY) return
|
||||
|
||||
updateScrollbar()
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
updateScrollbar()
|
||||
})
|
||||
|
||||
resizeObserver.observe(viewport)
|
||||
resizeObserver.observe(trackX)
|
||||
resizeObserver.observe(trackY)
|
||||
Array.from(viewport.children).forEach((child) => resizeObserver.observe(child))
|
||||
viewport.addEventListener('scroll', updateScrollbar, { passive: true })
|
||||
window.addEventListener('resize', updateScrollbar)
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect()
|
||||
viewport.removeEventListener('scroll', updateScrollbar)
|
||||
window.removeEventListener('resize', updateScrollbar)
|
||||
}
|
||||
}, [children, updateScrollbar])
|
||||
|
||||
useEffect(() => {
|
||||
const stopDragging = () => {
|
||||
dragStateRef.current = null
|
||||
document.body.style.userSelect = ''
|
||||
setScrollbar((previous) => ({
|
||||
x: { ...previous.x, dragging: false },
|
||||
y: { ...previous.y, dragging: false },
|
||||
}))
|
||||
}
|
||||
|
||||
window.addEventListener('pointerup', stopDragging)
|
||||
window.addEventListener('pointercancel', stopDragging)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('pointerup', stopDragging)
|
||||
window.removeEventListener('pointercancel', stopDragging)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const syncScrollFromThumbOffset = (axis: Axis, nextThumbOffset: number) => {
|
||||
const viewport = viewportRef.current
|
||||
const track = axis === 'x' ? trackXRef.current : trackYRef.current
|
||||
const axisState = scrollbar[axis]
|
||||
if (!viewport || !track) return
|
||||
|
||||
const trackSize = axis === 'x' ? track.clientWidth : track.clientHeight
|
||||
const maxThumbOffset = Math.max(0, trackSize - axisState.thumbSize)
|
||||
if (maxThumbOffset <= 0) {
|
||||
if (axis === 'x') viewport.scrollLeft = 0
|
||||
else viewport.scrollTop = 0
|
||||
return
|
||||
}
|
||||
|
||||
const progress = Math.max(0, Math.min(nextThumbOffset, maxThumbOffset)) / maxThumbOffset
|
||||
if (axis === 'x') {
|
||||
const scrollRange = Math.max(0, viewport.scrollWidth - viewport.clientWidth)
|
||||
viewport.scrollLeft = progress * scrollRange
|
||||
return
|
||||
}
|
||||
const scrollRange = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
|
||||
viewport.scrollTop = progress * scrollRange
|
||||
}
|
||||
|
||||
const handleThumbPointerDown = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect()
|
||||
const axisState = scrollbar[axis]
|
||||
if (!axisState.visible) return
|
||||
|
||||
dragStateRef.current = {
|
||||
axis,
|
||||
pointerId: event.pointerId,
|
||||
pointerOffset: axis === 'x' ? event.clientX - rect.left : event.clientY - rect.top,
|
||||
}
|
||||
|
||||
setScrollbar((previous) => ({
|
||||
x: { ...previous.x, dragging: axis === 'x' },
|
||||
y: { ...previous.y, dragging: axis === 'y' },
|
||||
}))
|
||||
document.body.style.userSelect = 'none'
|
||||
event.currentTarget.setPointerCapture(event.pointerId)
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const handleThumbPointerMove = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
const track = axis === 'x' ? trackXRef.current : trackYRef.current
|
||||
const dragState = dragStateRef.current
|
||||
if (!track || !dragState || dragState.pointerId !== event.pointerId || dragState.axis !== axis) return
|
||||
|
||||
const rect = track.getBoundingClientRect()
|
||||
const nextThumbOffset = axis === 'x'
|
||||
? event.clientX - rect.left - dragState.pointerOffset
|
||||
: event.clientY - rect.top - dragState.pointerOffset
|
||||
syncScrollFromThumbOffset(axis, nextThumbOffset)
|
||||
}
|
||||
|
||||
const handleThumbPointerUp = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
if (dragStateRef.current?.pointerId !== event.pointerId || dragStateRef.current.axis !== axis) return
|
||||
dragStateRef.current = null
|
||||
document.body.style.userSelect = ''
|
||||
setScrollbar((previous) => ({
|
||||
x: { ...previous.x, dragging: false },
|
||||
y: { ...previous.y, dragging: false },
|
||||
}))
|
||||
event.currentTarget.releasePointerCapture?.(event.pointerId)
|
||||
}
|
||||
|
||||
const handleTrackPointerDown = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
const axisState = scrollbar[axis]
|
||||
if (!axisState.visible || event.target !== event.currentTarget) return
|
||||
|
||||
const rect = event.currentTarget.getBoundingClientRect()
|
||||
const nextThumbOffset = axis === 'x'
|
||||
? event.clientX - rect.left - axisState.thumbSize / 2
|
||||
: event.clientY - rect.top - axisState.thumbSize / 2
|
||||
syncScrollFromThumbOffset(axis, nextThumbOffset)
|
||||
}
|
||||
|
||||
const showCorner = scrollbar.x.visible && scrollbar.y.visible
|
||||
const scrollbarClassName = [
|
||||
'scrollbar',
|
||||
`scrollbar--${axis}`,
|
||||
className,
|
||||
].filter(Boolean).join(' ')
|
||||
|
||||
return (
|
||||
<div className={scrollbarClassName}>
|
||||
<div ref={viewportRef} className="scrollbar__viewport">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{(axis === 'y' || axis === 'both') ? (
|
||||
<div
|
||||
ref={trackYRef}
|
||||
className={`scrollbar__track scrollbar__track--y${scrollbar.y.visible ? ' scrollbar__track--visible' : ''}${scrollbar.y.dragging ? ' scrollbar__track--dragging' : ''}${showCorner ? ' scrollbar__track--has-corner' : ''}`}
|
||||
onPointerDown={handleTrackPointerDown('y')}
|
||||
>
|
||||
{scrollbar.y.visible ? (
|
||||
<div
|
||||
className="scrollbar__thumb scrollbar__thumb--y"
|
||||
style={{
|
||||
height: `${scrollbar.y.thumbSize}px`,
|
||||
transform: `translateY(${scrollbar.y.thumbOffset}px)`,
|
||||
}}
|
||||
onPointerDown={handleThumbPointerDown('y')}
|
||||
onPointerMove={handleThumbPointerMove('y')}
|
||||
onPointerUp={handleThumbPointerUp('y')}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{(axis === 'x' || axis === 'both') ? (
|
||||
<div
|
||||
ref={trackXRef}
|
||||
className={`scrollbar__track scrollbar__track--x${scrollbar.x.visible ? ' scrollbar__track--visible' : ''}${scrollbar.x.dragging ? ' scrollbar__track--dragging' : ''}${showCorner ? ' scrollbar__track--has-corner' : ''}`}
|
||||
onPointerDown={handleTrackPointerDown('x')}
|
||||
>
|
||||
{scrollbar.x.visible ? (
|
||||
<div
|
||||
className="scrollbar__thumb scrollbar__thumb--x"
|
||||
style={{
|
||||
width: `${scrollbar.x.thumbSize}px`,
|
||||
transform: `translateX(${scrollbar.x.thumbOffset}px)`,
|
||||
}}
|
||||
onPointerDown={handleThumbPointerDown('x')}
|
||||
onPointerMove={handleThumbPointerMove('x')}
|
||||
onPointerUp={handleThumbPointerUp('x')}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Scrollbar
|
||||
Reference in New Issue
Block a user