react-native-asata/NumberInput.js at master · asata/react-native-asata · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/****************************************************************************************************************
<NumberInput
	defaultValue={20}
	step={1}
	minValue={0}
	maxValue={100}
	borderColor={'red'}
	textSize={20}
	onChange={(value) => {

	}} />
*****************************************************************************************************************/

import React, { Component } from 'react';
import {
	View,
	StyleSheet,
	Text,
	TouchableHighlight,
} from 'react-native';
import {
	FontNormalize,
	NumberFormat
} from './Common';

class NumberInput extends Component<{}> {
	constructor(props) {
		super(props);

		this.state = {
			numberValue : this.props.defaultValue,
			stepValue 	: this.props.step,
			minValue 	: this.props.minValue,
			maxValue 	: this.props.maxValue,
		};
	}

	componentWillMount () {

	}

	componentWillUnmount () {

	}

	render() {
		return (
			<View style={ styles.container }>
				<TouchableHighlight
					underlayColor="transparent"
					style={{ width: 50, height: 40, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderTopLeftRadius: 20, borderBottomLeftRadius: 20, borderColor: this.props.borderColor, }}
					onPress={() => { this.downPress(); }} >
					<Text style={{ fontSize: FontNormalize(this.props.textSize), }}>-</Text>
				</TouchableHighlight>

				<View style={{ width: 100, height: 40, alignItems: 'center', justifyContent: 'center', borderTopWidth: 1, borderBottomWidth: 1, borderColor: this.props.borderColor, }} >
					<Text style={{ fontSize: FontNormalize(this.props.textSize), }}>{NumberFormat(this.state.numberValue, 0)}</Text>
				</View>

				<TouchableHighlight
					underlayColor="transparent"
					style={{ width: 50, height: 40, alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderTopRightRadius: 20, borderBottomRightRadius: 20, borderColor: this.props.borderColor, }}
					onPress={() => { this.upPress(); }} >
					<Text style={{ fontSize: FontNormalize(this.props.textSize), }}>+</Text>
				</TouchableHighlight>
			</View>
		);
	}

	upPress () {
		let upValue = this.state.numberValue + this.state.stepValue;
		if (this.state.maxValue >= upValue) {
			this.setState({ numberValue: upValue, });
			if (this.props.onChange != undefined) {
				this.props.onChange(upValue);
			}
		}
	}

	downPress () {
		let downValue = this.state.numberValue - this.state.stepValue;
		if (this.state.minValue <= downValue) {
			this.setState({ numberValue: downValue, });
			if (this.props.onChange != undefined) {
				this.props.onChange(downValue);
			}
		}
	}
}

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
});

NumberInput.defaultProps = {
	defaultValue: 0,
	step: 1,
	minValue: 0,
	maxValue: 100,

	borderColor: 'black',
	textSize: 18,
};
module.exports = NumberInput;