diff --git a/README.md b/README.md index d972470..f6ae19e 100644 --- a/README.md +++ b/README.md @@ -40,34 +40,46 @@ You can now use custom images, from your local file system or from the Internet. ## Props -| Name | Type | Description | Default | -| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------- | -| `initialValue` | Number | Start value | 0 | -| `minimumValue` | Number | Minimum value | 0 | -| `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. 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 | -| `textColor` | String | The desired text colour which will be used when `displayValue` is set to `true` | #0076FF | -| `fontFamily` | String | The font family used on the value displayed when `displayValue` is set to `true` | System | -| `fontSize` | Number | The font size used on the value displayed when `displayValue` is set to `true` | 15 | -| `borderColor` | String | Color used for the border | #0076FF | -| `borderWidth` | Number | Width of the border | 1 | -| `borderRadius` | Number | Radius of the border | 4 | -| `onValueChange` | Function | Executed when the value changes. The value is passed as a parameter | null | -| `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 | +| Name | Type | Description | Default | +| ----------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | +| `initialValue` | Number | Start value | 0 | +| `value` | Number | Forcibly override the value | 0 | +| `minimumValue` | Number | Minimum value | 0 | +| `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. 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 | +| `textColor` | String | The desired text colour which will be used when `displayValue` is set to `true` | #0076FF | +| `fontFamily` | String | The font family used on the value displayed when `displayValue` is set to `true` | System | +| `fontSize` | Number | The font size used on the value displayed when `displayValue` is set to `true` | 15 | +| `borderColor` | String | Color used for the border | #0076FF | +| `borderWidth` | Number | Width of the border | 1 | +| `borderRadius` | Number | Radius of the border | 4 | +| `onValueChange` | Function | Executed when the value changes. The value is passed as a parameter | null | +| `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 | +| `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 | + +## Contributing + +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. + +1. Fork the repository on Github +2. Clone the project +3. Commit changes to your forked branch +4. Push your changes to your branch +5. Submit a Pull Request so that it can be merged into react-native-ui-stepper ## Run Example diff --git a/UIStepper.js b/UIStepper.js index 6bab487..2fe581e 100644 --- a/UIStepper.js +++ b/UIStepper.js @@ -21,6 +21,7 @@ const styles = StyleSheet.create({ class UIStepper extends Component { static propTypes = { initialValue: PropTypes.number, + value: PropTypes.number, minimumValue: PropTypes.number, maximumValue: PropTypes.number, steps: PropTypes.number, @@ -47,10 +48,12 @@ class UIStepper extends Component { overrideTintColor: PropTypes.bool, vertical: PropTypes.bool, displayDecrementFirst: PropTypes.bool, - fontFamily: PropTypes.string + fontFamily: PropTypes.string, + innerRef: PropTypes.func, }; static defaultProps = { initialValue: 0, + value: 0, minimumValue: 0, maximumValue: 100, steps: 1, @@ -77,14 +80,36 @@ class UIStepper extends Component { overrideTintColor: false, vertical: false, displayDecrementFirst: false, - fontFamily: 'System' + fontFamily: 'System', + innerRef: null, }; constructor(props) { super(props); this.state = { - value: this.props.initialValue, + value: props.initialValue, }; } + componentDidMount() { + const { innerRef } = this.props; + if (innerRef) { + innerRef(this); + } + } + componentWillUnmount() { + const { innerRef } = this.props; + if (innerRef) { + innerRef(undefined); + } + } + componentWillReceiveProps(nextProps) { + const { value: currentValue } = this.props; + const { value: nextValue } = nextProps; + if (currentValue !== nextValue) { + this.setState({ + value: nextValue, + }); + } + } decrement = () => { const { steps, onDecrement } = this.props; let value = this.state.value; @@ -123,6 +148,7 @@ class UIStepper extends Component { alignSelf: 'stretch', width: this.getImageWidth(), height: this.getImageHeight(), + alignSelf: 'center', }; if (overrideTintColor) { styles.tintColor = tintColor; @@ -217,6 +243,12 @@ class UIStepper extends Component { callback(value); } }; + resetValue = () => { + const { initialValue } = this.props; + this.setState({ + value: initialValue, + }); + }; render() { const { tintColor, @@ -236,7 +268,7 @@ class UIStepper extends Component { fontSize, vertical, displayDecrementFirst, - fontFamily + fontFamily, } = this.props; return ( {children} \ No newline at end of file +export default ({ children }) => ( + + {children} + +); diff --git a/example/pages/MainPage.js b/example/pages/MainPage.js index ce79194..115ffdf 100644 --- a/example/pages/MainPage.js +++ b/example/pages/MainPage.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import { Text, View, TouchableOpacity, Linking } from 'react-native'; -import UIStepper from 'react-native-ui-stepper'; +import { Text, View, TouchableOpacity, Linking, Button } from 'react-native'; +import UIStepper from './UIStepper'; import Container from '../components/Container'; import Header from '../components/Header'; @@ -8,7 +8,24 @@ import Item from '../components/Item'; class MainPage extends Component { static navigationOptions = { - title: 'Welcome' + title: 'Welcome', + }; + constructor() { + super(); + this.state = { + value: 0, + }; + } + componentDidMount() { + setInterval(() => { + this.setState({ value: this.state.value + 1 }); + }, 1500); + } + increment = () => { + this.setState({ value: this.state.value + 1 }); + }; + decrement = () => { + this.setState({ value: this.state.value - 1 }); }; render() { return ( @@ -166,7 +183,6 @@ class MainPage extends Component { Mixture of a local and network image - + + { + this.stepper = stepper; + }} + /> +