NumberEditView.js 3.29 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    Image,
} from 'react-native';
import {convertCurrency, validateResult} from "../utils/utils";
const defaultHeight = (62);
const titleViewHeight = (26);
const HPading = (16);
const VPading = (6);
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';// 输入类型
    }

    render() {
        let {name, code, type, uom, description, isRequired, isPreview} = this.attrData;
        let extendData = JSON.parse(this.attrData.data);
        let {placeholder, showChinese} = extendData;
        let displayUom = ''
        if(!!uom){
            displayUom = '(' + uom + ')';
        }
        let calcHeight = defaultHeight;
        if(showChinese){
            calcHeight += 40
        }
        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: 16, marginLeft: HPading,color: 'black',flex:1, backgroundColor: '#fff', textAlign: 'left',marginTop:4,marginBottom:4, padding:0}}
                        maxLength={16}
                        multiline={false}
                        keyboardType={this.inputType}
                        onChangeText={text => {
                            if (this.onChangeText) {
                                this.onChangeText(text, type)
                            }
                            // if(validateResult(text,20,2)){
                                this.attrData.value = text;
                                this.setState({
                                    value:text,
                                })
                            // }
                        }}
                        value = {this.state.value}
                        placeholderTextColor={'#999'}
                        placeholder={placeholder||'请输入'}
                        underlineColorAndroid="transparent"
                    />
                </View>
                {showChinese && <View style={{height:40,paddingBottom:VPading,flexDirection: 'row',alignItems:'center',backgroundColor:'#fff',marginHorizontal:HPading}}>
                    <Text style={{fontSize: 14, color: 'rgba(0, 0, 0, 1)'}}>大写</Text>
                    <Text style={{fontSize: 14, color: 'rgba(0, 0, 0, 1)',marginLeft:4,marginRight:4}}>{!!this.state.value?convertCurrency(this.state.value):''}</Text>
                </View>
                }
            </View>
        )
    }
}