summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components/scroll-view.tsx
diff options
context:
space:
mode:
authorAdam <[email protected]>2026-03-13 06:27:58 -0500
committerGitHub <[email protected]>2026-03-13 06:27:58 -0500
commit270cb0b8b4265ac0965ac8b94a58a3bca86fa558 (patch)
tree5a37c81bec1dea75b5c24f6aa8fb6a762d438f64 /packages/ui/src/components/scroll-view.tsx
parent46ba9c81703fc6e7db7e623a607eeaab94fcd00f (diff)
downloadopencode-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.tsx37
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 */}