Skip to content

Commit 3ddb7fa

Browse files
hannigandhannigand
authored
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
1 parent 82802fd commit 3ddb7fa

File tree

3 files changed

+81
-45
lines changed

3 files changed

+81
-45
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ You can now use custom images, from your local file system or from the Internet.
5353
| `tintColor` | String | Changes the color of all the non-transparent pixels to the tintColor. | #0076FF |
5454
| `overrideTintColor` | Boolean | When using an external image, set whether you want the tintColor to be applied to non-transparent pixels. | false |
5555
| `backgroundColor` | String | Background color | transparent |
56-
| `vertical` | Boolean | Display a vertical UI Stepper | false |
56+
| `vertical` | Boolean | Display a vertical UI Stepper. You **must** specify a height and a width. | false |
5757
| `displayDecrementFirst` | Boolean | Display the decrement button above the increment button, only works when `vertical` is `true` | false |
5858
| `width` | Number | Width | 94 |
5959
| `height` | Number | Height | 29 |

‎UIStepper.js

+79-43
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import React, { Component } from "react";
2-
import { View, StyleSheet, TouchableOpacity, Image, Text } from "react-native";
3-
import PropTypes from "prop-types";
1+
import React, { Component } from 'react';
2+
import { View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
3+
import PropTypes from 'prop-types';
44

55
const styles = StyleSheet.create({
66
container: {
7-
flexDirection: "row"
7+
flexDirection: 'row',
88
},
99
button: {
1010
flex: 1,
11-
justifyContent: "center",
12-
alignItems: "center"
11+
justifyContent: 'center',
12+
alignItems: 'center',
1313
},
1414
valueContainer: {
1515
flex: 1,
16-
justifyContent: "center",
17-
alignItems: "center"
18-
}
16+
justifyContent: 'center',
17+
alignItems: 'center',
18+
},
1919
});
2020

2121
class UIStepper extends Component {
@@ -53,15 +53,15 @@ class UIStepper extends Component {
5353
minimumValue: 0,
5454
maximumValue: 100,
5555
steps: 1,
56-
tintColor: "#0076FF",
57-
backgroundColor: "transparent",
58-
decrementImage: require("./assets/decrement.png"),
59-
incrementImage: require("./assets/increment.png"),
60-
imageWidth: 45,
61-
imageHeight: 27,
56+
tintColor: '#0076FF',
57+
backgroundColor: 'transparent',
58+
decrementImage: require('./assets/decrement.png'),
59+
incrementImage: require('./assets/increment.png'),
60+
imageWidth: 20,
61+
imageHeight: 15,
6262
width: 94,
6363
height: 29,
64-
borderColor: "#0076FF",
64+
borderColor: '#0076FF',
6565
borderWidth: 1,
6666
borderRadius: 4,
6767
onValueChange: null,
@@ -71,7 +71,7 @@ class UIStepper extends Component {
7171
onMaximumReached: null,
7272
wraps: false,
7373
displayValue: false,
74-
textColor: "#0076FF",
74+
textColor: '#0076FF',
7575
fontSize: 15,
7676
overrideTintColor: false,
7777
vertical: false,
@@ -80,8 +80,9 @@ class UIStepper extends Component {
8080
constructor(props) {
8181
super(props);
8282
this.state = {
83-
value: this.props.initialValue
83+
value: this.props.initialValue,
8484
};
85+
console.log(this.props);
8586
}
8687
decrement = () => {
8788
const { steps, onDecrement } = this.props;
@@ -95,37 +96,70 @@ class UIStepper extends Component {
9596
value += steps;
9697
this.validate(value, onIncrement);
9798
};
98-
isExternalImage = image => typeof image === "string";
99+
isExternalImage = image => typeof image === 'string';
99100
resolveImage = image => {
100101
if (this.isExternalImage(image)) {
101102
return { uri: image };
102103
}
103104
return image;
104105
};
105106
resolveStyles = image => {
106-
const { tintColor, height, width, overrideTintColor } = this.props;
107+
const {
108+
tintColor,
109+
height,
110+
width,
111+
overrideTintColor,
112+
imageHeight,
113+
imageWidth,
114+
buttonPadding,
115+
} = this.props;
116+
const containerHeight = height / 3;
117+
const containerWidth = width / 3;
118+
107119
if (this.isExternalImage(image)) {
108120
const styles = {
109121
flex: 1,
110-
alignSelf: "stretch"
111-
}
112-
if(overrideTintColor) {
122+
alignSelf: 'stretch',
123+
width: this.getImageWidth(),
124+
height: this.getImageHeight(),
125+
};
126+
if (overrideTintColor) {
113127
styles.tintColor = tintColor;
114128
}
115129
return styles;
116130
}
117131
return {
118-
tintColor
132+
tintColor,
133+
width: this.getImageWidth(),
134+
height: this.getImageHeight(),
119135
};
120136
};
137+
getImageHeight = () => {
138+
const { imageHeight, height } = this.props;
139+
const containerHeight = height;
140+
141+
if (imageHeight > containerHeight) {
142+
return height;
143+
}
144+
return imageHeight;
145+
};
146+
getImageWidth = () => {
147+
const { imageWidth, width } = this.props;
148+
const containerWidth = width / 3;
149+
150+
if (imageWidth > containerWidth) {
151+
return containerWidth;
152+
}
153+
return imageWidth;
154+
};
121155
validate = (value, callback) => {
122156
const {
123157
minimumValue: min,
124158
maximumValue: max,
125159
onValueChange,
126160
onMinimumReached,
127161
onMaximumReached,
128-
wraps
162+
wraps,
129163
} = this.props;
130164
if (min <= value && max >= value) {
131165
this.setState({
@@ -142,7 +176,7 @@ class UIStepper extends Component {
142176
if (value < min) {
143177
if (wraps) {
144178
this.setState({
145-
value: max
179+
value: max,
146180
});
147181
if (onValueChange) {
148182
onValueChange(max);
@@ -157,7 +191,7 @@ class UIStepper extends Component {
157191
if (value > max) {
158192
if (wraps) {
159193
this.setState({
160-
value: min
194+
value: min,
161195
});
162196
if (onValueChange) {
163197
onValueChange(min);
@@ -173,7 +207,7 @@ class UIStepper extends Component {
173207
setValue = (value, callback) => {
174208
const { onValueChange } = this.props;
175209
this.setState({
176-
value: value
210+
value: value,
177211
});
178212
if (onValueChange) {
179213
onValueChange(value);
@@ -200,7 +234,7 @@ class UIStepper extends Component {
200234
textColor,
201235
fontSize,
202236
vertical,
203-
displayDecrementFirst
237+
displayDecrementFirst,
204238
} = this.props;
205239
return (
206240
<View
@@ -213,49 +247,51 @@ class UIStepper extends Component {
213247
borderColor,
214248
borderWidth,
215249
borderRadius,
216-
flex: 1,
217-
flexDirection: vertical ? displayDecrementFirst ? 'column' : 'column-reverse' : 'row',
218-
}
250+
flexDirection: vertical
251+
? displayDecrementFirst ? 'column' : 'column-reverse'
252+
: 'row',
253+
},
219254
]}
220255
>
221256
<TouchableOpacity
222257
onPress={this.decrement}
223258
style={[
224259
styles.button,
225260
{
226-
borderRightWidth: vertical ? 0 : borderWidth,
261+
borderRightWidth: vertical ? 0 : borderWidth,
227262
borderRightColor: borderColor,
228-
height: vertical ? 30 : 'auto'
229-
}
263+
height: vertical ? 30 : 'auto',
264+
},
230265
]}
231266
>
232267
<Image
233268
source={this.resolveImage(decrementImage)}
234-
style={[this.resolveStyles(decrementImage)]}
235-
resizeMode={"contain"}
269+
style={this.resolveStyles(decrementImage)}
270+
resizeMode={'contain'}
236271
/>
237272
</TouchableOpacity>
238-
{displayValue &&
273+
{displayValue && (
239274
<View style={styles.valueContainer}>
240275
<Text style={{ color: textColor, fontSize }}>
241276
{this.state.value}
242277
</Text>
243-
</View>}
278+
</View>
279+
)}
244280
<TouchableOpacity
245281
onPress={this.increment}
246282
style={[
247283
styles.button,
248284
{
249285
borderLeftWidth: vertical ? 0 : displayValue ? 1 : 0,
250286
borderColor,
251-
height: vertical ? 30 : 'auto'
252-
}
287+
height: vertical ? 30 : 'auto',
288+
},
253289
]}
254290
>
255291
<Image
256292
source={this.resolveImage(incrementImage)}
257-
style={[this.resolveStyles(incrementImage)]}
258-
resizeMode={"contain"}
293+
style={this.resolveStyles(incrementImage)}
294+
resizeMode={'contain'}
259295
/>
260296
</TouchableOpacity>
261297
</View>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-ui-stepper",
3-
"version": "1.2.0",
3+
"version": "1.2.1",
44
"description": "A react-native implementation of the iOS UIStepper",
55
"main": "UIStepper.js",
66
"scripts": {

0 commit comments

Comments
 (0)