ProcessManagement.js 6.5 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    ScrollView,
    TouchableOpacity,
    StyleSheet
} from "react-native";
import {NoDoublePress} from "../utils/Common";
import {width} from "../utils/getSize";

export default class ProcessManagement extends Component {

    constructor(props) {
        super(props);
        this.state={
            querySwitch: 'Common',
        };
        this.commonModuleList=[
            {name: '单行输入框', icon: require('../img/check_alt.png')}, {name: '多行输入框', icon: require('../img/check_alt.png')},
            {name: '数字输入框', icon: require('../img/check_alt.png')}, {name: '金额', icon: require('../img/check_alt.png')},
            {name: '下拉选择', icon: require('../img/check_alt.png')}, {name: '级联选择', icon: require('../img/check_alt.png')},
            {name: '省市区', icon: require('../img/check_alt.png')}, {name: '单选框组', icon: require('../img/check_alt.png')},
            {name: '多选框组', icon: require('../img/check_alt.png')}, {name: '滑块', icon: require('../img/check_alt.png')},
            {name: '组织机构', icon: require('../img/check_alt.png')}, {name: '时间选择', icon: require('../img/check_alt.png')},
            {name: '时间范围', icon: require('../img/check_alt.png')}, {name: '日期选择', icon: require('../img/check_alt.png')},
            {name: '日期范围', icon: require('../img/check_alt.png')}, {name: '评分', icon: require('../img/check_alt.png')},
            {name: '附件', icon: require('../img/check_alt.png')}, {name: '计算公式', icon: require('../img/check_alt.png')},
            {name: '布局容器', icon: require('../img/check_alt.png')}, {name: '表格/明细', icon: require('../img/check_alt.png')}
        ]
    }

    componentWillMount() {
        //设置头部
        this.props.navigation.setParams({
            isBack:true,
            title: '组件'
        });
    }

    renderComponentItem(item, index) {
        let marginLeft = index % 2 === 1 ? 10 : 0;
        let itemWidth = (width - 30) / 2;
        return(
            <TouchableOpacity
                key={index}
                style={{
                    width: itemWidth,
                    paddingVertical: 5,
                    marginTop: 10,
                    marginLeft: marginLeft,
                    backgroundColor: "white",
                    borderWidth: 1,
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    borderRadius: 2,
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'row',
                    textAlign: 'left',
                }}
                activeOpacity={0.8}
                onPress={() => {
                    //
                }}
            >
                <Text style={{width: 90, fontSize: 14, color: 'black'}}>{item.name}</Text>
                <Image style={{width: 24, height: 24}} source={item.icon} resizeMode={'contain'}/>
            </TouchableOpacity>
        )
    }

    renderComponentTab() {
        // <View style={{flex: 1, backgroundColor: 'rgba(250, 250, 250, 1)'}}></View>
        switch (this.state.querySwitch) {
            case "Common":
                return (
                    <ScrollView
                        automaticallyAdjustContentInsets={false}
                        alwaysBounceVertical={true}
                        alwaysBounceHorizontal={false}
                        showsVerticalScrollIndicator={false}
                        showsHorizontalScrollIndicator={false}
                    >
                        <View style={{
                            flexDirection: 'row',
                            justifyContent: 'flex-start',
                            alignItems: 'flex-start',
                            flexWrap: 'wrap',
                            paddingHorizontal: 10,
                            width: width
                        }}>
                            {this.commonModuleList.map((v, i) => this.renderComponentItem(v, i))}
                        </View>
                    </ScrollView>
                );
            case "Custom":
                return (
                    <View style={{flex: 1, backgroundColor: 'rgba(250, 250, 250, 1)'}}>
                        <ScrollView>
                        </ScrollView>
                    </View>
                );
        }
    }

    render() {
        return (
            <View>
                <View style={{width:'100%',flexDirection:'row', height: 38, backgroundColor: 'white'}}>
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{flex: 1, justifyContent:'center', alignItems:'center'}}
                        onPress={()=>NoDoublePress.onPress(()=>{
                            this.setState({
                                querySwitch:'Common',
                            })
                        })}>
                        <Text style={{
                            fontSize:14,
                            color:this.state.querySwitch === 'Common'? global.homeColor: 'rgba(0, 0, 0, 0.3)',
                            fontWeight: 'bold',
                        }}>常用组件</Text>
                        {this.state.querySwitch === 'Common' && <View style={[styles.lineStyle, {backgroundColor: global.homeColor}]} />}
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{flex: 1, justifyContent:'center', alignItems:'center'}}
                        onPress={()=>NoDoublePress.onPress(()=>{
                            this.setState({
                                querySwitch:'Custom',
                            })
                        })}>
                        <Text style={{
                            fontSize:14,
                            color:this.state.querySwitch === 'Custom'? global.homeColor: 'rgba(0, 0, 0, 0.3)',
                            fontWeight: 'bold',
                        }}>定制组件</Text>
                        {this.state.querySwitch === 'Custom' && <View style={[styles.lineStyle, {backgroundColor: global.homeColor}]} />}
                    </TouchableOpacity>
                </View>
                {/** 组件列表 */}
                {this.renderComponentTab()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    lineStyle: {
        width: '100%',
        height: 3,
        position: 'absolute',
        bottom: 0,
    },
})