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

Comparing version 1.0.27 to 1.0.28

package.json

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

src/components/SliderPicker.js

@@ -23,2 +23,3 @@ /**
  * @param {String} sliderInnerBackgroundColor - Optional. Sets background color of inner slider View. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "white".
+ * @param {Object} sliderInnerBorderStyles - Optional. An object of StyleSheet properties to set border-related styles of sliderInner View component. If passed, the object is filtered to remove any key/value properties that aren't for component's border. Defaults to {}.
  * @param {Number} width - Optional. Percentage of device's viewport to set as component's width. TO DO: Set minimum and maximum
@@ -39,39 +40,2 @@ */
 //------------------------------------------------------------------------------
-// File-level constants
-//------------------------------------------------------------------------------
-const colors  = {
-
-  // Black/Dark Gray hues
-  "first-color": "#000",
-  "first-color-": "#6c7682",
-  "first-color--": "#8d969f",
-  "first-color---": "#889cb2",
-  
-  // White/Gray hues   
-  "second-color": "#ffffff",
-  "second-color-": "#f1f4f5",
-  "second-color--": "#d9dce4",
-  "second-color---": "#a5afae",
-  "second-color----": "#949d9c",
-
-  // Yellow hues
-  "third-color": '#feb53f',
-  "third-color-": "#f59d1a",
-  "third-color--": "#ddb274",
-
-  // Blue hues
-  "fourth-color": "#32c6de",
-  "fourth-color-": "#19b7d6",
-  "fourth-color--": "#22899b",
-  "fourth-color---": "#3696a6",
-
-  // Red hues
-  "fifth-color": "#f43248",
-  "fifth-color-": "#f6575f",
-
-  // Green hues
-  "sixth-color": "#69af39",
-}
-
-//------------------------------------------------------------------------------
 // Component
@@ -95,6 +59,14 @@ //------------------------------------------------------------------------------
 
+    // Default border styles in case nothing is passed.
+    this.defaultSliderInnerBorderStyles = {
+      borderWidth: vw(1) / 2,
+      borderColor: '#d9dce4', 
+      borderBottomColor: '#f1f4f5',
+      borderRadius: 50,
+    }
+
     //
     // Props checking
     //
-    this.buttonBackgroundColor =  this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : colors['first-color'];
+    this.buttonBackgroundColor =  this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : 'black';
     this.buttonBorderColor =  this.props.buttonBorderColor ? this.props.buttonBorderColor : this.buttonBackgroundColor;
@@ -105,5 +77,5 @@ this.buttonBorderWidth = this.props.buttonBorderWidth ? this.props.buttonBorderWidth : 1;
     this.defaultValue = this.defaultValueCheckHandler(this.props.defaultValue) ? this.props.defaultValue : 5;
-    this.fillColor =  this.props.fillColor ? this.props.fillColor : colors['fourth-color'];
+    this.fillColor =  this.props.fillColor ? this.props.fillColor : 'dodgerblue';
     this.heightPercentage =  this.props.heightPercentage ? this.props.heightPercentage : 1;
-    this.labelFontColor = this.props.labelFontColor ? this.props.labelFontColor : colors['first-color-'];
+    this.labelFontColor = this.props.labelFontColor ? this.props.labelFontColor : 'dimgrey';
     this.labelFontWeight = this.props.labelFontWeight ? this.props.labelFontWeight : '';
@@ -114,3 +86,3 @@ this.maxLabel = this.props.maxLabel ?  this.labelGenerator(this.props.maxLabel, 'right') : this.emptyLabel;
     this.minLabel = this.props.minLabel ? this.labelGenerator(this.props.minLabel, 'left') : this.emptyLabel;
-    this.scaleNumberFontColor = this.props.scaleNumberFontColor ? this.props.scaleNumberFontColor : colors['first-color-'];
+    this.scaleNumberFontColor = this.props.scaleNumberFontColor ? this.props.scaleNumberFontColor : 'dimgrey';
     this.showFill = this.props.showFill === false ? false : true;
@@ -120,3 +92,3 @@ this.showNumberScale = this.props.showNumberScale ? this.props.showNumberScale : false;
     this.sliderInnerBackgroundColor = this.props.sliderInnerBackgroundColor ? this.props.sliderInnerBackgroundColor : 'white';
-    this.sliderInnerBorderStyles = this.props.sliderInnerBorderStyles ? this.props.sliderInnerBorderStyles : {};
+    this.sliderInnerBorderStyles = this.props.sliderInnerBorderStyles ? this.props.sliderInnerBorderStyles : this.defaultSliderInnerBorderStyles;
     this.widthPercentage = this.props.widthPercentage ? this.props.widthPercentage : 85;
@@ -130,2 +102,7 @@
 
+    // Make sure that defaultValue isn't out of range
+    if (this.defaultValue > this.maxValue) {
+      this.defaultValue = this.maxValue;
+    }
+
     //
@@ -494,3 +471,3 @@ // Initialize state variables
     borderLeftWidth: vw(1) / 3,
-    borderLeftColor: colors['second-color--'],
+    borderLeftColor: 'gainsboro',
     left: 2,
@@ -506,3 +483,2 @@ position: 'relative',
     position: 'absolute',
-    // backgroundColor: colors['third-color']
   },  
@@ -535,5 +511,5 @@ //
   buttonNumber: {
-    color: colors['first-color-'],
+    color: 'dimgray',
     fontWeight: 'bold',
   }
 });

src/components/SliderPickerCursor.js

@@ -32,4 +32,4 @@ /**
     // Props checking
-    this.buttonBackgroundColor =  this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : "#000";
-    this.buttonBorderColor =  this.props.buttonBorderColor ? this.props.buttonBorderColor : "#000";
+    this.buttonBackgroundColor =  this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : 'black';
+    this.buttonBorderColor =  this.props.buttonBorderColor ? this.props.buttonBorderColor : 'black';
     this.buttonBorderWidth = this.props.buttonBorderWidth ? this.props.buttonBorderWidth : 1;
@@ -43,2 +43,7 @@ this.buttonDimensionsPercentage = this.props.buttonDimensionsPercentage ? this.props.buttonDimensionsPercentage : 6;
 
+    // Make sure that defaultValue isn't out of range
+    if (this.defaultValue > this.maxValue) {
+      this.defaultValue = this.maxValue;
+    }
+    
     // Initialize empty array to store xOffsets in
@@ -45,0 +50,0 @@ this.offsetsMap = [];

No alert changes

Worsened metrics

Total package byte prevSize

33909

decreased by-0.53%

Lines of code

703

decreased by-2.09%

No dependency changes