diff options
| author | Adam <[email protected]> | 2026-03-13 06:27:58 -0500 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-03-13 06:27:58 -0500 |
| commit | 270cb0b8b4265ac0965ac8b94a58a3bca86fa558 (patch) | |
| tree | 5a37c81bec1dea75b5c24f6aa8fb6a762d438f64 /packages/ui/src/components/scroll-view.tsx | |
| parent | 46ba9c81703fc6e7db7e623a607eeaab94fcd00f (diff) | |
| download | opencode-270cb0b8b4265ac0965ac8b94a58a3bca86fa558.tar.gz opencode-270cb0b8b4265ac0965ac8b94a58a3bca86fa558.zip | |
chore: cleanup (#17284)
Diffstat (limited to 'packages/ui/src/components/scroll-view.tsx')
| -rw-r--r-- | packages/ui/src/components/scroll-view.tsx | 37 |
1 files changed, 22 insertions, 15 deletions
diff --git a/packages/ui/src/components/scroll-view.tsx b/packages/ui/src/components/scroll-view.tsx index c3d878af6..2b58300b9 100644 --- a/packages/ui/src/components/scroll-view.tsx +++ b/packages/ui/src/components/scroll-view.tsx @@ -1,4 +1,5 @@ -import { createSignal, onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js" +import { onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js" +import { createStore } from "solid-js/store" import { useI18n } from "../context/i18n" export interface ScrollViewProps extends ComponentProps<"div"> { @@ -48,23 +49,29 @@ export function ScrollView(props: ScrollViewProps) { let viewportRef!: HTMLDivElement let thumbRef!: HTMLDivElement - const [isHovered, setIsHovered] = createSignal(false) - const [isDragging, setIsDragging] = createSignal(false) - - const [thumbHeight, setThumbHeight] = createSignal(0) - const [thumbTop, setThumbTop] = createSignal(0) - const [showThumb, setShowThumb] = createSignal(false) + const [state, setState] = createStore({ + isHovered: false, + isDragging: false, + thumbHeight: 0, + thumbTop: 0, + showThumb: false, + }) + const isHovered = () => state.isHovered + const isDragging = () => state.isDragging + const thumbHeight = () => state.thumbHeight + const thumbTop = () => state.thumbTop + const showThumb = () => state.showThumb const updateThumb = () => { if (!viewportRef) return const { scrollTop, scrollHeight, clientHeight } = viewportRef if (scrollHeight <= clientHeight || scrollHeight === 0) { - setShowThumb(false) + setState("showThumb", false) return } - setShowThumb(true) + setState("showThumb", true) const trackPadding = 8 const trackHeight = clientHeight - trackPadding * 2 @@ -81,8 +88,8 @@ export function ScrollView(props: ScrollViewProps) { // Ensure thumb stays within bounds (shouldn't be necessary due to math above, but good for safety) const boundedTop = trackPadding + Math.max(0, Math.min(top, maxThumbTop)) - setThumbHeight(height) - setThumbTop(boundedTop) + setState("thumbHeight", height) + setState("thumbTop", boundedTop) } onMount(() => { @@ -113,7 +120,7 @@ export function ScrollView(props: ScrollViewProps) { const onThumbPointerDown = (e: PointerEvent) => { e.preventDefault() e.stopPropagation() - setIsDragging(true) + setState("isDragging", true) startY = e.clientY startScrollTop = viewportRef.scrollTop @@ -132,7 +139,7 @@ export function ScrollView(props: ScrollViewProps) { } const onPointerUp = (e: PointerEvent) => { - setIsDragging(false) + setState("isDragging", false) thumbRef.releasePointerCapture(e.pointerId) thumbRef.removeEventListener("pointermove", onPointerMove) thumbRef.removeEventListener("pointerup", onPointerUp) @@ -191,8 +198,8 @@ export function ScrollView(props: ScrollViewProps) { ref={rootRef} class={`scroll-view ${local.class || ""}`} style={local.style} - onPointerEnter={() => setIsHovered(true)} - onPointerLeave={() => setIsHovered(false)} + onPointerEnter={() => setState("isHovered", true)} + onPointerLeave={() => setState("isHovered", false)} {...rest} > {/* Viewport */} |
