xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, {Component} from "react";
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    FlatList,
    ActivityIndicator,
    DeviceEventEmitter
} from "react-native";
import {width, zoomW, zoomH} from "../../utils/getSize";
import {xnToast, NoDoublePress} from "../../utils/utils";
import AppService from "../../service/AppService";

const back = require('../../img/returnB.png');
const search = require('../../img/search.png');
const addTarget = require('../../img/addTarget.png');
const allDel = require('../../img/allDel.png');
const doneTeam = require('../../img/doneTeam.png');
const delayTeam = require('../../img/delayTeam.png');
const closeTeam = require('../../img/closeTeam.png');
const teamAvatar = require('../../img/teamAvatar.png');
const taskEmpty = require('../../img/taskEmpty.png');

export default class TeamList extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: '任务组',
        headerLeft: (<View style={{flex: 1, 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={{flex: 1, display: 'flex', flexDirection: 'row'}}>
            <TouchableOpacity style={styles.topIcon}
                              onPress={navigation.state.params ? navigation.state.params.toAddTeam : null}>
                <Image source={addTarget} style={{width: (26 / zoomH), height: (26 / zoomH)}} resizeMode="contain"/>
            </TouchableOpacity>
        </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            sheetList: [],
            name: '',
            loading: false
        };
    };

    componentWillMount() {
        this.getList()
    };

    componentDidMount() {
        this.props.navigation.setParams({
            back: () => {
                NoDoublePress.onPress(() => {
                    this.props.navigation.goBack();
                });
            },
            toAddTeam: () => {
                if (global.enableCreate) {
                    NoDoublePress.onPress(() => {
                        this.props.navigation.navigate('CreateTeam', {from: 'create'});
                    });
                } else {
                    xnToast('暂无任务可供创建任务组')
                }
            }
        });
        let _this = this;
        this.reloadTeamList = DeviceEventEmitter.addListener('reloadTeamList', function () {
            _this.getList();
        });
    };

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

    /*渲染列表*/
    keyExtractor = (item, index) => index;
    renderItem = ({item, index}) => (
        <TouchableOpacity activeOpacity={0.8} style={styles.listItem}
                          onPress={() => NoDoublePress.onPress(() => this.props.navigation.navigate('Home', {
                              from: 'teamList',
                              objectId: item.objectId,
                              teamName: item.objectName
                          }))}>
            <View style={{
                borderRadius: (30 / zoomH),
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                borderStyle: 'solid',
                borderColor: '#ddd',
                borderWidth: StyleSheet.hairlineWidth
            }}>
                {item.objectId == '0' &&
                <Image source={doneTeam} style={{width: (52 / zoomH), height: (52 / zoomH), borderRadius: (26 / zoomH)}}
                       resizeMode="contain"/>}
                {item.objectId == '1' && <Image source={closeTeam} style={{
                    width: (52 / zoomH),
                    height: (52 / zoomH),
                    borderRadius: (26 / zoomH)
                }} resizeMode="contain"/>}
                {item.objectId == '2' && <Image source={delayTeam} style={{
                    width: (52 / zoomH),
                    height: (52 / zoomH),
                    borderRadius: (26 / zoomH)
                }} resizeMode="contain"/>}
                {item.objectId != '0' && item.objectId != '1' && item.objectId != '2' &&
                <Image source={item.avarUrl ? {uri: item.avarUrl + '?x-oss-process=image/resize,w_500'} : teamAvatar}
                       style={{width: (52 / zoomH), height: (52 / zoomH), borderRadius: (26 / zoomH)}}
                       resizeMode="cover"/>}
                {item.unReadCount != 0 && <View style={styles.cornerMark}>
                    <Text style={{fontSize: 12, color: '#fff'}}>{item.unReadCount}</Text>
                </View>}
            </View>
            <View style={styles.taskDetail}>
                <Text style={{fontSize: 17, color: '#000'}} numberOfLines={1}>{item.objectName}</Text>
                <Text style={{fontSize: 14, color: '#666'}} numberOfLines={1}>{item.groupTaskName}</Text>
                <Text>{item.taskCount > 3 ? '等' : ''}共{item.taskCount}个任务</Text>
            </View>
        </TouchableOpacity>
    );
    /*获取任务组列表*/
    getList() {
        if (global.isConnected) {
            let params = {
                userId: global.userId,
                sortColumn: 'CREATION_TIME'
            };
            this.setState({
                sheetList: [],
                loading: true
            });
            AppService.getTeamList(params).then((data) => {
                this.setState({
                    loading: false
                });
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    this.setState({
                        sheetList: data.result
                    })
                }
            }).catch((error) => {
                this.setState({
                    loading: false
                });
                xnToast(error)
            })
        } else {
            xnToast('暂无网络连接，请稍后重试！')
        }
    };

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

    render() {
        return (
            <View style={styles.background}>
                <View style={styles.searchBox}>
                    <Image source={search} style={{width: (13 / zoomH), height: (13 / zoomH)}} resizeMode="contain"/>
                    <TextInput returnKeyType="search" placeholder='搜索' placeholderTextColor='#8e8e93'
                               style={styles.searchText} underlineColorAndroid="transparent"
                               clearButtonMode="while-editing"
                               onChangeText={(value) => this.setState({name: value}, function () {
                                   this.showDel('name', this.state.name)
                               })} onFocus={() => this.showDel('name', this.state.name)} onBlur={() => {
                        this.setState({type: ''})
                    }} defaultValue={this.state.name}/>
                    {this.state.type == 'name' && <TouchableOpacity style={{
                        height: '100%',
                        position: 'absolute',
                        right: 0,
                        display: 'flex',
                        justifyContent: 'center'
                    }} onPress={() => NoDoublePress.onPress(() => {
                        this.setState({name: '', type: ''})
                    })}>
                        <Image source={allDel} style={{
                            width: (16 / zoomH),
                            height: (48 / zoomH),
                            marginLeft: (10 / zoomW),
                            marginRight: (10 / zoomW)
                        }} resizeMode="center"/>
                    </TouchableOpacity>}
                </View>
                <FlatList refreshing={false} keyExtractor={this.keyExtractor} showsVerticalScrollIndicator={false}
                          data={this.state.sheetList} renderItem={this.renderItem} onRefresh={() => this.getList()}/>
                {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>}
                {!this.state.loading && this.state.sheetList.length == 0 && <View style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    paddingTop: (150 / zoomH)
                }}>
                    <Image source={taskEmpty} resizeMode="contain" style={{marginBottom: (20 / zoomH)}}/>
                    <Text style={{fontSize: 14, color: '#666'}}>还没有任务组呢</Text>
                    <Text style={{fontSize: 14, color: '#00be3c'}}>点击右上角创建一个吧</Text>
                </View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topIcon: {
        paddingLeft: (10 / zoomW),
        paddingRight: (10 / zoomW),
        height: '100%',
        display: 'flex',
        justifyContent: 'center'
    },
    background: {
        flex: 1,
        backgroundColor: '#fff',
        display: 'flex',
        alignItems: 'center'
    },
    searchBox: {
        width: (345 / zoomW),
        height: (34 / zoomH),
        borderRadius: 3,
        backgroundColor: '#eeeff3',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: (12 / zoomW)
    },
    searchText: {
        flex: 1,
        fontSize: 14,
        color: '#000',
        padding: 0,
        paddingLeft: (8 / zoomW)
    },
    listItem: {
        width: width,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        borderStyle: 'solid',
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#fff',
        padding: (15 / zoomW)
    },
    cornerMark: {
        width: (18 / zoomH),
        height: (18 / zoomH),
        borderRadius: (9 / zoomH),
        backgroundColor: '#f43530',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: 0,
        right: 0
    },
    taskDetail: {
        flex: 1,
        paddingLeft: (10 / zoomW)
    },
    loadingBg: {
        position: 'absolute',
        top: 0,
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    loadingBox: {
        width: (100 / zoomW),
        height: (120 / zoomH),
        backgroundColor: 'rgba(0,0,0,.5)',
        borderRadius: 8,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    }
});