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

Comparing version 1.12.0 to 1.13.0

package.json

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

README.md

@@ -1,2 +0,2 @@
-## react-native-simple-stepper
+# react-native-simple-stepper
 
@@ -13,6 +13,6 @@ [![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)
 
-### Installation
+## Installation
 ```npm i react-native-simple-stepper --save```
 
-### Usage
+## Usage
 ```javascript
@@ -36,9 +36,6 @@ import SimpleStepper from 'react-native-simple-stepper'
 ```
-
-### Demo
-
+## Demo
 ![screenshot](https://raw.github.com/testshallpass/react-native-simple-stepper/master/screenshots/demo.gif)
 
-### Props
-
+## Props
 | Name | Type | Description | Default |
@@ -62,1 +59,3 @@ | --- | :---: | --- | --- |
 | ```disabledOpacity``` | Number  | when step button is disabled | 0.5
+| ```disabled``` | Boolean  | stepper disable state | false
+

SimpleStepper.js

@@ -22,3 +22,4 @@ import React, { Component, PropTypes } from "react";
     incrementImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    decrementImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    decrementImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    disabled: PropTypes.bool
   };
@@ -41,3 +42,4 @@ static defaultProps = {
     activeOpacity: 0.4,
-    disabledOpacity: 0.5
+    disabledOpacity: 0.5,
+    disabled: false
   };
@@ -51,68 +53,71 @@ constructor(props) {
       hasReachedMin: false,
-      hasReachedMax: false
+      hasReachedMax: false,
+      stepValue: props.stepValue
     };
-    this.decrementAction = this.decrementAction.bind(this);
-    this.incrementAction = this.incrementAction.bind(this);
-    this.validateInitialValue = this.validateInitialValue.bind(this);
   }
   componentWillMount() {
-    this.validateInitialValue(this.props.initialValue);
+    this.validateValue(this.props.initialValue, this.props.minimumValue, this.props.maximumValue, this.props.disabled, this.props.stepValue);
   }
   componentWillReceiveProps(nextProps) {
-    const { initialValue, stepValue } = this.props;
-    if (
-      nextProps.initialValue !== initialValue ||
-      nextProps.stepValue !== stepValue
-    ) {
-      this.validateInitialValue(nextProps.initialValue);
+    const { initialValue, stepValue, minimumValue, maximumValue, disabled } = this.props;
+    if (nextProps.initialValue !== initialValue) {
+      this.validateValue(nextProps.initialValue, nextProps.minimumValue, nextProps.maximumValue, nextProps.disabled, nextProps.stepValue);
+    } else if (nextProps.disabled !== disabled || nextProps.stepValue !== stepValue) {
+      this.validateValue(this.state.value, nextProps.minimumValue, nextProps.maximumValue, nextProps.disabled, nextProps.stepValue);
+    } else if (nextProps.minimumValue !== minimumValue || nextProps.maximumValue !== maximumValue) {
+      const isValidNextMin = (nextProps.minimumValue < maximumValue)
+      const isValidNextMax = (nextProps.maximumValue > minimumValue)
+      if (isValidNextMin && isValidNextMax) {
+        this.validateValue(this.state.value, nextProps.minimumValue, nextProps.maximumValue, nextProps.disabled, nextProps.stepValue);
+      } else {
+        if (isValidNextMin == false && isValidNextMax == false) {
+          console.warn('Warning: Simple Stepper update failed because nextProps min value(' + nextProps.minimumValue + ') is higher than current max value('+ maximumValue + ').');
+          console.warn('Warning: Simple Stepper update failed because nextProps max value(' + nextProps.maximumValue + ') is lower than current min value('+ minimumValue + ').');
+        } else if (isValidNextMin == false) {
+          console.warn('Warning: Simple Stepper update failed because nextProps min value(' + nextProps.minimumValue + ') is higher than current max value('+ maximumValue + ').');
+        } else if (isValidNextMax == false) {
+          console.warn('Warning: Simple Stepper update failed because nextProps max value(' + nextProps.maximumValue + ') is lower than current min value('+ minimumValue + ').');
+        }
+      }
     }
   }
-  decrementAction() {
+  decrementAction = () => {
     var value = this.state.value;
-    var stepValue = this.props.stepValue;
-    value -= stepValue;
-    this.validateInitialValue(value);
+    var stepValue = this.state.stepValue;
+    value -= stepValue; 
+    this.validateValue(value, this.props.minimumValue, this.props.maximumValue, this.props.disabled, stepValue);
   }
-  incrementAction() {
+  incrementAction = () => {
     var value = this.state.value;
-    var stepValue = this.props.stepValue;
+    var stepValue = this.state.stepValue;
     value += stepValue;
-    this.validateInitialValue(value);
+    this.validateValue(value, this.props.minimumValue, this.props.maximumValue, this.props.disabled, stepValue);
   }
-  validateInitialValue(value) {
-    var maximumValue = this.props.maximumValue;
-    var minimumValue = this.props.minimumValue;
-    if (value >= maximumValue) {
-      value = maximumValue; // prevent overflow value
-      this.setState({
-        value: maximumValue,
-        hasReachedMax: true,
-        hasReachedMin: false,
-        decrementOpacity: 1,
-        incrementOpacity: this.props.disabledOpacity
-      });
-    } else if (value <= minimumValue) {
-      value = minimumValue; // prevent overflow value
-      this.setState({
-        value: minimumValue,
-        hasReachedMin: true,
-        hasReachedMax: false,
-        decrementOpacity: this.props.disabledOpacity,
-        incrementOpacity: 1
-      });
-    } else {
-      if (this.state.hasReachedMax || this.state.hasReachedMin) {
-        this.setState({
-          value: value,
-          hasReachedMin: false,
-          hasReachedMax: false,
-          decrementOpacity: 1,
-          incrementOpacity: 1
-        });
-      } else {
-        this.setState({
-          value: value
-        });
-      }
+  validateValue = (value, min, max, disabled, step) => {
+    if (step == 0) {
+      console.warn('Warning: Simple Stepper step value is zero (0).');
     }
+    var hasReachedMax = value >= max;
+    var hasReachedMin = value <= min;
+    if (step < 0) { // step value is negative so swap the max and min conditions.
+      hasReachedMax = value <= min;
+      hasReachedMin = value >= max;
+    }
+    if (value >= max) {
+      value = max;
+    } else if (value <= min) {
+      value = min;
+    }
+    this.setState({
+      value: value,
+      stepValue: step,
+      hasReachedMin: hasReachedMin || disabled,
+      hasReachedMax: hasReachedMax || disabled,
+      decrementOpacity: hasReachedMin || disabled
+        ? this.props.disabledOpacity
+        : 1,
+      incrementOpacity: hasReachedMax || disabled
+        ? this.props.disabledOpacity
+        : 1
+    });
     if (this.props.valueChanged) {
@@ -163,3 +168,4 @@ this.props.valueChanged(value);
       backgroundColor,
-      activeOpacity
+      activeOpacity,
+      disabled
     } = this.props;
@@ -201,3 +207,3 @@ var tintIncrementStyle = this.tintStyle(tintOnIncrementImage);
           onPress={this.decrementAction}
-          disabled={hasReachedMin}
+          disabled={hasReachedMin || disabled}
         >
@@ -221,3 +227,3 @@ <Image
           onPress={this.incrementAction}
-          disabled={hasReachedMax}
+          disabled={hasReachedMax || disabled}
         >
@@ -224,0 +230,0 @@ <Image

No alert changes

Improved metrics

Total package byte prevSize

14672

increased by12.71%

Lines of code

255

increased by2.41%

Worsened metrics

Number of lines in readme file

59

decreased by-1.67%

No dependency changes