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

Comparing version 1.17.0 to 1.18.0

package.json

 {
   "name": "react-native-simple-stepper",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "A super simple react-native implementation of the classic UIStepper from iOS.",
@@ -47,3 +47,6 @@ "main": "SimpleStepper.js",
     "react-test-renderer": "^15.4.2"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.10"
   }
 }

README.md

@@ -58,4 +58,4 @@ # react-native-simple-stepper
 | ```disabled``` | Boolean  | stepper disable state | false
+| ```wraps``` | Boolean  | whether or not it wraps. [more info](https://developer.apple.com/documentation/uikit/uistepper/1624068-wraps) | false
 | ```renderIncrement``` | Function  | render increment component(s) | null
 | ```renderDecrement``` | Function  | render decrement component(s) | null
-

SimpleStepper.js

@@ -1,3 +0,4 @@
-import React, { Component, PropTypes } from "react";
-import { StyleSheet, Text, TouchableOpacity, Image, View } from "react-native";
+import React, {Component} from 'react';
+import {PropTypes} from 'prop-types';
+import {StyleSheet, Text, TouchableOpacity, Image, View} from 'react-native';
 
@@ -25,3 +26,4 @@ export default class SimpleStepper extends Component {
     renderDecrement: PropTypes.func,
-    renderIncrement: PropTypes.func
+    renderIncrement: PropTypes.func,
+    wraps: PropTypes.bool,
   };
@@ -33,7 +35,7 @@ static defaultProps = {
     stepValue: 1,
-    backgroundColor: "transparent",
-    tintColor: "blue",
+    backgroundColor: 'transparent',
+    tintColor: 'blue',
     valueChanged: null,
-    decrementImage: require("./assets/decrement.png"),
-    incrementImage: require("./assets/increment.png"),
+    decrementImage: require('./assets/decrement.png'),
+    incrementImage: require('./assets/increment.png'),
     tintOnIncrementImage: true,
@@ -48,3 +50,4 @@ tintOnDecrementImage: true,
     renderDecrement: null,
-    renderIncrement: null
+    renderIncrement: null,
+    wraps: false,
   };
@@ -59,3 +62,3 @@ constructor(props) {
       hasReachedMax: false,
-      stepValue: props.stepValue
+      stepValue: props.stepValue,
     };
@@ -69,3 +72,4 @@ }
       this.props.disabled,
-      this.props.stepValue
+      this.props.stepValue,
+      this.props.wraps,
     );
@@ -79,3 +83,4 @@ }
       maximumValue,
-      disabled
+      disabled,
+      wraps,
     } = this.props;
@@ -88,3 +93,4 @@ if (nextProps.initialValue !== initialValue) {
         nextProps.disabled,
-        nextProps.stepValue
+        nextProps.stepValue,
+        nextProps.wraps,
       );
@@ -99,3 +105,4 @@ } else if (
         nextProps.disabled,
-        nextProps.stepValue
+        nextProps.stepValue,
+        nextProps.wraps,
       );
@@ -114,3 +121,4 @@ } else if (
           nextProps.disabled,
-          nextProps.stepValue
+          nextProps.stepValue,
+          nextProps.wraps,
         );
@@ -120,30 +128,30 @@ } else {
           console.warn(
-            "Warning: Simple Stepper update failed because nextProps min value(" +
+            'Warning: Simple Stepper update failed because nextProps min value(' +
               nextProps.minimumValue +
-              ") is higher than current max value(" +
+              ') is higher than current max value(' +
               maximumValue +
-              ")."
+              ').',
           );
           console.warn(
-            "Warning: Simple Stepper update failed because nextProps max value(" +
+            'Warning: Simple Stepper update failed because nextProps max value(' +
               nextProps.maximumValue +
-              ") is lower than current min value(" +
+              ') is lower than current min value(' +
               minimumValue +
-              ")."
+              ').',
           );
         } else if (isValidNextMin == false) {
           console.warn(
-            "Warning: Simple Stepper update failed because nextProps min value(" +
+            'Warning: Simple Stepper update failed because nextProps min value(' +
               nextProps.minimumValue +
-              ") is higher than current max value(" +
+              ') is higher than current max value(' +
               maximumValue +
-              ")."
+              ').',
           );
         } else if (isValidNextMax == false) {
           console.warn(
-            "Warning: Simple Stepper update failed because nextProps max value(" +
+            'Warning: Simple Stepper update failed because nextProps max value(' +
               nextProps.maximumValue +
-              ") is lower than current min value(" +
+              ') is lower than current min value(' +
               minimumValue +
-              ")."
+              ').',
           );
@@ -163,3 +171,4 @@ }
       this.props.disabled,
-      stepValue
+      stepValue,
+      this.props.wraps,
     );
@@ -176,19 +185,24 @@ };
       this.props.disabled,
-      stepValue
+      stepValue,
+      this.props.wraps,
     );
   };
-  validateValue = (value, min, max, disabled, step) => {
+  validateValue = (value, min, max, disabled, step, wraps) => {
     if (step == 0) {
-      console.warn("Warning: Simple Stepper step value is zero (0).");
+      console.warn('Warning: Simple Stepper step value is zero (0).');
     }
-    var hasReachedMax = value >= max;
-    var hasReachedMin = value <= min;
+    var hasReachedMax = wraps ? false : value >= max;
+    var hasReachedMin = wraps ? false : value <= min;
     if (step < 0) {
       // step value is negative so swap the max and min conditions.
-      hasReachedMax = value <= min;
-      hasReachedMin = value >= max;
+      hasReachedMax = wraps ? false : value <= min;
+      hasReachedMin = wraps ? false : value >= max;
     }
-    if (value >= max) {
+    if (value > max) {
+      value = wraps ? min : max;
+    } else if (value == max) {
       value = max;
-    } else if (value <= min) {
+    } else if (value < min) {
+      value = wraps ? max : min;
+    } else if (value == min) {
       value = min;
@@ -206,3 +220,3 @@ }
         ? this.props.disabledOpacity
-        : 1
+        : 1,
     });
@@ -215,3 +229,3 @@ if (this.props.valueChanged) {
     if (status) {
-      return { tintColor: this.props.tintColor };
+      return {tintColor: this.props.tintColor};
     }
@@ -221,11 +235,11 @@ return null;
   imageSrc(src, type) {
-    if (typeof src == "string") {
+    if (typeof src == 'string') {
       if (src.length == 0) {
-        if (type == "decrement") {
-          return require("./assets/decrement.png");
-        } else if (type == "increment") {
-          return require("./assets/increment.png");
+        if (type == 'decrement') {
+          return require('./assets/decrement.png');
+        } else if (type == 'increment') {
+          return require('./assets/increment.png');
         }
       } else if (src.length > 0) {
-        return { uri: src };
+        return {uri: src};
       }
@@ -236,5 +250,5 @@ }
   imageStyle(src, width, height) {
-    if (typeof src == "string") {
+    if (typeof src == 'string') {
       if (src.length > 0) {
-        return { width: width, height: height };
+        return {width: width, height: height};
       }
@@ -245,21 +259,14 @@ }
   renderImage(renderProp, style, tintStyle, opacity, src) {
-    if (typeof renderProp == "function") {
+    if (typeof renderProp == 'function') {
       const data = {
-        "style": style,
-        "tintStyle": tintStyle,
-        "opacity": opacity,
-        "source": src
-      }
-      return renderProp(data)
+        style: style,
+        tintStyle: tintStyle,
+        opacity: opacity,
+        source: src,
+      };
+      return renderProp(data);
     }
     return (
-      <Image
-        style={[
-          style,
-          tintStyle,
-          { opacity: opacity }
-        ]}
-        source={src}
-       />
-    )
+      <Image style={[style, tintStyle, {opacity: opacity}]} source={src} />
+    );
   }
@@ -284,8 +291,8 @@ render() {
     const tintDecrementStyle = this.tintStyle(tintOnDecrementImage);
-    const decrementImageSrc = this.imageSrc(decrementImage, "decrement");
-    const incrementImageSrc = this.imageSrc(incrementImage, "increment");
+    const decrementImageSrc = this.imageSrc(decrementImage, 'decrement');
+    const incrementImageSrc = this.imageSrc(incrementImage, 'increment');
     const incrementStyle = this.imageStyle(
       incrementImage,
       imageWidth,
-      imageHeight
+      imageHeight,
     );
@@ -295,3 +302,3 @@ const decrementStyle = this.imageStyle(
       imageWidth,
-      imageHeight
+      imageHeight,
     );
@@ -302,3 +309,3 @@ const {
       hasReachedMin,
-      hasReachedMax
+      hasReachedMax,
     } = this.state;
@@ -309,3 +316,3 @@ return (
           styles.container,
-          { backgroundColor: backgroundColor, borderColor: tintColor }
+          {backgroundColor: backgroundColor, borderColor: tintColor},
         ]}
@@ -318,3 +325,3 @@ >
             styles.leftButton,
-            { borderColor: tintColor, padding: padding }
+            {borderColor: tintColor, padding: padding},
           ]}
@@ -324,5 +331,11 @@ onPress={this.decrementAction}
         >
-        <View> 
-          {this.renderImage(renderDecrement, decrementStyle, tintDecrementStyle, decrementOpacity, decrementImageSrc)}
-        </View>
+          <View>
+            {this.renderImage(
+              renderDecrement,
+              decrementStyle,
+              tintDecrementStyle,
+              decrementOpacity,
+              decrementImageSrc,
+            )}
+          </View>
         </TouchableOpacity>
@@ -334,3 +347,3 @@ <TouchableOpacity
             styles.rightButton,
-            { borderColor: tintColor, padding: padding }
+            {borderColor: tintColor, padding: padding},
           ]}
@@ -340,5 +353,11 @@ onPress={this.incrementAction}
         >
-        <View> 
-          {this.renderImage(renderIncrement, incrementStyle, tintIncrementStyle, incrementOpacity, incrementImageSrc)}
-        </View>        
+          <View>
+            {this.renderImage(
+              renderIncrement,
+              incrementStyle,
+              tintIncrementStyle,
+              incrementOpacity,
+              incrementImageSrc,
+            )}
+          </View>
         </TouchableOpacity>
@@ -352,19 +371,19 @@ </View>
   container: {
-    flexDirection: "row",
-    justifyContent: "center",
+    flexDirection: 'row',
+    justifyContent: 'center',
     borderWidth: 1,
     borderRadius: 3,
-    overflow: "hidden",
-    alignItems: "center"
+    overflow: 'hidden',
+    alignItems: 'center',
   },
   leftButton: {
-    alignItems: "center"
+    alignItems: 'center',
   },
   rightButton: {
-    alignItems: "center",
+    alignItems: 'center',
     borderWidth: StyleSheet.hairlineWidth,
     borderBottomWidth: 0,
     borderTopWidth: 0,
-    borderRightWidth: 0
-  }
+    borderRightWidth: 0,
+  },
 });

No alert changes

Improved metrics

Total package byte prevSize

16709

increased by3.8%

Lines of code

361

increased by5.56%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of package files

10

decreased by-9.09%

Dependency changes

• + Addedprop-types@^15.5.10

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)