react-native-slider-picker - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

package.json

 {
   "name": "react-native-slider-picker",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Custom range slide picker for React Native.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -20,9 +20,10 @@ ## React Native Slider Picker
 **Functional Props:**
-| Name                 | Type     | Description                                                        | Default    | Notes                                                                                 |
-|----------------------|----------|--------------------------------------------------------------------|------------|---------------------------------------------------------------------------------------|
-| `callback`           | Function | Called on change.                                                  | `() => {}` |                                                                                       |
-| `defaultValue`       | Number   | Default value for slider on load                                   | `5`        | If valued passed is greater than maxValue, the value will be set to that of maxValue. |
-| `maxValue`           | Number   | The maximum value/high end of range for the Slider.                | `10`       |                                                                                       |
-| `slideBeginCallback` | Function | Callback function to be executed when Slider's touch event begins. | `() => {}` | Called in `onPanResponderGrant` property  of `panResponder`                           |
-
+| Name                                | Type     | Description                                                                                                                                                                                                                         | Default    | Notes                                                                                     |
+|-------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|-------------------------------------------------------------------------------------------|
+| callback                            | Function | Called on change.                                                                                                                                                                                                                   | `() => {}` |                                                                                           |
+| convertToNumericInputOnScreenReader | Boolean  | Determines if the component should be converted to a numeric typed `<TextInput>` component.                                                                                                                                         | `true`     |                                                                                           |
+| defaultValue                        | Number   | Default value for slider on load.                                                                                                                                                                                                   | `5`        | If valued passed is greater than `maxValue`, the value will be set to that of `maxValue`. |
+| errorToleranceMargin                | Number   | Margin of error for user to move drag off of the cursor along the Y Axis of the screen/component. If user drags beyond this amount of units in either vertical direction the PanResponder event will not update position of cursor. | `50`       | Is checked to ensure a `Number` type is passed that is greater than `0`.                  |
+| maxValue                            | Number   | The maximum value/high end of range for the Slider.                                                                                                                                                                                 | `10`       |                                                                                           |
+| slideBeginCallback                  | Function | Callback function to be executed when Slider's touch event begins.                                                                                                                                                                  | `() => {}` | Called in `onPanResponderGrant` property of `panResponder`                                |
    
@@ -29,0 +30,0 @@ **General Style Props:**

src/components/SliderPicker.js

@@ -15,2 +15,3 @@ /**
  * @param {Number} defaultValue - Optional. Default value. Defaults to `5`. If valued passed is greater than maxValue, the value will be set to that of maxValue.
+ * @param {Number} errorToleranceMargin - Optional. Defaults to `50`. Margin of error for user to move drag off of the cursor along the Y Axis of the screen/component. If user drags beyond this amount of units in either vertical direction the PanResponder event will not update position of cursor. Is checked to ensure a `Number` type is passed that is greater than `0`.
  * @param {String} fillColor - Optional. Sets fill color of inner slider. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dodgerblue"`.
@@ -129,3 +130,9 @@ * @param {Number} heightPercentage - Optional. Percentage of device's viewport to set as component's height. Defaults to `1`.
     this.slideBeginCallback = this.props.slideBeginCallback ? this.props.slideBeginCallback : () => {};
+    this.errorToleranceMargin = this.props.errorToleranceMargin ? this.props.errorToleranceMargin : 50;
 
+    // Make sure that value of errorToleranceMargin is a Number greater than 0
+    if (isNaN(this.errorToleranceMargin) || this.errorToleranceMargin < 0) {
+      this.errorToleranceMargin = null;
+    }
+
     //
@@ -306,2 +313,3 @@ // General Styling Props checking
             slideBeginCallback={() => this.slideBeginCallback()}
+            errorToleranceMargin={this.errorToleranceMargin}
           />
@@ -308,0 +316,0 @@ </View>

src/components/SliderPickerCursor.js

@@ -8,5 +8,6 @@ /**
  * @param {String} buttonBorderColor - Optional. Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dimgrey"`.
- * @param {Number} defaultValue - Optional. Default value the cursor will be placed in <StyledSliderPicker> on.
- * @param {Number} maxOffset - Optional. X-axis coordinates of right-edge of <StyledSliderPicker>. Component cannot be draggeed right past this point.
- * @param {Number} nonDraggablePressLocation - X-axis location of user press within <StyledSlidePicker>. Combined with triggerNonDraggablePress, determines whether or not handler function should be called for user presses within the parent component. 
+ * @param {Number} defaultValue - Optional. Default value the cursor will be placed in <SliderPicker> on.
+ * @param {Number} errorToleranceMargin - Optional. Defaults to `50` in `<SliderPicker>`. Margin of error for user to move drag off of the cursor along the Y Axis of the screen/component. If user drags beyond this amont of units in either vertical direction the PanResponder event will not update position of cursor. Is checked to ensure a `Number` type is passed that is greater than `0`.
+ * @param {Number} maxOffset - Optional. X-axis coordinates of right-edge of <SliderPicker>. Component cannot be draggeed right past this point.
+ * @param {Number} nonDraggablePressLocation - X-axis location of user press within <SliderPicker>. Combined with triggerNonDraggablePress, determines whether or not handler function should be called for user presses within the parent component. 
  * @param {Function} releaseCallback - Optional. Called when touch/gesture of component ends either by user releasing their finger, the panResponder event being terminated by the user's touch leaving the component, or when the user presses within the parent component.
@@ -42,2 +43,3 @@ * @param {Function} slideBeginCallback  - Optional. Callback function to be executed when Slider's touch event begins. Called in `onPanResponderGrant` property of the component's `panResponder`. Defaults to `() => {}`.
     this.slideBeginCallback = this.props.slideBeginCallback ? this.props.slideBeginCallback : () => {};
+    this.errorToleranceMargin = this.props.errorToleranceMargin ? this.props.errorToleranceMargin : null;
 
@@ -77,3 +79,5 @@ // Check override style props
       // used to reference latestPosition of draggable view. Updated onPanResponderRelease.
-      latestPosition: this.getOffsetPosition(this.defaultValue)
+      latestPosition: this.getOffsetPosition(this.defaultValue),
+      // Used to set state on drag if user drags past Y axis threshold.
+      xOffsetAtToleranceMarginSurpassed: null
     };
@@ -142,3 +146,4 @@
     // If user triggered a button press and we have x location of event
-    if (prevProps.triggerNonDraggablePress !== this.props.triggerNonDraggablePress && prevProps.nonDraggablePressLocation !== this.props.nonDraggablePressLocation) {
+    if (prevProps.triggerNonDraggablePress !== this.props.triggerNonDraggablePress &&
+        prevProps.nonDraggablePressLocation !== this.props.nonDraggablePressLocation) {
       this.nonDraggablePressHandler(this.props.nonDraggablePressLocation);
@@ -154,5 +159,6 @@ }
     this.props.slideBeginCallback();
-    // Set offset and value of state.drag to prevent Animated.View from returning to 0 coordinates 
+    // Set offset state.drag to prevent Animated.View from returning to 0 coordinates 
     // when it is moved again.
     this.state.drag.setOffset({x: this.state.drag.x._value, y: this.state.drag.y._value});
+    // Set value to 0/0 to prevent AnimatedView from "jumping" on start of drag. Stabilizes the component.
     this.state.drag.setValue({x: 0, y: 0})
@@ -169,5 +175,22 @@ }
     let finalValue = gesture.dx + this.state.latestPosition;
+
+    // If user has dragged past the yAxis threshold, cancel event
+    if (this.errorToleranceMargin && 
+        (gesture.dy > this.errorToleranceMargin || gesture.dy < (this.errorToleranceMargin * -1) )) {
+      // If there isn't already a value in state for xOffsetAtToleranceMarginSurpassed
+      if (!this.state.xOffsetAtToleranceMarginSurpassed) {
+        // Set value in state
+        this.setState({ xOffsetAtToleranceMarginSurpassed: gesture.dx });
+      }
+      // End function
+      return null;
+    }
     
     // If finalValue is in of slider, update state.drag to appropriate position
     if (finalValue >= 0 && finalValue <= (this.maxOffset) ) {
+      // If there was value set when user dragged out of bounds vertically
+      if (this.state.xOffsetAtToleranceMarginSurpassed) {
+        // Clear that value in state
+        this.setState({ xOffsetAtToleranceMarginSurpassed: null });
+      }
       this.state.drag.setValue({ x: gesture.dx, y: 0 });
@@ -200,2 +223,10 @@ }
 
+    // If touch event ended while user was passed y threshold
+    if (this.state.xOffsetAtToleranceMarginSurpassed) {
+      // Update value to that of state.xOffsetAtYThreshould + state.latestPosition
+      finalValue = this.state.xOffsetAtToleranceMarginSurpassed + this.state.latestPosition;
+      // Clear value for xOffsetAtToleranceMarginSurpassed
+      this.setState({ xOffsetAtToleranceMarginSurpassed: null });
+    }
+
     // Initialize variabels to be used in business logic and update state.
@@ -202,0 +233,0 @@ let newPosition;

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

69379

increased by6.89%

Lines of code

1011

increased by3.91%

Number of lines in readme file

188

increased by0.53%

No dependency changes