@tremolo-ui/react 0.0.6 → 0.0.8

package/src/components/Slider/index.tsx

@@ -1,28 +1,36 @@
-import { css, CSSObject, Global } from '@emotion/react'
 import clsx from 'clsx'
+import React, {
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  forwardRef,
+  ReactElement,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
+
 import {
-  Direction,
-  isHorizontal,
-  isReversed,
-  isVertical,
-  parseScaleOrderList,
-  ScaleOrderList,
-  ScaleType,
-} from '@tremolo-ui/functions/Slider'
-import { clamp, normalizeValue, rawValue, stepValue, toFixed, InputEventOption, styleHelper } from '@tremolo-ui/functions'
-import React, { forwardRef, ReactElement, useCallback, useImperativeHandle, useRef } from 'react'
+  clamp,
+  normalizeValue,
+  rawValue,
+  stepValue,
+  toFixed,
+  InputEventOption,
+  styleHelper,
+  xor,
+} from '@tremolo-ui/functions'
 
 import { useEventListener } from '../../hooks/useEventListener'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { UserActionPseudoProps } from '../../system/pseudo'
 import { addNoSelect, removeNoSelect } from '../_util'
 
-import { SliderThumb, SliderThumbMethods } from './Thumb'
-import { SliderTrack } from './Track'
-import { ScaleOption } from './type'
+import { SliderValuesProvider } from './context'
+import { Scale } from './Scale'
+import { SliderThumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
+import { SliderTrack, SliderTrackProps } from './Track'
 
 export interface SliderProps {
-  // TODO: property docs
   // required
   value: number
   min: number
@@ -31,24 +39,30 @@ export interface SliderProps {
   // optional
   step?: number
   skew?: number // TODO | SkewFunction
-  direction?: Direction // TODO: vertical & reverse
-  // TODO: scales component
-  scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[]
-  scaleOption?: ScaleOption
+  vertical?: boolean
+  reverse?: boolean
   bodyNoSelect?: boolean
   /**
    * wheel control option
    */
-  wheel?: InputEventOption
+  wheel?: InputEventOption | null
   /**
    * keyboard control option
    */
-  keyboard?: InputEventOption
+  keyboard?: InputEventOption | null
+  /**
+   * Only the appearance will change.
+   * Please consider using with readonly.
+   */
   disabled?: boolean
+  /**
+   * Make the value unchangeable.
+   */
   readonly?: boolean
   className?: string
-  style?: CSSObject
+  style?: CSSProperties
   onChange?: (value: number) => void
+  /** \<SliderThumb /> | \<SliderTrack /> */
   children?: ReactElement | ReactElement[]
   // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
 }
@@ -58,305 +72,249 @@ export interface SliderMethods {
   blur: () => void
 }
 
+type Props = SliderProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderProps>
+
 /**
  * Customizable slider
  */
- export const Slider = forwardRef<SliderMethods, SliderProps>(({
-  value,
-  min,
-  max,
-  step = 1,
-  skew = 1,
-  direction = 'right',
-  scale,
-  scaleOption,
-  className,
-  style,
-  bodyNoSelect = true,
-  wheel = ['raw', 1],
-  keyboard = ['raw', 1],
-  disabled = false,
-  readonly = false,
-  onChange,
-  children,
-  ...pseudo
-}: SliderProps & UserActionPseudoProps, ref) => {
-  // -- state and ref ---
-  const trackElementRef = useRef<HTMLDivElement>(null)
-  const thumbRef = useRef<SliderThumbMethods>(null)
-  const thumbDragged = useRef(false)
+export const Slider = forwardRef<SliderMethods, Props>(
+  (
+    {
+      value,
+      min,
+      max,
+      step = 1,
+      skew = 1,
+      vertical = false,
+      reverse = false,
+      className,
+      style,
+      bodyNoSelect = true,
+      wheel = ['raw', 1],
+      keyboard = ['raw', 1],
+      disabled = false,
+      readonly = false,
+      onChange,
+      children,
+      ...props
+    }: Props,
+    ref,
+  ) => {
+    // -- state and ref ---
+    const trackElementRef = useRef<HTMLDivElement>(null)
+    const thumbRef = useRef<SliderThumbMethods>(null)
+    const thumbDragged = useRef(false)
 
-  // --- interpret props ---
-  const { _active, _focus, _hover } = pseudo
-  const percent = toFixed(normalizeValue(value, min, max, skew) * 100)
-  const percentRev = isReversed(direction) ? toFixed(100 - percent) : percent
-  const calcPercent = (v: number) => {
-    return toFixed(
-      isReversed(direction)
-        ? 100 - normalizeValue(v, min, max, skew) * 100
-        : normalizeValue(v, min, max, skew) * 100
+    // --- interpret props ---
+    const p = toFixed(normalizeValue(value, min, max, skew) * 100)
+    const rev = toFixed(100 - p)
+    // NOTE
+    // normal -> normal (right)
+    // vertical -> rev (up)
+    // reverse -> rev (left)
+    // vertical & reverse -> normal (down)
+    const displayReversed = useMemo(
+      () => xor(vertical, reverse),
+      [vertical, reverse],
     )
-  }
-  if (wheel.length != 2) {
-    throw new Error(`Slider.wheel expect ['normalized' | 'raw', number]`)
-  }
-  if (keyboard.length != 2) {
-    throw new Error(`Slider.keyboard expect ['normalized' | 'raw', number]`)
-  }
+    const percent = displayReversed ? rev : p
 
-  const scalesList = parseScaleOrderList(scale, min, max, step)
-  if (isReversed(direction)) scalesList.reverse()
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let trackProps: any, thumbProps: any
-  if (children != undefined) {
-    React.Children.forEach(children, (child) => {
-      if (React.isValidElement(child)) {
-        if (child.type == SliderThumb) {
-          thumbProps = child.props
-        } else if (child.type == SliderTrack) {
-          trackProps = child.props
+    let trackProps: SliderTrackProps = {}
+    let thumbProps: SliderThumbProps = {}
+    let scaleComponent: ReactElement | undefined = undefined
+    if (children != undefined) {
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          if (child.type == SliderThumb) {
+            thumbProps = child.props as SliderThumbProps
+          } else if (child.type == SliderTrack) {
+            trackProps = child.props as SliderTrackProps
+          } else if (child.type == Scale) {
+            scaleComponent = child
+          } else {
+            throw new Error('only <SliderThumb> or <SliderTrack>')
+          }
         } else {
-          throw new Error('only <SliderThumb> or <SliderTrack>')
+          throw new Error('children is an invalid element.')
         }
-      } else {
-        throw new Error('children is an invalid element.')
-      }
-    })
-  }
-
-  // --- 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 = isHorizontal(direction)
-      ? normalizeValue(mouseX, x1, x2)
-      : normalizeValue(mouseY, y1, y2)
-    const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew)
-    onChange(clamp(stepValue(v, step), min, max))
-  }
-
-  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!keyboard || !onChange || readonly) return
-    const key = event.key
-    if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
-      event.preventDefault()
-      let x = (key == 'ArrowRight' || key == 'ArrowUp') ? keyboard[1] : -keyboard[1]
-      if (direction == 'down' || direction == 'left') 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))
+      })
     }
-  }, [value, min, max, step, skew, direction, keyboard, onChange, readonly])
-
-  // --- hooks ---
-  const touchMoveRefCallback = useRefCallbackEvent(
-    'touchmove',
-    handleValue,
-    { passive: false },
-    [min, max, skew, step, direction, onChange, readonly],
-  )
 
-  const wheelRefCallback = useRefCallbackEvent(
-    'wheel',
-    (event) => {
-      if (!wheel || !onChange || readonly) return
-      event.preventDefault()
-      let x = event.deltaY > 0 ? wheel[1] : -wheel[1]
-      if (isReversed(direction) || isHorizontal(direction)) 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
+    // --- 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))
-    },
-    {
-      passive: false,
-    },
-    [wheel, value, min, max, skew, step],
-  )
+    }
 
-  useEventListener(window, 'mousemove', (event) => {
-    handleValue(event)
-  })
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (!keyboard || !onChange || readonly) return
+        const key = event.key
+        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
+          event.preventDefault()
+          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))
+        }
+      },
+      [value, min, max, step, skew, reverse, keyboard, onChange, readonly],
+    )
 
-  useEventListener(window, 'mouseup', () => {
-    thumbDragged.current = false
-    if (bodyNoSelect) removeNoSelect()
-  })
+    // --- hooks ---
+    const touchMoveRefCallback = useRefCallbackEvent(
+      'touchmove',
+      handleValue,
+      { passive: false },
+      [min, max, skew, step, vertical, reverse, onChange, readonly],
+    )
 
-  useImperativeHandle(ref, () => {
-    return {
-      focus() {
-        thumbRef.current?.focus()
+    const wheelRefCallback = useRefCallbackEvent(
+      'wheel',
+      (event) => {
+        if (!wheel || !onChange || readonly) return
+        event.preventDefault()
+        let x
+        if (!vertical && event.deltaX != 0) {
+          x = event.deltaX > 0 ? wheel[1] : -wheel[1]
+        } else {
+          if (event.deltaY == 0) return
+          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))
       },
-      blur() {
-        thumbRef.current?.blur()
+      {
+        passive: false,
       },
-    }
-  }, [])
+      [wheel, value, min, max, skew, step],
+    )
+
+    useEventListener(window, 'mousemove', (event) => {
+      handleValue(event)
+    })
+
+    useEventListener(window, 'mouseup', () => {
+      thumbDragged.current = false
+      if (bodyNoSelect) removeNoSelect()
+    })
+
+    useImperativeHandle(ref, () => {
+      return {
+        focus() {
+          thumbRef.current?.focus()
+        },
+        blur() {
+          thumbRef.current?.blur()
+        },
+      }
+    }, [])
 
-  return (
-    <div
-      className={clsx('tremolo-slider', className)}
-      ref={(div) => {
-        wheelRefCallback(div)
-        touchMoveRefCallback(div)
-      }}
-      tabIndex={-1}
-      role="slider"
-      aria-valuenow={value}
-      aria-valuemin={min}
-      aria-valuemax={max}
-      aria-orientation={isHorizontal(direction) ? 'horizontal' : 'vertical'}
-      aria-disabled={disabled}
-      aria-readonly={readonly}
-      css={css({
-        display: 'inline-block',
-        margin: `calc(${styleHelper(thumbProps?.size ?? 22)} / 2)`, // half thumb size
-        cursor: readonly ? 'not-allowed' : 'pointer',
-        outline: 0,
-        ...style,
-      })}
-      onPointerDown={(event) => {
-        thumbDragged.current = true
-        handleValue(event)
-      }}
-      onKeyDown={handleKeyDown}
-      onFocus={thumbRef.current?.focus}
-      onBlur={thumbRef.current?.blur}
-    >
-      <Global
-        styles={{
-          '.no-select': {
-            userSelect: 'none',
-          },
-        }}
-      />
-      <div
-        css={css({
-          display: 'flex',
-          flexDirection: isHorizontal(direction) ? 'column' : 'row',
-        })}
+    return (
+      <SliderValuesProvider
+        min={min}
+        max={max}
+        step={step}
+        skew={skew}
+        vertical={vertical}
+        reverse={reverse}
+        disabled={disabled}
       >
         <div
-          className="tremolo-slider-track-wrapper"
-          ref={trackElementRef}
+          className={clsx('tremolo-slider', className)}
+          ref={(div) => {
+            wheelRefCallback(div)
+            touchMoveRefCallback(div)
+          }}
+          tabIndex={-1}
+          role="slider"
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-orientation={vertical ? 'vertical' : 'horizontal'}
+          aria-disabled={disabled}
+          aria-readonly={readonly}
+          style={{
+            margin: `calc(${styleHelper(thumbProps?.size ?? 22)} / 2)`, // half thumb size
+            ...style,
+          }}
+          onPointerDown={(event) => {
+            thumbDragged.current = true
+            handleValue(event)
+          }}
+          onKeyDown={handleKeyDown}
+          onFocus={thumbRef.current?.focus}
+          onBlur={thumbRef.current?.blur}
+          {...props}
         >
-          <SliderTrack
-            __direction={direction}
-            __disabled={disabled}
-            __percent={percent}
-            __thumb={
-              <SliderThumb
-                ref={thumbRef}
-                __disabled={disabled}
-                __css={{
-                  top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
-                  left: isHorizontal(direction) ? `${percentRev}%` : '50%',
-                }}
-                {...thumbProps}
-              />
-            }
-            {...trackProps}
-          />
-        </div>
-        {/* TODO: scales component */}
-        {scale && (
           <div
-            className="tremolo-slider-scale-wrapper"
-            css={css({
-              display: 'block',
-              position: 'relative',
-              marginLeft: isVertical(direction)
-                ? (scaleOption?.gap ??
-                  `calc((22px - ${styleHelper(trackProps?.thickness ?? 10)}) / 2)`)
-                : undefined,
-              marginTop: isHorizontal(direction)
-                ? (scaleOption?.gap ??
-                  `calc((22px - ${styleHelper(trackProps?.thickness ?? 10)}) / 2)`)
-                : undefined,
-              ...scaleOption?.style,
-              // zIndex: 10,
-            })}
+            style={{
+              display: 'flex',
+              flexDirection: vertical ? 'row' : 'column',
+            }}
           >
-            {scalesList.map((item, index) => (
-              <div
-                key={index}
-                css={css({
-                  display: 'flex',
-                  flexDirection: isHorizontal(direction) ? 'column' : 'row',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  position: 'absolute',
-                  left: isHorizontal(direction) ? `${calcPercent(item.at)}%` : undefined,
-                  top: isVertical(direction) ? `${calcPercent(item.at)}%` : undefined,
-                  translate: isHorizontal(direction) ? '-50% 0' : '0 -50%',
-                  zIndex: 10,
-                })}
-              >
-                {(item.type ?? scaleOption?.defaultType ?? 'mark-number') !=
-                  'number' && (
-                  <div
-                    className="tremolo-slider-scale-mark"
-                    css={css({
-                      width: isHorizontal(direction)
-                        ? (item.style?.thickness ?? 1)
-                        : (item.style?.length ?? '0.5rem'),
-                      height: isVertical(direction)
-                        ? (item.style?.thickness ?? 1)
-                        : (item.style?.length ?? '0.5rem'),
-                      backgroundColor:
-                        item.style?.markColor ??
-                        scaleOption?.markColor ??
-                        '#222',
-                      marginBottom: isHorizontal(direction) ? 2 : undefined,
-                      marginRight: isVertical(direction) ? 2 : undefined,
-                    })}
-                  ></div>
-                )}
-                {(item.type ?? scaleOption?.defaultType ?? 'mark-number') !=
-                  'mark' && (
-                  <div
-                    className="tremolo-slider-scale-number"
-                    css={css({
-                      color: item.style?.labelColor ?? scaleOption?.labelColor,
-                      width: scaleOption?.labelWidth,
-                      textAlign: 'right',
-                    })}
-                  >
-                    {item.text ?? item.at}
-                  </div>
-                )}
-              </div>
-            ))}
+            <div className="tremolo-slider-track-wrapper" ref={trackElementRef}>
+              <SliderTrack
+                __percent={percent}
+                __thumb={
+                  <SliderThumb
+                    ref={thumbRef}
+                    __percent={percent}
+                    {...thumbProps}
+                  />
+                }
+                {...trackProps}
+              />
+            </div>
+            {scaleComponent}
           </div>
-        )}
-      </div>
-    </div>
-  )
-})
+        </div>
+      </SliderValuesProvider>
+    )
+  },
+)
 
+export * from './context'
 export * from './Thumb'
 export * from './Track'
-export * from './type'
+export * from './Scale'
+export * from './ScaleOption'

package/src/components/WheelObserver/index.tsx

@@ -0,0 +1,47 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
+
+import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+
+/**
+ * @example
+ * <WheelObserver
+ *   onWheel={(event) => {
+ *     event.preventDefault()
+ *     console.log(event.deltaY)
+ *   }
+ * >
+ *   <div>Wheel here</div>
+ * </WheelObserver>
+ */
+
+interface Props<T extends ElementType> {
+  /**
+   * React.ElementType
+   * @default div
+   */
+  as?: T
+
+  children?: ReactNode
+  onWheel?: (event: WheelEvent) => void
+}
+
+export function WheelObserver<T extends ElementType = 'div'>(
+  props: Props<T> & Omit<ComponentPropsWithoutRef<T>, keyof Props<T>>,
+) {
+  const { children, onWheel, as: Component = 'div', ...attributes } = props
+
+  const wheelRefCallback = useRefCallbackEvent(
+    'wheel',
+    (event) => {
+      if (onWheel) onWheel(event)
+    },
+    { passive: false },
+    [onWheel],
+  )
+
+  return (
+    <Component ref={wheelRefCallback} {...attributes}>
+      {children}
+    </Component>
+  )
+}