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

const titleViewHeight = (24);
const HPading = (15);
const VPading = (6);

export default class TextMultiEditView 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: 'white', paddingTop: VPading,paddingLeft: 10, paddingRight: HPading,}}>
                <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||""}</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||120}
                    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>
        );
    }
}