@tremolo-ui/react 0.0.11 → 0.1.0-alpha.0

package/src/components/Slider/Track.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { CSSProperties, ReactElement } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
 
 import { styleHelper, xor } from '@tremolo-ui/functions'
 
@@ -40,7 +40,9 @@ export function SliderTrack({
   defaultStyle = true,
   __thumb,
   __percent = 0,
-}: SliderTrackProps) {
+  ...props
+}: SliderTrackProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>) {
   const vertical = useSliderContext((s) => s.vertical)
   const reverse = useSliderContext((s) => s.reverse)
   const disabled = useSliderContext((s) => s.disabled)
@@ -70,6 +72,7 @@ export function SliderTrack({
               ...style,
             }
       }
+      {...props}
     >
       {children}
       {__thumb}

package/src/components/Slider/index.css

@@ -16,7 +16,9 @@
 }
 
 .tremolo-slider-thumb {
-  background: #4e76e6;
+  --color: var(--tremolo-theme-color);
+
+  background: var(--color);
   border-radius: 50%;
   outline: none;
 
@@ -25,7 +27,8 @@
   }
 
   &[aria-readonly='false']: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/Slider/index.tsx

@@ -21,7 +21,7 @@ import {
   xor,
 } from '@tremolo-ui/functions'
 
-import { useEventListener } from '../../hooks/useEventListener'
+import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
@@ -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,
@@ -107,7 +117,6 @@ export const Slider = forwardRef<SliderMethods, Props>(
     // -- state and ref ---
     const trackElementRef = useRef<HTMLDivElement>(null)
     const thumbRef = useRef<SliderThumbMethods>(null)
-    const thumbDragged = useRef(false)
 
     // --- interpret props ---
     const p = toFixed(normalizeValue(value, min, max, skew) * 100)
@@ -145,34 +154,30 @@ export const Slider = forwardRef<SliderMethods, Props>(
     }
 
     // --- internal functions ---
-    const handleValue = (
-      event: MouseEvent | React.PointerEvent<HTMLDivElement> | TouchEvent,
-    ) => {
-      if (
-        !trackElementRef.current ||
-        !thumbDragged.current ||
-        !onChange ||
-        readonly
-      ) {
-        return
-      }
-      const isTouch = event instanceof TouchEvent
-      if (isTouch && event.cancelable) event.preventDefault()
-      if (bodyNoSelect) addNoSelect()
-      const {
-        left: x1,
-        top: y1,
-        right: x2,
-        bottom: y2,
-      } = trackElementRef.current.getBoundingClientRect()
-      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
-      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
-      const n = vertical
-        ? 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 onDrag = useCallback(
+      (nx: number, ny: number) => {
+        if (!onChange || readonly) return
+        const n = vertical ? ny : nx
+        const v = rawValue(displayReversed ? 1 - n : n, min, max, skew)
+        const v2 = clamp(stepValue(v, step), min, max)
+        onChange(v2)
+      },
+      [displayReversed, max, min, onChange, readonly, skew, step, vertical],
+    )
+
+    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>) => {
@@ -183,26 +188,41 @@ 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 ---
-    const touchMoveRefCallback = useRefCallbackEvent(
-      'touchmove',
-      handleValue,
-      { passive: false },
-      [min, max, skew, step, vertical, reverse, onChange, readonly],
-    )
+    const [touchMoveRefCallback, pointerDownHandler] =
+      useDragWithElement<HTMLDivElement>({
+        baseElementRef: trackElementRef,
+        onDrag: onDrag,
+        onDragStart: (nx, ny) => {
+          if (readonly) return
+          if (bodyNoSelect) addNoSelect()
+          thumbRef.current?.focus()
+          onDragStart?.(
+            clamp(
+              stepValue(rawValue(vertical ? ny : nx, min, max, skew), step),
+              min,
+              max,
+            ),
+          )
+        },
+        onDragEnd: (nx, ny) => {
+          if (readonly) return
+          if (bodyNoSelect) removeNoSelect()
+          onDragEnd?.(
+            clamp(
+              stepValue(rawValue(vertical ? ny : nx, min, max, skew), step),
+              min,
+              max,
+            ),
+          )
+        },
+      })
 
     const wheelRefCallback = useRefCallbackEvent(
       'wheel',
@@ -217,30 +237,14 @@ 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) => {
-      handleValue(event)
-    })
-
-    useEventListener(globalThis.window, 'mouseup', () => {
-      thumbDragged.current = false
-      if (bodyNoSelect) removeNoSelect()
-    })
-
     useImperativeHandle(ref, () => {
       return {
         focus() {
@@ -282,12 +286,21 @@ export const Slider = forwardRef<SliderMethods, Props>(
             ...style,
           }}
           onPointerDown={(event) => {
-            thumbDragged.current = true
-            handleValue(event)
+            pointerDownHandler(event)
+            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);
   }
 }