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

Comparing version 1.0.20 to 1.0.21

package.json

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

src/components/SliderPicker.js

@@ -13,2 +13,3 @@ /**
  * @param {String} labelFontColor - Optional. Sets font color of labels if they are displayed. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "gray".
+ * @param {String} labelFontWeight - Optional. Sets font weight of labels if they are displayed.
  * @param {String} midLabel - Optional. Label for the medium value.
@@ -20,2 +21,3 @@ * @param {String} minLabel - Optional. Label for the minimum value.
  * @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".
+ * @param {String} scaleNumberFontWeight - Optional. Sets font weight of scale numbers if they are displayed.
  * @param {Boolean} showFill - Optional. Boolean value to determine whether or not the slider inner shows a fill or if it is transparent. Defaults to `true`.
@@ -97,3 +99,4 @@ * @param {Boolean} showNumberScale - Optional. Boolean value to determine whether or not to display scale of numbers for the Slider's range. Defaults to `false`.
     this.buttonBackgroundColor =  this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : colors['first-color'];
-    this.buttonBorderColor =  this.props.buttonBorderColor ? this.props.buttonBorderColor : colors['first-color'];
+    this.buttonBorderColor =  this.props.buttonBorderColor ? this.props.buttonBorderColor : this.buttonBackgroundColor;
+    this.buttonBorderWidth = this.props.buttonBorderWidth ? this.props.buttonBorderWidth : 1;
     this.callback =  this.props.callback ? this.props.callback : () => {};
@@ -178,2 +181,5 @@ this.defaultValue = this.defaultValueCheckHandler(this.props.defaultValue) ? this.props.defaultValue : 5;
             releaseCallback={(value) => this.handleChildRelease(value)}
+            buttonBackgroundColor={this.buttonBackgroundColor}
+            buttonBorderColor={this.buttonBorderColor}
+            buttonBorderWidth={this.buttonBorderWidth}
           />
@@ -351,2 +357,7 @@ </View>
 
+    let numberStyle = Object.assign({}, styles.buttonNumber);
+
+    numberStyle['color'] = this.scaleNumberFontColor;
+    numberStyle['fontWeight'] = this.scaleNumberFontWeight;
+
     // Initialize empty array to push numbers into
@@ -373,3 +384,3 @@ let numbers = [];
           >
-            <Text style={[styles.buttonNumber]}>{i !== 10 ? i : `${i}+`}</Text>
+            <Text style={numberStyle}>{i !== 10 ? i : `${i}+`}</Text>
           </TouchableHighlight>
@@ -376,0 +387,0 @@ )

src/components/SliderPickerCursor.js

@@ -6,2 +6,4 @@ /**
  * @description Generic pre-styled slide picker cursor. Animated component that can be dragged within it's parent.
+ * @param {String} buttonBackgroundColor - Optional. Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "gray".
+ * @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 "gray".
  * @param {Number} minOffset - Optional. X-axis coordinates of left-edge of <StyledSliderPicker>. Component cannot be draggeed left past this point.
@@ -36,5 +38,8 @@ * @param {Number} maxOffset - Optional. X-axis coordinates of right-edge of <StyledSliderPicker>. Component cannot be draggeed right past this point.
     // Props checking
+    this.buttonBackgroundColor =  this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : "#000";
+    this.buttonBorderColor =  this.props.buttonBorderColor ? this.props.buttonBorderColor : "#000";
+    this.buttonBorderWidth = this.props.buttonBorderWidth ? this.props.buttonBorderWidth : 1;
+    this.defaultValue = this.props.defaultValue ? this.props.defaultValue : 5;
     this.minOffset = this.props.minOffset ? this.props.minOffset : vw(12.5);
     this.maxOffset = this.props.maxOffset ? this.props.maxOffset : vw(85);
-    this.defaultValue = this.props.defaultValue ? this.props.defaultValue : 5;
     this.releaseCallback = this.props.releaseCallback ? this.props.releaseCallback : () => {};
@@ -85,7 +90,17 @@
    */
-  render() {   
+  render() {
+
+    //
+    // Set dynamic styles based on props
+    //
+    let circleStyles = Object.assign({}, styles.circle);
+
+    circleStyles['backgroundColor'] = this.buttonBackgroundColor;
+    circleStyles['borderColor'] = this.buttonBorderColor;
+    circleStyles['borderWidth'] = this.buttonBorderWidth;
+
     return (
       <Animated.View 
         {...this._panResponder.panHandlers} // Add _panResponder's handlers to component
-        style={[this.state.drag.getLayout(), styles.circle]} // Include layout from this.state.drag in styles
+        style={[this.state.drag.getLayout(), circleStyles]} // Include layout from this.state.drag in styles
       >     
@@ -239,5 +254,5 @@ </Animated.View>
   circle: { // Draggable component visual
-    backgroundColor: 'gray', 
+    backgroundColor: "#000", 
     borderWidth: 1,
-    borderColor: 'gray',
+    borderColor: "#000",
     width: CURSOR_RADIUS * 2,
@@ -244,0 +259,0 @@ height: CURSOR_RADIUS * 2,

No alert changes

Improved metrics

Total package byte prevSize

31334

increased by5.49%

Lines of code

650

increased by3.34%

No dependency changes