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

Comparing version 1.0.24 to 1.0.25

package.json

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

src/components/SliderPicker.js

@@ -14,7 +14,6 @@ /**
  * @param {String} labelFontWeight - Optional. Sets font weight of labels if they are displayed.
+ * @param {String} maxLabel - Optional. Label for the maximum value.
+ * @param {Number} maxValue - Optional. The maximum value/high end of range for the Slider. Defaults to `10`.
  * @param {String} midLabel - Optional. Label for the medium value.
  * @param {String} minLabel - Optional. Label for the minimum value.
- * @param {Number} minValue - Optional. The minimum value/low end of range for the Slider. Defaults to `0`.
- * @param {String} maxLabel - Optional. Label for the maximum value.
- * @param {Number} maxValue - Optional. The maximum value/high end of range for the Slider. Defaults to `10`.
  * @param {String} scaleNumberFontColor - Optional. Sets font color of scale numbers if they are displayed. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "#6c7682".
@@ -109,3 +108,2 @@ * @param {String} scaleNumberFontWeight - Optional. Sets font weight of scale numbers if they are displayed.
     this.maxValue = this.props.maxValue ?  this.props.maxValue : 10;
-    this.maxLabel = this.props.maxLabel ?  this.labelGenerator(this.props.maxLabel, 'right') : this.emptyLabel;
     this.midLabel = this.props.midLabel ?  this.labelGenerator(this.props.midLabel, 'center') : this.emptyLabel;
@@ -149,8 +147,2 @@ this.minLabel = this.props.minLabel ? this.labelGenerator(this.props.minLabel, 'left') : this.emptyLabel;
 
-    // Get minOffset
-    const minOffset = (100 - this.widthPercentage) / 2;
-
-    console.log('this.maxValue: ', this.maxValue);
-    console.log('No manners here.');
-
     return (
@@ -198,2 +190,4 @@ // Wrapper for slider
         {this.generateNumbers()}
+
+        <Text>{this.state.currentValue}</Text>
   
@@ -275,3 +269,4 @@ </TouchableOpacity>
   handleSelectionFillWidth = () => {
-    return (vw(this.widthPercentage) * (this.state.currentValue / this.maxValue)) - (vh(1) * .5)
+    return (vw(this.widthPercentage) * (this.state.currentValue / (this.maxValue) )) - (vh(1) * .5);
+    // return (vw(this.widthPercentage) * (this.state.currentValue / (this.maxValue - 0) ));
   }
@@ -381,4 +376,4 @@
         // Initialize width variable to set the width of each TouchableHighlight.
-        // Default value is the rounded down - numbersContainers width divided by this.maxValue.
-        let width = Math.floor(vw(this.widthPercentage) / this.maxValue)
+        // Default value is the rounded down - numbersContainers width divided by this.maxValue - 0 (number of options).
+        let width = Math.floor(vw(this.widthPercentage) / (this.maxValue - 0));
         
@@ -385,0 +380,0 @@ // If first TouchableHighlight, add extra width to account for the width of separatorLine.

src/components/SliderPickerCursor.js

@@ -46,7 +46,10 @@ /**
     // Initialize empty array to store xOffsets in
-    this.numberOffsets = [];
+    this.offsetsMap = [];
 
     // Get x-axis positioning of each number/separator
     for (let i = 0; i <= this.maxValue; i++) {
-      this.numberOffsets.push(vw(85) * (i / this.maxValue));
+      this.offsetsMap.push({
+        offset: vw(85) * (i / this.maxValue),
+        value: i
+      });
     }
@@ -59,7 +62,10 @@
       // used to reference latestPosition of draggable view. Updated onPanResponderRelease.
-      latestPosition: this.startPosition * (this.defaultValue / this.maxValue)
+      latestPosition: this.getOffsetPosition(this.defaultValue)
     };
 
     // Initialize value to accomodate for width of button
-    this.state.drag.setValue({ x: (this.startPosition * (this.defaultValue / this.maxValue) - (vw(this.buttonDimensionsPercentage) * .5) ), y: 0 });
+    this.state.drag.setValue({ 
+      x: this.getOffsetPosition(this.defaultValue) - (vw(this.buttonDimensionsPercentage) * .5),
+      y: 0 
+    });
 
@@ -153,2 +159,15 @@ // Create panResponder, which is responsible for the dragging
   /** 
+   * Get offset value for start position based on value of this.defaultValue.
+   * @param {Number} defaultValue - Value of this.defaultValue, number where it should 
+   * @return {Number} offset value to be set in constructors set in x key of this.state.drag.setValue()
+   */
+  getOffsetPosition = (value) => {
+    let nearest = this.offsetsMap.filter(obj => {
+      return obj.value === value;
+    });
+
+    return nearest[0].offset;
+  }
+
+  /** 
    * Event handler for when panResponder touch event ends. Calculates final x-location of drag instance based on sum of gesture distance moved and the most recent position of the <SliderPickerCursor> component within the <Slider>. Executes callbacks to update state accordingly.
@@ -159,2 +178,3 @@ * @param {Object} gesture - The gestureState object passed as a param to each panResponder callback.
   panResponderReleaseHandler = (gesture) => {
+
     // Get the final value that user has dragged to.
@@ -166,21 +186,29 @@ let finalValue = gesture.dx + this.state.latestPosition;
     let updatedOffsetX;
-    let nearest;
 
     // If in bounds
     if (finalValue >= 0 && finalValue <= this.maxOffset) {
+      
+      // Get number/index of nearest
+      let nearestNumber = this.getNearestHandler(finalValue);
+      
       // Get x-positioning of nearest number
-      nearest = this.numberOffsets[this.getNearestHandler(finalValue)];
-      newPosition = nearest;
+      let nearestOffset = this.offsetsMap.filter(obj => {
+        return obj.value === nearestNumber
+      });
 
+      nearestOffset = nearestOffset[0].offset;
+
+      newPosition = nearestOffset;
+
       // If user returns to original position prior to this panResponder touch
-      if (nearest === this.state.latestPosition) {
+      if (nearestOffset === this.state.latestPosition) {
         updatedOffsetX = 0;
       }
       // If moved to the left, subtract 
-      else if (nearest < this.state.latestPosition) {
-        updatedOffsetX = (this.state.latestPosition - nearest) * -1
+      else if (nearestOffset < this.state.latestPosition) {
+        updatedOffsetX = (this.state.latestPosition - nearestOffset) * -1
       }
       // If moved to the right 
       else {
-        updatedOffsetX = nearest - this.state.latestPosition;
+        updatedOffsetX = nearestOffset - this.state.latestPosition;
       }
@@ -208,6 +236,9 @@ }
     this.releaseCallback(this.getNearestHandler(finalValue));
+
     // Move component to nearest 
     this.state.drag.setValue({ x: updatedOffsetX, y: 0 });
+
     // Update latestPosition
     this.setState({ latestPosition: newPosition });
+
     // Flatten offset on release to prevent bug on repeated drags
@@ -225,5 +256,10 @@ this.state.drag.flattenOffset();
     let nearestNumber = this.getNearestHandler(locationX);
+    
     // Get x-positioning of nearest number
-    let nearestOffset = this.numberOffsets[nearestNumber];
+    let nearestOffset = this.offsetsMap.filter(obj => {
+      return obj.value === nearestNumber
+    });
 
+    nearestOffset = nearestOffset[0].offset;
+
     // Execute props callback to lift state to <Slider>
@@ -247,11 +283,16 @@ this.releaseCallback(nearestNumber);
    */
-  getNearestHandler = (value) => {
+  getNearestHandler = (value) => {  
+    // If value is out of bounds, set either to 0 or maxValue
+    if (value >= this.maxOffset) {
+      return this.offsetsMap[this.offsetsMap.length - 1].value;
+    }
+    else if (value <= 0) {
+      return 0;
+    }
+
     // Get nearest value from array of xOffsets
-    const nearest = this.numberOffsets.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+    const nearest = this.offsetsMap.reduce((prev, curr) => Math.abs(curr.offset - value) < Math.abs(prev.offset - value) ? curr : prev);
     
-    // Get index of that value, equal to the number on the Slider
-    const nearestNumber = this.numberOffsets.indexOf(nearest);
-
-    return nearestNumber;
+    return nearest.value;
   }
 }

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

32495

increased by2.11%

Lines of code

673

increased by3.86%

No dependency changes