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

Comparing version 1.0.26 to 1.0.27

package.json

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

src/components/SliderPicker.js

@@ -22,2 +22,3 @@ /**
  * @param {Boolean} showNumberScale - Optional. Boolean value to determine whether or not to display scale of numbers for the Slider's range. Defaults to `false`.
+ * @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 {Number} width - Optional. Percentage of device's viewport to set as component's width. TO DO: Set minimum and maximum
@@ -114,2 +115,4 @@ */
     this.showSeparatorScale = this.props.showSeparatorScale ? this.props.showSeparatorScale : false;
+    this.sliderInnerBackgroundColor = this.props.sliderInnerBackgroundColor ? this.props.sliderInnerBackgroundColor : 'white';
+    this.sliderInnerBorderStyles = this.props.sliderInnerBorderStyles ? this.props.sliderInnerBorderStyles : {};
     this.widthPercentage = this.props.widthPercentage ? this.props.widthPercentage : 85;
@@ -132,2 +135,3 @@
 
+    // Sets styles pre-render
     this.setPreRenderStyles();
@@ -145,5 +149,3 @@ }
 
-    // 
-    // Work on a copy of styles.selection to modify programmatically below
-    //
+    // Make copy of styles.selectionFill to modify programmatically below
     let selectionFillStyles = Object.assign({}, styles.selectionFill);
@@ -155,2 +157,9 @@
 
+    // Make copy of styles.sliderInner to modify programmatically below
+    let sliderInnerStyles = Object.assign({}, styles.sliderInner);
+
+    // Set height of sliderInnerStyles based on props.heightPercentage
+    sliderInnerStyles['height'] = vh(this.heightPercentage);
+    sliderInnerStyles['backgroundColor'] = this.sliderInnerBackgroundColor;
+
     return (
@@ -172,3 +181,3 @@ // Wrapper for slider
         {/* Slider itself */}
-        <View style={styles.sliderInner}>
+        <View style={[sliderInnerStyles, this.sliderInnerBorderStyles]}>
 
@@ -206,5 +215,7 @@ {/* Styled "fill" bar */}
    * Helper method to call any other styling-related helper methods that must be called before component is rendered. 
+   * @return {null}
    */
   setPreRenderStyles = () => {
     this.setLabelAndLabelContainerStyles();
+    this.filterSliderInnerBorderStyles();
   }
@@ -214,2 +225,3 @@
    * Helper method to set to set styles on labels and container and labels depending on props.
+   * @return {null}
    */
@@ -229,2 +241,20 @@ setLabelAndLabelContainerStyles = () => {
   /** 
+   * Helper method to filter out any key/value pairs from sliderInnerBorderStyles that are not for a component's border.
+   * @return {null}
+   */
+  filterSliderInnerBorderStyles = () => {
+    // Get all keys in style object
+    let keys = Object.keys(this.sliderInnerBorderStyles);
+
+    // Loop through keys
+    for (let i = 0; i < keys.length; i++) {
+      // If key doesn't include "border"
+      if (!(keys[i].includes('border'))) {
+        // Delete it from the object
+        delete this.sliderInnerBorderStyles[keys[i]];
+      }
+    }
+  }
+
+  /** 
    * Helper method to determine whether or not valued passed to props.defaultValue is a Number and within the range of the slider scale.
@@ -279,3 +309,2 @@ * @param {Number} value - The value passed to props.defaultValue
     return (vw(this.widthPercentage) * (this.state.currentValue / (this.maxValue) )) - (vh(1) * .5);
-    // return (vw(this.widthPercentage) * (this.state.currentValue / (this.maxValue - 0) ));
   }
@@ -371,4 +400,6 @@
 
+    // Make copy of styles.buttonNumber to modify programmatically
     let numberStyle = Object.assign({}, styles.buttonNumber);
 
+    // Set numberStyle properties based on respective props
     numberStyle['color'] = this.scaleNumberFontColor;
@@ -416,3 +447,6 @@ numberStyle['fontWeight'] = this.scaleNumberFontWeight;
 const styles = StyleSheet.create({
-  wrapper: { // Component level wrapper
+  //
+  // Component level wrapper. TouchableOpacity component
+  //
+  wrapper: {
     width: vw(85),
@@ -445,11 +479,9 @@ justifyContent: 'center',
     height: vh(1),
-    borderWidth: vw(1) / 2,
-    borderColor: colors['second-color--'],
-    borderBottomColor: colors['second-color-'],
-    borderRadius: 50,
-    backgroundColor: colors['second-color'],
     zIndex: 20,
     elevation: 20
   },
-  separatorContainer: { // Container for separator lines, layered behind the sliderContainer
+  //
+  // Container for separator lines, layered behind the sliderContainer. View component
+  //
+  separatorContainer: {
     width: vw(85),
@@ -462,3 +494,6 @@ flexDirection: 'row',
   },
-  separatorLine: { // The separatorLine View components
+  //
+  // Lines separating each "section" of the slider. View components.
+  //
+  separatorLine: {
     height: vw(6),
@@ -470,3 +505,6 @@ borderLeftWidth: vw(1) / 3,
   },
-  selectionFill: { // The yellow-colored bar indicating with with dependent on currently-picked value.
+  //
+  // The styled indication bar. Width is dependent on currently-picked value. View component
+  //
+  selectionFill: {
     borderRadius: 50,
@@ -477,3 +515,6 @@ height: vw(2) * .65,
   },  
-  numberContainer: { // Container for numbers
+  //
+  // Container for numbers. View component
+  //
+  numberContainer: {
     flexDirection: 'row',
@@ -489,3 +530,6 @@ justifyContent: 'center',
   },
-  buttonTouchable: { // Each button's TouchableHighlight area 
+  //
+  // Each number button's container. TouchableHighlight component.
+  //
+  buttonTouchable: {
     alignItems: 'center',
@@ -495,3 +539,6 @@ zIndex: 20,
   },
-  buttonNumber: { // Text of button number
+  //
+  // Text of button number. Text component
+  //
+  buttonNumber: {
     color: colors['first-color-'],
@@ -498,0 +545,0 @@ fontWeight: 'bold',

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

34090

increased by4.74%

Lines of code

718

increased by6.37%

No dependency changes