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

Comparing version 1.3.0 to 1.4.0

package.json

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

README.md

@@ -33,2 +33,8 @@ ## react-native-simple-stepper
 | ```underlayColor``` | String  | tap color | lightgray
-| ```valueChanged``` | Function  | Fires when value changes and it will be passed down | null
+| ```valueChanged``` | Function  | Fires when the value changes and the value will be passed down for processing like display or calculations | null
+| ```incrementImageSrc``` | Number  | local image | null
+| ```incrementImageUri``` | String  | network image | ''
+| ```decrementImageSrc``` | Number  | local image | null
+| ```decrementImageUri``` | String  | network image | ''
+| ```tintOnIncrementImage``` | Boolean  | whether or not you want tintColor applied to increment image | true
+| ```tintOnDecrementImage``` | Boolean  | whether or not you want tintColor applied to decrement image | true

SimpleStepper.js

@@ -14,3 +14,9 @@
     underlayColor: React.PropTypes.string,
-    valueChanged: React.PropTypes.func
+    valueChanged: React.PropTypes.func,
+    incrementImageSrc: React.PropTypes.number,
+    incrementImageUri: React.PropTypes.string,
+    decrementImageSrc: React.PropTypes.number,
+    decrementImageUri: React.PropTypes.string,
+    tintOnIncrementImage: React.PropTypes.bool,
+    tintOnDecrementImage: React.PropTypes.bool
   }
@@ -25,3 +31,9 @@ static defaultProps = {
     underlayColor: 'lightgray',
-    valueChanged: null
+    valueChanged: null,
+    decrementImageSrc: null,
+    decrementImageUri: '',
+    incrementImageSrc: null,
+    incrementImageUri: '',
+    tintOnIncrementImage: true,
+    tintOnDecrementImage: true,
   }
@@ -45,10 +57,39 @@ constructor(props) {
   render() {
+    var tintIncrementStyle
+    var tintDecrementStyle
+    if (this.props.tintOnIncrementImage) {
+      tintIncrementStyle = {tintColor: this.props.tintColor}
+    }
+    if (this.props.tintOnDecrementImage) {
+      tintDecrementStyle = {tintColor: this.props.tintColor}
+    }
+    var imageStyle
+    var incrementImageSrc = require('./assets/increment.png')
+    var decrementImageSrc = require('./assets/decrement.png')
+    if (this.props.incrementImageUri || this.props.incrementImageSrc) {
+      imageStyle = {width: 24, height: 24, paddingTop: 1}
+      if (this.props.incrementImageUri.length > 0) {
+        incrementImageSrc = {uri: this.props.incrementImageUri}
+      }
+      if (this.props.incrementImageSrc > 0) {
+        incrementImageSrc = this.props.incrementImageSrc
+      }
+    }
+    if (this.props.decrementImageUri || this.props.decrementImageSrc) {
+      imageStyle = {width: 24, height: 24, paddingTop: 1}
+      if (this.props.decrementImageUri.length > 0) {
+        incrementImageSrc = {uri: this.props.incrementImageUri}
+      }
+      if (this.props.decrementImageSrc > 0) {
+        incrementImageSrc = this.props.incrementImageSrc
+      }
+    }
     return (
       <View style={[styles.container, {backgroundColor: this.props.backgroundColor, borderColor: this.props.tintColor}]}>
         <TouchableHighlight style={[styles.stepButton, {opacity: this.state.decrementOpacity}]} underlayColor={this.props.underlayColor} onPress={this.decrementAction} disabled={this.state.hasReachedMin}>
-          <Image style={{tintColor: this.props.tintColor}} source={require('./assets/decrement.png')} />
+          <Image style={[tintDecrementStyle, imageStyle]} source={decrementImageSrc} resizeMode="contain" />
         </TouchableHighlight>
         <View style={[styles.divider, {backgroundColor: this.props.tintColor}]} />
         <TouchableHighlight style={[styles.stepButton, {opacity: this.state.incrementOpacity}]} underlayColor={this.props.underlayColor} onPress={this.incrementAction} disabled={this.state.hasReachedMax}>
-          <Image style={{tintColor: this.props.tintColor}} source={require('./assets/increment.png')} />
+          <Image style={[tintIncrementStyle, imageStyle]} source={incrementImageSrc} resizeMode="contain" />
         </TouchableHighlight>
@@ -121,3 +162,3 @@ </View>
     height: 28,
-    paddingTop: 2,
+    paddingTop: 2
   },
@@ -124,0 +165,0 @@ divider: {

No alert changes

Improved metrics

Total package byte prevSize

10096

increased by26.77%

Lines of code

162

increased by33.88%

Number of lines in readme file

40

increased by17.65%

No dependency changes