@tremolo-ui/react 0.3.0 → 0.5.0

package/src/hooks/useDragWithElement.ts

@@ -1,72 +0,0 @@
-import { useRef, useCallback, RefObject, useState } from 'react'
-
-import { normalizeValue } from '@tremolo-ui/functions'
-
-import { useEventListener } from './useEventListener'
-import { useRefCallbackEvent } from './useRefCallbackEvent'
-
-interface UseDragWithElement<T extends Element> {
-  baseElementRef: RefObject<T | null>
-  onDrag: (normalizedX: number, normalizedY: number) => void
-  onDragStart?: (normalizedX: number, normalizedY: number) => void
-  onDragEnd?: (normalizedX: number, normalizedY: number) => void
-}
-
-export function useDragWithElement<T extends Element>({
-  baseElementRef,
-  onDrag,
-  onDragStart,
-  onDragEnd,
-}: UseDragWithElement<T>) {
-  const [dragging, setDragging] = useState(false)
-  const normalizedX = useRef(0)
-  const normalizedY = useRef(0)
-
-  const handleDrag = useCallback(
-    (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
-      if (!baseElementRef.current || !dragging) {
-        return
-      }
-      const isTouch = event instanceof TouchEvent
-      if (isTouch && event.cancelable) event.preventDefault()
-      const { left, top, right, bottom } =
-        baseElementRef.current.getBoundingClientRect()
-      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
-      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
-      const nx = normalizeValue(mouseX, left, right)
-      const ny = normalizeValue(mouseY, top, bottom)
-      normalizedX.current = nx
-      normalizedY.current = ny
-      onDrag(nx, ny)
-    },
-    [onDrag, baseElementRef, dragging],
-  )
-
-  const refHandler = useRefCallbackEvent(
-    'touchmove',
-    handleDrag,
-    { passive: false },
-    [onDrag],
-  )
-
-  const pointerDownHandler = useCallback(
-    (event: React.PointerEvent<T>) => {
-      // dragging.current = true
-      setDragging(true)
-      handleDrag(event)
-      onDragStart?.(normalizedX.current, normalizedY.current)
-    },
-    [handleDrag, onDragStart],
-  )
-
-  useEventListener(globalThis.window, 'pointermove', handleDrag)
-
-  useEventListener(globalThis.window, 'pointerup', () => {
-    if (!dragging) return
-    // dragging.current = false
-    setDragging(false)
-    onDragEnd?.(normalizedX.current, normalizedY.current)
-  })
-
-  return { refHandler, pointerDownHandler, dragging }
-}

package/src/hooks/usePianoDrag.ts

@@ -1,75 +0,0 @@
-import { useRef, useCallback, RefObject } from 'react'
-
-import { normalizeValue } from '@tremolo-ui/functions'
-
-import { useEventListener } from './useEventListener'
-import { useRefCallbackEvent } from './useRefCallbackEvent'
-
-interface UsePianoDrag<T extends Element> {
-  baseElementRef: RefObject<T | null>
-  onDrag: (normalizedX: number, normalizedY: number) => void
-  onDragStart?: (normalizedX: number, normalizedY: number) => void
-  onDragEnd?: (normalizedX: number, normalizedY: number) => void
-}
-
-/**
- * Internal
- * @returns [refCallback, pointerDownHandler]
- * @private
- */
-export function usePianoDrag<T extends Element>({
-  baseElementRef,
-  onDrag,
-  onDragStart,
-  onDragEnd,
-}: UsePianoDrag<T>) {
-  const dragged = useRef(false)
-  const normalizedX = useRef(0)
-  const normalizedY = useRef(0)
-
-  const handleDrag = useCallback(
-    (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
-      if (!baseElementRef.current || !dragged.current) {
-        return
-      }
-      const isTouch = event instanceof TouchEvent
-      if (isTouch && event.cancelable) event.preventDefault()
-      const { left, top, right, bottom } =
-        baseElementRef.current.getBoundingClientRect()
-      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
-      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
-      const nx = normalizeValue(mouseX, left, right)
-      const ny = normalizeValue(mouseY, top, bottom)
-      normalizedX.current = nx
-      normalizedY.current = ny
-      onDrag(nx, ny)
-    },
-    [onDrag, baseElementRef],
-  )
-
-  const refHandler = useRefCallbackEvent(
-    'touchmove',
-    handleDrag,
-    { passive: false },
-    [onDrag],
-  )
-
-  const pointerDownHandler = useCallback(
-    (event: React.PointerEvent<T>) => {
-      dragged.current = true
-      handleDrag(event)
-      onDragStart?.(normalizedX.current, normalizedY.current)
-    },
-    [handleDrag, onDragStart],
-  )
-
-  useEventListener(globalThis.window, 'pointermove', handleDrag)
-
-  useEventListener(globalThis.window, 'pointerup', () => {
-    if (!dragged.current) return
-    dragged.current = false
-    onDragEnd?.(normalizedX.current, normalizedY.current)
-  })
-
-  return { refHandler, pointerDownHandler }
-}

package/src/hooks/useRefCallbackEvent.ts

@@ -1,34 +0,0 @@
-import { useMemo } from 'react'
-
-/**
- * Internal
- * @private
- */
-export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
-  event: K,
-  handler: (event: DocumentEventMap[K]) => void,
-  options?: boolean | AddEventListenerOptions,
-  deps?: React.DependencyList,
-): (div: EventTarget | null) => void
-export function useRefCallbackEvent(
-  event: string,
-  handler: (event: Event) => void,
-  options?: boolean | AddEventListenerOptions,
-  deps: React.DependencyList = [],
-): (div: EventTarget | null) => void {
-  return useMemo(() => {
-    let cleanup: (() => void) | undefined
-    return (node: EventTarget | null) => {
-      if (!node) {
-        cleanup?.()
-        return
-      }
-      node.addEventListener(event, handler, options)
-
-      cleanup = () => {
-        node.removeEventListener(event, handler, options)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps)
-}