customer / shanghai-railway-rnapp

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

export default class ChooseTopic extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        header:null
    });

    constructor(props){
        super(props);
        this.state = {
            headerHeight:new Animated.Value(getHeaderHeight()-getHeaderPadding()),
            modalTop:new Animated.Value(height),
            headerHidden:true,
            titlePlaceHodler:'历史话题',
            keyWord:'',
            showList:[],
            recentlyList:[],
            hostList:[],
            loading:true,
            selectIndex:1
        }
    };

    componentWillMount(){
        let that = this;
        //最近使用的话题列表
        AppService.findLatestTopic({userId:global.userId,forumId:global.forumId,pageSize:5,}).then((data) => {
            that.setState({
                loading:false
            });
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return;
            } else {
                that.setState({
                    recentlyList:data.result,
                    // showList: data.result
                });
            }
        }).catch((error) => {
            that.setState({
                loading: false
            });
            xnToast(error);
        });

        //热门话题列表
        AppService.findTopic({requestFrom:'all',pageSize:10,forumId:global.forumId,isActive:true}).then((data) => {
            that.setState({
                loading:false
            });
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return;
            } else {
                that.setState({
                    hostList:data.result,
                    showList: data.result
                });
            }
        }).catch((error) => {
            that.setState({
                loading: false
            });
            xnToast(error);
        });
    }

    componentDidMount(){

    };

    componentWillUnmount(){
    }

    // 搜索
    activeSearch(){
        this.setState({
            headerHidden:false,
        });
        let timing = Animated.timing;
        Animated.parallel([
            timing(this.state.headerHeight, {
                toValue: 0,
                duration:300
            }),
            timing(this.state.modalTop, {
                toValue:getHeaderHeight(),
                duration:300
            })
        ]).start();
    }

    cancelSearch(){
        this.setState({
            headerHidden:true,
            titlePlaceHodler:'历史话题',
            keyWord:'',
            showList:this.state.recentlyList
        });
        let timing = Animated.timing;
        Animated.parallel([
            timing(this.state.headerHeight, {
                toValue: getHeaderHeight()-getHeaderPadding(),
                duration:300
            }),
            timing(this.state.modalTop, {
                toValue:height,
                duration:300
            })
        ]).start();
    };

    searchData(text){

        this.setState({
            titlePlaceHodler:'网络搜索结果',
            loading:true
        });

        Animated.timing(
            this.state.modalTop,
            {toValue:height,duration:300}
        ).start();
        this.state.showList = [];

        let that = this;
        //模糊搜索
        AppService.findTopic({name:text,forumId:global.forumId,isActive:true,pageSize:0}).then((data) => {
            that.setState({
                loading:false
            });
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
                return;
            } else {
                if (data.totalCount<=0) {
                    xnToast('无搜索结果');
                    return;
                }
                that.setState({
                    showList:data.result
                });

            }
        }).catch((error) => {
            that.setState({
                loading: false
            });
            xnToast(error);
        });
    }

    // 高亮字体渲染方法
    renderItemText(text){
        if (text.indexOf(this.state.keyWord) != -1 && this.state.keyWord !='') {
            let index = text.indexOf(this.state.keyWord);
            let a = text.substring(0,index);
            let b = text.substr(index,this.state.keyWord.length);
            let c = text.substring(this.state.keyWord.length+index,text.length);
            return (
                <Text style={{color:'rgba(0,0,0,1.00)',marginBottom: 3}}>#{a}<Text style={{color:global.homeColor}}>{b}</Text>{c}#</Text>
            )
        }else {
            return (
                <Text style={{color:'rgba(0,0,0,1.00)',marginBottom: 3}}>#{text}#</Text>
            )
        }

    }

    /*选择话题返回*/
    selectTopic(item) {
        if (this.props.navigation.state.params.callBack){
            this.props.navigation.state.params.callBack(item);
        }
        this.props.navigation.goBack();
    };

    renderItem(item){
        return (
            <TouchableOpacity style={styles.section} onPress={()=>{
                this.selectTopic(item)
            }}>
                {item.iconFileUrl==undefined&&<View style={{width:44,height:44,borderRadius:22,alignItems:'center'}}><Image resizeMode='cover' source={require('../../img/defultTopic.png')} style={{width:44,height:44}}/></View>}
                {item.iconFileUrl!=undefined&&<Image defaultSource={require('../../img/defultTopic.png')} source={{uri:item.iconFileUrl}} resizeMode='cover' style={{width:44,height:44,backgroundColor:'#ddd',borderRadius:2}}/>}
                <View style={{flex:1,justifyContent:'center',marginLeft:12}}>
                    {this.renderItemText(item.name)}
                    <Text style={{color:'rgba(0,0,0,0.65)'}}>{item.description}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    render(){
        return(
            <View style={styles.background}>

                <StatusBar
                    backgroundColor={'#fff'}
                    networkActivityIndicatorVisible
                />
                {/*头部*/}
                <View >
                    {/*信号区*/}
                    <View style = {{height:getHeaderPadding(),backgroundColor:'#fff'}}></View>
                    {/*title*/}
                    <Animated.View  style={{width:'100%',height:this.state.headerHeight,backgroundColor:"#fff"}}>
                        {this.state.headerHidden&&<View style={{flexDirection:'row',justifyContent:'space-between',alignItems :'center',flex:1}}>
                            <TouchableOpacity style={{width:40,height:40,justifyContent:'center',alignItems:'center'}} onPress={()=>{
                                if (this.props.navigation.state.params.callBack){
                                    this.props.navigation.state.params.callBack('');
                                }
                                this.props.navigation.goBack();
                            }}>
                                <Image style={{width:18,height:18}} source={require('../../img/loadBack.png')}/>
                            </TouchableOpacity>
                            <Text style={{fontSize:18,fontWeight:'700'}}>选择话题</Text>
                            <View style={{width:40,height:40}}></View>
                        </View>}
                    </Animated.View>
                </View>

                <View style={{width:'100%',paddingTop:7,backgroundColor:this.state.headerHidden?'#f3f5f6':'#fff',justifyContent:'center',alignItems:'center'}}>
                    {this.state.headerHidden&&<TouchableOpacity activeOpacity={0.9} style={styles.search} onPress={()=>this.activeSearch()}>
                        <Image source={require('../../img/searchB.png')} resizeMode='contain' style={{height:15,width:15}}/>
                        <Text style={{color:'rgba(0,0,0,.45)',marginLeft: 5}}>搜索话题</Text>
                    </TouchableOpacity>}
                    {!this.state.headerHidden&&<View style={{width:'100%',flexDirection:'row',paddingLeft:15,justifyContent:'space-between',alignItems:'center',backgroundColor:'#fff'}}>
                        <View style={{flexDirection:'row',alignItems:'center',backgroundColor:'#ededed',height:30,flex:1,paddingLeft:5}}>
                            <Image source={require('../../img/searchB.png')} resizeMode='contain' style={{height:15,width:15}}/>
                            <TextInput
                                style={{marginLeft: 5,fontSize:14,padding:0,flex:1}}
                                autoFocus={true}
                                returnKeyType={'search'}
                                onChangeText={(text)=>{
                                    this.state.keyWord = text;
                                    // this.searchData(text)
                                }}
                                underlineColorAndroid={'transparent'}
                                placeholder='搜索'
                                placeholderTextColor='rgba(0,0,0,0.45)'
                                onSubmitEditing={()=>this.searchData(this.state.keyWord)}
                                />
                        </View>
                        <TouchableOpacity style={{height:30,paddingLeft:10,paddingRight:15,justifyContent:'center'}} onPress={()=>{this.cancelSearch()}}>
                            <Text style={{fontSize:14,color:'#000'}}>取消</Text>
                        </TouchableOpacity>
                    </View>}
                    <View style={{width:'100%',height:33,marginTop:7,borderTopColor:'#ddd',borderTopWidth: 1,paddingLeft:15,paddingRight:15,flexDirection:'row',alignItems:'center'}}>
                        {this.state.headerHidden&&<TouchableOpacity onPress={()=>{
                            this.setState({
                                selectIndex:1,
                                showList:this.state.hostList
                            })
                        }}>
                            <Text style={this.state.selectIndex===1?styles.selectColor:styles.unSelectColor}>热门话题</Text>
                        </TouchableOpacity>}
                        {this.state.headerHidden&&<TouchableOpacity onPress={()=>{
                            this.setState({
                                selectIndex:2,
                                showList:this.state.recentlyList
                            })
                        }} style={[{marginLeft:20},{}]}>
                            <Text style={this.state.selectIndex===2?styles.selectColor:styles.unSelectColor}>{this.state.titlePlaceHodler}</Text>
                        </TouchableOpacity>}
                        {!this.state.headerHidden&&this.state.titlePlaceHodler!='网络搜索结果'&&<Text style={this.state.selectIndex===1?styles.selectColor:styles.unSelectColor}>热门话题</Text>}
                        {!this.state.headerHidden&&this.state.titlePlaceHodler!='网络搜索结果'&&<Text style={[this.state.selectIndex===2?styles.selectColor:styles.unSelectColor,{marginLeft:10}]}>历史话题</Text>}
                        {!this.state.headerHidden&&this.state.titlePlaceHodler=='网络搜索结果'&&<Text style={{fontSize:14}}>{this.state.titlePlaceHodler}</Text>}
                    </View>
                </View>

                {this.state.showList.length>0&&<FlatList
                    horizontal={false}
                    numColumns={1}
                    data={this.state.showList}
                    renderItem={({item}) => (
                        this.renderItem(item)
                    )}
                />}
                <Animated.View style={[styles.modalBg,{top:this.state.modalTop}]}>
                    <TouchableOpacity activeOpacity={1} style={{flex:1}} onPress={()=>this.cancelSearch()}/>
                </Animated.View>
                {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.showList.length==0 &&
                <EmptyView />}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#ececf1',

    },
    section:{
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:15,
        backgroundColor:'white',
        height:73,
        width:'100%',
        borderBottomColor:'#eee',
        borderBottomWidth: 1
    },
    search:{
        flexDirection:'row',
        alignItems:'center',
        height:30,
        width:width-30,
        backgroundColor:'#fff',
        borderRadius:2,
        paddingLeft:5,
        paddingRight:5
    },
    modalBg: {
        position:'absolute',
        left: 0,
        right: 0,
        bottom:0,
        backgroundColor: 'rgba(0,0,0,.5)',
    },
    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"
    },
    selectColor:{
        color:'#3399ff',
        fontSize:14
    },
    unSelectColor:{
        color:'#000',
        fontSize:14
    }
});