Skip to content

Commit

Permalink
Reset Stepper (#16)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@hannigand
hannigand authored Dec 22, 2017
1 parent e9381ea commit cac7db1
Show file tree
Hide file tree
Showing 12 changed files with 488 additions and 41 deletions.
68 changes: 40 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
40 changes: 36 additions & 4 deletions UIStepper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -123,6 +148,7 @@ class UIStepper extends Component {
alignSelf: 'stretch',
width: this.getImageWidth(),
height: this.getImageHeight(),
alignSelf: 'center',
};
if (overrideTintColor) {
styles.tintColor = tintColor;
Expand Down Expand Up @@ -217,6 +243,12 @@ class UIStepper extends Component {
callback(value);
}
};
resetValue = () => {
const { initialValue } = this.props;
this.setState({
value: initialValue,
});
};
render() {
const {
tintColor,
Expand All @@ -236,7 +268,7 @@ class UIStepper extends Component {
fontSize,
vertical,
displayDecrementFirst,
fontFamily
fontFamily,
} = this.props;
return (
<View
Expand Down
8 changes: 6 additions & 2 deletions example/components/Container.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import React from 'react';
import {ScrollView} from 'react-native';
import { ScrollView } from 'react-native';

export default ({children}) => <ScrollView style={{flex: 1, padding: 20,}}>{children}</ScrollView>
export default ({ children }) => (
<ScrollView style={{ flex: 1, padding: 20, marginBottom: 50 }}>
{children}
</ScrollView>
);
75 changes: 69 additions & 6 deletions example/pages/MainPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,31 @@
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';
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 (
Expand Down Expand Up @@ -166,7 +183,6 @@ class MainPage extends Component {
Mixture of a local and network image
</Text>
</Item>

<Item>
<UIStepper
displayValue
Expand All @@ -183,6 +199,53 @@ class MainPage extends Component {
Display the decrement button above the increment
</Text>
</Item>
<Item>
<UIStepper
displayValue
innerRef={stepper => {
this.stepper = stepper;
}}
/>
<Button
title="Increment"
onPress={() => {
this.stepper.increment();
}}
/>
<Button
title="Decrement"
onPress={() => {
this.stepper.decrement();
}}
/>
<Button
title="Reset"
onPress={() => {
this.stepper.resetValue();
}}
/>
<Button
title="Set value to 50"
onPress={() => {
this.stepper.setValue(50);
}}
/>
<Text style={{ marginTop: 10, marginBottom: 10 }}>
Use the innerRef prop to gain access to class-based methods
</Text>
</Item>
<Item>
<UIStepper
displayValue
initialValue={0}
value={this.state.value}
onIncrement={this.increment}
onDecrement={this.decrement}
/>
<Text style={{ marginTop: 10, marginBottom: 10 }}>
Use a state variable to update the UIStepper
</Text>
</Item>
</Container>
<TouchableOpacity
style={{
Expand All @@ -193,11 +256,11 @@ class MainPage extends Component {
left: 10,
padding: 10,
borderRadius: 3,
backgroundColor: '#428bca'
backgroundColor: '#428bca',
}}
onPress={() => {
Linking.openURL(
'https://github.com/hannigand/react-native-ui-stepper/blob/master/README.md#props'
'https://github.com/hannigand/react-native-ui-stepper/blob/master/README.md#props',
);
}}
>
Expand Down
Loading

0 comments on commit cac7db1

Please sign in to comment.