rn-range-slider - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

helpers.js

 export const isLowCloser = (downX, lowPosition, highPosition) => {
+  if (lowPosition === highPosition) {
+    return downX < lowPosition;
+  }
   const distanceFromLow = Math.abs(downX - lowPosition);
   const distanceFromHigh = Math.abs(downX - highPosition);
-  return distanceFromLow <= distanceFromHigh;
+  return distanceFromLow < distanceFromHigh;
 };
@@ -20,3 +23,3 @@
   }
-  return clamp(Math.round(min + relPosition / relStepUnit) * step, min, max);
+  return clamp(min + Math.round(relPosition / relStepUnit) * step, min, max);
 };

hooks.js

@@ -110,3 +110,3 @@ import React, { useCallback, useState, useRef, useMemo } from 'react';
   const { current: right } = useRef(new Animated.Value(0));
-  const update = () => {
+  const update = useCallback(() => {
     const { low, high, min, max } = inPropsRef.current;
@@ -119,3 +119,3 @@ const { current: containerWidth } = containerWidthRef;
     right.setValue(disableRange ? (containerWidth - thumbWidth) - leftValue : rightValue);
-  };
+  }, [inPropsRef, containerWidthRef, disableRange, thumbWidth, left, right]);
   const styles = useMemo(() => ({
@@ -122,0 +122,0 @@ position: 'absolute',

index.js

@@ -22,2 +22,3 @@ import React, { memo, useState, useEffect, useCallback, useMemo, useRef } from 'react';
     disableRange,
+    disabled,
     onValueChanged,
@@ -62,3 +63,3 @@ renderThumb,
     updateSelectedRail();
-    onValueChanged(low, high);
+    onValueChanged(low, high, false);
   }, [disableRange, inPropsRef, max, min, onValueChanged, thumbWidth, updateSelectedRail]);
@@ -117,2 +118,5 @@
     onPanResponderGrant: ({ nativeEvent }, gestureState) => {
+      if (disabled) {
+        return;
+      }
       const { numberActiveTouches } = gestureState;
@@ -150,3 +154,3 @@ if (numberActiveTouches > 1) {
         (isLow ? lowThumbX : highThumbX).setValue(absolutePosition);
-        onValueChanged(isLow ? value : low, isLow ? high : value);
+        onValueChanged(isLow ? value : low, isLow ? high : value, true);
         (isLow ? setLow : setHigh)(value);
@@ -165,3 +169,3 @@ labelUpdate && labelUpdate(gestureStateRef.current.lastPosition, value);
 
-    onPanResponderMove: Animated.event([null, { moveX: pointerX }], { useNativeDriver: false }),
+    onPanResponderMove: disabled ? undefined : Animated.event([null, { moveX: pointerX }], { useNativeDriver: false }),
 
@@ -171,3 +175,3 @@ onPanResponderRelease: () => {
     },
-  }), [pointerX, inPropsRef, thumbWidth, disableRange, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail]);
+  }), [pointerX, inPropsRef, thumbWidth, disableRange, disabled, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail]);
 
@@ -211,2 +215,3 @@ return (
   disableRange: PropTypes.bool,
+  disabled: PropTypes.bool,
   floatingLabel: PropTypes.bool,
@@ -223,2 +228,3 @@ renderLabel: PropTypes.func,
   disableRange: false,
+  disabled: false,
   floatingLabel: false,
@@ -225,0 +231,0 @@ onValueChanged: noop,

package.json

 {
   "name": "rn-range-slider",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "author": "Tigran Sahakyan <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "A highly optimized pure JS implementation of Range Slider for React Native",

README.md

@@ -78,2 +78,3 @@ # RangeSlider
 | `disableRange` | Slider works as an ordinary slider with 1 control if `true` | boolean | `false` |
+| `disabled` | Any user interactions will be ignored if `true` | boolean | `false` |
 | `allowLabelOverflow` | If set to `true`, labels are allowed to be drawn outside of slider component's bounds.<br/>Otherwise label's edges will never get out of component's edges. | boolean | `false` |
@@ -85,3 +86,3 @@ | `renderThumb` | Should render the thumb. | `() => Node` | _**required**_ |
 | `renderNotch` | Should render the notch below the label (above the thumbs).<br/>Classic notch is a small triangle below the label.<br/>If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.| `() => Node` | `undefined` |
-| `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
+| `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored.<br/>`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` |
 
@@ -88,0 +89,0 @@ All the other props (e.g. style) will be passed to root container component.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22096

increased by2.27%

Lines of code

394

increased by2.34%

Number of lines in readme file

96

increased by1.05%

No dependency changes