NumberEditView.js
5.07 KB
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
Image,
} from 'react-native';
import {convertCurrency, validateResult} from "../utils/utils";
const defaultHeight = (70);
const titleViewHeight = (26);
const HPading = (16);
const VPading = (6);
const DescHeight = (30);
export default class NumberEditView extends Component {
constructor(props) {
super(props);
this.state = {
value: '',
};
this.attrData = this.props.attrData;
this.type = this.props.type;// 金额或数字
this.onChangeText = this.props.onChangeText;
this.inputType = this.props.inputType || 'numeric';// 输入类型
this.extendData = JSON.parse(this.attrData.data);
}
componentWillMount() {
if (this.attrData.value && this.attrData.value.length > 0) {
this.setState({
value: this.attrData.value
})
}
}
render() {
let {name, code, type, uom, description, isRequired, isPreview} = this.attrData;
// precision: 精度
let {placeholder, showChinese, precision} = this.extendData;
let displayUom = ''
if(!!uom){
displayUom = '(' + uom + ')';
}
let calcHeight = defaultHeight;
if(showChinese){
calcHeight += DescHeight
}
return(
<View style={{width: '100%', backgroundColor: 'white', paddingTop: VPading,paddingHorizontal: HPading,height:calcHeight}}>
<View style={{flexDirection: 'row',height:titleViewHeight,justifyContent:'flex-start',alignItems:'center'}}>
{isRequired&&<Text style={{ color: "#FF3030" }}>* {" "}</Text>}
{!isRequired&&<Text style={{ color: "#fff" }}>* {" "}</Text>}
<Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name||""}{displayUom}</Text>
</View>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<TextInput
style={{
fontSize: 14,
marginLeft: HPading,
color: 'black',
flex:1,
backgroundColor: '#fff',
textAlign: 'left',
marginTop:4,
marginBottom:4,
padding:0
}}
// 身份证输入18位限制
maxLength={type === 'IDCARD'?18:(precision||16)}
multiline={false}
keyboardType={this.inputType}
onChangeText={text => {
if (type === 'IDCARD') {
// 身份证直接赋值
this.attrData.value = text;
this.setState({
value:text,
})
if (this.onChangeText) {
this.onChangeText(text, type)
}
} else {
// 计算精度
this.calculatePrecision(text, precision, type);
}
}}
value = {this.state.inputValue}
defaultValue={this.state.value}
placeholderTextColor={'#999'}
placeholder={placeholder||'请输入'}
underlineColorAndroid="transparent"
/>
</View>
{showChinese &&
<View style={{
height:DescHeight,
paddingBottom:VPading,
flexDirection: 'row',
alignItems:'center',
backgroundColor:'#fff',
marginHorizontal:HPading
}}>
<Text style={{fontSize: 14, color: 'rgba(0, 0, 0, 1)'}}>大写</Text>
<Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)',marginLeft:6,marginRight:4}}>
{!!this.state.inputValue?convertCurrency(this.state.inputValue):''}</Text>
</View>
}
</View>
)
}
calculatePrecision(text, precision, type) {
let newText = '';
if (precision === undefined || precision === null || parseInt(precision) === 0) {
// 取整数
newText = text.replace(/[^\d]+/, '');
this.setState({inputValue: newText})
} else {
// 取小数点
this.setState({inputValue: text})
newText = parseFloat(text).toFixed(parseInt(precision))
}
console.log("number====", newText);
if (this.onChangeText) {
this.onChangeText(newText, type)
}
this.attrData.value = newText;
}
}