xntalk / xntalk-rnapp

import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
    Modal,
} from 'react-native';

const checkedImg = require("../img/selectActive.png");// 选中
const unCheckedImg = require("../img/select.png");// 未选中

const defaultHeight = (62);
const titleViewHeight = (24);
const HPading = (16);
const VPading = (6);

/**
 * 级联
 */
export default class CascadeView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            breadList:[],// 选中板块列表
            branchList:[],// 分支列表
            pickerValue: '',
            pickerDataList: [],
            showModal: false,
        };
        this.attrData = this.props.attrData;
        // 组件控制数据
        this.extendData = JSON.parse(this.attrData.data);
        this.dataList = this.extendData.dataContent;
    }

    showModal() {
        this.setState({
            showModal: true
        })
    }

    closeModal() {
        this.setState({
            showModal: false
        })
    }

    // 确定多选
    confirmMultiple() {
        //
    }

    render() {
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        // dataType固定：STATIC
        let {placeholder, dataType, enableFilter} = 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.showModal()}
                >
                    <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,
                                color: (!!this.state.pickerValue && this.state.pickerValue.length > 0)?'black':'#999',
                                width: 300,
                                marginLeft:10,
                                backgroundColor: 'white',
                                textAlign: 'left',
                                padding: 5,
                            }}>
                            {this.state.pickerValue||placeholder||'请选择'}
                        </Text>
                    </View>
                    <Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                </TouchableOpacity>
                {/** 级联选择 */}
                {this.renderCascadSelectModal()}
            </View>
        );
    }

    renderCascadSelectModal() {
        return(
            <Modal animationType={"fade"} transparent={true} visible={this.state.showModal} onRequestClose={() => this.closeModal()}>
                {/** 目录弹窗 */}
                <View style={{flex: 1}}>
                    <TouchableOpacity style={styles.modalBg} activeOpacity={1} onPress={() => this.closeModal()}/>
                    {/** 实体内容 */}
                    <View style={styles.contentBg}>
                        {/** 标题栏 */}
                        <View style={styles.titleBar}>
                            <TouchableOpacity
                                style={{paddingLeft: 15, paddingRight: 5}}
                                activeOpacity={0.8}
                                onPress={() => this.closeModal()}
                            >
                                <Image style={{width: 14, height: 14}}
                                       source={require('../img/loadBack.png')}/>
                            </TouchableOpacity>
                            <Text style={styles.modelTitle}>{this.attrData.name}</Text>
                            {this.extendData && this.extendData.enableMultiple &&
                            <TouchableOpacity
                                style={{
                                    justifyContent: "center",
                                    alignItems: "center",
                                    borderRadius: 20,
                                    paddingVertical: 3,
                                    paddingHorizontal: 8,
                                    backgroundColor: global.homeColor
                                }}
                                activeOpacity={0.8}
                                onPress={() => this.confirmMultiple()}
                            >
                                <Text style={{fontSize: 14, color: 'white'}}>确定</Text>
                            </TouchableOpacity>
                            }
                        </View>
                        <View style={{width: '100%', height: 1, backgroundColor: 'rgba(245,245,245,1)'}}/>
                        {/** 内容 */}
                        {<View style={styles.bread}>
                            <ScrollView
                                showsHorizontalScrollIndicator={false}
                                showsVerticalScrollIndicator={false}
                                automaticallyAdjustContentInsets={false}
                                horizontal={true}
                                bounces={false}
                                style={styles.breadLayout}
                            >
                                {this.state.breadList.map((v, i) => this.breadContent(v, i))}
                            </ScrollView>
                        </View>
                        }
                        <View style={styles.bookLayout}>
                            <ScrollView style={styles.bookList}>
                                {this.state.branchList.map((v, i) => this.branchContent(v, i))}
                            </ScrollView>
                        </View>

                        {/*<ScrollView style={{flex: 1}} horizontal={false} showsVerticalScrollIndicator={false}>
                            {this.state.dataList && this.state.dataList.map((item, index) => this.renderItem(item, index))}
                        </ScrollView>*/}
                    </View>
                </View>
            </Modal>
        )
    }

    renderItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={{flexDirection: 'row', width: '100%', alignItems: 'center'}}
                activeOpacity={0.8}
                onPress={() => {
                    if (this.extendData.enableMultiple) {
                        // 多选
                        let tempArr = this.state.selectDataList;
                    } else {
                        this.closeModal();
                        this.setState({
                            selectData: item,
                            selectText: item.name
                        })
                        this.setSingleResult(item)
                    }
                }}
            >
                {this.extendData.enableMultiple &&
                    <Image
                        source={item.checked ? checkedImg : unCheckedImg}
                        style={styles.checkedBox}
                    />
                }
                <View style={{flex: 1, marginLeft: 15}}>
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0 , 1)', paddingVertical: 10}}>{this.getItemText(item)}</Text>
                    <View style={{width: '100%', height: 1, backgroundColor: 'rgba(245,245,245,1)'}}/>
                </View>
            </TouchableOpacity>
        );
    }

    breadContent = (v, i) =>{
        if(i!=(this.state.breadList.length-1)){
            return (
                <TouchableOpacity style={styles.breadItem} key={i}  onPress={()=>{this.tabBread(v)}}>
                    <Text style={[styles.breadItemText,{color:global.homeColor,}]}>{v.name}</Text>
                    <Image style={styles.breadItemImages}  source={require('../img/bread.png')} resizeMode="contain"></Image>
                </TouchableOpacity>
            )
        } else {
            return (
                <View style={styles.breadItem} key={i}>
                    <Text style={[styles.breadItemText,{color:global.homeColor,},styles.breadItemTextPath]}>{v.name}</Text>
                </View>
            )

        }
    };
}

const styles = StyleSheet.create({
    modalBg: {
        backgroundColor: 'rgba(0,0,0,.5)',
        width: '100%',
        height: '100%',
        display: 'flex',
        position: 'absolute'
    },
    contentBg: {
        width: '100%',
        flex: 1,
        marginTop: 90,
        backgroundColor: "rgba(255, 255, 255, 1)",
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16
    },
    titleBar: {
        flexDirection: "row",
        justifyContent: "flex-start",
        alignItems: "center",
        marginTop: 15,
        marginBottom: 10,
        marginRight: 15
    },
    modelTitle: {
        flex: 1,
        color: "rgba(0, 0, 0, 1)",
        fontSize: 16,
        textAlign: "center",
        justifyContent: "center"
    },
    checkedBox: {
        width: 20,
        height: 20,
        marginLeft: 8,
    },
    bread:{
        paddingLeft:5,
        paddingRight:5,
        flexDirection:"row",
        // justifyContent:"center",
        alignItems:"center",
    },
    breadLayout:{
        flexDirection:"row",
        flexWrap:"nowrap",
    },
    breadItem:{
        flexDirection:"row",
        justifyContent:"center",
        alignItems:"center",
        marginRight:5,
        paddingTop:12,
        paddingBottom:12,
    },
    breadItemText:{
        color:global.homeColor,
        fontSize:14
    },
    breadItemImages:{
        width:15,
        height:15,
    },
    breadItemTextPath:{
        color:"#666",
        fontSize:14,
        marginRight:5,
    },
    bookLayout:{
        flex:1,
        flexDirection:"column",
    },
});