FM / hooks

/home/vianto5/heredit.mx/wp-content/plugins/code-snippets/js/hooks/

/home/vianto5/heredit.mx/wp-content/plugins/code-snippets/js/hooks

Name	Size	Mode	Actions
useHorizontalScrollOverflow.ts	1399	0644	edit dl rm
useRestAPI.tsx	2762	0644	edit dl rm
useSelection.ts	1240	0644	edit dl rm
useSnippetsAPI.tsx	3751	0644	edit dl rm
useSnippetsList.tsx	1467	0644	edit dl rm
useSnippetView.ts	1241	0644	edit dl rm
useSubmitSnippet.tsx	5537	0644	edit dl rm

Edit: /home/vianto5/heredit.mx/wp-content/plugins/code-snippets/js/hooks/useHorizontalScrollOverflow.ts (1399B)

import { useCallback, useEffect, useRef, useState } from 'react'

interface HorizontalScrollOverflow {
	atStart: boolean
	atEnd: boolean
	scrollRef: React.RefObject<HTMLElement>
}

const EDGE_TOLERANCE = 1

export const useHorizontalScrollOverflow = (): HorizontalScrollOverflow => {
	const scrollRef = useRef<HTMLElement>(null)
	const [position, setPosition] = useState({ atStart: true, atEnd: true })

const updatePosition = useCallback(() => {
		const element = scrollRef.current

if (!element) {
			return
		}

const hasOverflow = element.scrollWidth - element.clientWidth > EDGE_TOLERANCE
		const atStart = !hasOverflow || element.scrollLeft <= EDGE_TOLERANCE
		const atEnd = !hasOverflow || element.scrollLeft + element.clientWidth >= element.scrollWidth - EDGE_TOLERANCE

setPosition(previous => previous.atStart === atStart && previous.atEnd === atEnd
			? previous
			: { atStart, atEnd })
	}, [])

useEffect(() => {
		const element = scrollRef.current

if (!element) {
			return
		}

updatePosition()
		element.addEventListener('scroll', updatePosition, { passive: true })

const observer = new ResizeObserver(updatePosition)
		observer.observe(element)
		observer.observe(element.firstElementChild ?? element)

return () => {
			element.removeEventListener('scroll', updatePosition)
			observer.disconnect()
		}
	}, [updatePosition])

return { ...position, scrollRef }
}

import { useCallback, useEffect, useRef, useState } from 'react' interface HorizontalScrollOverflow { atStart: boolean atEnd: boolean scrollRef: React.RefObject } const EDGE_TOLERANCE = 1 export const useHorizontalScrollOverflow = (): HorizontalScrollOverflow => { const scrollRef = useRef(null) const [position, setPosition] = useState({ atStart: true, atEnd: true }) const updatePosition = useCallback(() => { const element = scrollRef.current if (!element) { return } const hasOverflow = element.scrollWidth - element.clientWidth > EDGE_TOLERANCE const atStart = !hasOverflow || element.scrollLeft <= EDGE_TOLERANCE const atEnd = !hasOverflow || element.scrollLeft + element.clientWidth >= element.scrollWidth - EDGE_TOLERANCE setPosition(previous => previous.atStart === atStart && previous.atEnd === atEnd ? previous : { atStart, atEnd }) }, []) useEffect(() => { const element = scrollRef.current if (!element) { return } updatePosition() element.addEventListener('scroll', updatePosition, { passive: true }) const observer = new ResizeObserver(updatePosition) observer.observe(element) observer.observe(element.firstElementChild ?? element) return () => { element.removeEventListener('scroll', updatePosition) observer.disconnect() } }, [updatePosition]) return { ...position, scrollRef } }