TextSingleEditView.js 2.72 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
} from 'react-native';

const defaultHeight = (70);
const titleViewHeight = (24);
const VPading = (6);

export default class TextSingleEditView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            inputValue: ''
        }
        this.attrData = this.props.attrData;
        this.extendData = (this.attrData.data && this.attrData.data.length > 0)?JSON.parse(this.attrData.data):{};
        this.onChangeText = this.props.onChangeText;
        this.inputType = this.props.inputType || 'default';
    }

    componentWillMount() {
        if (this.attrData.value && this.attrData.value.length > 0) {
            this.setState({
                inputValue: this.attrData.value
            })
        }
    }

    render() {
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        let {placeholder, defaultValue, maxLength, minLength} = this.extendData;
        return (
            <View style={{width: '100%', backgroundColor: '#fff', paddingTop: VPading,paddingLeft: 10, paddingRight: 15,height:defaultHeight}}>
                <View style={{flexDirection: 'row',height:titleViewHeight,justifyContent:'flex-start',alignItems:'center', backgroundColor: 'white'}}>
                    {isRequired&&<Text style={{ color: "#FF3030" }}>* </Text>}
                    {!isRequired&&<Text style={{ color: "#fff" }}>* </Text>}
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>{name||""}</Text>
                </View>
                <TextInput
                    style={{
                        fontSize: 14,
                        color: 'black',
                        height: 30,
                        marginLeft: 10,
                        backgroundColor: 'white',
                        textAlign: 'left',
                        marginTop:4,
                        marginBottom:4,
                        padding:0
                    }}
                    minLength={minLength}
                    maxLength={maxLength||50}
                    multiline={false}
                    keyboardType={this.inputType}
                    defaultValue={this.state.inputValue}
                    onChangeText={text => {
                        if (this.onChangeText) {
                            this.onChangeText(text)
                        }
                        this.attrData.value = text;
                    }}
                    placeholderTextColor={'#999'}
                    placeholder={placeholder||'请输入'}
                    value={defaultValue}
                    underlineColorAndroid="transparent"
                />
            </View>
        );
    }
}