@tremolo-ui/react 0.0.11 → 0.0.12

package/src/components/Slider/index.tsx

@@ -63,12 +63,16 @@ export interface SliderProps {
   className?: string
   style?: CSSProperties
   onChange?: (value: number) => void
+  onDragStart?: (value: number) => void
+  onDragEnd?: (value: number) => void
   /** \<SliderThumb /> | \<SliderTrack /> */
   children?: ReactElement | ReactElement[]
   // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
 }
 
-/** @category Slider */
+/**
+ * @category Slider
+ */
 export interface SliderMethods {
   focus: () => void
   blur: () => void
@@ -91,15 +95,21 @@ export const Slider = forwardRef<SliderMethods, Props>(
       skew = 1,
       vertical = false,
       reverse = false,
-      className,
-      style,
       bodyNoSelect = true,
       wheel = ['raw', 1],
       keyboard = ['raw', 1],
       disabled = false,
       readonly = false,
       onChange,
+      onDragStart,
+      onDragEnd,
+      className,
+      style,
       children,
+      onFocus,
+      onBlur,
+      onPointerDown,
+      onKeyDown,
       ...props
     }: Props,
     ref,
@@ -171,9 +181,25 @@ export const Slider = forwardRef<SliderMethods, Props>(
         ? normalizeValue(mouseY, y1, y2)
         : normalizeValue(mouseX, x1, x2)
       const v = rawValue(displayReversed ? 1 - n : n, min, max, skew)
-      onChange(clamp(stepValue(v, step), min, max))
+      const v2 = clamp(stepValue(v, step), min, max)
+      onChange(v2)
+      return v2
     }
 
+    const updateValueByEvent = useCallback(
+      (eventType: InputEventOption[0], x: number) => {
+        let newValue
+        if (eventType == 'normalized') {
+          const n = normalizeValue(value, min, max, skew)
+          newValue = rawValue(n + x, min, max, skew)
+        } else {
+          newValue = value + x
+        }
+        return clamp(stepValue(newValue, step), min, max)
+      },
+      [max, min, skew, step, value],
+    )
+
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (!keyboard || !onChange || readonly) return
@@ -183,17 +209,10 @@ export const Slider = forwardRef<SliderMethods, Props>(
           let x =
             key == 'ArrowRight' || key == 'ArrowUp' ? keyboard[1] : -keyboard[1]
           if (reverse) x *= -1
-          let v
-          if (keyboard[0] == 'normalized') {
-            const n = normalizeValue(value, min, max, skew)
-            v = rawValue(n + x, min, max, skew)
-          } else {
-            v = value + x
-          }
-          onChange(clamp(stepValue(v, step), min, max))
+          onChange(updateValueByEvent(keyboard[0], x))
         }
       },
-      [value, min, max, step, skew, reverse, keyboard, onChange, readonly],
+      [keyboard, onChange, readonly, reverse, updateValueByEvent],
     )
 
     // --- hooks ---
@@ -217,19 +236,12 @@ export const Slider = forwardRef<SliderMethods, Props>(
           x = event.deltaY > 0 ? -wheel[1] : wheel[1]
         }
         if (vertical && reverse) x *= -1
-        let v
-        if (wheel[0] == 'normalized') {
-          const n = normalizeValue(value, min, max, skew)
-          v = rawValue(n + x, min, max, skew)
-        } else {
-          v = value + x
-        }
-        onChange(clamp(stepValue(v, step), min, max))
+        onChange(updateValueByEvent(wheel[0], x))
       },
       {
         passive: false,
       },
-      [wheel, value, min, max, skew, step],
+      [wheel, vertical, readonly, onChange, updateValueByEvent],
     )
 
     useEventListener(globalThis.window, 'mousemove', (event) => {
@@ -237,7 +249,9 @@ export const Slider = forwardRef<SliderMethods, Props>(
     })
 
     useEventListener(globalThis.window, 'mouseup', () => {
+      if (!thumbDragged.current || readonly) return
       thumbDragged.current = false
+      onDragEnd?.(value)
       if (bodyNoSelect) removeNoSelect()
     })
 
@@ -283,11 +297,22 @@ export const Slider = forwardRef<SliderMethods, Props>(
           }}
           onPointerDown={(event) => {
             thumbDragged.current = true
-            handleValue(event)
+            const v = handleValue(event)
+            if (!readonly) onDragStart?.(v ?? value)
+            onPointerDown?.(event)
+          }}
+          onKeyDown={(event) => {
+            handleKeyDown(event)
+            onKeyDown?.(event)
+          }}
+          onFocus={(event) => {
+            thumbRef.current?.focus()
+            onFocus?.(event)
+          }}
+          onBlur={(event) => {
+            thumbRef.current?.blur()
+            onBlur?.(event)
           }}
-          onKeyDown={handleKeyDown}
-          onFocus={thumbRef.current?.focus}
-          onBlur={thumbRef.current?.blur}
           {...props}
         >
           <div

package/src/components/WheelObserver/index.tsx

@@ -14,7 +14,8 @@ import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
  * </WheelObserver>
  */
 
-interface Props<T extends ElementType> {
+/** @category WheelObserver */
+export interface WheelObserverProps<T extends ElementType> {
   /**
    * React.ElementType
    * @default div
@@ -27,7 +28,8 @@ interface Props<T extends ElementType> {
 
 /** @category WheelObserver */
 export function WheelObserver<T extends ElementType = 'div'>(
-  props: Props<T> & Omit<ComponentPropsWithoutRef<T>, keyof Props<T>>,
+  props: WheelObserverProps<T> &
+    Omit<ComponentPropsWithoutRef<T>, keyof WheelObserverProps<T>>,
 ) {
   const { children, onWheel, as: Component = 'div', ...attributes } = props
 

package/src/components/XYPad/Area.tsx

@@ -1,11 +1,11 @@
 import clsx from 'clsx'
-import { CSSProperties, ReactElement } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
 
 /** @category XYPad */
 export interface AreaProps {
   width?: number | string
   height?: number | string
-  bg?: string
+  color?: string
   className?: string
   style?: CSSProperties
   children?: ReactElement
@@ -18,22 +18,23 @@ export interface AreaProps {
 export function XYPadArea({
   width = 120,
   height = 120,
-  bg = '#eee',
+  color,
   children,
   className,
   style,
   __thumb,
-}: AreaProps) {
+  ...props
+}: AreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AreaProps>) {
   return (
     <div
       className={clsx('tremolo-xy-pad-area', className)}
       style={{
-        position: 'relative',
+        ...{ '--color': color },
         width: width,
         height: height,
-        background: bg,
         ...style,
       }}
+      {...props}
     >
       {children}
       {__thumb}

package/src/components/XYPad/Thumb.tsx

@@ -14,6 +14,8 @@ export interface ThumbProps {
   width?: number | string
   height?: number | string
 
+  color?: string
+
   wrapperClassName?: string
   wrapperStyle?: CSSProperties
 
@@ -41,6 +43,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
       size,
       width = 22,
       height = 22,
+      color,
       children,
       wrapperClassName,
       wrapperStyle,
@@ -48,6 +51,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
       style,
       __disabled,
       __css,
+      ...props
     }: Props,
     ref,
   ) => {
@@ -71,6 +75,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
           ...__css,
           ...wrapperStyle,
         }}
+        {...props}
       >
         {children ? (
           children
@@ -83,6 +88,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
             tabIndex={0}
             aria-disabled={__disabled}
             style={{
+              ...{ '--color': color },
               width: size ?? width,
               height: size ?? height,
               ...style,

package/src/components/XYPad/index.css

@@ -3,6 +3,13 @@
   cursor: pointer;
 }
 
+.tremolo-xy-pad-area {
+  --color: #eee;
+
+  position: relative;
+  background-color: var(--color);
+}
+
 .tremolo-xy-pad-thumb-wrapper {
   position: absolute;
   translate: -50% -50%;
@@ -10,15 +17,18 @@
 }
 
 .tremolo-xy-pad-thumb {
+  --color: var(--tremolo-theme-color);
+
   border-radius: 50%;
   outline: none;
-  background-color: #4e76e6;
+  background-color: var(--color);
 
   &[aria-disabled='true'] {
     background-color: #5d6478;
   }
 
   &:focus {
-    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+    box-shadow: 0px 0px 0px 3px
+      color-mix(in srgb, var(--color) 20%, transparent);
   }
 }

package/src/components/XYPad/index.tsx

@@ -26,7 +26,10 @@ import { addNoSelect, removeNoSelect } from '../_util'
 import { XYPadArea, AreaProps } from './Area'
 import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
 
-/** @category XYPad */
+/**
+ * Two-dimensional slider component.
+ * @category XYPad
+ */
 export interface ValueOptions {
   // required
   value: number
@@ -56,6 +59,8 @@ export interface XYPadProps {
   disabled?: boolean
   readonly?: boolean
   onChange?: (valueX: number, valueY: number) => void
+  onDragStart?: (valueX: number, valueY: number) => void
+  onDragEnd?: (valueX: number, valueY: number) => void
   /** \<XYPadThumb /> | \<XYPadArea /> */
   children?: ReactElement | ReactElement[]
 }
@@ -92,6 +97,12 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       disabled = false,
       readonly = false,
       onChange,
+      onDragStart,
+      onDragEnd,
+      onPointerDown,
+      onKeyDown,
+      onFocus,
+      onBlur,
       children,
       ...props
     }: Props,
@@ -162,8 +173,32 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       const newX = clamp(stepValue(vx, x.step), x.min, x.max)
       const newY = clamp(stepValue(vy, y.step), y.min, y.max)
       onChange(newX, newY)
+      return [newX, newY]
     }
 
+    const updateValueByEvent = useCallback(
+      (
+        eventType: InputEventOption[0],
+        target: Required<ValueOptions>,
+        x: number,
+      ) => {
+        let v
+        if (eventType == 'normalized') {
+          const n = normalizeValue(
+            target.value,
+            target.min,
+            target.max,
+            target.skew,
+          )
+          v = rawValue(n + x, target.min, target.max, target.skew)
+        } else {
+          v = target.value + x
+        }
+        return clamp(stepValue(v, target.step), target.min, target.max)
+      },
+      [],
+    )
+
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (!onChange || readonly) return
@@ -176,23 +211,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
           let delta = target.keyboard[1]
           if (key == 'ArrowLeft' || key == 'ArrowUp') delta *= -1
           if (target.reverse) delta *= -1
-          let v
-          if (target.keyboard[0] == 'normalized') {
-            const n = normalizeValue(
-              target.value,
-              target.min,
-              target.max,
-              target.skew,
-            )
-            v = rawValue(n + delta, target.min, target.max, target.skew)
-          } else {
-            v = target.value + delta
-          }
-          const newValue = clamp(
-            stepValue(v, target.step),
-            target.min,
-            target.max,
-          )
+          const newValue = updateValueByEvent(target.keyboard[0], target, delta)
           if (isHorizontal) {
             onChange(newValue, y.value)
           } else {
@@ -200,7 +219,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
           }
         }
       },
-      [x, y, onChange, readonly],
+      [onChange, readonly, x, y, updateValueByEvent],
     )
 
     // --- hooks ---
@@ -221,23 +240,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
         let delta = target.wheel[1]
         if (event.deltaY < 0) delta *= -1
         if (target.reverse) delta *= -1
-        let v
-        if (target.wheel[0] == 'normalized') {
-          const n = normalizeValue(
-            target.value,
-            target.min,
-            target.max,
-            target.skew,
-          )
-          v = rawValue(n + delta, target.min, target.max, target.skew)
-        } else {
-          v = target.value + delta
-        }
-        const newValue = clamp(
-          stepValue(v, target.step),
-          target.min,
-          target.max,
-        )
+        const newValue = updateValueByEvent(target.wheel[0], target, delta)
         if (event.shiftKey) {
           onChange(newValue, y.value)
         } else {
@@ -247,7 +250,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       {
         passive: false,
       },
-      [x, y],
+      [x, y, onChange, readonly, updateValueByEvent],
     )
 
     useEventListener(globalThis.window, 'mousemove', (event) => {
@@ -255,7 +258,9 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     })
 
     useEventListener(globalThis.window, 'mouseup', () => {
+      if (!thumbDragged.current || readonly) return
       thumbDragged.current = false
+      onDragEnd?.(x.value, y.value)
       if (bodyNoSelect) removeNoSelect()
     })
 
@@ -289,11 +294,22 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
         }}
         onPointerDown={(event) => {
           thumbDragged.current = true
-          handleValue(event)
+          const v = handleValue(event)
+          if (!readonly) onDragStart?.(v?.[0] ?? x.value, v?.[1] ?? y.value)
+          onPointerDown?.(event)
+        }}
+        onKeyDown={(event) => {
+          handleKeyDown(event)
+          onKeyDown?.(event)
+        }}
+        onFocus={(event) => {
+          thumbRef.current?.focus()
+          onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          thumbRef.current?.blur()
+          onBlur?.(event)
         }}
-        onKeyDown={handleKeyDown}
-        onFocus={thumbRef.current?.focus}
-        onBlur={thumbRef.current?.blur}
         {...props}
       >
         <div className="tremolo-xy-pad-area-wrapper" ref={areaElementRef}>

package/src/hooks/useInterval.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback)
+
+  // Remember the latest callback if it changes.
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (delay === null) {
+      return
+    }
+
+    const id = setInterval(() => {
+      savedCallback.current()
+    }, delay)
+
+    return () => {
+      clearInterval(id)
+    }
+  }, [delay])
+}

package/src/hooks/useLongPress.ts

@@ -0,0 +1,31 @@
+import { useCallback, useState } from 'react'
+
+import { useEventListener } from './useEventListener'
+import { useInterval } from './useInterval'
+
+export function useLongPress(
+  callback: () => void,
+  initialDelay = 500,
+  interval = 40,
+) {
+  const [pressed, setPressed] = useState(false)
+  const [delay, setDelay] = useState(initialDelay)
+
+  useInterval(
+    () => {
+      callback()
+      setDelay(interval)
+    },
+    pressed ? delay : null,
+  )
+
+  useEventListener(globalThis.window, 'pointerup', () => {
+    setPressed(false)
+    setDelay(initialDelay)
+  })
+
+  return useCallback(() => {
+    callback()
+    setPressed(true)
+  }, [callback])
+}

package/src/index.ts

@@ -14,3 +14,9 @@ export * from './components/Piano'
 export * from './components/Slider'
 export * from './components/WheelObserver'
 export * from './components/XYPad'
+
+export * from './hooks/useAnimationFrame'
+export * from './hooks/useDrag'
+export * from './hooks/useEventListener'
+export * from './hooks/useInterval'
+export * from './hooks/useLongPress'

package/src/styles/index.css

@@ -1,6 +1,5 @@
 :root {
   --tremolo-theme-color: #4e76e6;
-  --tremolo-theme-color-rgb: 78, 118, 230;
 }
 
 .tremolo-no-select {