react-native-ui-lib 8.4.0-snapshot.7827 → 8.4.0-snapshot.7835

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.4.0-snapshot.7827",
+  "version": "8.4.0-snapshot.7835",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/slider/Thumb.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, ViewProps, View as RNView } from 'react-native';
+import { ViewStyle, ViewProps, View as RNView, Animated } from 'react-native';
 export interface ThumbProps extends ViewProps {
     /**
      * The thumb style
@@ -27,6 +27,10 @@ export interface ThumbProps extends ViewProps {
     disabled?: boolean;
     /** ref to thumb component */
     ref?: React.RefObject<RNView>;
+    /**
+     * External scale animation value (used by useRelativeDrag)
+     */
+    scaleAnimation?: Animated.Value;
 }
 declare const Thumb: React.ForwardRefExoticComponent<Omit<ThumbProps, "ref"> & React.RefAttributes<unknown>>;
 export default Thumb;

package/src/components/slider/Thumb.js

@@ -18,6 +18,7 @@ const Thumb = forwardRef((props, ref) => {
     thumbHitSlop,
     onTouchStart,
     onTouchEnd,
+    scaleAnimation,
     ...others
   } = props;
   const thumbRef = useCombinedRefs(ref);
@@ -82,7 +83,7 @@ const Thumb = forwardRef((props, ref) => {
     backgroundColor: disabled ? DEFAULT_COLOR : thumbTintColor || ACTIVE_COLOR
   }, {
     transform: [{
-      scale: thumbScaleAnimation.current
+      scale: scaleAnimation ?? thumbScaleAnimation.current
     }]
   }]} />;
 });

package/src/components/slider/index.js

@@ -57,6 +57,7 @@ class Slider extends PureComponent {
     height: THUMB_SIZE
   };
   _containerDragInitialValue = 0;
+  _containerThumbScale = new Animated.Value(1);
   constructor(props) {
     super(props);
     this.activeThumbRef = this.thumb;
@@ -216,6 +217,7 @@ class Slider extends PureComponent {
   };
   handleContainerGrant = () => {
     this._containerDragInitialValue = this.getValueForX(this._x);
+    this.animateContainerThumbScale(1.5);
     this.onSeekStart();
   };
   handleContainerMove = (_e, gestureState) => {
@@ -238,8 +240,16 @@ class Slider extends PureComponent {
   };
   handleContainerEnd = () => {
     this.bounceToStep();
+    this.animateContainerThumbScale(1);
     this.onSeekEnd();
   };
+  animateContainerThumbScale = toValue => {
+    Animated.timing(this._containerThumbScale, {
+      toValue,
+      duration: 100,
+      useNativeDriver: true
+    }).start();
+  };
 
   /* Actions */
 
@@ -576,7 +586,8 @@ class Slider extends PureComponent {
       disableActiveStyling,
       disabled,
       thumbTintColor,
-      thumbHitSlop
+      thumbHitSlop,
+      useRelativeDrag
     } = this.props;
     const {
       thumbSize
@@ -596,7 +607,8 @@ class Slider extends PureComponent {
       activeThumbStyle,
       disableActiveStyling,
       thumbHitSlop: thumbHitSlop ?? calculatedHitSlop,
-      onLayout: this.onThumbLayout
+      onLayout: this.onThumbLayout,
+      scaleAnimation: useRelativeDrag ? this._containerThumbScale : undefined
     };
   };
 

package/src/incubator/slider/Thumb.d.ts

@@ -19,6 +19,7 @@ interface ThumbProps extends ViewProps {
     onSeekStart?: () => void;
     onSeekEnd?: () => void;
     enableShadow?: boolean;
+    isActive?: SharedValue<boolean>;
 }
 declare const Thumb: (props: ThumbProps) => React.JSX.Element;
 export default Thumb;

package/src/incubator/slider/Thumb.js

@@ -31,7 +31,9 @@ const Thumb = props => {
     stepInterpolatedValue,
     gap = 0,
     secondary,
-    enableShadow
+    enableShadow,
+    pointerEvents,
+    isActive
   } = props;
   const rtlFix = Constants.isRTL ? -1 : 1;
   const isPressed = useSharedValue(false);
@@ -40,7 +42,7 @@ const Thumb = props => {
     height: THUMB_SIZE
   });
   const lastOffset = useSharedValue(0);
-  const gesture = Gesture.Pan().onBegin(() => {
+  const gesture = Gesture.Pan().hitSlop(hitSlop ?? DEFAULT_THUMB_HIT_SLOP).onBegin(() => {
     onSeekStart?.();
     isPressed.value = true;
     lastOffset.value = offset.value;
@@ -64,15 +66,16 @@ const Thumb = props => {
       offset.value = Math.round(offset.value / stepInterpolatedValue.value) * stepInterpolatedValue.value;
     }
   });
-  gesture.enabled(!disabled);
+  gesture.enabled(!disabled && pointerEvents !== 'none');
   const animatedStyle = useAnimatedStyle(() => {
-    const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
+    const active = isPressed.value || isActive?.value;
+    const customStyle = active ? activeStyle?.value : defaultStyle?.value;
     return {
       ...customStyle,
       transform: [{
         translateX: (offset.value - thumbSize.value.width / 2) * rtlFix
       }, {
-        scale: withSpring(!disableActiveStyling && isPressed.value ? 1.3 : 1)
+        scale: withSpring(!disableActiveStyling && active ? 1.3 : 1)
       }]
     };
   });
@@ -86,7 +89,7 @@ const Thumb = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return <GestureDetector gesture={gesture}>
-      <View reanimated style={[styles.thumbPosition, enableShadow && styles.thumbShadow, animatedStyle]} hitSlop={hitSlop} onLayout={onThumbLayout} />
+      <View reanimated pointerEvents={pointerEvents} style={[styles.thumbPosition, enableShadow && styles.thumbShadow, animatedStyle]} hitSlop={hitSlop} onLayout={onThumbLayout} />
     </GestureDetector>;
 };
 const styles = StyleSheet.create({

package/src/incubator/slider/index.d.ts

@@ -126,6 +126,11 @@ export interface SliderProps extends AccessibilityProps {
      * Whether to use the new Slider implementation using Reanimated
      */
     migrate?: boolean;
+    /**
+     * If true, dragging anywhere on the slider moves the thumb relative to its current position
+     * instead of snapping to the touch point. Designed for single-thumb mode.
+     */
+    useRelativeDrag?: boolean;
     /**
      * Control the throttle time of the onValueChange and onRangeChange callbacks
      */

package/src/incubator/slider/index.js

@@ -2,13 +2,14 @@ import _throttle from "lodash/throttle";
 import React, { useImperativeHandle, useCallback, useMemo, useEffect, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useSharedValue, useAnimatedStyle, runOnJS, useAnimatedReaction, withTiming } from 'react-native-reanimated';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { GestureHandlerRootView, GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { forwardRef, Constants } from "../../commons/new";
 import { extractAccessibilityProps } from "../../commons/modifiers";
 import { Colors, Spacings } from "../../style";
 import { StyleUtils } from "../../utils";
 import { useThemeProps, useDidUpdate } from "../../hooks";
 import { validateValues, getOffsetForValue, getValueForOffset, getStepInterpolated } from "./SliderPresenter";
+import View from "../../components/view";
 import Thumb from "./Thumb";
 import Track from "./Track";
 var ThumbType = /*#__PURE__*/function (ThumbType) {
@@ -54,6 +55,7 @@ const Slider = React.memo(props => {
     accessible = true,
     testID,
     enableThumbShadow = true,
+    useRelativeDrag,
     throttleTime = 200
   } = themeProps;
   const accessibilityProps = useMemo(() => {
@@ -215,6 +217,36 @@ const Slider = React.memo(props => {
       runOnJS(onSeekEnd)();
     }
   };
+  const containerDragStartOffset = useSharedValue(0);
+  const isContainerDragging = useSharedValue(false);
+  const clampOffset = offset => {
+    'worklet';
+
+    return Math.max(0, Math.min(trackSize.value.width, offset));
+  };
+  const snapToStep = () => {
+    'worklet';
+
+    if (shouldBounceToStep) {
+      const step = stepInterpolatedValue.value;
+      defaultThumbOffset.value = Math.round(defaultThumbOffset.value / step) * step;
+    }
+  };
+  const containerGesture = Gesture.Pan().onBegin(() => {
+    containerDragStartOffset.value = defaultThumbOffset.value;
+    isContainerDragging.value = true;
+    _onSeekStart();
+  }).onUpdate(e => {
+    if (trackSize.value.width === 0) {
+      return;
+    }
+    const dx = e.translationX * (shouldDisableRTL ? 1 : rtlFix);
+    defaultThumbOffset.value = clampOffset(containerDragStartOffset.value + dx);
+  }).onEnd(() => _onSeekEnd()).onFinalize(() => {
+    isContainerDragging.value = false;
+    snapToStep();
+  });
+  containerGesture.enabled(!disabled && !!useRelativeDrag);
   const trackAnimatedStyles = useAnimatedStyle(() => {
     if (useRange) {
       return {
@@ -236,15 +268,22 @@ const Slider = React.memo(props => {
 
   /** renders */
   const renderThumb = type => {
-    return <Thumb start={type === ThumbType.DEFAULT ? start : defaultThumbOffset} end={type === ThumbType.DEFAULT ? rangeThumbOffset : end} offset={type === ThumbType.DEFAULT ? defaultThumbOffset : rangeThumbOffset} gap={rangeGap} secondary={type !== ThumbType.DEFAULT} onSeekStart={_onSeekStart} onSeekEnd={_onSeekEnd} shouldDisableRTL={shouldDisableRTL} disabled={disabled} disableActiveStyling={disableActiveStyling} defaultStyle={_thumbStyle} activeStyle={_activeThumbStyle} hitSlop={thumbHitSlop} shouldBounceToStep={shouldBounceToStep} stepInterpolatedValue={stepInterpolatedValue} enableShadow={enableThumbShadow} />;
+    return <Thumb start={type === ThumbType.DEFAULT ? start : defaultThumbOffset} end={type === ThumbType.DEFAULT ? rangeThumbOffset : end} offset={type === ThumbType.DEFAULT ? defaultThumbOffset : rangeThumbOffset} gap={rangeGap} secondary={type !== ThumbType.DEFAULT} onSeekStart={_onSeekStart} onSeekEnd={_onSeekEnd} shouldDisableRTL={shouldDisableRTL} disabled={disabled} pointerEvents={useRelativeDrag ? 'none' : undefined} isActive={useRelativeDrag ? isContainerDragging : undefined} disableActiveStyling={disableActiveStyling} defaultStyle={_thumbStyle} activeStyle={_activeThumbStyle} hitSlop={thumbHitSlop} shouldBounceToStep={shouldBounceToStep} stepInterpolatedValue={stepInterpolatedValue} enableShadow={enableThumbShadow} />;
   };
   const _renderTrack = () => {
-    return <Track renderTrack={renderTrack} onLayout={onTrackLayout} onPress={onTrackPress} animatedStyle={trackAnimatedStyles} disabled={disabled} maximumTrackTintColor={maximumTrackTintColor} minimumTrackTintColor={minimumTrackTintColor} trackStyle={trackStyle} />;
+    return <Track renderTrack={renderTrack} onLayout={onTrackLayout} onPress={useRelativeDrag ? undefined : onTrackPress} animatedStyle={trackAnimatedStyles} disabled={disabled} maximumTrackTintColor={maximumTrackTintColor} minimumTrackTintColor={minimumTrackTintColor} trackStyle={trackStyle} />;
   };
-  return <GestureHandlerRootView style={[styles.container, containerStyle, shouldDisableRTL && styles.disableRTL]} testID={testID} {...accessibilityProps}>
+  const renderSliderContent = () => <>
       {_renderTrack()}
       {renderThumb(ThumbType.DEFAULT)}
       {useRange && renderThumb(ThumbType.RANGE)}
+    </>;
+  return <GestureHandlerRootView style={[styles.container, containerStyle, shouldDisableRTL && styles.disableRTL]} testID={testID} {...accessibilityProps}>
+      {useRelativeDrag ? <GestureDetector gesture={containerGesture}>
+          <View style={styles.gestureContainer}>
+            {renderSliderContent()}
+          </View>
+        </GestureDetector> : renderSliderContent()}
     </GestureHandlerRootView>;
 });
 Slider.displayName = 'Incubator.Slider';
@@ -254,6 +293,10 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE + SHADOW_RADIUS,
     justifyContent: 'center'
   },
+  gestureContainer: {
+    flex: 1,
+    justifyContent: 'center'
+  },
   disableRTL: {
     transform: [{
       scaleX: -1