react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/slider/Slider.js

@@ -0,0 +1,523 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { useSlider, useSliderThumb } from '@react-native-aria/slider';
+import { isRTL } from '@react-native-aria/utils';
+import { useSliderState } from '@react-stately/slider';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, StyleSheet, View } from 'react-native';
+import { useSliderTokens } from './tokens';
+import { parseNumber } from '../../utils/number';
+import { isFunction, isFiniteNumber } from '../../utils/validate';
+import { useAriaPress } from '../../hooks';
+import { isSameLayout, normalizeValue, toSliderValue, createAccessibilityProps, defaultNumberFormatter } from './utils';
+const START_KEYS = ['onResponderGrant', 'onPanResponderGrant'];
+const MOVE_KEYS = ['onResponderMove', 'onPanResponderMove'];
+const END_KEYS = ['onResponderRelease', 'onResponderTerminate', 'onPanResponderRelease', 'onPanResponderTerminate'];
+const ThumbNode = /*#__PURE__*/React.memo(({
+  index,
+  orientation,
+  ariaReverse,
+  trackLayout,
+  isDisabled,
+  state,
+  size,
+  activeColor,
+  content,
+  visualPercent,
+  thumbBackgroundColor,
+  thumbElevation,
+  indicatorSize,
+  indicatorColor,
+  webGestureStyle,
+  enhanceHandlers
+}) => {
+  const inputRef = useRef(null);
+  const {
+    thumbProps,
+    inputProps
+  } = useSliderThumb({
+    index,
+    trackLayout,
+    inputRef,
+    isDisabled,
+    orientation
+  }, state, ariaReverse);
+  const rawThumbViewProps = thumbProps;
+  const handlers = enhanceHandlers(rawThumbViewProps, index) ?? rawThumbViewProps ?? {};
+  const translate = useMemo(() => -size / 2, [size]);
+  const thumbStyle = useMemo(() => {
+    const next = {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderColor: activeColor,
+      transform: [{
+        translateX: translate
+      }, {
+        translateY: translate
+      }]
+    };
+    if (orientation === 'vertical') {
+      next.top = `${visualPercent}%`;
+      next.left = '50%';
+    } else {
+      next.left = `${visualPercent}%`;
+      next.top = '50%';
+    }
+    if (!content) {
+      next.backgroundColor = thumbBackgroundColor;
+      next.elevation = thumbElevation;
+    }
+    return next;
+  }, [activeColor, content, orientation, size, thumbBackgroundColor, thumbElevation, translate, visualPercent]);
+  const indicatorStyle = useMemo(() => ({
+    width: indicatorSize,
+    height: indicatorSize,
+    borderRadius: indicatorSize / 2,
+    backgroundColor: indicatorColor
+  }), [indicatorColor, indicatorSize]);
+  const accessibilityProps = createAccessibilityProps(inputProps);
+  return /*#__PURE__*/React.createElement(View, _extends({}, handlers, accessibilityProps, {
+    pointerEvents: isDisabled ? 'none' : 'auto',
+    style: [content ? styles.thumbWrapper : styles.thumb, webGestureStyle, thumbStyle]
+  }), content ?? /*#__PURE__*/React.createElement(View, {
+    style: indicatorStyle
+  }));
+});
+ThumbNode.displayName = 'ThumbNode';
+export const Slider = props => {
+  const {
+    value: valueProp,
+    min = 0,
+    max = 100,
+    step = 1,
+    range = false,
+    vertical = false,
+    reverse = false,
+    disabled = false,
+    readOnly = false,
+    activeColor,
+    inactiveColor,
+    barHeight,
+    trackHeight,
+    buttonSize,
+    thumbSize,
+    tokensOverride,
+    button,
+    leftButton,
+    rightButton,
+    thumb,
+    leftThumb,
+    rightThumb,
+    ariaLabel,
+    onChange,
+    onChangeAfter,
+    onDragStart,
+    onDragEnd,
+    style,
+    onLayout: containerOnLayout,
+    ...rest
+  } = props;
+  const tokens = useSliderTokens(tokensOverride);
+  const orientation = vertical ? 'vertical' : 'horizontal';
+  const trackRef = useRef(null);
+  const measureRafRef = useRef(null);
+  const resolvedMin = parseNumber(min, 0);
+  const resolvedMax = parseNumber(max, 100);
+  const resolvedStepRaw = parseNumber(step, 1);
+  const resolvedStep = resolvedStepRaw > 0 ? resolvedStepRaw : 1;
+  const resolvedTrackHeight = Math.max(0, parseNumber(barHeight ?? trackHeight, tokens.track.height));
+  const resolvedThumbSize = Math.max(0, parseNumber(buttonSize ?? thumbSize, tokens.thumb.size));
+  const ariaDisabled = disabled || readOnly;
+  const resolvedActiveColor = activeColor ?? tokens.colors.active;
+  const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactive;
+  const scope = Math.max(resolvedMax - resolvedMin, 0.00001);
+  const normalized = useMemo(() => normalizeValue(valueProp, range, resolvedMin, resolvedMax), [valueProp, range, resolvedMin, resolvedMax]);
+  const isControlled = valueProp !== undefined;
+  const formatOutput = useCallback(values => toSliderValue(values, range, resolvedMin), [range, resolvedMin]);
+  const handleStateChange = useCallback(values => {
+    onChange?.(formatOutput(values));
+  }, [formatOutput, onChange]);
+  const handleStateChangeEnd = useCallback(values => {
+    onChangeAfter?.(formatOutput(values));
+  }, [formatOutput, onChangeAfter]);
+  const sliderStateOptions = useMemo(() => ({
+    minValue: resolvedMin,
+    maxValue: resolvedMax,
+    step: resolvedStep,
+    isDisabled: ariaDisabled,
+    numberFormatter: defaultNumberFormatter,
+    orientation,
+    value: isControlled ? normalized : undefined,
+    defaultValue: !isControlled ? normalized : undefined,
+    onChange: handleStateChange,
+    onChangeEnd: handleStateChangeEnd
+  }), [ariaDisabled, handleStateChange, handleStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
+  const state = useSliderState(sliderStateOptions);
+  const [trackLayout, setTrackLayout] = useState({
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0
+  });
+  const handleTrackLayout = useCallback(event => {
+    const {
+      layout
+    } = event.nativeEvent;
+    const next = {
+      width: Math.max(layout.width, 1),
+      height: Math.max(layout.height, 1),
+      x: layout.x ?? 0,
+      y: layout.y ?? 0
+    };
+    setTrackLayout(prev => isSameLayout(prev, next) ? prev : next);
+    if (Platform.OS !== 'web' || typeof requestAnimationFrame === 'undefined') return;
+    if (measureRafRef.current != null) return;
+    measureRafRef.current = requestAnimationFrame(() => {
+      measureRafRef.current = null;
+      const node = trackRef.current;
+      if (!node?.measureInWindow) return;
+      node.measureInWindow((x, y, width, height) => {
+        const measured = {
+          width: Math.max(width, 1),
+          height: Math.max(height, 1),
+          x,
+          y
+        };
+        setTrackLayout(prev => isSameLayout(prev, measured) ? prev : measured);
+      });
+    });
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (measureRafRef.current != null && typeof cancelAnimationFrame === 'function') {
+        cancelAnimationFrame(measureRafRef.current);
+      }
+      measureRafRef.current = null;
+    };
+  }, []);
+  const reverseX = orientation === 'horizontal' ? reverse || isRTL() : reverse;
+  const ariaReverse = orientation === 'horizontal' ? reverseX : reverse;
+  const {
+    trackProps
+  } = useSlider({
+    orientation,
+    isDisabled: ariaDisabled,
+    'aria-label': ariaLabel ?? 'Slider'
+  }, state, trackLayout, ariaReverse);
+  const trackPressableProps = trackProps;
+  const {
+    style: trackAriaStyle,
+    onLayout: trackAriaOnLayout,
+    ...restTrackProps
+  } = trackPressableProps;
+  const handleTrackPress = useCallback(event => {
+    if (ariaDisabled) return;
+    if (!state.values.every((_, i) => !state.isThumbDragging(i))) return;
+    const {
+      locationX,
+      locationY,
+      pageX,
+      pageY
+    } = event.nativeEvent;
+    const localX = isFiniteNumber(locationX) ? locationX : isFiniteNumber(pageX) ? pageX - (trackLayout.x ?? 0) : 0;
+    const localY = isFiniteNumber(locationY) ? locationY : isFiniteNumber(pageY) ? pageY - (trackLayout.y ?? 0) : 0;
+    const size = orientation === 'vertical' ? trackLayout.height : trackLayout.width;
+    const local = orientation === 'vertical' ? localY : localX;
+    const raw = local / Math.max(size, 1);
+    const percent = orientation === 'vertical' ? reverse ? raw : 1 - raw : reverseX ? 1 - raw : raw;
+    const value = state.getPercentValue(Math.min(1, Math.max(0, percent)));
+    const closestThumb = state.values.reduce((best, v, i) => Math.abs(v - value) < Math.abs(state.values[best] - value) ? i : best, 0);
+    if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {
+      ;
+      event.preventDefault?.();
+      state.setFocusedThumb(closestThumb);
+      state.setThumbDragging(closestThumb, true);
+      state.setThumbValue(closestThumb, value);
+      state.setThumbDragging(closestThumb, false);
+    }
+  }, [ariaDisabled, orientation, reverse, reverseX, state, trackLayout.height, trackLayout.width, trackLayout.x, trackLayout.y]);
+  const {
+    interactionProps: trackInteractionProps
+  } = useAriaPress({
+    disabled: ariaDisabled,
+    onPress: handleTrackPress,
+    extraProps: restTrackProps
+  });
+  const currentValue = formatOutput(state.values);
+  const currentValueRef = useRef(currentValue);
+  currentValueRef.current = currentValue;
+  const dragStartedRef = useRef([]);
+  const dragStartValueRef = useRef([]);
+  const moveRafIdRef = useRef([]);
+  const movePendingArgsRef = useRef([]);
+  const enhancedHandlersCacheRef = useRef(new WeakMap());
+  useEffect(() => {
+    enhancedHandlersCacheRef.current = new WeakMap();
+  }, [onDragStart, onDragEnd]);
+  useEffect(() => {
+    return () => {
+      const cancel = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : undefined;
+      if (!cancel) return;
+      for (const id of moveRafIdRef.current) {
+        if (id != null) cancel(id);
+      }
+      moveRafIdRef.current = [];
+      movePendingArgsRef.current = [];
+    };
+  }, []);
+  const enhanceHandlers = useCallback((handlers, index) => {
+    if (!handlers) return handlers;
+    if (!onDragStart && !onDragEnd) {
+      return handlers;
+    }
+    const cached = enhancedHandlersCacheRef.current.get(handlers);
+    const found = cached?.get(index);
+    if (found) return found;
+    const hasAny = START_KEYS.some(k => isFunction(handlers[k])) || MOVE_KEYS.some(k => isFunction(handlers[k])) || END_KEYS.some(k => isFunction(handlers[k]));
+    if (!hasAny) return handlers;
+    const wrapped = {
+      ...handlers
+    };
+    const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : undefined;
+    const caf = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : undefined;
+    for (const key of MOVE_KEYS) {
+      const original = wrapped[key];
+      if (!isFunction(original)) continue;
+      const originalFn = original;
+      wrapped[key] = (...args) => {
+        if (!raf) {
+          originalFn(...args);
+          return;
+        }
+        movePendingArgsRef.current[index] = args;
+        if (moveRafIdRef.current[index] != null) return;
+        moveRafIdRef.current[index] = raf(() => {
+          moveRafIdRef.current[index] = null;
+          const pending = movePendingArgsRef.current[index];
+          if (!pending) return;
+          movePendingArgsRef.current[index] = null;
+          originalFn(...pending);
+        });
+      };
+    }
+    const wrapAfter = (key, callback) => {
+      if (!callback) return;
+      const original = wrapped[key];
+      wrapped[key] = (...args) => {
+        if (isFunction(original)) {
+          ;
+          original(...args);
+        }
+        callback(args[0]);
+      };
+    };
+    const wrapBefore = (key, callback) => {
+      if (!callback) return;
+      const original = wrapped[key];
+      wrapped[key] = (...args) => {
+        callback(args[0]);
+        if (isFunction(original)) {
+          ;
+          original(...args);
+        }
+      };
+    };
+    for (const key of START_KEYS) {
+      wrapAfter(key, () => {
+        dragStartedRef.current[index] = false;
+        dragStartValueRef.current[index] = currentValueRef.current;
+      });
+    }
+    for (const key of MOVE_KEYS) {
+      wrapBefore(key, event => {
+        if (!dragStartedRef.current[index]) {
+          dragStartedRef.current[index] = true;
+          onDragStart?.(event, dragStartValueRef.current[index] ?? currentValueRef.current);
+        }
+      });
+    }
+    const emitEnd = event => {
+      if (dragStartedRef.current[index]) {
+        dragStartedRef.current[index] = false;
+        dragStartValueRef.current[index] = undefined;
+        onDragEnd?.(event, currentValueRef.current);
+      }
+      const rafId = moveRafIdRef.current[index];
+      if (rafId != null && caf) {
+        caf(rafId);
+        moveRafIdRef.current[index] = null;
+      }
+      movePendingArgsRef.current[index] = null;
+    };
+    for (const key of END_KEYS) {
+      wrapAfter(key, emitEnd);
+    }
+    const map = cached ?? new Map();
+    map.set(index, wrapped);
+    if (!cached) {
+      enhancedHandlersCacheRef.current.set(handlers, map);
+    }
+    return wrapped;
+  }, [onDragStart, onDragEnd]);
+  const values = state.values;
+  const thumbPercents = useMemo(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
+  const thumbVisualPercents = useMemo(() => thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent), [orientation, reverse, reverseX, thumbPercents]);
+  const activeRange = useMemo(() => {
+    const first = thumbVisualPercents[0] ?? 0;
+    const second = thumbVisualPercents[1] ?? first;
+    return range && thumbVisualPercents.length > 1 ? {
+      offset: Math.min(first, second),
+      size: Math.max(first, second) - Math.min(first, second)
+    } : (orientation === 'horizontal' ? !reverseX : reverse) ? {
+      offset: 0,
+      size: first
+    } : {
+      offset: first,
+      size: 100 - first
+    };
+  }, [orientation, range, reverse, reverseX, thumbVisualPercents]);
+  const activeTrackStyle = useMemo(() => {
+    const next = {
+      backgroundColor: resolvedActiveColor,
+      borderRadius: tokens.track.radius
+    };
+    if (orientation === 'vertical') {
+      next.left = 0;
+      next.width = '100%';
+      next.height = `${Math.max(activeRange.size, 0)}%`;
+      next.top = `${Math.max(activeRange.offset, 0)}%`;
+    } else {
+      next.top = 0;
+      next.height = '100%';
+      next.width = `${Math.max(activeRange.size, 0)}%`;
+      next.left = `${Math.max(activeRange.offset, 0)}%`;
+    }
+    return next;
+  }, [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, tokens.track.radius]);
+  const trackBaseStyle = useMemo(() => orientation === 'vertical' ? [styles.trackVertical, {
+    width: resolvedTrackHeight,
+    backgroundColor: resolvedInactiveColor,
+    alignSelf: 'center'
+  }] : [styles.trackHorizontal, {
+    height: resolvedTrackHeight,
+    backgroundColor: resolvedInactiveColor
+  }], [orientation, resolvedInactiveColor, resolvedTrackHeight]);
+  const isButtonFunction = isFunction(button);
+  const sharedThumb = isButtonFunction ? button({
+    value: currentValue
+  }) : button ?? thumb;
+  const leftThumbContent = leftButton ?? leftThumb ?? sharedThumb;
+  const rightThumbContent = rightButton ?? rightThumb ?? sharedThumb;
+  const resolveThumbContent = useCallback((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb, [leftThumbContent, rightThumbContent, sharedThumb]);
+  const webGestureStyle = useMemo(() => Platform.OS === 'web' ? {
+    touchAction: orientation === 'horizontal' ? 'pan-y' : 'none',
+    userSelect: 'none'
+  } : undefined, [orientation]);
+  const baseTrackPressableStyle = useMemo(() => [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle], [orientation, webGestureStyle]);
+  const trackPressableStyleFn = useCallback(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
+  const trackPressableStyle = useMemo(() => trackAriaStyle && isFunction(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle], [baseTrackPressableStyle, trackAriaStyle, trackPressableStyleFn]);
+  const containerStyles = useMemo(() => [styles.container, {
+    paddingVertical: tokens.spacing.containerPaddingVertical
+  }, orientation === 'vertical' && [styles.verticalContainer, {
+    minHeight: tokens.layout.verticalMinHeight,
+    width: tokens.layout.verticalWidth
+  }], disabled && {
+    opacity: tokens.states.disabledOpacity
+  }, style], [disabled, orientation, style, tokens.layout.verticalMinHeight, tokens.layout.verticalWidth, tokens.spacing.containerPaddingVertical, tokens.states.disabledOpacity]);
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: containerStyles,
+    onLayout: containerOnLayout
+  }, rest), /*#__PURE__*/React.createElement(View, {
+    style: [styles.trackWrapper, orientation === 'vertical' && styles.trackWrapperVertical]
+  }, /*#__PURE__*/React.createElement(Pressable, _extends({
+    ref: trackRef
+  }, trackInteractionProps, {
+    disabled: ariaDisabled,
+    onLayout: event => {
+      handleTrackLayout(event);
+      trackAriaOnLayout?.(event);
+    },
+    style: trackPressableStyle
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.trackBase, {
+      borderRadius: tokens.track.radius
+    }, ...trackBaseStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.active, activeTrackStyle]
+  }))), values.map((_, index) => /*#__PURE__*/React.createElement(ThumbNode, {
+    key: `thumb-${index}`,
+    index: index,
+    orientation: orientation,
+    ariaReverse: ariaReverse,
+    trackLayout: trackLayout,
+    isDisabled: ariaDisabled,
+    state: state,
+    size: resolvedThumbSize,
+    activeColor: resolvedActiveColor,
+    content: resolveThumbContent(index, values.length),
+    visualPercent: thumbVisualPercents[index] ?? 0,
+    thumbBackgroundColor: tokens.colors.thumbBackground,
+    thumbElevation: tokens.thumb.elevation,
+    indicatorSize: tokens.thumb.indicatorSize,
+    indicatorColor: tokens.colors.thumbIndicator,
+    webGestureStyle: webGestureStyle,
+    enhanceHandlers: enhanceHandlers
+  }))));
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  verticalContainer: {
+    height: '100%',
+    alignItems: 'center',
+    paddingVertical: 0
+  },
+  trackWrapper: {
+    width: '100%',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  trackWrapperVertical: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%'
+  },
+  trackPressable: {
+    width: '100%',
+    justifyContent: 'center'
+  },
+  trackPressableVertical: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  trackBase: {
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  trackHorizontal: {
+    width: '100%'
+  },
+  trackVertical: {
+    height: '100%'
+  },
+  active: {
+    position: 'absolute'
+  },
+  thumb: {
+    position: 'absolute',
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  thumbWrapper: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+Slider.displayName = 'Slider';
+export default Slider;

package/dist/es/slider/index.js

@@ -0,0 +1,2 @@
+import { Slider } from './Slider';
+export default Slider;

package/dist/es/slider/tokens.js

@@ -0,0 +1,31 @@
+import { createComponentTokensHook } from '../../design-system';
+const createSliderTokens = foundations => {
+  return {
+    track: {
+      height: 2,
+      radius: foundations.radii.pill
+    },
+    thumb: {
+      size: foundations.spacing.lg + foundations.spacing.sm,
+      indicatorSize: foundations.spacing.sm,
+      elevation: 1
+    },
+    colors: {
+      active: foundations.palette.primary[500],
+      inactive: foundations.palette.default[300],
+      thumbBackground: '#ffffff',
+      thumbIndicator: '#ffffff'
+    },
+    spacing: {
+      containerPaddingVertical: foundations.spacing.md
+    },
+    layout: {
+      verticalMinHeight: 150,
+      verticalWidth: 40
+    },
+    states: {
+      disabledOpacity: foundations.opacity.disabled
+    }
+  };
+};
+export const useSliderTokens = createComponentTokensHook('slider', createSliderTokens);

package/dist/es/slider/utils.js

@@ -0,0 +1,49 @@
+import { clamp, isFiniteNumber, isFunction } from '../../utils';
+export const clampValue = (value, min, max) => {
+  if (!isFiniteNumber(value)) {
+    return min;
+  }
+  return clamp(value, min, max);
+};
+export const isSameLayout = (a, b) => a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
+export const normalizeValue = (value, range, min, max) => {
+  if (range) {
+    const raw = Array.isArray(value) ? value : isFiniteNumber(value) ? [min, value] : [min, min];
+    const first = clampValue(raw[0], min, max);
+    const second = clampValue(raw[1] ?? raw[0], min, max);
+    return first <= second ? [first, second] : [second, first];
+  }
+  const single = Array.isArray(value) ? value[0] : value;
+  return [clampValue(single, min, max)];
+};
+export const toSliderValue = (values, range, fallback) => {
+  if (range) {
+    const start = values[0] ?? fallback;
+    const end = values[1] ?? start;
+    return [start, end];
+  }
+  return values[0] ?? fallback;
+};
+export const createAccessibilityProps = inputProps => {
+  if (!inputProps) return {};
+  const {
+    role,
+    ['aria-value']: ariaValue,
+    accessibilityActions,
+    onAccessibilityAction,
+    disabled
+  } = inputProps;
+  return {
+    accessible: true,
+    accessibilityRole: role ?? 'adjustable',
+    accessibilityValue: ariaValue,
+    accessibilityActions,
+    onAccessibilityAction,
+    accessibilityState: {
+      disabled
+    }
+  };
+};
+export const defaultNumberFormatter = typeof Intl !== 'undefined' && isFunction(Intl.NumberFormat) ? new Intl.NumberFormat() : {
+  format: val => String(val)
+};