react-native-simple-stepper - npm Package Compare versions

Comparing version 1.15.0 to 1.16.0

package.json

 {
   "name": "react-native-simple-stepper",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "A super simple react-native implementation of the classic UIStepper from iOS.",
@@ -5,0 +5,0 @@ "main": "SimpleStepper.js",

README.md

@@ -58,2 +58,4 @@ # react-native-simple-stepper
 | ```disabled``` | Boolean  | stepper disable state | false
+| ```renderIncrement``` | Function  | render increment component(s) | null
+| ```renderDecrement``` | Function  | render decrement component(s) | null
 

SimpleStepper.js

@@ -23,3 +23,5 @@ import React, { Component, PropTypes } from "react";
     decrementImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    renderDecrement: PropTypes.func,
+    renderIncrement: PropTypes.func
   };
@@ -43,3 +45,5 @@ static defaultProps = {
     disabledOpacity: 0.5,
-    disabled: false
+    disabled: false,
+    renderDecrement: null,
+    renderIncrement: null
   };
@@ -226,2 +230,23 @@ constructor(props) {
   }
+  renderImage(renderProp, style, tintStyle, opacity, src) {
+    if (typeof renderProp == "function") {
+      const data = {
+        "style": style,
+        "tintStyle": tintStyle,
+        "opacity": opacity,
+        "source": src
+      }
+      return renderProp(data)
+    }
+    return (
+      <Image
+        style={[
+          style,
+          tintStyle,
+          { opacity: opacity }
+        ]}
+        source={src}
+       />
+    )
+  }
   render() {
@@ -239,9 +264,11 @@ const {
       activeOpacity,
-      disabled
+      disabled,
+      renderDecrement,
+      renderIncrement,
     } = this.props;
-    var tintIncrementStyle = this.tintStyle(tintOnIncrementImage);
-    var tintDecrementStyle = this.tintStyle(tintOnDecrementImage);
-    var decrementImageSrc = this.imageSrc(decrementImage, "decrement");
-    var incrementImageSrc = this.imageSrc(incrementImage, "increment");
-    var incrementStyle = this.imageStyle(
+    const tintIncrementStyle = this.tintStyle(tintOnIncrementImage);
+    const tintDecrementStyle = this.tintStyle(tintOnDecrementImage);
+    const decrementImageSrc = this.imageSrc(decrementImage, "decrement");
+    const incrementImageSrc = this.imageSrc(incrementImage, "increment");
+    const incrementStyle = this.imageStyle(
       incrementImage,
@@ -251,3 +278,3 @@ imageWidth,
     );
-    var decrementStyle = this.imageStyle(
+    const decrementStyle = this.imageStyle(
       decrementImage,
@@ -280,10 +307,5 @@ imageWidth,
         >
-          <Image
-            style={[
-              decrementStyle,
-              tintDecrementStyle,
-              { opacity: decrementOpacity }
-            ]}
-            source={decrementImageSrc}
-          />
+        <View> 
+          {this.renderImage(renderDecrement, decrementStyle, tintDecrementStyle, decrementOpacity, decrementImageSrc)}
+        </View>
         </TouchableOpacity>
@@ -300,10 +322,5 @@ <TouchableOpacity
         >
-          <Image
-            style={[
-              incrementStyle,
-              tintIncrementStyle,
-              { opacity: incrementOpacity }
-            ]}
-            source={incrementImageSrc}
-          />
+        <View> 
+          {this.renderImage(renderIncrement, incrementStyle, tintIncrementStyle, incrementOpacity, incrementImageSrc)}
+        </View>        
         </TouchableOpacity>
@@ -310,0 +327,0 @@ </View>

No alert changes

Improved metrics

Total package byte prevSize

16097

increased by4.27%

Lines of code

342

increased by5.23%

Number of lines in readme file

61

increased by3.39%

No dependency changes