@tremolo-ui/react 0.0.5 → 0.0.7

package/src/components/Slider/index.tsx

@@ -1,7 +1,7 @@
 import { css, CSSObject, Global } from '@emotion/react'
+import clsx from 'clsx'
 import {
   Direction,
-  gradientDirection,
   isHorizontal,
   isReversed,
   isVertical,
@@ -9,21 +9,20 @@ import {
   ScaleOrderList,
   ScaleType,
 } from '@tremolo-ui/functions/Slider'
-import { clamp, normalizeValue, rawValue, stepValue } from '@tremolo-ui/functions'
-import { WheelOption } from '@tremolo-ui/functions'
-import { styleHelper } from '@tremolo-ui/functions'
-import React, { ReactElement, useRef } from 'react'
-import clsx from 'clsx'
+import { clamp, normalizeValue, rawValue, stepValue, toFixed, InputEventOption, styleHelper } from '@tremolo-ui/functions'
+import React, { forwardRef, ReactElement, useCallback, useImperativeHandle, useRef } from 'react'
 
 import { useEventListener } from '../../hooks/useEventListener'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { UserActionPseudoProps } from '../../system/pseudo'
+import { addNoSelect, removeNoSelect } from '../_util'
 
-import { SliderThumb } from './Thumb'
+import { SliderThumb, SliderThumbMethods } from './Thumb'
 import { SliderTrack } from './Track'
 import { ScaleOption } from './type'
 
-interface SliderProps {
+export interface SliderProps {
+  // TODO: property docs
   // required
   value: number
   min: number
@@ -31,16 +30,22 @@ interface SliderProps {
 
   // optional
   step?: number
-  skew?: number // | SkewFunction
-  length?: number | string
-  thickness?: number | string
-  direction?: Direction
+  skew?: number // TODO | SkewFunction
+  direction?: Direction // TODO: vertical & reverse
+  // TODO: scales component
   scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[]
   scaleOption?: ScaleOption
-  color?: string
-  bg?: string
   bodyNoSelect?: boolean
-  enableWheel?: WheelOption
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption
+  disabled?: boolean
+  readonly?: boolean
   className?: string
   style?: CSSObject
   onChange?: (value: number) => void
@@ -48,45 +53,62 @@ interface SliderProps {
   // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
 }
 
+export interface SliderMethods {
+  focus: () => void
+  blur: () => void
+}
+
 /**
  * Customizable slider
  */
-export function Slider({
+ export const Slider = forwardRef<SliderMethods, SliderProps>(({
   value,
   min,
   max,
   step = 1,
   skew = 1,
-  length = 140,
-  thickness = 10,
   direction = 'right',
   scale,
   scaleOption,
-  color = '#4e76e6',
-  bg = '#eee',
   className,
   style,
   bodyNoSelect = true,
-  enableWheel,
+  wheel = ['raw', 1],
+  keyboard = ['raw', 1],
+  disabled = false,
+  readonly = false,
   onChange,
   children,
   ...pseudo
-}: SliderProps & UserActionPseudoProps) {
+}: SliderProps & UserActionPseudoProps, 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 = normalizeValue(value, min, max, skew) * 100
-  const percentRev = isReversed(direction) ? 100 - percent : percent
+  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
+    )
+  }
+  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 scalesList = parseScaleOrderList(scale, min, max, step)
   if (isReversed(direction)) scalesList.reverse()
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let trackProps: any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let thumbProps: any
+  let trackProps: any, thumbProps: any
   if (children != undefined) {
     React.Children.forEach(children, (child) => {
       if (React.isValidElement(child)) {
@@ -103,14 +125,14 @@ export function Slider({
     })
   }
 
-  const thumbDragged = useRef(false)
+  // --- internal functions ---
   const handleValue = (
     event: MouseEvent | React.PointerEvent<HTMLDivElement> | TouchEvent,
   ) => {
-    if (!trackElementRef.current || !thumbDragged.current) return
+    if (!trackElementRef.current || !thumbDragged.current || !onChange || readonly) return
     const isTouch = event instanceof TouchEvent
     if (isTouch && event.cancelable) event.preventDefault()
-    if (bodyNoSelect) document.body.classList.add('no-select')
+    if (bodyNoSelect) addNoSelect()
     const {
       left: x1,
       top: y1,
@@ -123,38 +145,55 @@ export function Slider({
       ? normalizeValue(mouseX, x1, x2)
       : normalizeValue(mouseY, y1, y2)
     const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew)
-    const v2 = clamp(stepValue(v, step), min, max)
-    if (onChange) onChange(v2)
+    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],
+    [min, max, skew, step, direction, onChange, readonly],
   )
 
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
     (event) => {
-      if (!enableWheel) return
+      if (!wheel || !onChange || readonly) return
       event.preventDefault()
-      let x = event.deltaY > 0 ? enableWheel[1] : -enableWheel[1]
+      let x = event.deltaY > 0 ? wheel[1] : -wheel[1]
       if (isReversed(direction) || isHorizontal(direction)) x *= -1
       let v
-      if (enableWheel[0] == 'normalized') {
+      if (wheel[0] == 'normalized') {
         const n = normalizeValue(value, min, max, skew)
         v = rawValue(n + x, min, max, skew)
       } else {
         v = value + x
       }
-      if (onChange) onChange(clamp(stepValue(v, step), min, max))
+      onChange(clamp(stepValue(v, step), min, max))
     },
     {
       passive: false,
     },
-    [enableWheel, value, min, max, skew, step],
+    [wheel, value, min, max, skew, step],
   )
 
   useEventListener(window, 'mousemove', (event) => {
@@ -163,9 +202,20 @@ export function Slider({
 
   useEventListener(window, 'mouseup', () => {
     thumbDragged.current = false
-    if (bodyNoSelect) document.body.classList.remove('no-select')
+    if (bodyNoSelect) removeNoSelect()
   })
 
+  useImperativeHandle(ref, () => {
+    return {
+      focus() {
+        thumbRef.current?.focus()
+      },
+      blur() {
+        thumbRef.current?.blur()
+      },
+    }
+  }, [])
+
   return (
     <div
       className={clsx('tremolo-slider', className)}
@@ -176,21 +226,25 @@ export function Slider({
       tabIndex={-1}
       role="slider"
       aria-valuenow={value}
-      aria-valuemax={max}
       aria-valuemin={min}
+      aria-valuemax={max}
       aria-orientation={isHorizontal(direction) ? 'horizontal' : 'vertical'}
+      aria-disabled={disabled}
+      aria-readonly={readonly}
       css={css({
         display: 'inline-block',
-        boxSizing: 'border-box',
-        margin: '0.7rem',
-        padding: 0,
-        cursor: 'pointer',
+        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={{
@@ -205,49 +259,43 @@ export function Slider({
           flexDirection: isHorizontal(direction) ? 'column' : 'row',
         })}
       >
-        {/* trackProps */}
         <div
           className="tremolo-slider-track-wrapper"
           ref={trackElementRef}
-          css={css({ position: 'relative' })}
         >
           <SliderTrack
-            __css={{
-              background: `linear-gradient(to ${gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`,
-              borderRadius: styleHelper(thickness, '/', 2),
-              borderStyle: 'solid',
-              borderColor: '#ccc',
-              borderWidth: 2,
-              width: isHorizontal(direction) ? length : thickness,
-              height: isHorizontal(direction) ? thickness : length,
-              zIndex: 1,
-            }}
+            __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}
           />
-          <SliderThumb
-            color={color}
-            __css={{
-              top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
-              left: isHorizontal(direction) ? `${percentRev}%` : '50%',
-            }}
-            {...thumbProps}
-          />
         </div>
+        {/* TODO: scales component */}
         {scale && (
           <div
             className="tremolo-slider-scale-wrapper"
             css={css({
+              display: 'block',
               position: 'relative',
-              width: isHorizontal(direction) ? length : undefined,
-              height: isVertical(direction) ? length : undefined,
-              marginLeft: isHorizontal(direction)
-                ? 2
-                : (scaleOption?.gap ??
-                  `calc((1.4rem - ${styleHelper(thickness)}) / 2)`),
-              marginTop: isVertical(direction)
-                ? 2
-                : (scaleOption?.gap ??
-                  `calc((1.4rem - ${styleHelper(thickness)}) / 2)`),
+              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,
             })}
@@ -261,20 +309,8 @@ export function Slider({
                   justifyContent: 'center',
                   alignItems: 'center',
                   position: 'absolute',
-                  left: isHorizontal(direction)
-                    ? `${
-                        isReversed(direction)
-                          ? 100 - normalizeValue(item.at, min, max, skew) * 100
-                          : normalizeValue(item.at, min, max, skew) * 100
-                      }%`
-                    : undefined,
-                  top: isVertical(direction)
-                    ? `${
-                        isReversed(direction)
-                          ? 100 - normalizeValue(item.at, min, max, skew) * 100
-                          : normalizeValue(item.at, min, max, skew) * 100
-                      }%`
-                    : undefined,
+                  left: isHorizontal(direction) ? `${calcPercent(item.at)}%` : undefined,
+                  top: isVertical(direction) ? `${calcPercent(item.at)}%` : undefined,
                   translate: isHorizontal(direction) ? '-50% 0' : '0 -50%',
                   zIndex: 10,
                 })}
@@ -319,7 +355,7 @@ export function Slider({
       </div>
     </div>
   )
-}
+})
 
 export * from './Thumb'
 export * from './Track'

package/src/components/_util/index.ts

@@ -0,0 +1,11 @@
+export function addNoSelect() {
+  document.body.classList.add('tremolo-no-select')
+}
+
+export function removeNoSelect() {
+  document.body.classList.remove('tremolo-no-select')
+}
+
+export function toggleNoSelect() {
+  document.body.classList.toggle('tremolo-no-select')
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/AnimationCanvas'
 export * from './components/Knob'
 export * from './components/NumberInput'
+export * from './components/Piano'
 export * from './components/Slider'

package/src/styles/{variables.css → index.css}

@@ -2,3 +2,7 @@
   --tremolo-theme-color: #4e76e6;
   --tremolo-theme-color-rgb: 78, 118, 230;
 }
+
+.tremolo-no-select {
+  user-select: none;
+}