xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, {Component} from "react";
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    FlatList,
    Modal,
    Animated,
    TextInput,
    InteractionManager,
    Keyboard,
    NativeModules,
    ScrollView,
    DeviceEventEmitter,
    ActivityIndicator
} from "react-native";
import {SwipeListView, SwipeRow} from "react-native-swipe-list-view";
import {width,zoomW, zoomH} from "../../utils/getSize";
import {xnToast, NoDoublePress} from "../../utils/utils";
import AppService from "../../service/AppService";

const search = require('../../img/search.png');
const avatar = require('../../img/avatar.png');
const noSearch = require('../../img/noSearch.png');

export default class SearchPeople extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: null,
        headerStyle: {
            elevation: 0, // 去掉阴影
            backgroundColor: '#efeff4',
            borderBottomWidth: 0,
            height: (48 / zoomH)
        },
        headerLeft: (<View style={styles.topSearch}>
            {navigation.state.params && <View style={styles.searchBox}>
                <Image source={search} style={{width: (12 / zoomW), height: (20 / zoomH), marginRight: (6 / zoomW)}}
                       resizeMode="contain"/>
                <TextInput autoFocus={true} returnKeyType="search" placeholder='搜索' placeholderTextColor='#8e8e93'
                           underlineColorAndroid="transparent"
                           onChangeText={(value) => navigation.state.params.setKey(value)}
                           style={{flex: 1, fontSize: 16, color: '#000', padding: 0}}
                           onSubmitEditing={navigation.state.params.search}/>
            </View>}
            {navigation.state.params && <TouchableOpacity onPress={navigation.state.params.back} style={{
                height: '100%',
                paddingLeft: (15 / zoomW),
                display: 'flex',
                justifyContent: 'center'
            }}>
                <Text style={{fontSize: 17, color: '#000'}}>取消</Text>
            </TouchableOpacity>}
        </View>),
        headerRight: null
    });

    constructor(props) {
        super(props);
        this.state = {
            sheetList: []
        };
    };

    componentWillMount() {
        this.keyword = '';
        this.alreadyArr = [];
        for(let i=0;i<global.currentSelect.length;i++){
            this.alreadyArr.push(global.currentSelect[i].userId);
        }
    };

    componentDidMount() {
        let _this = this;
        this.props.navigation.setParams({
            back: () => {
                NoDoublePress.onPress(() => {
                    this.props.navigation.goBack();
                })
            },
            setKey: function (value) {
                _this.keyword = value;
            },
            search: () => {
                this.getList();
            }
        });
    };

    /*获取列表*/
    getList() {
        if(this.keyword.length == 0){
            xnToast('请输入用户姓名进行搜索')
            this.setState({
                sheetList:[]
            });
            return;
        }
        this.setState({
            loading:true
        });
        let params = {
            tenantId: global.tenantId,
            parentId: '-1',
            employeeType: 'USER',
            keyword:this.keyword,
            needImId:false
        };
        AppService.organizationQuery(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 {
                let personList = data.personList;
                for(let i=0;i<personList.length;i++){
                    if(personList[i].name.length > 2){
                        personList[i].shortName = personList[i].name.substring(personList[i].name.length - 2)
                    }else{
                        personList[i].shortName = personList[i].name;
                    }
                }
                this.setState({
                    sheetList:personList
                })
            }
        }).catch((error) => {
            this.setState({
                loading:false
            });
            xnToast(error)
        })
    };
    /*渲染列表*/
    renderItem(item,index){
        return(
            <TouchableOpacity key={index} activeOpacity={this.alreadyArr.indexOf(item.userId) != -1 ? 1:0.8} style={[styles.mailItem,{backgroundColor:this.alreadyArr.indexOf(item.userId) != -1?'#ddd':'#fff'}]} onPress={() => this.selectItem(item)}>
                <View style={styles.bookAvatar}>
                    {!item.avatar && <Text style={{color: "#fff",fontSize: 10}}>{item.shortName}</Text>}
                    {item.avatar && <Image style={{width: 25,height: 25,borderRadius: 4}} source={{uri:item.avatar+'?x-oss-process=image/resize,w_500'}} resizeMode="cover" />}
                </View>
                <Text style={{fontSize:16,color:'#666'}} numberOfLines={1}>{item.name}</Text>
            </TouchableOpacity>
        )
    };
    /*选择人员*/
    selectItem(item){
        if(this.alreadyArr.indexOf(item.userId) != -1){
            return;
        }
        this.props.navigation.state.params.callback(item);
        this.props.navigation.goBack();
    }

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

    render() {
        return (
            <View style={styles.background}>
                {!!this.state.sheetList && this.state.sheetList.length != 0 && <View style={styles.resultTip}>
                    <Text style={{fontSize: 14, color: '#666'}}>{'搜索结果(' + this.state.sheetList.length + ')'}</Text>
                </View>}
                <ScrollView style={{marginLeft:-(15/zoomW),width:width}}>
                    {!!this.state.sheetList && this.state.sheetList.map((item,index) => this.renderItem(item,index))}
                </ScrollView>
                {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 && this.state.sheetList.length == 0 && this.keyword.length !=0 && <View
                    style={{
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        paddingTop: (150 / zoomH),
                        backgroundColor: '#fff'
                    }}>
                    <Image source={noSearch} resizeMode="contain"
                           style={{width: (64 / zoomH), height: (64 / zoomH), marginBottom: (20 / zoomH)}}/>
                    <Text style={{fontSize: 14, color: '#666', marginBottom: (6 / zoomH)}}>没有找到相关内容</Text>
                    <Text style={{fontSize: 14, color: '#00be3c'}}>换个关键词试试吧</Text>
                </View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topSearch: {
        paddingLeft: (15 / zoomW),
        paddingRight: (15 / zoomW),
        width: width,
        height: '100%',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor:'#efeff4'
    },
    searchBox: {
        flex: 1,
        height: (30 / zoomH),
        backgroundColor: '#fff',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: (6 / zoomW),
        paddingRight: (6 / zoomW),
        borderRadius: 4
    },
    background: {
        flex: 1,
        backgroundColor: '#fff',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
    },
    mailItem:{
        height:(45/zoomH),
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderBottomColor:'#ddd',
        borderStyle:'solid',
        paddingLeft:(15/zoomW),
    },
    bookAvatar:{
        width: (25/zoomH),
        height: (25/zoomH),
        borderRadius: 4,
        backgroundColor: "#00be3c",
        alignItems: "center",
        justifyContent: "center",
        marginRight: (6/zoomW),
    },
    resultTip: {
        width: '100%',
        height: (48 / zoomH),
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#ddd',
        borderStyle: 'solid',
        display: 'flex',
        justifyContent: 'center'
    },
    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'
    }
});