SelectItemView.js 3.74 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
} from "react-native";
import {isJSONString} from "../utils/utils";

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

export default class SelectItemView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectText: '',
            autoIncrease:20,
            loadMore: false,
            refreshing:false
        }
        this.attrData = this.props.attrData;
        this.extendData = (this.attrData.data && this.attrData.data.length > 0)?JSON.parse(this.attrData.data):{};
        this.navigation = this.props.navigation;
    }

    componentWillMount() {
        if (this.attrData.value && this.attrData.value.length > 0) {
            if (isJSONString(this.attrData.value)) {
                let data = JSON.parse(this.attrData.value);
                let selectValue = '';
                if (this.attrData.type === "OPERATING_UNIT" || this.attrData.type === "ORGANIZATION") {
                    selectValue = data.name;
                } else if (this.attrData.type === "POSITION") {
                    // 岗位
                    selectValue = data.organizationName+"-"+data.jobName+"-"+data.employeeName;
                }
                this.setState({
                    selectText: selectValue
                })
            }
        }
    }

    render() {
        let {name, code, type, uom, description, isRequired, isPreview} = this.attrData;
        let {placeholder} = this.extendData;
        return (
            <View style={{width: '100%',minHeight:defaultHeight,paddingTop: VPading,paddingLeft: 10, paddingRight: 15,backgroundColor:'#fff'}}>
                <TouchableOpacity
                    style={{flexDirection: 'row', width: '100%', backgroundColor: '#fff', alignItems: 'center'}}
                    activeOpacity={0.8}
                    onPress={() => {
                        this.navigation.navigate("SelectItemList", {name: name, type: type, extentData: this.extendData,
                            callback:(selectValue, showContent)=>{
                                this.setState({
                                    selectText: showContent
                                });
                                this.attrData.value = selectValue;
                            }
                        })
                    }}
                >
                    <View style={{flex: 1}}>
                        <View style={{flexDirection: 'row',height:titleViewHeight,justifyContent:'flex-start',alignItems:'center',backgroundColor:'#fff'}}>
                            {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>
                        <View style={{width: "100%", minHeight: 30, marginLeft:10,marginTop:4,marginBottom:4,justifyContent: 'center',backgroundColor: 'white'}}>
                            <Text
                                style={{
                                    fontSize: 14,
                                    color: (!!this.state.selectText && this.state.selectText.length > 0)?'black':'#999',
                                    textAlign: 'left',
                                }}>{this.state.selectText||placeholder||'请选择'}
                            </Text>
                        </View>
                    </View>
                    <Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                </TouchableOpacity>
            </View>
        );
    }
}