51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { createEffect, createSignal, on, onCleanup, type Accessor } from "solid-js"
|
|
|
|
export function createDebouncedSignal<T>(value: T, ms: number): [Accessor<T>, (value: T) => void] {
|
|
const [get, set] = createSignal(value)
|
|
let timer: ReturnType<typeof setTimeout> | undefined
|
|
const debounced = (next: T) => {
|
|
if (timer) clearTimeout(timer)
|
|
timer = setTimeout(() => {
|
|
timer = undefined
|
|
set(() => next)
|
|
}, ms)
|
|
}
|
|
onCleanup(() => {
|
|
if (timer) clearTimeout(timer)
|
|
})
|
|
return [get, debounced]
|
|
}
|
|
|
|
export function createFadeIn(show: Accessor<boolean>, enabled: Accessor<boolean>) {
|
|
const [alpha, setAlpha] = createSignal(show() ? 1 : 0)
|
|
let revealed = show()
|
|
|
|
createEffect(
|
|
on([show, enabled], ([visible, animate]) => {
|
|
if (!visible) {
|
|
setAlpha(0)
|
|
return
|
|
}
|
|
|
|
if (!animate || revealed) {
|
|
revealed = true
|
|
setAlpha(1)
|
|
return
|
|
}
|
|
|
|
const start = performance.now()
|
|
revealed = true
|
|
setAlpha(0)
|
|
|
|
const timer = setInterval(() => {
|
|
const progress = Math.min((performance.now() - start) / 160, 1)
|
|
setAlpha(progress * progress * (3 - 2 * progress))
|
|
if (progress >= 1) clearInterval(timer)
|
|
}, 16)
|
|
|
|
onCleanup(() => clearInterval(timer))
|
|
}),
|
|
)
|
|
|
|
return alpha
|
|
}
|