CheckboxView.js 7.9 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    Image,
    TouchableOpacity,
    ScrollView,
    Modal,
    StyleSheet,
} from 'react-native';

const checkedImg = require("../img/checked.png");
const unCheckedImg = require("../img/dati-xuanze-02.png");

export default class CheckboxView extends Component {

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

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

    componentWillMount() {
        this.setState({
            options: this.extendData.options
        })
    }

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

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

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

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

        return(
            <View style={{width: '100%'}}>
                <TouchableOpacity
                    style={{
                        flexDirection: 'row',
                        width: '100%',
                        backgroundColor: 'white',
                        paddingHorizontal: 5,
                        paddingVertical: 10,
                        alignItems: 'center'
                    }}
                    activeOpacity={0.8}
                    onPress={()=>this.showCheckboxModal()}
                >
                    <View style={{flex: 1}}>
                        <View style={{flexDirection: 'row'}}>
                            {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>
                        <TextInput
                            style={{width: "100%", backgroundColor: 'white', textAlign: 'left', paddingVertical: 5}}
                            multiline={false}
                            editable={false}
                            onChangeText={text => {
                                if (this.onChangeText) {
                                    this.onChangeText(text)
                                }
                            }}
                            value={this.state.value}
                            placeholderTextColor={'#999'}
                            placeholder={placeholder}
                            underlineColorAndroid="transparent"
                        />
                    </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}>{this.type === 'SELECT'? '单选框':'多选框'}</Text>
                                <TouchableOpacity
                                    style={{
                                        justifyContent: "center",
                                        alignItems: "center",
                                        borderRadius: 20,
                                        paddingVertical: 3,
                                        paddingHorizontal: 8,
                                        backgroundColor: global.homeColor
                                    }}
                                    activeOpacity={0.8}
                                    onPress={() => this.confirmCheck()}
                                >
                                    <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={() => {
                    let optionsArr = this.state.options;
                    optionsArr.map((value, d) => {
                        if (this.attrData.type === 'CHECKBOX') {
                            if (d === index) {
                                value.checked = !value.checked;
                            }
                        } else if (this.attrData.type === 'SELECT') {
                            value.checked = d === index;
                        }
                    });
                    this.setState({
                        options: optionsArr
                    })
                }}
            >
                <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
    },
});