react-native-system-ui 0.0.7 → 1.0.1

package/dist/cjs/components/slider/Slider.js

@@ -41,6 +41,7 @@ function _reactNative() {
 }
 var _tokens = require("./tokens");
 var _number = require("../../utils/number");
+var _hairline = require("../../utils/hairline");
 var _utils2 = require("../../utils");
 var _validate = require("../../utils/validate");
 var _hooks = require("../../hooks");
@@ -92,14 +93,14 @@ const START_KEYS = ['onResponderGrant', 'onPanResponderGrant'];
 const MOVE_KEYS = ['onResponderMove', 'onPanResponderMove'];
 const END_KEYS = ['onResponderRelease', 'onResponderTerminate', 'onPanResponderRelease', 'onPanResponderTerminate'];
 const useTrackLayout = () => {
-  const trackRef = (0, _react().useRef)(null);
-  const measureRafRef = (0, _react().useRef)(null);
-  const [trackLayout, setTrackLayout] = (0, _react().useState)({
-    width: 0,
-    height: 0,
-    x: 0,
-    y: 0
-  });
+  const trackRef = (0, _react().useRef)(null),
+    measureRafRef = (0, _react().useRef)(null),
+    [trackLayout, setTrackLayout] = (0, _react().useState)({
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0
+    });
   const handleTrackLayout = (0, _react().useCallback)(event => {
     const {
       layout
@@ -130,9 +131,7 @@ const useTrackLayout = () => {
   }, []);
   (0, _react().useEffect)(() => {
     return () => {
-      if (measureRafRef.current != null && typeof cancelAnimationFrame === 'function') {
-        cancelAnimationFrame(measureRafRef.current);
-      }
+      if (measureRafRef.current != null && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(measureRafRef.current);
       measureRafRef.current = null;
     };
   }, []);
@@ -183,19 +182,19 @@ const ThumbNode = /*#__PURE__*/_react().default.memo(({
       translateX: translate
     }, {
       translateY: translate
-    }]
+    }],
+    ...(orientation === 'vertical' ? {
+      top: `${visualPercent}%`,
+      left: '50%'
+    } : {
+      left: `${visualPercent}%`,
+      top: '50%'
+    }),
+    ...(!content ? {
+      backgroundColor: thumbBackgroundColor,
+      elevation: thumbElevation
+    } : {})
   };
-  if (orientation === 'vertical') {
-    thumbStyle.top = `${visualPercent}%`;
-    thumbStyle.left = '50%';
-  } else {
-    thumbStyle.left = `${visualPercent}%`;
-    thumbStyle.top = '50%';
-  }
-  if (!content) {
-    thumbStyle.backgroundColor = thumbBackgroundColor;
-    thumbStyle.elevation = thumbElevation;
-  }
   const indicatorStyle = {
     width: indicatorSize,
     height: indicatorSize,
@@ -205,13 +204,19 @@ const ThumbNode = /*#__PURE__*/_react().default.memo(({
   const accessibilityProps = createAccessibilityProps(inputProps);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
-    style: [content ? styles.thumbWrapper : styles.thumb, webGestureStyle, thumbStyle]
+    style: [content ? S.thw : S.t, webGestureStyle, thumbStyle]
   }), content ?? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: indicatorStyle
+  }), !content && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _hairline.createHairlineView)({
+      position: 'all',
+      color: activeColor,
+      borderRadius: size / 2
+    })
   }));
 });
 ThumbNode.displayName = 'ThumbNode';
-const Slider = props => {
+const SliderImpl = props => {
   const {
     value: valueProp,
     min = 0,
@@ -251,10 +256,10 @@ const Slider = props => {
     trackLayout,
     handleTrackLayout
   } = useTrackLayout();
-  const resolvedMin = (0, _number.parseNumber)(min, 0);
-  const resolvedMax = (0, _number.parseNumber)(max, 100);
-  const resolvedStepRaw = (0, _number.parseNumber)(step, 1);
-  const resolvedStep = resolvedStepRaw > 0 ? resolvedStepRaw : 1;
+  const resolvedMin = (0, _number.parseNumber)(min, 0),
+    resolvedMax = (0, _number.parseNumber)(max, 100),
+    resolvedStepRaw = (0, _number.parseNumber)(step, 1),
+    resolvedStep = resolvedStepRaw > 0 ? resolvedStepRaw : 1;
   const resolvedTrackHeight = Math.max(0, (0, _number.parseNumber)(barHeight ?? trackHeight, tokens.track.height));
   const resolvedThumbSize = Math.max(0, (0, _number.parseNumber)(buttonSize ?? thumbSize, tokens.thumb.size));
   const ariaDisabled = disabled || readOnly;
@@ -263,13 +268,21 @@ const Slider = props => {
   const scope = Math.max(resolvedMax - resolvedMin, 0.00001);
   const normalized = normalizeValue(valueProp, range, resolvedMin, resolvedMax);
   const isControlled = valueProp !== undefined;
+  const onChangeRef = (0, _react().useRef)(onChange),
+    onChangeAfterRef = (0, _react().useRef)(onChangeAfter),
+    onDragStartRef = (0, _react().useRef)(onDragStart),
+    onDragEndRef = (0, _react().useRef)(onDragEnd);
+  onChangeRef.current = onChange;
+  onChangeAfterRef.current = onChangeAfter;
+  onDragStartRef.current = onDragStart;
+  onDragEndRef.current = onDragEnd;
   const formatOutput = (0, _react().useCallback)(values => toSliderValue(values, range, resolvedMin), [range, resolvedMin]);
-  const handleStateChange = (0, _react().useCallback)(values => {
-    onChange?.(formatOutput(values));
-  }, [formatOutput, onChange]);
-  const handleStateChangeEnd = (0, _react().useCallback)(values => {
-    onChangeAfter?.(formatOutput(values));
-  }, [formatOutput, onChangeAfter]);
+  const onStateChange = (0, _react().useCallback)(values => {
+    onChangeRef.current?.(formatOutput(values));
+  }, [formatOutput]);
+  const onStateChangeEnd = (0, _react().useCallback)(values => {
+    onChangeAfterRef.current?.(formatOutput(values));
+  }, [formatOutput]);
   const sliderStateOptions = (0, _react().useMemo)(() => ({
     minValue: resolvedMin,
     maxValue: resolvedMax,
@@ -279,12 +292,12 @@ const Slider = props => {
     orientation,
     value: isControlled ? normalized : undefined,
     defaultValue: !isControlled ? normalized : undefined,
-    onChange: handleStateChange,
-    onChangeEnd: handleStateChangeEnd
-  }), [ariaDisabled, handleStateChange, handleStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
+    onChange: onStateChange,
+    onChangeEnd: onStateChangeEnd
+  }), [ariaDisabled, onStateChange, onStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
   const state = (0, _slider2().useSliderState)(sliderStateOptions);
-  const reverseX = orientation === 'horizontal' ? reverse || (0, _utils().isRTL)() : reverse;
-  const ariaReverse = orientation === 'horizontal' ? reverseX : reverse;
+  const resolvedReverseX = orientation === 'horizontal' ? reverse || (0, _utils().isRTL)() : reverse;
+  const ariaReverse = orientation === 'horizontal' ? resolvedReverseX : reverse;
   const {
     trackProps
   } = (0, _slider().useSlider)({
@@ -296,9 +309,13 @@ const Slider = props => {
   const {
     style: trackAriaStyle,
     onLayout: trackAriaOnLayout,
-    ...restTrackProps
+    ...remainingTrackProps
   } = trackPressableProps;
-  const handleTrackPress = (0, _react().useCallback)(event => {
+  const onCombinedTrackLayout = (0, _react().useCallback)(event => {
+    handleTrackLayout(event);
+    trackAriaOnLayout?.(event);
+  }, [handleTrackLayout, trackAriaOnLayout]);
+  const onTrack = (0, _react().useCallback)(event => {
     if (ariaDisabled) return;
     if (!state.values.every((_, i) => !state.isThumbDragging(i))) return;
     const {
@@ -312,7 +329,7 @@ const Slider = props => {
     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 percent = orientation === 'vertical' ? reverse ? raw : 1 - raw : resolvedReverseX ? 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)) {
@@ -323,25 +340,22 @@ const Slider = props => {
       state.setThumbValue(closestThumb, value);
       state.setThumbDragging(closestThumb, false);
     }
-  }, [ariaDisabled, orientation, reverse, reverseX, state, trackLayout.height, trackLayout.width, trackLayout.x, trackLayout.y]);
+  }, [ariaDisabled, orientation, reverse, resolvedReverseX, state, trackLayout.height, trackLayout.width, trackLayout.x, trackLayout.y]);
   const {
     interactionProps: trackInteractionProps
   } = (0, _hooks.useAriaPress)({
     disabled: ariaDisabled,
-    onPress: handleTrackPress,
-    extraProps: restTrackProps
+    onPress: onTrack,
+    extraProps: remainingTrackProps
   });
   const currentValue = formatOutput(state.values);
-  const currentValueRef = (0, _react().useRef)(currentValue);
+  const currentValueRef = (0, _react().useRef)(currentValue),
+    dragStartRef = (0, _react().useRef)([]),
+    dragStartValueRef = (0, _react().useRef)([]),
+    moveRafIdRef = (0, _react().useRef)([]),
+    movePendingArgsRef = (0, _react().useRef)([]),
+    enhanceHandlersCacheRef = (0, _react().useRef)(new WeakMap());
   currentValueRef.current = currentValue;
-  const dragStartedRef = (0, _react().useRef)([]);
-  const dragStartValueRef = (0, _react().useRef)([]);
-  const moveRafIdRef = (0, _react().useRef)([]);
-  const movePendingArgsRef = (0, _react().useRef)([]);
-  const enhancedHandlersCacheRef = (0, _react().useRef)(new WeakMap());
-  (0, _react().useEffect)(() => {
-    enhancedHandlersCacheRef.current = new WeakMap();
-  }, [onDragStart, onDragEnd]);
   (0, _react().useEffect)(() => {
     return () => {
       const cancel = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : undefined;
@@ -355,10 +369,8 @@ const Slider = props => {
   }, []);
   const enhanceHandlers = (0, _react().useCallback)((handlers, index) => {
     if (!handlers) return handlers;
-    if (!onDragStart && !onDragEnd) {
-      return handlers;
-    }
-    const cached = enhancedHandlersCacheRef.current.get(handlers);
+    if (!onDragStartRef.current && !onDragEndRef.current) return handlers;
+    const cached = enhanceHandlersCacheRef.current.get(handlers);
     const found = cached?.get(index);
     if (found) return found;
     const hasAny = START_KEYS.some(k => (0, _validate.isFunction)(handlers[k])) || MOVE_KEYS.some(k => (0, _validate.isFunction)(handlers[k])) || END_KEYS.some(k => (0, _validate.isFunction)(handlers[k]));
@@ -412,23 +424,23 @@ const Slider = props => {
     };
     for (const key of START_KEYS) {
       wrapAfter(key, () => {
-        dragStartedRef.current[index] = false;
+        dragStartRef.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);
+        if (!dragStartRef.current[index]) {
+          dragStartRef.current[index] = true;
+          onDragStartRef.current?.(event, dragStartValueRef.current[index] ?? currentValueRef.current);
         }
       });
     }
     const emitEnd = event => {
-      if (dragStartedRef.current[index]) {
-        dragStartedRef.current[index] = false;
+      if (dragStartRef.current[index]) {
+        dragStartRef.current[index] = false;
         dragStartValueRef.current[index] = undefined;
-        onDragEnd?.(event, currentValueRef.current);
+        onDragEndRef.current?.(event, currentValueRef.current);
       }
       const rafId = moveRafIdRef.current[index];
       if (rafId != null && caf) {
@@ -443,95 +455,106 @@ const Slider = props => {
     const map = cached ?? new Map();
     map.set(index, wrapped);
     if (!cached) {
-      enhancedHandlersCacheRef.current.set(handlers, map);
+      enhanceHandlersCacheRef.current.set(handlers, map);
     }
     return wrapped;
-  }, [onDragStart, onDragEnd]);
+  }, []);
   const values = state.values;
-  const thumbPercents = (0, _react().useMemo)(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
-  const thumbVisualPercents = (0, _react().useMemo)(() => thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent), [orientation, reverse, reverseX, thumbPercents]);
+  const thumbPercent = (0, _react().useMemo)(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
+  const thumbVisualPercent = (0, _react().useMemo)(() => thumbPercent.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : resolvedReverseX ? 100 - percent : percent), [orientation, reverse, resolvedReverseX, thumbPercent]);
   const activeRange = (0, _react().useMemo)(() => {
-    const first = thumbVisualPercents[0] ?? 0;
-    const second = thumbVisualPercents[1] ?? first;
-    return range && thumbVisualPercents.length > 1 ? {
+    const first = thumbVisualPercent[0] ?? 0,
+      second = thumbVisualPercent[1] ?? first;
+    return range && thumbVisualPercent.length > 1 ? {
       offset: Math.min(first, second),
       size: Math.max(first, second) - Math.min(first, second)
-    } : (orientation === 'horizontal' ? !reverseX : reverse) ? {
+    } : (orientation === 'horizontal' ? !resolvedReverseX : reverse) ? {
       offset: 0,
       size: first
     } : {
       offset: first,
       size: 100 - first
     };
-  }, [orientation, range, reverse, reverseX, thumbVisualPercents]);
-  const activeTrackStyle = (0, _react().useMemo)(() => {
-    const base = {
-      backgroundColor: resolvedActiveColor,
-      borderRadius: tokens.track.radius
-    };
-    if (orientation === 'vertical') {
-      base.left = 0;
-      base.width = '100%';
-      base.height = `${Math.max(activeRange.size, 0)}%`;
-      base.top = `${Math.max(activeRange.offset, 0)}%`;
-    } else {
-      base.top = 0;
-      base.height = '100%';
-      base.width = `${Math.max(activeRange.size, 0)}%`;
-      base.left = `${Math.max(activeRange.offset, 0)}%`;
+  }, [orientation, range, reverse, resolvedReverseX, thumbVisualPercent]);
+  const {
+    track: {
+      radius: trackRadius
     }
-    return base;
-  }, [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, tokens.track.radius]);
-  const trackBaseStyle = (0, _react().useMemo)(() => orientation === 'vertical' ? [styles.trackVertical, {
+  } = tokens;
+  const activeTrackStyle = (0, _react().useMemo)(() => ({
+    backgroundColor: resolvedActiveColor,
+    borderRadius: trackRadius,
+    ...(orientation === 'vertical' ? {
+      left: 0,
+      width: '100%',
+      height: `${Math.max(activeRange.size, 0)}%`,
+      top: `${Math.max(activeRange.offset, 0)}%`
+    } : {
+      top: 0,
+      height: '100%',
+      width: `${Math.max(activeRange.size, 0)}%`,
+      left: `${Math.max(activeRange.offset, 0)}%`
+    })
+  }), [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, trackRadius]);
+  const trackBackgroundStyle = (0, _react().useMemo)(() => orientation === 'vertical' ? [S.tv, {
     width: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor,
     alignSelf: 'center'
-  }] : [styles.trackHorizontal, {
+  }] : [S.th, {
     height: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor
   }], [orientation, resolvedInactiveColor, resolvedTrackHeight]);
   const isButtonFunction = (0, _validate.isFunction)(button);
-  const sharedThumb = isButtonFunction ? button({
+  const selectedThumb = isButtonFunction ? button({
     value: currentValue
   }) : button ?? thumb;
-  const leftThumbContent = leftButton ?? leftThumb ?? sharedThumb;
-  const rightThumbContent = rightButton ?? rightThumb ?? sharedThumb;
-  const resolveThumbContent = (0, _react().useCallback)((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb, [leftThumbContent, rightThumbContent, sharedThumb]);
-  const webGestureStyle = (0, _react().useMemo)(() => _reactNative().Platform.OS === 'web' ? {
+  const leftThumbContent = leftButton ?? leftThumb ?? selectedThumb;
+  const rightThumbContent = rightButton ?? rightThumb ?? selectedThumb;
+  const resolveThumbContent = (0, _react().useCallback)((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : selectedThumb, [leftThumbContent, rightThumbContent, selectedThumb]);
+  const webGestureStyle = _reactNative().Platform.OS === 'web' ? {
     touchAction: orientation === 'horizontal' ? 'pan-y' : 'pan-x',
     userSelect: 'none'
-  } : undefined, [orientation]);
-  const baseTrackPressableStyle = (0, _react().useMemo)(() => [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle], [orientation, webGestureStyle]);
+  } : undefined;
+  const baseTrackPressableStyle = [S.tp, orientation === 'vertical' ? S.tpv : null, webGestureStyle];
   const trackPressableStyleFn = (0, _react().useCallback)(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
   const trackPressableStyle = trackAriaStyle && (0, _validate.isFunction)(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle];
-  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
-    paddingVertical: tokens.spacing.containerPaddingVertical
-  }, orientation === 'vertical' && [styles.verticalContainer, {
-    minHeight: tokens.layout.verticalMinHeight,
-    width: tokens.layout.verticalWidth
+  const {
+    spacing: {
+      containerPaddingVertical
+    },
+    layout: {
+      verticalMinHeight,
+      verticalWidth
+    },
+    states: {
+      disabledOpacity
+    }
+  } = tokens;
+  const containerStyle = [S.c, {
+    paddingVertical: containerPaddingVertical
+  }, orientation === 'vertical' && [S.vc, {
+    minHeight: verticalMinHeight,
+    width: verticalWidth
   }], disabled && {
-    opacity: tokens.states.disabledOpacity
-  }, style], [disabled, orientation, style, tokens.layout.verticalMinHeight, tokens.layout.verticalWidth, tokens.spacing.containerPaddingVertical, tokens.states.disabledOpacity]);
+    opacity: disabledOpacity
+  }, style];
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    style: containerStyles,
+    style: containerStyle,
     onLayout: containerOnLayout
   }, rest), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.trackWrapper, orientation === 'vertical' && styles.trackWrapperVertical]
+    style: [S.tw, orientation === 'vertical' && S.twv]
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     ref: trackRef
   }, trackInteractionProps, {
     disabled: ariaDisabled,
-    onLayout: event => {
-      handleTrackLayout(event);
-      trackAriaOnLayout?.(event);
-    },
+    onLayout: onCombinedTrackLayout,
     style: trackPressableStyle
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.trackBase, {
-      borderRadius: tokens.track.radius
-    }, ...trackBaseStyle]
+    style: [S.tb, {
+      borderRadius: trackRadius
+    }, ...trackBackgroundStyle]
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.active, activeTrackStyle]
+    style: [S.a, activeTrackStyle]
   }))), values.map((_, index) => /*#__PURE__*/_react().default.createElement(ThumbNode, {
     key: `thumb-${index}`,
     index: index,
@@ -543,7 +566,7 @@ const Slider = props => {
     size: resolvedThumbSize,
     activeColor: resolvedActiveColor,
     content: resolveThumbContent(index, values.length),
-    visualPercent: thumbVisualPercents[index] ?? 0,
+    visualPercent: thumbVisualPercent[index] ?? 0,
     thumbBackgroundColor: tokens.colors.thumbBackground,
     thumbElevation: tokens.thumb.elevation,
     indicatorSize: tokens.thumb.indicatorSize,
@@ -552,61 +575,59 @@ const Slider = props => {
     enhanceHandlers: enhanceHandlers
   }))));
 };
-exports.Slider = Slider;
-const styles = _reactNative().StyleSheet.create({
-  container: {
+const S = _reactNative().StyleSheet.create({
+  c: {
     position: 'relative',
     justifyContent: 'center',
     width: '100%'
   },
-  verticalContainer: {
+  vc: {
     height: '100%',
     alignItems: 'center',
     paddingVertical: 0
   },
-  trackWrapper: {
+  tw: {
     width: '100%',
     justifyContent: 'center',
     position: 'relative'
   },
-  trackWrapperVertical: {
+  twv: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     width: '100%'
   },
-  trackPressable: {
+  tp: {
     width: '100%',
     justifyContent: 'center'
   },
-  trackPressableVertical: {
+  tpv: {
     flex: 1,
     alignItems: 'center'
   },
-  trackBase: {
+  tb: {
     overflow: 'hidden',
     position: 'relative'
   },
-  trackHorizontal: {
+  th: {
     width: '100%'
   },
-  trackVertical: {
+  tv: {
     height: '100%'
   },
-  active: {
+  a: {
     position: 'absolute'
   },
-  thumb: {
+  t: {
     position: 'absolute',
-    borderWidth: _reactNative().StyleSheet.hairlineWidth,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  thumbWrapper: {
+  thw: {
     position: 'absolute',
     alignItems: 'center',
     justifyContent: 'center'
   }
 });
-Slider.displayName = 'Slider';
+const Slider = exports.Slider = /*#__PURE__*/_react().default.memo(SliderImpl);
 var _default = exports.default = Slider;