@tremolo-ui/react 0.0.9 → 0.0.10

package/src/components/Slider/index.tsx

@@ -25,11 +25,12 @@ import { useEventListener } from '../../hooks/useEventListener'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
-import { SliderValuesProvider } from './context'
+import { SliderProvider } from './context'
 import { Scale } from './Scale'
 import { SliderThumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
 import { SliderTrack, SliderTrackProps } from './Track'
 
+/** @category Slider */
 export interface SliderProps {
   // required
   value: number
@@ -67,6 +68,7 @@ export interface SliderProps {
   // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
 }
 
+/** @category Slider */
 export interface SliderMethods {
   focus: () => void
   blur: () => void
@@ -77,6 +79,7 @@ type Props = SliderProps &
 
 /**
  * Customizable slider
+ * @category Slider
  */
 export const Slider = forwardRef<SliderMethods, Props>(
   (
@@ -229,11 +232,11 @@ export const Slider = forwardRef<SliderMethods, Props>(
       [wheel, value, min, max, skew, step],
     )
 
-    useEventListener(window, 'mousemove', (event) => {
+    useEventListener(globalThis.window, 'mousemove', (event) => {
       handleValue(event)
     })
 
-    useEventListener(window, 'mouseup', () => {
+    useEventListener(globalThis.window, 'mouseup', () => {
       thumbDragged.current = false
       if (bodyNoSelect) removeNoSelect()
     })
@@ -250,7 +253,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
     }, [])
 
     return (
-      <SliderValuesProvider
+      <SliderProvider
         min={min}
         max={max}
         step={step}
@@ -290,6 +293,8 @@ export const Slider = forwardRef<SliderMethods, Props>(
             style={{
               display: 'flex',
               flexDirection: vertical ? 'row' : 'column',
+              width: !vertical ? '100%' : undefined,
+              height: vertical ? '100%' : undefined,
             }}
           >
             <div className="tremolo-slider-track-wrapper" ref={trackElementRef}>
@@ -308,13 +313,17 @@ export const Slider = forwardRef<SliderMethods, Props>(
             {scaleComponent}
           </div>
         </div>
-      </SliderValuesProvider>
+      </SliderProvider>
     )
   },
 )
 
-export * from './context'
-export * from './Thumb'
-export * from './Track'
-export * from './Scale'
-export * from './ScaleOption'
+export { useSliderContext } from './context'
+export {
+  SliderThumb,
+  type SliderThumbMethods,
+  type SliderThumbProps,
+} from './Thumb'
+export { SliderTrack, type SliderTrackProps } from './Track'
+export { Scale, type ScaleProps } from './Scale'
+export { ScaleOption, type ScaleOptionProps } from './ScaleOption'

package/src/components/WheelObserver/index.tsx

@@ -25,6 +25,7 @@ interface Props<T extends ElementType> {
   onWheel?: (event: WheelEvent) => void
 }
 
+/** @category WheelObserver */
 export function WheelObserver<T extends ElementType = 'div'>(
   props: Props<T> & Omit<ComponentPropsWithoutRef<T>, keyof Props<T>>,
 ) {

package/src/components/XYPad/Area.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { CSSProperties, ReactElement } from 'react'
 
+/** @category XYPad */
 export interface AreaProps {
   width?: number | string
   height?: number | string
@@ -13,6 +14,7 @@ export interface AreaProps {
   __thumb?: ReactElement
 }
 
+/** @category XYPad */
 export function XYPadArea({
   width = 120,
   height = 120,

package/src/components/XYPad/Thumb.tsx

@@ -8,6 +8,7 @@ import {
   useRef,
 } from 'react'
 
+/** @category XYPad */
 export interface ThumbProps {
   size?: number | string
   width?: number | string
@@ -24,6 +25,7 @@ export interface ThumbProps {
   __css?: CSSProperties
 }
 
+/** @category XYPad */
 export interface XYPadThumbMethods {
   focus: () => void
   blur: () => void
@@ -32,6 +34,7 @@ export interface XYPadThumbMethods {
 type Props = ThumbProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof ThumbProps>
 
+/** @category XYPad */
 export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
   (
     {

package/src/components/XYPad/index.tsx

@@ -26,6 +26,7 @@ import { addNoSelect, removeNoSelect } from '../_util'
 import { XYPadArea, AreaProps } from './Area'
 import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
 
+/** @category XYPad */
 export interface ValueOptions {
   // required
   value: number
@@ -46,6 +47,7 @@ export interface ValueOptions {
   keyboard?: InputEventOption | null
 }
 
+/** @category XYPad */
 export interface XYPadProps {
   x: ValueOptions
   y: ValueOptions
@@ -58,6 +60,7 @@ export interface XYPadProps {
   children?: ReactElement | ReactElement[]
 }
 
+/** @category XYPad */
 export interface XYPadMethods {
   focus: () => void
   blur: () => void
@@ -76,6 +79,7 @@ type Props = XYPadProps &
 
 /**
  * Simple XYPad
+ * @category XYPad
  */
 export const XYPad = forwardRef<XYPadMethods, Props>(
   (
@@ -246,11 +250,11 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       [x, y],
     )
 
-    useEventListener(window, 'mousemove', (event) => {
+    useEventListener(globalThis.window, 'mousemove', (event) => {
       handleValue(event)
     })
 
-    useEventListener(window, 'mouseup', () => {
+    useEventListener(globalThis.window, 'mouseup', () => {
       thumbDragged.current = false
       if (bodyNoSelect) removeNoSelect()
     })

package/src/hooks/useAnimationFrame.ts

@@ -0,0 +1,18 @@
+import { DependencyList, useCallback, useEffect, useRef } from 'react'
+
+export const useAnimationFrame = (
+  callback = () => {},
+  deps: DependencyList = [],
+) => {
+  const reqIdRef = useRef(-1)
+  const loop = useCallback(() => {
+    reqIdRef.current = requestAnimationFrame(loop)
+    callback()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [callback, ...deps])
+
+  useEffect(() => {
+    reqIdRef.current = requestAnimationFrame(loop)
+    return () => cancelAnimationFrame(reqIdRef.current)
+  }, [loop])
+}

package/src/hooks/useDrag.ts

@@ -0,0 +1,92 @@
+import { useRef, useCallback } from 'react'
+
+import { useEventListener } from './useEventListener'
+import { useRefCallbackEvent } from './useRefCallbackEvent'
+
+interface Props {
+  threshold?: number
+
+  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void
+  onDragStart?: () => void
+  onDragEnd?: () => void
+}
+
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+export function useDrag<T extends Element>({
+  threshold = 1,
+  onDrag,
+  onDragStart,
+  onDragEnd,
+}: Props): [
+  (div: EventTarget | null) => void,
+  (event: React.PointerEvent<T>) => void,
+] {
+  const dragOffsetX = useRef<number | undefined>(undefined)
+  const dragOffsetY = useRef<number | undefined>(undefined)
+  const dragStartX = useRef(0)
+  const dragStartY = useRef(0)
+
+  const handleDrag = useCallback(
+    (
+      event: MouseEvent | React.MouseEvent<T, MouseEvent> | TouchEvent,
+      first = false,
+    ) => {
+      const isTouch = event instanceof TouchEvent
+      if (isTouch && event.cancelable) event.preventDefault()
+      const screenX = isTouch ? event.touches[0].screenX : event.screenX
+      const screenY = isTouch ? event.touches[0].screenY : event.screenY
+      let deltaX = 0
+      let deltaY = 0
+      if (first) {
+        dragStartX.current = screenX
+        dragStartY.current = screenY
+      }
+      if (dragOffsetX.current) {
+        deltaX = screenX - dragOffsetX.current
+        dragOffsetX.current = screenX
+      }
+      if (dragOffsetY.current) {
+        deltaY = screenY - dragOffsetY.current
+        dragOffsetY.current = screenY
+      }
+      if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return
+      if (onDrag)
+        onDrag(
+          screenX - dragStartX.current,
+          screenY - dragStartY.current,
+          deltaX,
+          deltaY,
+        )
+    },
+    [threshold, onDrag],
+  )
+
+  const refHandler = useRefCallbackEvent(
+    'touchmove',
+    handleDrag,
+    { passive: false },
+    [onDrag],
+  )
+
+  const pointerDownHandler = useCallback(
+    (event: React.PointerEvent<T>) => {
+      dragOffsetX.current = event.screenX
+      dragOffsetY.current = event.screenY
+      handleDrag(event, true)
+      onDragStart?.()
+    },
+    [handleDrag, onDragStart],
+  )
+
+  useEventListener(globalThis.window, 'mousemove', handleDrag)
+
+  useEventListener(globalThis.window, 'pointerup', () => {
+    dragOffsetX.current = undefined
+    dragOffsetY.current = undefined
+    onDragEnd?.()
+  })
+
+  return [refHandler, pointerDownHandler]
+}

package/src/hooks/useRefCallbackEvent.ts

@@ -1,20 +1,17 @@
 import { useMemo } from 'react'
 
-type Options = boolean | AddEventListenerOptions
-type CallbackFunc = (div: EventTarget | null) => void
-
 export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
   event: K,
   handler: (event: DocumentEventMap[K]) => void,
-  options?: Options,
+  options?: boolean | AddEventListenerOptions,
   deps?: React.DependencyList,
-): CallbackFunc
+): (div: EventTarget | null) => void
 export function useRefCallbackEvent(
   event: string,
   handler: (event: Event) => void,
-  options?: Options,
+  options?: boolean | AddEventListenerOptions,
   deps: React.DependencyList = [],
-): CallbackFunc {
+): (div: EventTarget | null) => void {
   return useMemo(() => {
     let cleanup: (() => void) | undefined
     return (node: EventTarget | null) => {