Skip to content

×10 steps, LongPress, more stylish, state updates textInput #92

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

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

×10 steps, LongPress, more stylish, state updates textInput #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da5abc8
Ability to activate ×10 inc. and dec. and add longPress behavior
pooryamd Apr 3, 2023
934f900
Update README.md
pooryamd Apr 3, 2023
94a11be
Update README.md
pooryamd Apr 3, 2023
328a36c
Update App.js
pooryamd Apr 3, 2023
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
20 changes: 20 additions & 0 deletions Example/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,27 @@ export default class App extends Component {
rightButtonBackgroundColor="#18c2ef"
leftButtonBackgroundColor="#ff8080"
/>
<Text style={styles.welcome}>
Numeric Input Examples with four Buttons
</Text>
<NumericInput
value={this.state.value1}
onChange={value1 => { this.setState({ value1 }); console.log(this.state.value1); }}
onLimitReached={(isMin, msg) => console.log(isMin, msg)}
totalWidth={80}
totalHeight={30}
iconSize={10}
step={1}
minValue={0}
valueType="real"
fourButton
rounded
textColor="#B0228C"
iconStyle={{ color: "white" }}
rightButtonBackgroundColor="#18c2ef"
leftButtonBackgroundColor="#ff8080"
/>
<NumericInput
// initValue={this.state.v1}
value={this.state.v1}
onChange={(v1) => { this.setState({ v1 }); console.log(v1) }}
Expand Down
193 changes: 164 additions & 29 deletions NumericInput/NumericInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,14 @@ export default class NumericInput extends Component {
}

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

if (prevProps.value !== this.props.value) {
this.setState({
value: this.props.value,
stringValue: this.props.value.toString(),
});
}
// compare the new value (props.initValue) with the existing/old one (this.state.value)
if (this.props.initValue !== this.state.value && initSent) {
this.setState({
Expand All @@ -36,6 +41,36 @@ export default class NumericInput extends Component {
updateBaseResolution = (width, height) => {
calcSize = create({ width, height })
}
startInc = () => {
this.inc();
this.incInterval = setInterval(this.inc, 200);
}
stopInc = () => {
clearInterval(this.incInterval);
}

startDec = () => {
this.dec();
this.decInterval = setInterval(this.dec, 200);
}
stopDec = () => {
clearInterval(this.decInterval);
}
startInc10 = () => {
this.inc10();
this.inc10Interval = setInterval(this.inc10, 200);
}
stopInc10 = () => {
clearInterval(this.inc10Interval);
}

startDec10 = () => {
this.dec10();
this.dec10Interval = setInterval(this.dec10, 200);
}
stopDec10 = () => {
clearInterval(this.dec10Interval);
}
inc = () => {
let value = this.props.value && (typeof this.props.value === 'number') ? this.props.value : this.state.value
if (this.props.maxValue === null || (value + this.props.step < this.props.maxValue)) {
Expand All @@ -51,6 +86,21 @@ export default class NumericInput extends Component {
if (value !== this.props.value)
this.props.onChange && this.props.onChange(Number(value))
}
inc10 = () => {
let value = this.props.value && (typeof this.props.value === 'number') ? this.props.value : this.state.value
if (this.props.maxValue === null || (value + this.props.step * 10 < this.props.maxValue)) {
value = (value + this.props.step * 10).toFixed(12)
value = this.props.valueType === 'real' ? parseFloat(value) : parseInt(value)
this.setState({ value, stringValue: value.toString() })
} else if (this.props.maxValue !== null) {
this.props.onLimitReached(true, 'Reached Maximum Value!')
value = this.props.maxValue
this.setState({ value, stringValue: value.toString() })

}
if (value !== this.props.value)
this.props.onChange && this.props.onChange(Number(value))
}
dec = () => {
let value = this.props.value && (typeof this.props.value === 'number') ? this.props.value : this.state.value
if (this.props.minValue === null || (value - this.props.step > this.props.minValue)) {
Expand All @@ -64,6 +114,19 @@ export default class NumericInput extends Component {
this.props.onChange && this.props.onChange(Number(value))
this.setState({ value, stringValue: value.toString() })
}
dec10 = () => {
let value = this.props.value && (typeof this.props.value === 'number') ? this.props.value : this.state.value
if (this.props.minValue === null || (value - this.props.step * 10> this.props.minValue)) {
value = (value - this.props.step * 10).toFixed(12)
value = this.props.valueType === 'real' ? parseFloat(value) : parseInt(value)
} else if (this.props.minValue !== null) {
this.props.onLimitReached(false, 'Reached Minimum Value!')
value = this.props.minValue
}
if (value !== this.props.value)
this.props.onChange && this.props.onChange(Number(value))
this.setState({ value, stringValue: value.toString() })
}
isLegalValue = (value, mReal, mInt) => value === '' || (((this.props.valueType === 'real' && mReal(value)) || (this.props.valueType !== 'real' && mInt(value))) && (this.props.maxValue === null || (parseFloat(value) <= this.props.maxValue)) && (this.props.minValue === null || (parseFloat(value) >= this.props.minValue)))

realMatch = (value) => value && value.match(/-?\d+(\.(\d+)?)?/) && value.match(/-?\d+(\.(\d+)?)?/)[0] === value.match(/-?\d+(\.(\d+)?)?/).input
Expand Down Expand Up @@ -156,69 +219,116 @@ export default class NumericInput extends Component {
}

render() {
const step = this.props.step
const editable = this.props.editable
const fourButton = this.props.fourButton
const sepratorWidth = (typeof this.props.separatorWidth === 'undefined') ? this.props.sepratorWidth : this.props.separatorWidth;//supporting old property name sepratorWidth
const borderColor = this.props.borderColor
const iconStyle = [style.icon, this.props.iconStyle]
const totalWidth = this.props.totalWidth
const totalHeight = this.props.totalHeight ? this.props.totalHeight : (totalWidth * 0.4)
const inputWidth = this.props.type === 'up-down' ? (totalWidth * 0.6) : (totalWidth * 0.4)
const borderRadiusTotal = totalHeight * 0.18
const fontSize = totalHeight * 0.38
const inputWidth = this.props.type === 'up-down' ? (totalWidth * 0.6) : (fourButton ? totalWidth * 0.3 : totalWidth * 0.4)
const borderRadiusTotal = totalHeight * 0.1
const fontSize = totalHeight * 0.45
const textColor = this.props.textColor
const lableTextColor = this.props.lableTextColor
const maxReached = this.state.value === this.props.maxValue
const minReached = this.state.value === this.props.minValue
const inputContainerStyle = this.props.type === 'up-down' ?
[style.inputContainerUpDown, { width: totalWidth, height: totalHeight, borderColor: borderColor }, this.props.rounded ? { borderRadius: borderRadiusTotal } : {}, this.props.containerStyle] :
[style.inputContainerPlusMinus, { width: totalWidth, height: totalHeight, borderColor: borderColor }, this.props.rounded ? { borderRadius: borderRadiusTotal } : {}, this.props.containerStyle]
[style.inputContainerPlusMinus, { width: totalWidth + 24, height: totalHeight+10, borderColor: 'white' }, this.props.rounded ? { borderRadius: borderRadiusTotal } : {}, this.props.containerStyle]
const lableStyle = [style.lableTextStyle, { color: lableTextColor }]
const lable2Style = [style.lableTextStyle, { color: lableTextColor, fontSize: fontSize * 0.7}]
const inputStyle = this.props.type === 'up-down' ?
[style.inputUpDown, { width: inputWidth, height: totalHeight, fontSize: fontSize, color: textColor, borderRightWidth: 2, borderRightColor: borderColor }, this.props.inputStyle] :
[style.inputPlusMinus, { width: inputWidth, height: totalHeight, fontSize: fontSize, color: textColor, borderRightWidth: sepratorWidth, borderLeftWidth: sepratorWidth, borderLeftColor: borderColor, borderRightColor: borderColor }, this.props.inputStyle]
[style.inputPlusMinus, { width: inputWidth, height: totalHeight+10, fontSize: fontSize+2, color: textColor, borderRightWidth: sepratorWidth, borderLeftWidth: sepratorWidth, borderLeftColor: borderColor, borderRightColor: borderColor, borderColor:borderColor, borderWidth: 2, borderRadius: borderRadiusTotal }, this.props.inputStyle]
const upDownStyle = [{ alignItems: 'center', width: totalWidth - inputWidth, backgroundColor: this.props.upDownButtonsBackgroundColor, borderRightWidth: 1, borderRightColor: borderColor }, this.props.rounded ? { borderTopRightRadius: borderRadiusTotal, borderBottomRightRadius: borderRadiusTotal } : {}]
const rightButtonStyle = [
{
position: 'absolute',
// position: 'absolute',
zIndex: -1,
right: 0,
height: totalHeight - 2,
height: totalHeight + 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0,
borderBottomWidth: 0.5,
backgroundColor: this.props.rightButtonBackgroundColor,
width: (totalWidth - inputWidth) / 2
width: fourButton ? (totalWidth - inputWidth + 20) / 4 : (totalWidth - inputWidth + 20) / 2,
},
this.props.rounded ?
{ borderTopLeftRadius: borderRadiusTotal, borderBottomLeftRadius: borderRadiusTotal }
: {}]
const rightButton10Style = [
{
// position: 'absolute',
zIndex: -1,
right: 0,
height: totalHeight - 7,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderWidth: 0,
borderBottomWidth: 0.5,
backgroundColor: this.props.rightButton10BackgroundColor,
width: fourButton ? (totalWidth - inputWidth + 20) / 4 : (totalWidth - inputWidth + 20) / 2,
},
this.props.rounded ?
{ borderTopLeftRadius: borderRadiusTotal, borderBottomLeftRadius: borderRadiusTotal }
: {}]
const leftButtonStyle = [
{
// position: 'absolute',
zIndex: -1,
left: 0,
height: totalHeight + 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: this.props.leftButtonBackgroundColor,
width: fourButton ? (totalWidth - inputWidth + 20) / 4 : (totalWidth - inputWidth + 20) / 2,
borderBottomWidth: 0.5,
borderWidth: 0
},
this.props.rounded ?
{
borderTopRightRadius: borderRadiusTotal,
borderBottomRightRadius: borderRadiusTotal
}
: {}]
const leftButtonStyle = [
const leftButton10Style = [
{
position: 'absolute',
// position: 'absolute',
zIndex: -1,
left: 0,
height: totalHeight - 2,
height: totalHeight - 7,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: this.props.leftButtonBackgroundColor,
width: (totalWidth - inputWidth) / 2,
color: this.props.textColor,
backgroundColor: this.props.leftButton10BackgroundColor,
borderBottomWidth: 0.5,
width: fourButton ? (totalWidth - inputWidth + 20) / 4 : (totalWidth - inputWidth + 20) / 2,
borderWidth: 0
},
this.props.rounded ?
{ borderTopLeftRadius: borderRadiusTotal, borderBottomLeftRadius: borderRadiusTotal }
{
borderTopRightRadius: borderRadiusTotal,
borderBottomRightRadius: borderRadiusTotal
}
: {}]
const inputWraperStyle = {
alignSelf: 'center',
borderLeftColor: borderColor,
borderLeftWidth: sepratorWidth,
borderRightWidth: sepratorWidth,
borderRightColor: borderColor
// borderLeftColor: borderColor,
// borderLeftWidth: sepratorWidth,
// borderRightWidth: sepratorWidth,
// borderRightColor: borderColor
}
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} />
<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,{backgroundColor:'#ffffff'}]} 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' }}>
<Icon name='ios-arrow-up' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
Expand All @@ -230,15 +340,31 @@ export default class NumericInput extends Component {
</View>)
else return (
<View style={inputContainerStyle}>
<Button onPress={this.dec} style={leftButtonStyle}>
<Icon name='md-remove' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />
{fourButton ?
<Button onPressIn={this.startInc10} onPressOut={this.stopInc10} style={rightButton10Style} disabled={maxReached}>
<Icon name='md-add' size={fontSize*0.7} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
<Text style={lable2Style}>{this.props.step * 10}</Text>
</Button>
: null
}
<Button onPressIn={this.startInc} onPressOut={this.stopInc} style={rightButtonStyle} disabled={maxReached}>
<Icon name='md-add' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
<Text style={lableStyle}>{this.props.step}</Text>
</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} />
<TextInput {...this.props.extraTextInputProps} editable={editable} returnKeyType='done' underlineColorAndroid='rgba(0,0,0,0)' keyboardType='numeric' value={this.state.stringValue} onChangeText={this.onChange} style={[{backgroundColor:'#ffffff'}, inputStyle]} ref={ref => this.ref = ref} onBlur={this.onBlur} onFocus={this.onFocus} />
</View>
<Button onPress={this.inc} style={rightButtonStyle}>
<Icon name='md-add' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxIncIconStyle : {}, minReached ? this.props.reachMinIncIconStyle : {}]} />
<Button onPressIn={this.startDec} onPressOut={this.stopDec} style={leftButtonStyle} disabled={minReached}>
<Text style={lableStyle}>{this.props.step}</Text>
<Icon name='md-remove' size={fontSize} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />
</Button>
{fourButton ?
<Button onPressIn={this.startDec10} onPressOut={this.stopDec10} style={leftButton10Style} disabled={minReached}>
<Text style={lable2Style}>{this.props.step * 10}</Text>
<Icon name='md-remove' size={fontSize*0.7} style={[...iconStyle, maxReached ? this.props.reachMaxDecIconStyle : {}, minReached ? this.props.reachMinDecIconStyle : {}]} />
</Button>
: null
}
</View>)


Expand All @@ -250,6 +376,9 @@ const style = StyleSheet.create({
backgroundColor: 'grey',
height: calcSize(80),
},
lableTextStyle: {
fontFamily: 'BYekan',
},
inputContainerUpDown: {
flexDirection: 'row',
alignItems: 'center',
Expand Down Expand Up @@ -291,8 +420,10 @@ NumericInput.propTypes = {
sepratorWidth: PropTypes.number,
type: PropTypes.oneOf(['up-down', 'plus-minus']),
valueType: PropTypes.oneOf(['real', 'integer']),
fourButton: PropTypes.any,
rounded: PropTypes.any,
textColor: PropTypes.string,
lableTextColor: PropTypes.string,
containerStyle: PropTypes.any,
inputStyle: PropTypes.any,
initValue: PropTypes.number,
Expand All @@ -319,8 +450,10 @@ NumericInput.defaultProps = {
totalWidth: calcSize(220),
sepratorWidth: 1,
type: 'plus-minus',
fourButton: false,
rounded: false,
textColor: 'black',
textColor: '#B0228C',
lableTextColor: '#400010',
containerStyle: {},
inputStyle: {},
initValue: null,
Expand All @@ -330,8 +463,10 @@ NumericInput.defaultProps = {
maxValue: null,
step: 1,
upDownButtonsBackgroundColor: 'white',
rightButtonBackgroundColor: 'white',
leftButtonBackgroundColor: 'white',
rightButtonBackgroundColor: '#99b3ff',
leftButtonBackgroundColor: '#ffb299',
rightButton10BackgroundColor: '#bfcfff',
leftButton10BackgroundColor: '#ffcfbf',
editable: true,
validateOnBlur: true,
reachMaxIncIconStyle: {},
Expand Down
Loading