xntalk / xntalk-rnapp

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

const checkedImg = require("../img/checked.png");
const unCheckedImg = require("../img/dati-xuanze-02.png");
const defaultHeight = (62);
const titleViewHeight = (24);
const HPading = (16);
const VPading = (6);

export default class CheckboxView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            checkedValue: '',
            showModal: false,
            options:[],
            update: false,
            checkedData: {},
            checkedDataList: []
        };
        this.attrData = this.props.attrData;
        this.onChangeText = this.props.onChangeText;

        this.extendData = JSON.parse(this.attrData.data);
    }

    componentWillMount() {
        this.setState({
            options: this.extendData.options
        }, () => this.confirmChecked());
    }

    showCheckboxModal() {
        this.setState({
            showModal: true,
        });
    }

    /**
     * 模态框取消操作
     */
    closeModal() {
        this.setState({
            showModal: false,
        });
    }

    /**
     * 确定选择
     */
    confirmChecked() {
        this.closeModal();

        let checkedText = "";
        if (this.state.checkedDataList && this.state.checkedDataList.length > 0) {
            let resultText = "";
            this.state.checkedDataList.map((item, index) => {
                if (index === 0) {
                    checkedText = item.value;
                    resultText = item.value;
                } else {
                    checkedText = checkedText + "\n" + item.value;
                    resultText = checkedText + "," + item.value;
                }
            })
            this.attrData.value = resultText;
        } else {
            this.attrData.value = "";
        }
        this.setState({
            checkedValue: checkedText
        })
    }

    render() {
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        let {placeholder} = this.extendData;
        //let defaultValue = this.extendData.default;

        return(
            <View style={{width: '100%',minHeight:defaultHeight,paddingTop: VPading,paddingHorizontal:HPading,backgroundColor:'#fff'}}>
                <TouchableOpacity
                    style={{
                        minHeight:defaultHeight,
                        flexDirection: 'row',
                        width: '100%',
                        backgroundColor: '#fff',
                        alignItems: 'center'
                    }}
                    activeOpacity={0.8}
                    onPress={()=>this.showCheckboxModal()}
                >
                    <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>
                        <AutoExpandingInput
                            style={{fontSize: 14,flex:1, marginLeft:HPading,color: this.state.checkedValue.length>0?'black':'#999',
                                width: "100%", backgroundColor: 'white', textAlign: 'left', padding: 0}}
                            editable={false}
                            onChange={text => {
                                if (this.onChangeText) {
                                    this.onChangeText(text)
                                }
                            }}
                            value={this.state.checkedValue||'请选择'}
                            placeholderTextColor={'#999'}
                            placeholder={placeholder}
                        />
                    </View>
                    <Image style={{width: 16, height: 16}} source={require('../img/bread.png')} resizeMode={'contain'}/>
                </TouchableOpacity>
                <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}>{name+"选择"}</Text>
                                {type !== 'SELECT' &&
                                <TouchableOpacity
                                    style={{
                                        justifyContent: "center",
                                        alignItems: "center",
                                        borderRadius: 20,
                                        paddingVertical: 3,
                                        paddingHorizontal: 8,
                                        backgroundColor: global.homeColor
                                    }}
                                    activeOpacity={0.8}
                                    onPress={() => this.confirmChecked()}
                                >
                                    <Text style={{fontSize: 14, color: 'white'}}>确定</Text>
                                </TouchableOpacity>
                                }
                            </View>
                            <View style={{width: '100%', height: 1, backgroundColor: 'rgba(245,245,245,1)'}}/>
                            {/** 内容 */}
                            <ScrollView style={{flex: 1}} horizontal={false} showsVerticalScrollIndicator={false}>
                                {this.state.options && this.state.options.map((value, index) => this.renderCheckboxItem(value, index))}
                            </ScrollView>
                        </View>
                    </View>
                </Modal>
            </View>
        )
    }

    renderCheckboxItem(item, index) {
        return (
            <TouchableOpacity
                key={index}
                style={{flexDirection: 'row', flex: 1, alignItems: 'center'}}
                activeOpacity={0.8}
                onPress={() => {
                    if (this.attrData.type === 'CHECKBOX') {
                        // 多选
                        let tempArr = this.state.checkedDataList;
                        if (item.checked) {
                            item.checked = false;
                            tempArr = tempArr.filter(data => data.value !== item.value);
                        } else {
                            item.checked = true;
                            tempArr.push(item);
                        }
                        this.setState({
                            checkedDataList: tempArr
                        })
                    } else if (this.attrData.type === 'SELECT') {
                        this.closeModal();
                        this.state.options.map((t, k) => {
                            t.checked = k === index;
                        });
                        this.setState({
                            checkedData: item,
                            checkedValue: item.value
                        })
                        this.attrData.value = item.value;
                    }
                }}
            >
                <Image
                    source={item.checked ? checkedImg : unCheckedImg}
                    style={styles.checkedBox}
                />
                <View style={{flex: 1}}>
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0 , 1)', paddingVertical: 10}}>{item.value}</Text>
                    <View style={{width: '100%', height: 1, backgroundColor: 'rgba(245,245,245,1)'}}/>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    modalBg: {
        backgroundColor: 'rgba(0,0,0,.5)',
        width: '100%',
        height: '100%',
        display: 'flex',
        position: 'absolute'
    },
    contentBg: {
        width: '100%',
        height: 300,
        backgroundColor: "rgba(255, 255, 255, 1)",
        position: 'absolute',
        bottom: 0,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8
    },
    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,
        marginRight: 8
    },
});