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
hannigand · Sep 29, 2017 · 68d802f · 68d802f
1 parent 8992001
commit 68d802f
Show file tree

Hide file tree

Showing 55 changed files with 7,703 additions and 16 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,59 @@
+# Xcode
+!**/*.xcodeproj
+!**/*.pbxproj
+!**/*.xcworkspacedata
+!**/*.xcsettings
+!**/*.xcscheme
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Gradle
+/build/
+/RNTester/android/app/build/
+/RNTester/android/app/gradle/
+/RNTester/android/app/gradlew
+/RNTester/android/app/gradlew.bat
+/ReactAndroid/build/
+
+# Buck
+.buckd
+buck-out
+/ReactAndroid/src/main/jni/prebuilt/lib/armeabi-v7a/
+/ReactAndroid/src/main/jni/prebuilt/lib/x86/
+/ReactAndroid/src/main/gen
+
+# Android
+.idea
+.gradle
+local.properties
+*.iml
+/android/
+
+# Node
+node_modules
+*.log
+.nvm
+/danger/node_modules/
+
+# OS X
+.DS_Store
+
+# Test generated files
+/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
+*.js.meta
+
+example
diff --git a/README.md b/README.md
@@ -9,6 +9,8 @@ A react-native component which mirrors the functionality of [UIStepper](https://
 
 > A stepper control provides a user interface for incrementing or decrementing a value. A stepper displays two buttons, one with a minus (“–”) symbol and one with a plus (“+”) symbol.
 
+**You can now configure your react-native-ui-stepper to be vertical**
+
 ## Installation
 `npm i react-native-ui-stepper`
 
@@ -28,7 +30,10 @@ render() {
 }
 ```
 
+You can now use custom images, from your local file system or from the Internet. See [Props](#props) for more details.
+
 ## Demo
+
 ![Demo example](http://g.recordit.co/ipvGlYfRpa.gif "Demo example")
 
 
@@ -42,10 +47,14 @@ render() {
 | `maximumValue`      | Number   | Maximum value                                                                                                | 100         |
 | `steps`             | Number   | Increment value                                                                                              | 1           |
 | `displayValue`      | Boolean  | Displays the stepper value between the increment and decrement button                                        | false       |
+| `incrementImage`      | String or Number  | Override the default increment image                                       | require('./assets/increment.png')       |
+| `decrementImage`      | String or Number  | Override the default decrement image                                     | require('./assets/decrement.png')       |
 | `wraps`             | Boolean  | When set to true, incrementing beyond the `maximumValue` will set the value to `minimumValue` and vice versa | false       |
 | `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 |
+| `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          |
 | `textColor`         | String   | The desired text colour which will be used when `displayValue` is set to `true`                              | #0076FF     |
@@ -57,4 +66,13 @@ render() {
 | `onIncrement`       | Function | Executed when the User clicks the increment (+) button. The value is passed as a parameter                   | null        |
 | `onDecrement`       | Function | Executed when the User clicks the decrement (+) button. The value is passed as a parameter                   | null        |
 | `onMinimumReached`  | Function | Executed when the `minimumValue` is reached. The value is passed as a parameter                              | null        |
-| `onMaximumReached`  | Function | Executed when the `maximumValue` is reached. The value is passed as a parameter                              | null        |
+| `onMaximumReached`  | Function | Executed when the `maximumValue` is reached. The value is passed as a parameter                              | null        |
+
+## Run Example
+
+```
+$ git clone https://github.com/hannigand/react-native-ui-stepper.git
+$ cd example
+$ yarn # or npm install
+$ react-native run-ios
+```
diff --git a/UIStepper.js b/UIStepper.js
@@ -45,6 +45,8 @@ class UIStepper extends Component {
     textColor: PropTypes.string,
     fontSize: PropTypes.number,
     overrideTintColor: PropTypes.bool,
+    vertical: PropTypes.bool,
+    displayDecrementFirst: PropTypes.bool,
   };
   static defaultProps = {
     initialValue: 0,
@@ -72,6 +74,8 @@ class UIStepper extends Component {
     textColor: "#0076FF",
     fontSize: 15,
     overrideTintColor: false,
+    vertical: false,
+    displayDecrementFirst: false,
   };
   constructor(props) {
     super(props);
@@ -194,31 +198,34 @@ class UIStepper extends Component {
       borderRadius,
       displayValue,
       textColor,
-      fontSize
+      fontSize,
+      vertical,
+      displayDecrementFirst
     } = this.props;
     return (
       <View
         style={[
           styles.container,
           {
             backgroundColor,
-            width,
-            height,
+            width: vertical ? width / 2 : width,
+            height: vertical ? 'auto' : height,
             borderColor,
             borderWidth,
-            borderRadius
+            borderRadius,
+            flex: 1,
+            flexDirection: vertical ? displayDecrementFirst ? 'column' : 'column-reverse' : 'row',
           }
         ]}
       >
         <TouchableOpacity
-          onPress={() => {
-            this.decrement();
-          }}
+          onPress={this.decrement}
           style={[
             styles.button,
             {
-              borderRightWidth: borderWidth,
-              borderRightColor: borderColor
+              borderRightWidth:  vertical ? 0 : borderWidth,
+              borderRightColor: borderColor,
+              height: vertical ? 30 : 'auto'
             }
           ]}
         >
@@ -235,14 +242,13 @@ class UIStepper extends Component {
             </Text>
           </View>}
         <TouchableOpacity
-          onPress={() => {
-            this.increment();
-          }}
+          onPress={this.increment}
           style={[
             styles.button,
             {
-              borderLeftWidth: displayValue ? 1 : 0,
-              borderColor
+              borderLeftWidth: vertical ? 0 : displayValue ? 1 : 0,
+              borderColor,
+              height: vertical ? 30 : 'auto'
             }
           ]}
         >

diff --git a/example/.babelrc b/example/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}
diff --git a/example/.buckconfig b/example/.buckconfig
@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2
diff --git a/example/.flowconfig b/example/.flowconfig
@@ -0,0 +1,45 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.49.1
diff --git a/example/.gitattributes b/example/.gitattributes
@@ -0,0 +1 @@
+*.pbxproj -text
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,53 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
diff --git a/example/.watchmanconfig b/example/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/example/__tests__/index.android.js b/example/__tests__/index.android.js
@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.android.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});
diff --git a/example/__tests__/index.ios.js b/example/__tests__/index.ios.js
@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.ios.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});