@cdx-ui/primitives 0.0.1-beta.17 → 0.0.1-beta.171

package/src/slider/SliderRail.tsx

@@ -0,0 +1,191 @@
+import { forwardRef, useCallback, useRef } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PressableProps,
+} from 'react-native';
+import { Slot } from '../slot';
+import { assignRef } from '../utils/assignRef';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useSliderContext } from './context';
+import type { InterfaceSliderRailProps } from './types';
+import { getPointerCoords, getRatioFromPagePoint, useWebSliderDrag } from './useSliderPointer';
+import { clamp, getClosestValueIndex } from './utils';
+
+export interface SliderRailProps extends InterfaceSliderRailProps {}
+
+export const SliderRail = forwardRef<View, SliderRailProps>(
+  ({ asChild, style, onLayout, children, ...props }, ref) => {
+    const {
+      values,
+      min,
+      max,
+      step,
+      orientation,
+      isDisabled,
+      isDragging,
+      trackLayout,
+      thumbSize,
+      setNearestThumbValueFromRatio,
+      setThumbValueFromRatio,
+      setDraggingIndex,
+      setTrackLayout,
+    } = useSliderContext();
+
+    const railRef = useRef<View>(null);
+    const draggingThumbIndexRef = useRef<number | null>(null);
+
+    const measureRail = useCallback(() => {
+      const node = railRef.current;
+      if (!node?.measureInWindow) {
+        return;
+      }
+      node.measureInWindow((x, y, width, height) => {
+        setTrackLayout({ x, y, width, height });
+      });
+    }, [setTrackLayout]);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        measureRail();
+        onLayout?.(event);
+      },
+      [measureRail, onLayout],
+    );
+
+    const setRatioForRailDrag = useCallback(
+      (ratio: number, complete?: boolean) => {
+        const thumbIndex = draggingThumbIndexRef.current;
+        if (thumbIndex == null) {
+          setNearestThumbValueFromRatio(ratio, complete);
+          return;
+        }
+        setThumbValueFromRatio(thumbIndex, ratio, complete);
+        if (complete) {
+          draggingThumbIndexRef.current = null;
+        }
+      },
+      [setNearestThumbValueFromRatio, setThumbValueFromRatio],
+    );
+
+    const setDraggingForRail = useCallback(
+      (dragging: boolean) => {
+        setDraggingIndex(dragging ? draggingThumbIndexRef.current : null);
+      },
+      [setDraggingIndex],
+    );
+
+    const { startDrag } = useWebSliderDrag({
+      isDisabled,
+      setIsDragging: setDraggingForRail,
+      setValueFromRatio: setRatioForRailDrag,
+      trackLayout,
+      orientation,
+      thumbSize,
+    });
+
+    const updateFromEvent = useCallback(
+      (event: GestureResponderEvent) => {
+        if (isDisabled) {
+          return;
+        }
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        setNearestThumbValueFromRatio(
+          getRatioFromPagePoint(x, y, trackLayout, orientation, thumbSize),
+          true,
+        );
+      },
+      [isDisabled, orientation, setNearestThumbValueFromRatio, thumbSize, trackLayout],
+    );
+
+    const handlePress = useCallback(
+      (event: GestureResponderEvent) => {
+        updateFromEvent(event);
+      },
+      [updateFromEvent],
+    );
+
+    const handlePointerDown = useCallback(
+      (event: GestureResponderEvent) => {
+        if (Platform.OS !== 'web' || isDisabled) {
+          return;
+        }
+        event.preventDefault();
+
+        const node = railRef.current as unknown as HTMLElement | null;
+        if (!node) return;
+        const rect = node.getBoundingClientRect();
+        const freshLayout = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+        setTrackLayout(freshLayout);
+
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        const ratio = getRatioFromPagePoint(x, y, freshLayout, orientation, thumbSize);
+        const target = min + clamp(ratio, 0, 1) * (max - min);
+        const nearestIndex = getClosestValueIndex(values, target);
+        draggingThumbIndexRef.current = nearestIndex;
+        setDraggingIndex(nearestIndex);
+        startDrag(x, y, ratio, freshLayout);
+      },
+      [
+        isDisabled,
+        max,
+        min,
+        orientation,
+        setDraggingIndex,
+        setTrackLayout,
+        startDrag,
+        step,
+        thumbSize,
+        values,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Pressable
+        accessibilityRole="none"
+        accessible={false}
+        disabled={isDisabled}
+        onPress={Platform.OS === 'web' ? undefined : handlePress}
+        onPointerDown={
+          Platform.OS === 'web'
+            ? (handlePointerDown as unknown as PressableProps['onPointerDown'])
+            : undefined
+        }
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        aria-hidden
+        tabIndex={-1}
+        style={styles.railHitArea}
+      >
+        <Comp
+          ref={(node: View | null) => {
+            railRef.current = node;
+            assignRef(ref, node);
+          }}
+          {...props}
+          onLayout={handleLayout}
+          style={style}
+          {...dataAttributes({ slot: 'slider-rail', dragging: isDragging })}
+        >
+          {children}
+        </Comp>
+      </Pressable>
+    );
+  },
+);
+
+SliderRail.displayName = 'SliderRail';
+
+const styles = StyleSheet.create({
+  railHitArea: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/slider/SliderRoot.tsx

@@ -0,0 +1,385 @@
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes } from '../utils/dataAttributes';
+import { SliderProvider, type SliderTrackLayout } from './context';
+import type { SliderRootImplementationProps } from './types';
+import {
+  arraysEqual,
+  clamp,
+  denormalizeSliderValue,
+  formatSliderValue,
+  getClosestValueIndex,
+  normalizeSliderValue,
+  snapToStep,
+  valueToPercent,
+} from './utils';
+
+export interface SliderRootProps extends SliderRootImplementationProps {
+  readonly asChild?: boolean;
+}
+
+function isArrayShape(
+  value: number | readonly number[] | undefined,
+  defaultValue: number | readonly number[] | undefined,
+): boolean {
+  return Array.isArray(value) || Array.isArray(defaultValue);
+}
+
+export const SliderRoot = forwardRef<View, SliderRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onChangeComplete,
+      min = 0,
+      max = 100,
+      step = 1,
+      isDisabled = false,
+      orientation = 'horizontal',
+      accessibilityLabel,
+      accessibilityValue: accessibilityValueProp,
+      children,
+      onLayout,
+      ...props
+    },
+    ref,
+  ) => {
+    const [trackLayout, setTrackLayoutState] = useState<SliderTrackLayout | null>(null);
+    const [thumbSize, setThumbSizeState] = useState(20);
+    const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+    const [registeredThumbCounts, setRegisteredThumbCounts] = useState<Map<number, number>>(
+      () => new Map(),
+    );
+    const deprecatedThumbRef = useRef<View>(null);
+
+    const isRangeShapeRef = useRef(isArrayShape(valueProp, defaultValue));
+    isRangeShapeRef.current = isArrayShape(valueProp, defaultValue);
+
+    const resolvedDefaultScalar = typeof defaultValue === 'number' ? defaultValue : min;
+    const resolvedDefaultArray = Array.isArray(defaultValue)
+      ? [...defaultValue]
+      : [resolvedDefaultScalar];
+
+    const [values, setValuesState] = useControllableState<readonly number[]>({
+      prop:
+        valueProp == null ? undefined : normalizeSliderValue(valueProp, min, resolvedDefaultScalar),
+      defaultProp: resolvedDefaultArray,
+      onChange: onChange
+        ? (next) => {
+            const denormalized = denormalizeSliderValue(next, isRangeShapeRef.current);
+            if (isRangeShapeRef.current) {
+              (onChange as (value: number[]) => void)(denormalized as number[]);
+            } else {
+              (onChange as (value: number) => void)(denormalized as number);
+            }
+          }
+        : undefined,
+    });
+
+    const currentValues = useMemo(() => {
+      const source = values ?? resolvedDefaultArray;
+      return source.map((value) => snapToStep(value, min, max, step));
+    }, [max, min, resolvedDefaultArray, step, values]);
+
+    const registeredThumbCount = [...registeredThumbCounts.values()].reduce(
+      (total, count) => total + count,
+      0,
+    );
+    const hasDuplicateThumbIndices = [...registeredThumbCounts.values()].some((count) => count > 1);
+    const thumbCount = Math.max(currentValues.length, registeredThumbCount);
+
+    const registerThumb = useCallback((index: number) => {
+      setRegisteredThumbCounts((prev) => {
+        const next = new Map(prev);
+        next.set(index, (next.get(index) ?? 0) + 1);
+        return next;
+      });
+
+      return () => {
+        setRegisteredThumbCounts((prev) => {
+          const count = prev.get(index);
+          if (count == null) {
+            return prev;
+          }
+
+          const next = new Map(prev);
+          if (count === 1) {
+            next.delete(index);
+          } else {
+            next.set(index, count - 1);
+          }
+          return next;
+        });
+      };
+    }, []);
+
+    useEffect(() => {
+      if (!__DEV__) {
+        return;
+      }
+
+      const renderedCount = registeredThumbCount;
+      if (renderedCount > 0 && renderedCount !== currentValues.length) {
+        console.warn(
+          `[Slider] Thumb count (${String(renderedCount)}) does not match value count (${String(currentValues.length)}).`,
+        );
+      }
+
+      if (hasDuplicateThumbIndices) {
+        console.warn('[Slider] Multiple thumbs share the same `index` prop.');
+      }
+    }, [currentValues.length, hasDuplicateThumbIndices, registeredThumbCount]);
+
+    const getThumbMinValue = useCallback(
+      (index: number) => {
+        if (index <= 0) {
+          return min;
+        }
+        return currentValues[index - 1] ?? min;
+      },
+      [currentValues, min],
+    );
+
+    const getThumbMaxValue = useCallback(
+      (index: number) => {
+        if (index >= currentValues.length - 1) {
+          return max;
+        }
+        return currentValues[index + 1] ?? max;
+      },
+      [currentValues, max],
+    );
+
+    const getThumbPercent = useCallback(
+      (index: number) => valueToPercent(currentValues[index] ?? min, min, max),
+      [currentValues, max, min],
+    );
+
+    const commitValues = useCallback(
+      (nextValues: number[], complete = false) => {
+        if (isDisabled) {
+          return;
+        }
+
+        const unchanged = arraysEqual(nextValues, currentValues);
+
+        if (!unchanged) {
+          setValuesState(nextValues);
+        }
+
+        if (complete && onChangeComplete) {
+          const denormalized = denormalizeSliderValue(
+            unchanged ? currentValues : nextValues,
+            isRangeShapeRef.current,
+          );
+          if (isRangeShapeRef.current) {
+            (onChangeComplete as (value: number[]) => void)(denormalized as number[]);
+          } else {
+            (onChangeComplete as (value: number) => void)(denormalized as number);
+          }
+        }
+      },
+      [currentValues, isDisabled, onChangeComplete, setValuesState],
+    );
+
+    const setThumbValue = useCallback(
+      (index: number, next: number, complete = false) => {
+        if (isDisabled || index < 0 || index >= currentValues.length) {
+          return;
+        }
+
+        const snapped = snapToStep(next, getThumbMinValue(index), getThumbMaxValue(index), step);
+        const nextValues = [...currentValues];
+        nextValues[index] = snapped;
+        commitValues(nextValues, complete);
+      },
+      [commitValues, currentValues, getThumbMaxValue, getThumbMinValue, isDisabled, step],
+    );
+
+    const setThumbValueFromRatio = useCallback(
+      (index: number, ratio: number, complete = false) => {
+        const next = min + clamp(ratio, 0, 1) * (max - min);
+        setThumbValue(index, next, complete);
+      },
+      [max, min, setThumbValue],
+    );
+
+    const setNearestThumbValueFromRatio = useCallback(
+      (ratio: number, complete = false) => {
+        const target = min + clamp(ratio, 0, 1) * (max - min);
+        const index = getClosestValueIndex(currentValues, target);
+        setThumbValue(index, target, complete);
+      },
+      [currentValues, max, min, setThumbValue],
+    );
+
+    const setTrackLayout = useCallback((layout: SliderTrackLayout) => {
+      setTrackLayoutState((prev) => {
+        if (
+          prev !== null &&
+          prev.width === layout.width &&
+          prev.height === layout.height &&
+          prev.x === layout.x &&
+          prev.y === layout.y
+        ) {
+          return prev;
+        }
+        return layout;
+      });
+    }, []);
+
+    const setThumbSize = useCallback((size: number) => {
+      setThumbSizeState((prev) => (prev === size ? prev : size));
+    }, []);
+
+    const getThumbValueLabel = useCallback(
+      (index: number) => formatSliderValue(currentValues[index] ?? min),
+      [currentValues, min],
+    );
+
+    const isThumbDragging = useCallback(
+      (index: number) => draggingIndex === index,
+      [draggingIndex],
+    );
+
+    const setValue = useCallback(
+      (next: number, complete = false) => setThumbValue(0, next, complete),
+      [setThumbValue],
+    );
+
+    const setValueFromRatio = useCallback(
+      (ratio: number, complete = false) => setNearestThumbValueFromRatio(ratio, complete),
+      [setNearestThumbValueFromRatio],
+    );
+
+    const setIsDragging = useCallback((dragging: boolean) => {
+      setDraggingIndex(dragging ? 0 : null);
+    }, []);
+
+    const setIsHovered = useCallback((hovered: boolean) => {
+      setHoveredIndex(hovered ? 0 : null);
+    }, []);
+
+    const setIsFocused = useCallback((focused: boolean) => {
+      setFocusedIndex(focused ? 0 : null);
+    }, []);
+
+    const contextValue = useMemo(
+      () => ({
+        values: currentValues,
+        min,
+        max,
+        step,
+        orientation,
+        isDisabled,
+        draggingIndex,
+        hoveredIndex,
+        focusedIndex,
+        trackLayout,
+        thumbSize,
+        thumbCount,
+        groupAccessibilityLabel: accessibilityLabel,
+        accessibilityValueProp,
+        getThumbPercent,
+        getThumbMinValue,
+        getThumbMaxValue,
+        setThumbValue,
+        setThumbValueFromRatio,
+        setNearestThumbValueFromRatio,
+        setTrackLayout,
+        setThumbSize,
+        setDraggingIndex,
+        setHoveredIndex,
+        setFocusedIndex,
+        getThumbValueLabel,
+        registerThumb,
+        isThumbDragging,
+        value: currentValues[0] ?? min,
+        percent: getThumbPercent(0),
+        isDragging: draggingIndex !== null,
+        isHovered: hoveredIndex !== null,
+        isFocused: focusedIndex !== null,
+        getValueLabel: () => getThumbValueLabel(0),
+        setValue,
+        setValueFromRatio,
+        thumbRef: deprecatedThumbRef,
+        setIsDragging,
+        setIsHovered,
+        setIsFocused,
+      }),
+      [
+        accessibilityLabel,
+        accessibilityValueProp,
+        currentValues,
+        draggingIndex,
+        focusedIndex,
+        getThumbMaxValue,
+        getThumbMinValue,
+        getThumbPercent,
+        getThumbValueLabel,
+        hoveredIndex,
+        isDisabled,
+        isThumbDragging,
+        max,
+        min,
+        orientation,
+        registerThumb,
+        setIsDragging,
+        setIsFocused,
+        setIsHovered,
+        setNearestThumbValueFromRatio,
+        setThumbSize,
+        setThumbValue,
+        setThumbValueFromRatio,
+        setTrackLayout,
+        setValue,
+        setValueFromRatio,
+        step,
+        thumbCount,
+        thumbSize,
+        trackLayout,
+      ],
+    );
+
+    const dataAttrs = dataAttributes({
+      slot: 'slider',
+      orientation,
+      disabled: isDisabled,
+      dragging: draggingIndex !== null,
+      hover: hoveredIndex !== null,
+      focus: focusedIndex !== null,
+      values: currentValues.join(','),
+      min: String(min),
+      max: String(max),
+    });
+
+    const Comp = asChild ? Slot : View;
+
+    const handleLayout = composeEventHandlers(onLayout, () => undefined);
+
+    return (
+      <SliderProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(props as ViewProps)}
+          onLayout={handleLayout}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ disabled: isDisabled }}
+          aria-disabled={isDisabled}
+          role={Platform.OS === 'web' ? 'group' : undefined}
+          {...dataAttrs}
+        >
+          {children}
+        </Comp>
+      </SliderProvider>
+    );
+  },
+);
+
+SliderRoot.displayName = 'SliderRoot';