xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    InteractionManager,
    DeviceEventEmitter,
    BackHandler,
    ScrollView
} from 'react-native';

import {zoomW,zoomH} from '../../utils/getSize';

const back = require('../../img/returnB.png');
const circleAdd = require('../../img/circleAdd.png');
const circleDel = require('../../img/circleDel.png');
const avatar = require('../../img/avatar.png');
const remove = require('../../img/remove.png');
import {getTopHeight,xnToast,xnBorderWidth,NoDoublePress} from '../../utils/utils';
export default class AddPeople extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title:'选择人员',
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}} />),
        headerRight:(<View style={{display:'flex',flexDirection:'row'}}>
            {navigation.state.params && <TouchableOpacity activeOpacity={navigation.state.params.opacity} style={styles.topIcon} onPress={navigation.state.params?navigation.state.params.finish:null}>
                <Text style={{fontSize:16,color:navigation.state.params.color}}>完成</Text>
            </TouchableOpacity>}
        </View>)
    });

    constructor(props){
        super(props);
        this.state = {
            canAdd:false
        };
    };

    componentWillMount(){
        this.setState({
            doEmployee:global.doEmployee
        });
        if( global.doEmployee.length != 0){
            this.props.navigation.setParams({
                color:'rgba(0,190,60,.5)',
                opacity:1
            });
            this.setState({
                canAdd:true
            })
        }else{
            this.props.navigation.setParams({
                color:'rgba(0,190,60,1)',
                opacity:0.8
            });
            this.setState({
                canAdd:false
            })
        }

        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }

    componentDidMount(){
        this.props.navigation.setParams({
            back:()=>{
                DeviceEventEmitter.emit('reloadAddEmployee');
                InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
            },
            finish:()=>{
                if(!this.state.canAdd){
                    return;
                }
                if (this.props.navigation.state.params.type == 'SHAREANNOUNCEMENT'){
                    if (this.props.navigation.state.params.callback){
                        this.props.navigation.state.params.callback();
                        this.props.navigation.goBack();
                        return;
                    }
                }

                InteractionManager.runAfterInteractions(() => {
                    DeviceEventEmitter.emit('reloadAddEmployee');
                    this.props.navigation.goBack();
                })
            }
        });
        let _this = this;
        this.reloaEmployee = DeviceEventEmitter.addListener('reloadAddEmployee',function(){
            _this.setState({
                doEmployee:global.doEmployee,
            });
            if(global.doEmployee.length !=0){
                _this.props.navigation.setParams({
                    color:'rgba(0,190,60,1)',
                    opacity:0.8
                });
                _this.setState({
                    canAdd:true
                })
            }
        });
    };
    /*渲染人员*/
    renderPeople(item, index) {
        return (
            <View key={index} style={styles.avatarBox}>
                <View style={styles.avatarPic}>
                    <Image source={item.avatar ? {uri: item.avatar + '?x-oss-process=image/resize,w_500'} : avatar}
                           style={{width: (50 / zoomH), height: (50 / zoomH), borderRadius: (25 / zoomH)}}
                           resizeMode="cover"/>
                    <TouchableOpacity activeOpacity={0.8} style={{
                        paddingLeft: (10 / zoomH),
                        paddingBottom: (10 / zoomH),
                        position: 'absolute',
                        top: 0,
                        right: 0
                    }} onPress={() => NoDoublePress.onPress(() => {
                        this.delPerson(index)
                    })}>
                        <Image source={remove} style={{width: (18 / zoomH), height: (18 / zoomH)}}
                               resizeMode="contain"/>
                    </TouchableOpacity>
                </View>
                <Text style={{fontSize: 12, color: '#666', marginTop: (6 / zoomH)}}>{item.userName}</Text>
            </View>
        )
    };

    /*删除人员*/
    delPerson(index){

        global.doEmployee.splice(index,1);
        if(global.doEmployee.length == 0){
            this.props.navigation.setParams({
                color:'rgba(0,190,60,.5)',
                opacity:1
            });
            this.setState({
                canAdd:false
            })
        }
        this.setState({
            doEmployee:global.doEmployee
        });
    };

    //android物理返回键
    onBackAndroid = () => {
        DeviceEventEmitter.emit('reloadAddEmployee');
        InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
        return true;
    };

    componentWillUnmount(){
        if(this.reloaEmployee){
            this.reloaEmployee.remove();
        }

        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }

    render(){
        return(
            <View style={styles.background}>
                <ScrollView style={{width:'100%'}}>
                    <View style={styles.addItem}>
                        <TouchableOpacity style={styles.avatarBox} activeOpacity={0.8} onPress={() => {this.props.navigation.navigate('AddEmployee');}}>
                            <Image source={circleAdd} style={{width:(50/zoomH),height:(50/zoomH)}} resizeMode="contain" />
                        </TouchableOpacity>
                        {!!this.state.doEmployee && this.state.doEmployee.map((item,index) => this.renderPeople(item,index))}
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topIcon:{
        paddingLeft:(10/zoomW),
        paddingRight:(10/zoomW),
        height:'100%',
        display:'flex',
        alignItems:'center'
    },
    background:{
        flex:1,
        backgroundColor:'#ececf1',
        display:'flex',
        alignItems:'center'
    },
    addContent:{
        width:'100%',
        backgroundColor:'#fff',
        marginTop:(30/zoomH),
        padding:(5/zoomW)
    },
    addItem:{
        marginTop:(10/zoomW),
        backgroundColor:'#ffffff',
        width:'100%',
        display:'flex',
        flexDirection:'row',
        flexWrap:'wrap'
    },
    avatarBox:{
        width:(50/zoomH),
        margin:(10/zoomW),
        borderRadius:4,
        display:'flex',
        alignItems:'center',
        paddingTop:(8/zoomH)
    },
    avatarPic:{
        width:(50/zoomH),
        height:(50/zoomH),
        borderRadius:(25/zoomH),
        borderWidth:StyleSheet.hairlineWidth,
        borderColor:'#ddd',
        borderStyle:'solid'
    }
});