Skip to content

Commit cac7db1

Browse files
hannigandhannigand
authored
Reset Stepper (#16)
* 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 * Feature/font family (#12) * Added support for fontFamily * Add fontFamily support * Add fontFamily support * Remove logs * Bump up version * Reset UIStepper (#15) * Added ref to UIStepper * Updated documentation * Reset UIStepper to npm module as appose to local file * Added value prop * Updated docs * Added to docs * Fixed UI issues
1 parent e9381ea commit cac7db1

File tree

12 files changed

+488
-41
lines changed

12 files changed

+488
-41
lines changed

‎README.md‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -40,34 +40,46 @@ You can now use custom images, from your local file system or from the Internet.
4040

4141
## Props
4242

43-
| Name | Type | Description | Default |
44-
| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------- |
45-
| `initialValue` | Number | Start value | 0 |
46-
| `minimumValue` | Number | Minimum value | 0 |
47-
| `maximumValue` | Number | Maximum value | 100 |
48-
| `steps` | Number | Increment value | 1 |
49-
| `displayValue` | Boolean | Displays the stepper value between the increment and decrement button | false |
50-
| `incrementImage` | String or Number | Override the default increment image | require('./assets/increment.png') |
51-
| `decrementImage` | String or Number | Override the default decrement image | require('./assets/decrement.png') |
52-
| `wraps` | Boolean | When set to true, incrementing beyond the `maximumValue` will set the value to `minimumValue` and vice versa | false |
53-
| `tintColor` | String | Changes the color of all the non-transparent pixels to the tintColor. | #0076FF |
54-
| `overrideTintColor` | Boolean | When using an external image, set whether you want the tintColor to be applied to non-transparent pixels. | false |
55-
| `backgroundColor` | String | Background color | transparent |
56-
| `vertical` | Boolean | Display a vertical UI Stepper. You **must** specify a height and a width. | false |
57-
| `displayDecrementFirst` | Boolean | Display the decrement button above the increment button, only works when `vertical` is `true` | false |
58-
| `width` | Number | Width | 94 |
59-
| `height` | Number | Height | 29 |
60-
| `textColor` | String | The desired text colour which will be used when `displayValue` is set to `true` | #0076FF |
61-
| `fontFamily` | String | The font family used on the value displayed when `displayValue` is set to `true` | System |
62-
| `fontSize` | Number | The font size used on the value displayed when `displayValue` is set to `true` | 15 |
63-
| `borderColor` | String | Color used for the border | #0076FF |
64-
| `borderWidth` | Number | Width of the border | 1 |
65-
| `borderRadius` | Number | Radius of the border | 4 |
66-
| `onValueChange` | Function | Executed when the value changes. The value is passed as a parameter | null |
67-
| `onIncrement` | Function | Executed when the User clicks the increment (+) button. The value is passed as a parameter | null |
68-
| `onDecrement` | Function | Executed when the User clicks the decrement (+) button. The value is passed as a parameter | null |
69-
| `onMinimumReached` | Function | Executed when the `minimumValue` is reached. The value is passed as a parameter | null |
70-
| `onMaximumReached` | Function | Executed when the `maximumValue` is reached. The value is passed as a parameter | null |
43+
| Name | Type | Description | Default |
44+
| ----------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
45+
| `initialValue` | Number | Start value | 0 |
46+
| `value` | Number | Forcibly override the value | 0 |
47+
| `minimumValue` | Number | Minimum value | 0 |
48+
| `maximumValue` | Number | Maximum value | 100 |
49+
| `steps` | Number | Increment value | 1 |
50+
| `displayValue` | Boolean | Displays the stepper value between the increment and decrement button | false |
51+
| `incrementImage` | String or Number | Override the default increment image | require('./assets/increment.png') |
52+
| `decrementImage` | String or Number | Override the default decrement image | require('./assets/decrement.png') |
53+
| `wraps` | Boolean | When set to true, incrementing beyond the `maximumValue` will set the value to `minimumValue` and vice versa | false |
54+
| `tintColor` | String | Changes the color of all the non-transparent pixels to the tintColor. | #0076FF |
55+
| `overrideTintColor` | Boolean | When using an external image, set whether you want the tintColor to be applied to non-transparent pixels. | false |
56+
| `backgroundColor` | String | Background color | transparent |
57+
| `vertical` | Boolean | Display a vertical UI Stepper. You **must** specify a height and a width. | false |
58+
| `displayDecrementFirst` | Boolean | Display the decrement button above the increment button, only works when `vertical` is `true` | false |
59+
| `width` | Number | Width | 94 |
60+
| `height` | Number | Height | 29 |
61+
| `textColor` | String | The desired text colour which will be used when `displayValue` is set to `true` | #0076FF |
62+
| `fontFamily` | String | The font family used on the value displayed when `displayValue` is set to `true` | System |
63+
| `fontSize` | Number | The font size used on the value displayed when `displayValue` is set to `true` | 15 |
64+
| `borderColor` | String | Color used for the border | #0076FF |
65+
| `borderWidth` | Number | Width of the border | 1 |
66+
| `borderRadius` | Number | Radius of the border | 4 |
67+
| `onValueChange` | Function | Executed when the value changes. The value is passed as a parameter | null |
68+
| `onIncrement` | Function | Executed when the User clicks the increment (+) button. The value is passed as a parameter | null |
69+
| `onDecrement` | Function | Executed when the User clicks the decrement (+) button. The value is passed as a parameter | null |
70+
| `onMinimumReached` | Function | Executed when the `minimumValue` is reached. The value is passed as a parameter | null |
71+
| `onMaximumReached` | Function | Executed when the `maximumValue` is reached. The value is passed as a parameter | null |
72+
| `innerRef` | Function | A reference to the rendered UIStepper. You can use this to gain access to class-based methods. `increment()`, `decrement()`, `resetValue()` and `setValue()` are most commonly used | null |
73+
74+
## Contributing
75+
76+
There are no requirements for contributing to the react-native-ui-stepper package. You can [browse](https://github.com/hannigand/react-native-ui-stepper/issues/) or raise issues that you are would like to contribute to.
77+
78+
1. Fork the repository on Github
79+
2. Clone the project
80+
3. Commit changes to your forked branch
81+
4. Push your changes to your branch
82+
5. Submit a Pull Request so that it can be merged into react-native-ui-stepper
7183

7284
## Run Example
7385

‎UIStepper.js‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const styles = StyleSheet.create({
2121
class UIStepper extends Component {
2222
static propTypes = {
2323
initialValue: PropTypes.number,
24+
value: PropTypes.number,
2425
minimumValue: PropTypes.number,
2526
maximumValue: PropTypes.number,
2627
steps: PropTypes.number,
@@ -47,10 +48,12 @@ class UIStepper extends Component {
4748
overrideTintColor: PropTypes.bool,
4849
vertical: PropTypes.bool,
4950
displayDecrementFirst: PropTypes.bool,
50-
fontFamily: PropTypes.string
51+
fontFamily: PropTypes.string,
52+
innerRef: PropTypes.func,
5153
};
5254
static defaultProps = {
5355
initialValue: 0,
56+
value: 0,
5457
minimumValue: 0,
5558
maximumValue: 100,
5659
steps: 1,
@@ -77,14 +80,36 @@ class UIStepper extends Component {
7780
overrideTintColor: false,
7881
vertical: false,
7982
displayDecrementFirst: false,
80-
fontFamily: 'System'
83+
fontFamily: 'System',
84+
innerRef: null,
8185
};
8286
constructor(props) {
8387
super(props);
8488
this.state = {
85-
value: this.props.initialValue,
89+
value: props.initialValue,
8690
};
8791
}
92+
componentDidMount() {
93+
const { innerRef } = this.props;
94+
if (innerRef) {
95+
innerRef(this);
96+
}
97+
}
98+
componentWillUnmount() {
99+
const { innerRef } = this.props;
100+
if (innerRef) {
101+
innerRef(undefined);
102+
}
103+
}
104+
componentWillReceiveProps(nextProps) {
105+
const { value: currentValue } = this.props;
106+
const { value: nextValue } = nextProps;
107+
if (currentValue !== nextValue) {
108+
this.setState({
109+
value: nextValue,
110+
});
111+
}
112+
}
88113
decrement = () => {
89114
const { steps, onDecrement } = this.props;
90115
let value = this.state.value;
@@ -123,6 +148,7 @@ class UIStepper extends Component {
123148
alignSelf: 'stretch',
124149
width: this.getImageWidth(),
125150
height: this.getImageHeight(),
151+
alignSelf: 'center',
126152
};
127153
if (overrideTintColor) {
128154
styles.tintColor = tintColor;
@@ -217,6 +243,12 @@ class UIStepper extends Component {
217243
callback(value);
218244
}
219245
};
246+
resetValue = () => {
247+
const { initialValue } = this.props;
248+
this.setState({
249+
value: initialValue,
250+
});
251+
};
220252
render() {
221253
const {
222254
tintColor,
@@ -236,7 +268,7 @@ class UIStepper extends Component {
236268
fontSize,
237269
vertical,
238270
displayDecrementFirst,
239-
fontFamily
271+
fontFamily,
240272
} = this.props;
241273
return (
242274
<View

‎example/components/Container.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import React from 'react';
2-
import {ScrollView} from 'react-native';
2+
import { ScrollView } from 'react-native';
33

4-
export default ({children}) => <ScrollView style={{flex: 1, padding: 20,}}>{children}</ScrollView>
4+
export default ({ children }) => (
5+
<ScrollView style={{ flex: 1, padding: 20, marginBottom: 50 }}>
6+
{children}
7+
</ScrollView>
8+
);

‎example/pages/MainPage.js‎

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,31 @@
11
import React, { Component } from 'react';
2-
import { Text, View, TouchableOpacity, Linking } from 'react-native';
3-
import UIStepper from 'react-native-ui-stepper';
2+
import { Text, View, TouchableOpacity, Linking, Button } from 'react-native';
3+
import UIStepper from './UIStepper';
44

55
import Container from '../components/Container';
66
import Header from '../components/Header';
77
import Item from '../components/Item';
88

99
class MainPage extends Component {
1010
static navigationOptions = {
11-
title: 'Welcome'
11+
title: 'Welcome',
12+
};
13+
constructor() {
14+
super();
15+
this.state = {
16+
value: 0,
17+
};
18+
}
19+
componentDidMount() {
20+
setInterval(() => {
21+
this.setState({ value: this.state.value + 1 });
22+
}, 1500);
23+
}
24+
increment = () => {
25+
this.setState({ value: this.state.value + 1 });
26+
};
27+
decrement = () => {
28+
this.setState({ value: this.state.value - 1 });
1229
};
1330
render() {
1431
return (
@@ -166,7 +183,6 @@ class MainPage extends Component {
166183
Mixture of a local and network image
167184
</Text>
168185
</Item>
169-
170186
<Item>
171187
<UIStepper
172188
displayValue
@@ -183,6 +199,53 @@ class MainPage extends Component {
183199
Display the decrement button above the increment
184200
</Text>
185201
</Item>
202+
<Item>
203+
<UIStepper
204+
displayValue
205+
innerRef={stepper => {
206+
this.stepper = stepper;
207+
}}
208+
/>
209+
<Button
210+
title="Increment"
211+
onPress={() => {
212+
this.stepper.increment();
213+
}}
214+
/>
215+
<Button
216+
title="Decrement"
217+
onPress={() => {
218+
this.stepper.decrement();
219+
}}
220+
/>
221+
<Button
222+
title="Reset"
223+
onPress={() => {
224+
this.stepper.resetValue();
225+
}}
226+
/>
227+
<Button
228+
title="Set value to 50"
229+
onPress={() => {
230+
this.stepper.setValue(50);
231+
}}
232+
/>
233+
<Text style={{ marginTop: 10, marginBottom: 10 }}>
234+
Use the innerRef prop to gain access to class-based methods
235+
</Text>
236+
</Item>
237+
<Item>
238+
<UIStepper
239+
displayValue
240+
initialValue={0}
241+
value={this.state.value}
242+
onIncrement={this.increment}
243+
onDecrement={this.decrement}
244+
/>
245+
<Text style={{ marginTop: 10, marginBottom: 10 }}>
246+
Use a state variable to update the UIStepper
247+
</Text>
248+
</Item>
186249
</Container>
187250
<TouchableOpacity
188251
style={{
@@ -193,11 +256,11 @@ class MainPage extends Component {
193256
left: 10,
194257
padding: 10,
195258
borderRadius: 3,
196-
backgroundColor: '#428bca'
259+
backgroundColor: '#428bca',
197260
}}
198261
onPress={() => {
199262
Linking.openURL(
200-
'https://github.com/hannigand/react-native-ui-stepper/blob/master/README.md#props'
263+
'https://github.com/hannigand/react-native-ui-stepper/blob/master/README.md#props',
201264
);
202265
}}
203266
>

0 commit comments

Comments
 (0)