TextMultiEditView.js 2.54 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    Image,
} from 'react-native';

const HPading = (14);
const VPading = (6);

export default class TextMultiEditView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            inputValue: ''
        };
        this.attrData = this.props.attrData;
        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} = JSON.parse(this.attrData.data);
        return (
            <View style={{width: '100%', backgroundColor: 'white', paddingTop: VPading,paddingHorizontal: HPading}}>
                <View style={{flexDirection: 'row'}}>
                    {isRequired&&<Text style={{ color: "#FF3030" }}>* {" "}</Text>}
                    {!isRequired&&<Text style={{ color: "#fff" }}>* {" "}</Text>}
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)', marginBottom: 5}}>{name||""}</Text>
                </View>
                <TextInput
                    style={{
                        fontSize: 14,
                        color: 'black',
                        width: "100%",
                        height: 80,
                        marginLeft: 14,
                        backgroundColor: 'white',
                        textAlign: 'left',
                        paddingVertical: 5,
                        paddingHorizontal:0,
                        textAlignVertical: 'top'}}
                    minLength={minLength}
                    maxLength={maxLength}
                    multiline={true}
                    keyboardType={this.inputType}
                    defaultValue={this.state.inputValue}
                    onChangeText={text => {
                        if (this.onChangeText) {
                            this.onChangeText(text)
                        }
                        this.attrData.value = text;
                    }}
                    placeholderTextColor={'#999'}
                    placeholder={placeholder||'请输入'}
                    blurOnSubmit={false}
                    underlineColorAndroid="transparent"
                />
            </View>
        );
    }
}