xntalk / xntalk-rnapp

import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
    Modal,
} from 'react-native';
import {isJSONString, xnBorderWidth} from "../utils/utils";
// 选中的图标
const checkedImg = require("../img/selectActive.png");
// 未选中的图标
const unCheckedImg = require("../img/select.png");
// 默认高度
const defaultHeight = (70);
// 默认标题高度
const titleViewHeight = (24);
// 默认横向内边距
const HPading = (16);
// 默认纵向内边距
const VPading = (6);

/**
 级联组件(type:'CASCADE')
 */
export default class CascadeView extends Component {
    // 构造方法
    constructor(props) {
        super(props);
        this.state = {
            // 选中板块列表
            breadList:[],
            // 分支列表
            branchList:[],
            // 滚轮选中内容
            pickerValue: '',
            showModal: false,
        };
        // 传入参数
        this.attrData = this.props.attrData;
        // json解析后的传入参数
        this.extendData = (this.attrData.data && this.attrData.data.length > 0)?JSON.parse(this.attrData.data):{};
        // 级联数据
        this.dataList = this.extendData.dataContent;
        // 回滚数组
        this.revertDataList = [];
        // 用于带出级联选择内容的callback回调
        this.callback = this.props.callback;
    }

    // 生命周期-组件将要展示
    componentWillMount() {
        // 设置默认值
        if (this.attrData.value && this.attrData.value.length > 0) {
            if (isJSONString(this.attrData.value)) {
                let data = JSON.parse(item.value);
                let selectedData = data.selected;
                let children = selectedData.children;

                let showText = selectedData.title;
                while (!!children) {
                    showText = showText + "," + children.title;
                    children = children.children;
                }
                this.setState({
                    pickerValue: showText
                })
            }
        }
    }

    // 显示模态样式级联
    showModal() {
        this.setState({
            showModal: true
        });
        if (this.dataList && this.dataList.length > 0) {
            this.setState({
                breadList:[{key:"101",title:this.attrData.name}],
                branchList: this.dataList,
            });
        }
    }

    // 关闭模态样式级联
    closeModal() {
        this.setState({
            breadList:[],
            branchList: [],
            showModal: false,
        });
        // 清空回滚
        this.revertDataList = [];
    }

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

    // 绘制UI
    render() {
        /*
        name:标题
        code:代码编号
        type:控件类型(LONG_TEXT)
        description:描述
        isRequired:是否必须
        isPreview:是否预览
        */
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        // dataType固定：STATIC
        /*
        placeholder:提示文字
        dataType:固定：STATIC
        enableFilter:是否允许数据过滤（没用到）
        */
        let {placeholder, dataType, enableFilter} = this.extendData;

        return (
            <View style={{width: '100%',minHeight:defaultHeight,paddingTop:VPading,paddingLeft:10,paddingRight:15,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',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>
                        <View style={{width: "100%", minHeight: 30, marginLeft:10,marginTop: 4,marginBottom:4,justifyContent: 'center',backgroundColor: 'white'}}>
                            <Text style={{fontSize: 14, color: (!!this.state.pickerValue && this.state.pickerValue.length > 0)?'black':'#999', textAlign: 'left'}}>
                                {this.state.pickerValue||placeholder||'请选择'}
                            </Text>
                        </View>
                    </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)'}}/>
                        {/** 内容 */}
                        {this.state.breadList && this.state.breadList.length > 0 && <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>
                    </View>
                </View>
            </Modal>
        )
    }

    // 级联选项UI绘制
    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 activeOpacity={0.8} style={styles.breadItem} key={i}  onPress={()=>{this.tabBread(i)}}>
                    <Text style={[styles.breadItemText,{color:global.homeColor,}]}>{v.title}</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.title}</Text>
                </View>
            )

        }
    };

    // 树状结构的内容(区别于面包屑样式)
    branchContent = (v, i) =>{
        return (
            <View
                style={styles.bookItem}
                key={i}>

                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.bookRow}
                    onPress={()=>{
                        if (!!v.children) {
                            this.nextBranch(v)
                        } else {
                            // 确认选择
                            if (this.state.breadList && this.state.breadList.length > 0) {
                                let result = {};
                                let lastData = {};// 上一次的选择
                                let tempText = '';
                                let selectList = this.state.breadList;

                                selectList.push(v);
                                selectList.map((item, index) => {
                                    if (index === 1) {
                                        //
                                        tempText = item.title;
                                        result.title = item.title;
                                        result.key = item.key;
                                        result.children = lastData;
                                    } else if (index > 1) {
                                        let breadData = {title: item.title, key: item.key};
                                        lastData.children = breadData
                                        lastData = breadData;
                                        tempText = tempText + "," + item.title;
                                    }
                                });
                                let selected = {selected: result};
                                this.attrData.value = JSON.stringify(selected);
                                this.setState({
                                    pickerValue: tempText
                                });
                                if (!!this.callback) {
                                    this.callback(this.attrData.value)
                                }
                            } else {
                                // 只有一级
                                let selected = {selected: {title: v.title, key: v.key}};
                                this.attrData.value = JSON.stringify(selected);
                                this.setState({
                                    pickerValue: v.title
                                });
                                if (!!this.callback) {
                                    this.callback(this.attrData.value)
                                }
                            }
                            this.closeModal();
                        }
                    }}
                >
                    <Text style={styles.bookName}>{v.title}</Text>
                    {v.children && v.children.length > 0 && <Image style={styles.bookBread} source={require('../img/bread.png')} resizeMode={'contain'}/>}
                </TouchableOpacity>
            </View>
        )
    };

    tabBread(index) {
        let _breadList = this.state.breadList;
        let startIndex = index + 1;
        _breadList.splice(startIndex, _breadList.length - startIndex);

        if (index === 0) {
            this.setState({
                breadList:_breadList,
                branchList: this.dataList,
            });
            this.revertDataList = [];
        } else {
            this.setState({
                breadList: _breadList,
                branchList: this.revertDataList[index - 1].children,
            }, ()=> this.revertDataList.splice(startIndex, this.revertDataList.length - startIndex));
        }
    }

    // 下一级树状结构
    nextBranch(data) {
        let _breadList = this.state.breadList;
        _breadList.push(data);
        this.setState({
            breadList: _breadList,
            branchList: data.children,
        });
        let nodeList = {children: data.children};
        this.revertDataList.push(nodeList);
    }
}

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:{
        paddingHorizontal:15,
        flexDirection:"row",
        // justifyContent:"center",
        alignItems:"center",
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:"#ddd",
    },
    breadLayout:{
        flexDirection:"row",
        flexWrap:"nowrap",
    },
    breadItem:{
        flexDirection:"row",
        justifyContent:"center",
        alignItems:"center",
        marginRight:5,
        paddingTop:12,
        paddingBottom:12,
    },
    breadItemText:{
        color:global.homeColor,
        fontSize:16,
        fontWeight: 'bold'
    },
    breadItemImages:{
        width:15,
        height:15,
    },
    breadItemTextPath:{
        color:"#666",
        fontSize:16,
        marginRight:5,
        fontWeight: 'bold'
    },
    bookLayout:{
        flex:1,
        flexDirection:"column",
    },
    bookItem:{
        flexDirection:"row",
        alignItems:"center",
        backgroundColor:"#fff"
    },
    bookRow:{
        flex:1,
        paddingBottom:5,
        paddingTop:5,
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:"#ddd",
        flexDirection:"row",
        alignItems:"center",
        height:45,
        paddingHorizontal:15,
    },
    bookName:{
        flexDirection:"row",
        alignItems:"center",
        flex:1,
        color:"#333",
        fontSize:14,
        marginRight:5
    },
    bookNumber:{
        color:"#999",
        fontSize:12
    },
    bookBread:{
        width: 16,
        height: 16,
    }
});