Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable styles for buttons as well as enable disabling and enabling buttons #66

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Enable styles for buttons as well as enable disabling and enabling buttons #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ecb0bc0
(feat): enable styles for buttons on max/min reach
Monir-Shembesh Jul 13, 2020
7313a83
(feat): enable styles for up-down buttons on max/min reach
Monir-Shembesh Jul 13, 2020
ca89bfe
(feat): dis/enable buttons on max/min reach
Monir-Shembesh Jul 13, 2020
213a709
Merge branch 'himelbrand:master' into master
Monir-Shembesh Jan 29, 2022
ca28da0
(chore): update README props
Monir-Shembesh Jan 29, 2022
7bc92a3
(fix): types
Monir-Shembesh Jan 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions NumericInput/NumericInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default class NumericInput extends Component {

// this.props refers to the new props
componentDidUpdate() {
const initSent = !(this.props.initValue !== 0 && !this.props.initValue);
const initSent = !(this.props.initValue !== 0 && !this.props.initValue);

// compare the new value (props.initValue) with the existing/old one (this.state.value)
if (this.props.initValue !== this.state.value && initSent) {
Expand All @@ -32,7 +32,7 @@ export default class NumericInput extends Component {
});
}
}

updateBaseResolution = (width, height) => {
calcSize = create({ width, height })
}
Expand Down Expand Up @@ -215,28 +215,32 @@ export default class NumericInput extends Component {
borderRightWidth: sepratorWidth,
borderRightColor: borderColor
}
const upDownButtonStyle = [{ flex: 1, width: '100%', alignItems: 'center' }]
const disableInc = this.props.disableIncButtonOnMaxReach && maxReached ? true : false;
const disableDec = this.props.disableDecButtonOnMaxReach && minReached ? true : false;

if (this.props.type === 'up-down')
return (
<View style={inputContainerStyle}>
<TextInput {...this.props.extraTextInputProps} editable={editable} returnKeyType='done' underlineColorAndroid='rgba(0,0,0,0)' keyboardType='numeric' value={this.state.stringValue} onChangeText={this.onChange} style={inputStyle} ref={ref => this.ref = ref} onBlur={this.onBlur} onFocus={this.onFocus} />
<View style={upDownStyle}>
<Button onPress={this.inc} style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<Button onPress={this.inc} disabled={disableInc} style={[...upDownButtonStyle, maxReached ? this.props.reachMaxIncButtonStyle : {}, minReached ? this.props.reachMinIncButtonStyle : {}]}>
<Icon name='ios-arrow-up' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
</Button>
<Button onPress={this.dec} style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<Button onPress={this.dec} disabled={disableDec} style={[...upDownButtonStyle, maxReached ? this.props.reachMaxDecButtonStyle : {}, minReached ? this.props.reachMinDecButtonStyle : {}]}>
<Icon name='ios-arrow-down' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />
</Button>
</View>
</View>)
else return (
<View style={inputContainerStyle}>
<Button onPress={this.dec} style={leftButtonStyle}>
<Button onPress={this.dec} disabled={disableDec} style={[leftButtonStyle, maxReached ? this.props.reachMaxDecButtonStyle : {}, minReached ? this.props.reachMinDecButtonStyle : {}]}>
<Icon name='md-remove' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />
</Button>
<View style={[inputWraperStyle]}>
<TextInput {...this.props.extraTextInputProps} editable={editable} returnKeyType='done' underlineColorAndroid='rgba(0,0,0,0)' keyboardType='numeric' value={this.state.stringValue} onChangeText={this.onChange} style={inputStyle} ref={ref => this.ref = ref} onBlur={this.onBlur} onFocus={this.onFocus} />
</View>
<Button onPress={this.inc} style={rightButtonStyle}>
<Button onPress={this.inc} disabled={disableInc} style={[rightButtonStyle, maxReached ? this.props.reachMaxIncButtonStyle : {}, minReached ? this.props.reachMinIncButtonStyle : {}]}>
<Icon name='md-add' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
</Button>
</View>)
Expand Down
165 changes: 103 additions & 62 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# react-native-numeric-input

a cross platform stylish numeric input for react native

<h3 align="center"><b>Visual Demo</b></h3>
Expand All @@ -7,22 +8,31 @@ a cross platform stylish numeric input for react native
</p>

## Working example

you can check out the very simple react native example app
just click [here](https://github.com/himelbrand/react-native-numeric-input/tree/master/Example) and follow the instructions
enjoy!

## Installation

### Latest version

v1.9.0

#### if you have react-native-vector-icons installed in your project

```bash
yarn add react-native-numeric-input
```

or with npm

```bash
npm install react-native-numeric-input --save
```

#### if you don't have react-native-vector-icons installed in your project

```bash
yarn add react-native-numeric-input react-native-vector-icons
react-native link
Expand All @@ -34,6 +44,7 @@ or with npm
npm install react-native-numeric-input react-native-vector-icons --save
react-native link
```

if you're experiencing issues with `react-native link` which is used to install react-native-vector-icons
please refer to [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) to see manual installation steps

Expand All @@ -52,92 +63,122 @@ so you can create your own responsive size function and use it to set your custo
## Usage

### import Component

```javascript
import NumericInput from 'react-native-numeric-input'
import NumericInput from "react-native-numeric-input";
```

### Basic Usage

```javascript
<NumericInput onChange={value => console.log(value)} />
<NumericInput onChange={(value) => console.log(value)} />
```

**or basic up-down**

```javascript
<NumericInput type='up-down' onChange={value => console.log(value)} />
<NumericInput type="up-down" onChange={(value) => console.log(value)} />
```

### Keep State Value

```javascript
<NumericInput value={this.state.value} onChange={value => this.setState({value})} />
<NumericInput
value={this.state.value}
onChange={(value) => this.setState({ value })}
/>
```

### Advanced Usage

```javascript
<NumericInput
value={this.state.value}
onChange={value => this.setState({value})}
onLimitReached={(isMax,msg) => console.log(isMax,msg)}
totalWidth={240}
totalHeight={50}
iconSize={25}
step={1.5}
valueType='real'
rounded
textColor='#B0228C'
iconStyle={{ color: 'white' }}
rightButtonBackgroundColor='#EA3788'
leftButtonBackgroundColor='#E56B70'/>
<NumericInput
value={this.state.value}
onChange={(value) => this.setState({ value })}
onLimitReached={(isMax, msg) => console.log(isMax, msg)}
totalWidth={240}
totalHeight={50}
iconSize={25}
step={1.5}
valueType="real"
rounded
textColor="#B0228C"
iconStyle={{ color: "white" }}
rightButtonBackgroundColor="#EA3788"
leftButtonBackgroundColor="#E56B70"
/>
```


## Props
Name | Type | Default
------------------------------------|-------------------------------------|:-------:
**value** |`number` | none
**minValue** |`number` | none
**maxValue** |`number` | none
**step** |`number` | 1
**valueType** |`'integer'` or `'real'` | `'integer'`
**initValue** |`number` | null if not used will start at 0
**iconSize** |`number` | calcSize(30)
**borderColor** |`string` | `'#d4d4d4'`
**iconStyle** |`object` | none
**totalWidth** |`number` | calcSize(220)
**separatorWidth** |`number` | 1
**type** |`'plus-minus'` or `'up-down'` | `'plus-minus'`
**rounded** |`boolean` | false
**textColor** |`string` | `'black'`
**containerStyle** |`object` | none
**inputStyle** |`object` | none
**upDownButtonsBackgroundColor** |`string` | `'white'`
**rightButtonBackgroundColor** |`string` | `'white'`
**leftButtonBackgroundColor** |`string` | `'white'`
**totalHeight** |`number` | none
**onChange** |`function` | none - required prop
**onLimitReached** |`function` | none (empty function)
**editable** |`boolean` | true
**validateOnBlur** |`boolean` | true
**reachMaxIncIconStyle** |`object` | none
**reachMaxDecIconStyle** |`object` | none
**reachMinIncIconStyle** |`object` | none
**reachMinDecIconStyle** |`object` | none
**extraTextInputProps** |`object` | none

| Name | Type | Default |
| -------------------------------- | ----------------------------- | :------------------------------: |
| **value** | `number` | none |
| **minValue** | `number` | none |
| **maxValue** | `number` | none |
| **disableDecButtonOnMinReach** | `boolean` | `'false'` |
| **disableIncButtonOnMaxReach** | `boolean` | `'false'` |
| **step** | `number` | 1 |
| **valueType** | `'integer'` or `'real'` | `'integer'` |
| **initValue** | `number` | null if not used will start at 0 |
| **iconSize** | `number` | calcSize(30) |
| **borderColor** | `string` | `'#d4d4d4'` |
| **iconStyle** | `object` | none |
| **totalWidth** | `number` | calcSize(220) |
| **separatorWidth** | `number` | 1 |
| **type** | `'plus-minus'` or `'up-down'` | `'plus-minus'` |
| **rounded** | `boolean` | false |
| **textColor** | `string` | `'black'` |
| **containerStyle** | `object` | none |
| **inputStyle** | `object` | none |
| **upDownButtonsBackgroundColor** | `string` | `'white'` |
| **rightButtonBackgroundColor** | `string` | `'white'` |
| **leftButtonBackgroundColor** | `string` | `'white'` |
| **totalHeight** | `number` | none |
| **onChange** | `function` | none - required prop |
| **onLimitReached** | `function` | none (empty function) |
| **editable** | `boolean` | true |
| **validateOnBlur** | `boolean` | true |
| **reachMaxIncIconStyle** | `object` | none |
| **reachMaxDecIconStyle** | `object` | none |
| **reachMinIncIconStyle** | `object` | none |
| **reachMinDecIconStyle** | `object` | none |
| **reachMaxIncButtonStyle** | `object` | none |
| **reachMinIncButtonStyle** | `object` | none |
| **reachMaxDecButtonStyle** | `object` | none |
| **reachMinDecButtonStyle** | `object` | none |
| **extraTextInputProps** | `object` | none |

### notes about props

* **value prop** - this component uses it's own state to hold value if value is not given as a prop
* **style props** - this component has a default style and the styles props are to override the default style or add more fields
* **totalWidth prop** - this prop is for the entire component width, and all other sizes are derived from it , unless given other size props
* **initValue prop** - if using value prop, this is not needed and the initial value can be given by the value prop
* **validateOnBlur** - added on version 1.3.2, if set to false the text input will validate while typing, not recommended, so just keep it true unless there is a good reason not to use the default functionallity
* **reachMaxIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case maxValue is reached - **optional**
* **reachMaxDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case maxValue is reached - **optional**
* **reachMinIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case minValue is reached - **optional**
* **reachMinDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case minValue is reached - **optional**
* **onLimitReached** - added on version 1.7.0, used to handle event of min/max reached, **this function receives 2 arguments: (isMas:Boolean, msg:String)** like in the advanced example above - **optional**
* **extraTextInputProps** - added on version 1.8.0, used to add props used for the original TextInput component that are not used/supported in this component explicitly - **optional**
- **value prop** - this component uses it's own state to hold value if value is not given as a prop
- **style props** - this component has a default style and the styles props are to override the default style or add more fields
- **totalWidth prop** - this prop is for the entire component width, and all other sizes are derived from it , unless given other size props
- **initValue prop** - if using value prop, this is not needed and the initial value can be given by the value prop
- **validateOnBlur** - added on version 1.3.2, if set to false the text input will validate while typing, not recommended, so just keep it true unless there is a good reason not to use the default functionallity
- **reachMaxIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case maxValue is reached - **optional**
- **reachMaxDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case maxValue is reached - **optional**
- **reachMinIncIconStyle** - added on version 1.4.0, used to set style to the increment button icon in case minValue is reached - **optional**
- **reachMinDecIconStyle** - added on version 1.4.0, used to set style to the decrement button icon in case minValue is reached - **optional**
- **onLimitReached** - added on version 1.7.0, used to handle event of min/max reached, **this function receives 2 arguments: (isMas:Boolean, msg:String)** like in the advanced example above - **optional**
- **extraTextInputProps** - added on version 1.8.0, used to add props used for the original TextInput component that are not used/supported in this component explicitly - **optional**

- **disableDecButtonOnMinReach** - used to disable the decrement value button when the minimum value set is reached - **optional**

- **disableIncButtonOnMaxReach** - used to disable the increment value button when the maximum value set is reached - **optional**

- **reachMaxIncButtonStyle** - used to style the increment button when the max value set is reached - **optional**

- **reachMinIncButtonStyle** - used to style the increment button when the min value set is reached - **optional**

- **reachMaxDecButtonStyle** - used to style the decrement button when the max value set is reached - **optional**

- **reachMinDecButtonStyle** - used to style the decrement button when the min value set is reached - **optional**

## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/himelbrand/react-native-numeric-input/tags).

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/himelbrand/react-native-numeric-input/tags).

## License

This project is licensed under the MIT License
Loading