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

const defaultHeight = (72);
const titleViewHeight = (24);
const HPading = (16);
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;
        if(!!this.attrData && !!this.attrData.data){
            this.extendData = JSON.parse(this.attrData.data);
        }else{
            this.extendData = {};
        }
        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,paddingHorizontal:HPading,backgroundColor:'#fff'}}>
                <TouchableOpacity
                    style={{
                        flex:1,
                        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,backgroundColor:'#fff'}}>
                            {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>
                        <Text style={{
                            fontSize: 14,
                            marginLeft:10,
                            color: !!this.state.selectText?'black':'#999',
                            padding: 5,
                            backgroundColor: '#fff',
                            textAlign: 'left'}}>{this.state.selectText||placeholder||'请选择'}</Text>
                    </View>
                    <Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                </TouchableOpacity>
            </View>
        );
    }
}