xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 * 我发布的通知
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    ScrollView,
    Text,
    TextInput,
    TouchableOpacity,
    InteractionManager,
    DeviceEventEmitter,
    ActivityIndicator,
    FlatList
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import moment from 'moment';
import {width,height,zoomW,zoomH} from '../../utils/getSize';
import {xnToast} from '../../utils/utils';
import AppService from '../../service/AppService'
import config from "../../config"
const back = require('../../img/returnB.png');
const search = require('../../img/search.png');
const allDel = require('../../img/allDel.png');
const bread = require('../../img/bread.png');
const avatar = require('../../img/avatar.png');
const addTarget = require('../../img/addTarget.png');
const withdraw = require('../../img/withdraw.png');


export default class MyPublish extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title: "我发布的通知",
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}} >
            <TouchableOpacity style={styles.topIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
                <Image source={back} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
            </TouchableOpacity>
        </View>),
        headerRight:(
            <View style={{display:'flex',flexDirection:'row',paddingRight:(5/zoomW)}}>
                <TouchableOpacity style={styles.topIcon} onPress = {navigation.state.params?navigation.state.params.addNotice:null} >
                    <Image source={addTarget} style={{width:(26/zoomH),height:(26/zoomH)}} resizeMode="contain" />
                </TouchableOpacity>
            </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            AnnounceList:[],
            key:'',
            type:'',
            loading: true,
            loadMore:false,
            imageAvatar:{}
        };
    }

    componentDidMount(){
        this.props.navigation.setParams({
            addNotice:() => {
                this.props.navigation.navigate('AddNotice');
            },
            back:()=>{
                this.props.navigation.goBack();
            }
        });

        this.addList(this.state.key);

        let _this = this;
        this.reloadMyList = DeviceEventEmitter.addListener('reloadHomeList',function(){
            {_this.setState({
                AnnounceList:[],
                loading: true,
                imageAvatar:{}
            },function(){_this.addList(this.state.key)})}
        });
    };


    /*获取列表*/
    addList(key) {
        if (global.isConnected) {
            let length = 0;
            length = this.state.AnnounceList ? this.state.AnnounceList.length : this.props.AnnounceList.length;

            if (length % 10 == 0 && !this.state.loadMore) {
                let params = {
                    ownerUserId: global.userId,
                    pageSize:10,
                    pageNumber:length/10+1,
                    keyword : key,
                };
                this.setState({
                    loadMore: true,
                });
                AppService.findAnnouncement(params).then((data) => {
                    console.log(data);
                    this.setState({
                        loading: false,
                        loadMore: false,
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        if (length + data.result.length > data.totalCount) {
                            return;
                        }
                        this.setState({
                            AnnounceList:this.state.AnnounceList.concat(data.result),
                        })
                    }
                }).catch((error) => {
                    this.setState({
                        loading: false
                    });
                    xnToast(error)
                })
            }
        }else {
            xnToast('暂无网络连接，请稍后重试！')
        }
    };


    //公告详情
    _toDetail (item){
        AppService.getUserisActor({id:item.id}).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                if (data.isActor){

                    if (item.ownerUserId==global.userId){
                        this.props.navigation.navigate('NotificationDetail',{id:item.id})
                    }else {
                        if (item.isRevoke){
                            this.props.navigation.navigate('AlertError',{type:'isRevoke',id:item.id});
                        }else {
                            this.props.navigation.navigate('NotificationDetail',{id:item.id})
                        }
                    }

                }else {
                    this.props.navigation.navigate('AlertError',{type:'noPermissions',id:item.id});
                }
            }
        });

    };
    /*一键删除功能*/
    showDel(type,content){
        if(__ANDROID__){
            if(content.length != 0){
                this.setState({
                    type:type
                })
            }else{
                this.setState({
                    type:''
                })
            }
        }
    };

    clearText(){
        {this.setState({
            AnnounceList:[],
            loading: true,
            type:'',
            key:'',
            imageAvatar:{}
        },function(){this.addList(this.state.key)})}

    };
    //渲染item
    keyExtractor = (item,index) => index;
    renderItem = ({item,index}) =>{
        return(
            <TouchableOpacity key = {index} activeOpacity={0.8} style={styles.listItem} onPress = {()=>{this._toDetail(item)}}>
                <View style = {{flex:1,flexDirection:'row',display:'flex',alignItems:'center',width:'100%'}}>
                    <Image onError={ (error)=>{

                    }
                    } source={  {uri:config.avatarUrl + 'tenantId='+global.tenantId+'&redirect=true&userId=' +item.ownerUserId+'&x-oss-process=image/resize,w_500'}} style={{width:(52/zoomH),height:(52/zoomH),borderRadius:(26/zoomH)}} resizeMode="contain" />
                    <View style = {{flex:1,paddingLeft:(10/zoomW)}} >
                        <Text style = {{fontSize:18,color:'#000000'}}>{item.title}</Text>
                        <View style = {{flex:1,display:'flex',flexDirection:'row',justifyContent:'space-between'}}>
                            <Text style = {{fontSize :12,color:'#999999'}}numberOfLines={1}>{item.ownerUserName} {item.announcementTime?moment(Number(item.announcementTime)).format('YYYY-MM-DD HH:mm'):"--"}</Text>
                            {!!item.unConfirmUserCount && item.unConfirmUserCount != 0 && <Text style ={{fontSize :12,color:item.isRevoke?'#999999':'#00BE3C'}}>{item.unConfirmUserCount?item.unConfirmUserCount:0}人未确认 </Text>}
                        </View>
                    </View>
                </View>
                <View style = {{flex:1}}>
                    <Text style = {{fontSize :14,color:'#666666',marginLeft :(62/zoomH),paddingTop:(17/zoomH), minHeight:70/zoomH}} numberOfLines={3} >{item.content}</Text>
                    {item.isRevoke &&  <Image source={withdraw} style={{width:(70/zoomH),height:(70/zoomH),position:'absolute',right:0,alignItems:'center'}} resizeMode="contain" />}
                </View>

            </TouchableOpacity>
        );
    };

    componentWillUnmount(){
        if(this.reloadMyList){
            this.reloadMyList.remove();
        }
        this.setState = (state,callback)=>{
            return;
        };
    }

    render(){
        return(
            <View style={styles.background}>
                <View style={{flex:1,width:'100%',backgroundColor:'#ffffff'}}>
                    <View style = {{width:'100%',backgroundColor:'#ffffff',alignItems:'center'}}>
                        <View style={styles.searchBox}>
                            <Image source={search} style={{width:(13/zoomH),height:(13/zoomH)}} resizeMode="contain" />
                            <TextInput returnKeyType="search"
                                       placeholder='搜索'
                                       placeholderTextColor='#8e8e93'
                                       underlineColorAndroid="transparent"
                                       clearButtonMode="while-editing"
                                       style={styles.searchText}
                                       defaultValue={this.state.key}
                                       onChangeText={(value) => this.setState({key:value},
                                           function(){this.showDel('name',this.state.key)})}
                                       onFocus={() => this.showDel('name',this.state.key)}
                                       onBlur={() => this.setState({type:''})}
                                       onSubmitEditing={() => {this.setState({
                                           AnnounceList:[],
                                           loading: true,
                                           imageAvatar:{}
                                       },function(){this.addList(this.state.key)})}} />
                            {this.state.type == 'name' && <TouchableOpacity style={{height:'100%',position:'absolute',right:0,display:'flex',justifyContent:'center'}}
                                                                            onPress={()=> {this.clearText()}}>
                                <Image source={allDel} style={{width:(16/zoomH),height:(48/zoomH),marginLeft:(10/zoomW),marginRight:(10/zoomW)}} resizeMode="center" />
                            </TouchableOpacity>}

                            </View>
                    </View>
                    {(!this.state.AnnounceList || this.state.AnnounceList.length ==0) &&
                    <View style = {{width:'100%',backgroundColor:'#f2f2f2',alignItems:'center',justifyContent:'center'}} >
                        <Text style = {{fontSize:16,alignItems:'center',marginTop:(40/zoomH)}}>
                            暂无通知消息</Text>
                    </View>}
                    {this.state.AnnounceList && <FlatList  style = {{flex:1,display:'flex',backgroundColor:'#f2f2f2'}}
                                                           onEndReachedThreshold={0.01}
                                                           onEndReached={() => this.addList(this.state.key)}
                                                           onRefresh={() => {this.setState({
                                                               AnnounceList:[],
                                                               loading: true,
                                                               imageAvatar:{}
                                                           },function(){this.addList(this.state.key)})}}
                                                           refreshing={false}
                                                           keyExtractor={this.keyExtractor}
                                                           data={this.state.AnnounceList.length == 0 ? this.state.AnnounceList:this.state.AnnounceList}
                                                           renderItem={this.renderItem}/>}
                </View>
                {this.state.AnnounceList.length>10 && this.state.loadMore && <ActivityIndicator />}
                {this.state.loading && <View style={styles.loadingBg}>
                    <View style={styles.loadingBox}>
                        <ActivityIndicator size='large' color='#fff' />
                        <Text style={{fontSize:16,color:'#fff',marginTop:(6/zoomH)}}>加载中...</Text>
                    </View>
                </View>}

            </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'
    },
    itemBackground:{
        flex:1,
        backgroundColor:'#ffffff',
        display:'flex',
        alignItems:'center'
    },

    targetItem:{
        flex:1,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        borderStyle:'solid',
        borderBottomColor:'#eee',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        paddingTop:(10/zoomH),
        paddingBottom:(10/zoomH),
        backgroundColor:'#fff'
    },
    searchBox:{
        width:(345/zoomW),
        height:(34/zoomH),
        backgroundColor:'#eeeff3',
        borderRadius:3,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:(12.5/zoomW),
        paddingRight:(12.5/zoomW),
        marginBottom:(12.5/zoomW)
    },
    searchText:{
        flex:1,
        fontSize:14,
        color:'#000',
        padding:0,
        paddingLeft:(8/zoomW)
    },
    myPublish:{
        width :'100%',
        backgroundColor:'#ffffff',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        paddingTop:(6.5/zoomW),
        paddingBottom:(19/zoomW),
        justifyContent:'space-between',
        flex :1,
        display:'flex',
        flexDirection: 'row'
    },

    listItem:{
        flex:1,
        display:'flex',
        borderStyle:'solid',
        backgroundColor:'#ffffff',
        borderBottomColor:'#eee',
        borderBottomWidth:StyleSheet.hairlineWidth,
        paddingTop:(10/zoomH),
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        paddingBottom:(10/zoomH)
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
    loadingBox:{
        width:(100/zoomW),
        height:(120/zoomH),
        backgroundColor:'rgba(0,0,0,.5)',
        borderRadius:8,
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
})