Development (#8)

* Fix/proptypes (#2) * Added gitignore file, changed PropTypes package * Fixing images on the UIStepper * Adding wraps * Adding wraps * Updated README * Added displayValue prop to display the value between [-] and [+] buttons * Updating prop table * Added ability to override tint color on external images * Updated README adding a screenshot * External image used for examples * Bumped up version * Docs update * Updating docs * Updated docs * Horizontal stepper added * Bumped up Node version * Added npmignore, and an example project * Updating example * Update Docs * Updating Docs * Fixing Measurements (#7) * Merge Vertical Stepper (#5) * Added gitignore file, changed PropTypes package * Fixing images on the UIStepper * Adding wraps * Adding wraps * Updated README * Added displayValue prop to display the value between [-] and [+] buttons * Updating prop table * Added ability to override tint color on external images * Updated README adding a screenshot * External image used for examples * Bumped up version * Docs update * Updating docs * Updated docs * Horizontal stepper added * Bumped up Node version * Added npmignore, and an example project * Updating example * Update Docs * Updating Docs * Upgraded react-native-ui-stepper to 1.2.0 * Fixed height and width measurements * Updated docs
hannigand · Oct 13, 2017 · 3ddb7fa · 3ddb7fa
1 parent 82802fd
commit 3ddb7fa
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ You can now use custom images, from your local file system or from the Internet.
 | `tintColor`         | String   | Changes the color of all the non-transparent pixels to the tintColor.                                        | #0076FF     |
 | `overrideTintColor` | Boolean  | When using an external image, set whether you want the tintColor to be applied to non-transparent pixels.    | false       |
 | `backgroundColor`   | String   | Background color                                                                                             | transparent |
-| `vertical`   | Boolean  | Display a vertical UI Stepper                                                                                           | false |
+| `vertical`   | Boolean  | Display a vertical UI Stepper. You **must** specify a height and a width.                                                                                           | false |
 | `displayDecrementFirst`   | Boolean  | Display the decrement button above the increment button, only works when `vertical` is `true`                                                            | false |
 | `width`             | Number   | Width                                                                                                        | 94          |
 | `height`            | Number   | Height                                                                                                       | 29          |

diff --git a/UIStepper.js b/UIStepper.js
@@ -1,21 +1,21 @@
-import React, { Component } from "react";
-import { View, StyleSheet, TouchableOpacity, Image, Text } from "react-native";
-import PropTypes from "prop-types";
+import React, { Component } from 'react';
+import { View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
+import PropTypes from 'prop-types';
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: "row"
+    flexDirection: 'row',
   },
   button: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center"
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   valueContainer: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  }
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 class UIStepper extends Component {
@@ -53,15 +53,15 @@ class UIStepper extends Component {
     minimumValue: 0,
     maximumValue: 100,
     steps: 1,
-    tintColor: "#0076FF",
-    backgroundColor: "transparent",
-    decrementImage: require("./assets/decrement.png"),
-    incrementImage: require("./assets/increment.png"),
-    imageWidth: 45,
-    imageHeight: 27,
+    tintColor: '#0076FF',
+    backgroundColor: 'transparent',
+    decrementImage: require('./assets/decrement.png'),
+    incrementImage: require('./assets/increment.png'),
+    imageWidth: 20,
+    imageHeight: 15,
     width: 94,
     height: 29,
-    borderColor: "#0076FF",
+    borderColor: '#0076FF',
     borderWidth: 1,
     borderRadius: 4,
     onValueChange: null,
@@ -71,7 +71,7 @@ class UIStepper extends Component {
     onMaximumReached: null,
     wraps: false,
     displayValue: false,
-    textColor: "#0076FF",
+    textColor: '#0076FF',
     fontSize: 15,
     overrideTintColor: false,
     vertical: false,
@@ -80,8 +80,9 @@ class UIStepper extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: this.props.initialValue
+      value: this.props.initialValue,
     };
+    console.log(this.props);
   }
   decrement = () => {
     const { steps, onDecrement } = this.props;
@@ -95,37 +96,70 @@ class UIStepper extends Component {
     value += steps;
     this.validate(value, onIncrement);
   };
-  isExternalImage = image => typeof image === "string";
+  isExternalImage = image => typeof image === 'string';
   resolveImage = image => {
     if (this.isExternalImage(image)) {
       return { uri: image };
     }
     return image;
   };
   resolveStyles = image => {
-    const { tintColor, height, width, overrideTintColor } = this.props;
+    const {
+      tintColor,
+      height,
+      width,
+      overrideTintColor,
+      imageHeight,
+      imageWidth,
+      buttonPadding,
+    } = this.props;
+    const containerHeight = height / 3;
+    const containerWidth = width / 3;
+
     if (this.isExternalImage(image)) {
       const styles = {
         flex: 1,
-        alignSelf: "stretch"
-      }
-      if(overrideTintColor) {
+        alignSelf: 'stretch',
+        width: this.getImageWidth(),
+        height: this.getImageHeight(),
+      };
+      if (overrideTintColor) {
         styles.tintColor = tintColor;
       }
       return styles;
     }
     return {
-      tintColor
+      tintColor,
+      width: this.getImageWidth(),
+      height: this.getImageHeight(),
     };
   };
+  getImageHeight = () => {
+    const { imageHeight, height } = this.props;
+    const containerHeight = height;
+
+    if (imageHeight > containerHeight) {
+      return height;
+    }
+    return imageHeight;
+  };
+  getImageWidth = () => {
+    const { imageWidth, width } = this.props;
+    const containerWidth = width / 3;
+
+    if (imageWidth > containerWidth) {
+      return containerWidth;
+    }
+    return imageWidth;
+  };
   validate = (value, callback) => {
     const {
       minimumValue: min,
       maximumValue: max,
       onValueChange,
       onMinimumReached,
       onMaximumReached,
-      wraps
+      wraps,
     } = this.props;
     if (min <= value && max >= value) {
       this.setState({
@@ -142,7 +176,7 @@ class UIStepper extends Component {
     if (value < min) {
       if (wraps) {
         this.setState({
-          value: max
+          value: max,
         });
         if (onValueChange) {
           onValueChange(max);
@@ -157,7 +191,7 @@ class UIStepper extends Component {
     if (value > max) {
       if (wraps) {
         this.setState({
-          value: min
+          value: min,
         });
         if (onValueChange) {
           onValueChange(min);
@@ -173,7 +207,7 @@ class UIStepper extends Component {
   setValue = (value, callback) => {
     const { onValueChange } = this.props;
     this.setState({
-      value: value
+      value: value,
     });
     if (onValueChange) {
       onValueChange(value);
@@ -200,7 +234,7 @@ class UIStepper extends Component {
       textColor,
       fontSize,
       vertical,
-      displayDecrementFirst
+      displayDecrementFirst,
     } = this.props;
     return (
       <View
@@ -213,49 +247,51 @@ class UIStepper extends Component {
             borderColor,
             borderWidth,
             borderRadius,
-            flex: 1,
-            flexDirection: vertical ? displayDecrementFirst ? 'column' : 'column-reverse' : 'row',
-          }
+            flexDirection: vertical
+              ? displayDecrementFirst ? 'column' : 'column-reverse'
+              : 'row',
+          },
         ]}
       >
         <TouchableOpacity
           onPress={this.decrement}
           style={[
             styles.button,
             {
-              borderRightWidth:  vertical ? 0 : borderWidth,
+              borderRightWidth: vertical ? 0 : borderWidth,
               borderRightColor: borderColor,
-              height: vertical ? 30 : 'auto'
-            }
+              height: vertical ? 30 : 'auto',
+            },
           ]}
         >
           <Image
             source={this.resolveImage(decrementImage)}
-            style={[this.resolveStyles(decrementImage)]}
-            resizeMode={"contain"}
+            style={this.resolveStyles(decrementImage)}
+            resizeMode={'contain'}
           />
         </TouchableOpacity>
-        {displayValue &&
+        {displayValue && (
           <View style={styles.valueContainer}>
             <Text style={{ color: textColor, fontSize }}>
               {this.state.value}
             </Text>
-          </View>}
+          </View>
+        )}
         <TouchableOpacity
           onPress={this.increment}
           style={[
             styles.button,
             {
               borderLeftWidth: vertical ? 0 : displayValue ? 1 : 0,
               borderColor,
-              height: vertical ? 30 : 'auto'
-            }
+              height: vertical ? 30 : 'auto',
+            },
           ]}
         >
           <Image
             source={this.resolveImage(incrementImage)}
-            style={[this.resolveStyles(incrementImage)]}
-            resizeMode={"contain"}
+            style={this.resolveStyles(incrementImage)}
+            resizeMode={'contain'}
           />
         </TouchableOpacity>
       </View>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-stepper",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A react-native implementation of the iOS UIStepper",
   "main": "UIStepper.js",
   "scripts": {