xntalk / xntalk-rnapp

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

import {width,zoomW,zoomH} from '../../utils/getSize';
import {NoDoublePress,xnToast} from '../../utils/utils';
import AppService from "../../service/AppService";

const back = require('../../img/returnB.png');
const selected = require('../../img/selectedG.png');

export default class RemindSetting 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'}} />)
    });

    constructor(props){
        super(props);
        this.state = {
            left:new Animated.Value(2/zoomH),
            timeLeft:new Animated.Value(2/zoomH),
            background:'#c6c6c6',
            timeBackground:'#c6c6c6',
            setting:[{name:'全部提醒',value:'ALL'},{name:'回复我的',value:'COMMENT_TO_ME'}],
            timeSetting:[{name:'结束时',value:0},{name:'结束前5分钟',value:5},{name:'结束前10分钟',value:10},{name:'结束前15分钟',value:15},{name:'结束前30分钟',value:30},{name:'结束前1小时',value:60},{name:'结束前2小时',value:120},{name:'结束前一天',value:1440}],
            typeIndex:-1,
            timeIndex:-1
        };
    };

    componentWillMount(){
        this.taskId = this.props.navigation.state.params.taskId
    };

    componentDidMount(){
        this.props.navigation.setParams({
            back:()=>{
                NoDoublePress.onPress(() => {
                    if(global.isConnected){
                        if(this.state.isDynamicNotification && !this.state.alarmType){
                            Alert.alert(
                                '提示',
                                '请选择推送方式',
                                [
                                    {text: '确定', onPress:() => {return}}
                                ],
                                {cancelable:false}
                            );
                            return;
                        }
                        if(this.state.isTimeAlarm && !this.state.aheadTimeCount){
                            Alert.alert(
                                '提示',
                                '请选择提醒方式',
                                [
                                    {text: '确定', onPress:() => {return}}
                                ],
                                {cancelable:false}
                            );
                            return;
                        }
                        let params = {
                            taskId:this.taskId,
                            isDynamicNotification:this.state.isDynamicNotification,
                            alarmType:this.state.alarmType,
                            isTimeAlarm:this.state.isTimeAlarm,
                            aheadTimeCount:this.state.aheadTimeCount ? this.state.aheadTimeCount:null,
                        };
                        this.setState({
                            returnLoading:true
                        });
                        AppService.updateRemind(params).then((data) => {
                            this.setState({
                                returnLoading:false
                            });
                            if(data.message){
                                xnToast(data.message);
                                return;
                            }
                            if(data.errors.length > 0){
                                xnToast(data.errors[0].message);
                            }else{
                                xnToast('设置成功');
                                InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
                            }
                        }).catch((error) => {
                            this.setState({
                                loading:false
                            });
                            xnToast(error)
                        })
                    }else{
                        xnToast('暂无网络连接，请稍后重试！')
                    }
                })
            }
        });
        this.getCurrrentStatus();
    };

    /*获取当前提醒设置*/
    getCurrrentStatus(){
        if(global.isConnected){
            this.setState({
                loading:true
            });
            AppService.getRemind({taskId:this.taskId}).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({
                        isDynamicNotification:data.taskUser.isDynamicNotification,
                        alarmType:data.taskUser.alarmType ? data.taskUser.alarmType:null,
                        isTimeAlarm:data.taskUser.isTimeAlarm,
                        aheadTimeCount:data.taskUser.aheadTimeCount ? data.taskUser.aheadTimeCount:null,
                    });
                    if(data.taskUser.isDynamicNotification){
                        this.setState({
                            background:'#00be3c',
                            left:new Animated.Value(32/zoomH)
                        });
                    }else{
                        this.setState({
                            background:'#c6c6c6',
                            left:new Animated.Value(2/zoomH)
                        });
                    }
                    if(data.taskUser.isTimeAlarm){
                        this.setState({
                            timeBackground:'#00be3c',
                            timeLeft:new Animated.Value(32/zoomH)
                        });
                    }else{
                        this.setState({
                            timeBackground:'#c6c6c6',
                            timeLeft:new Animated.Value(2/zoomH)
                        });
                    }
                }
            }).catch((error) => {
                this.setState({
                    loading:false
                });
                xnToast(error)
            })
        }else{
            xnToast('暂无网络连接，请稍后重试！')
        }
    };
    /*是否打开提醒*/
    isTop(type){
        if(type == 'top'){
            if(!this.state.isDynamicNotification){
                this.setState({
                    background:'#00be3c',
                    isDynamicNotification:true
                });
                Animated.timing(
                    this.state.left,
                    {toValue:(32/zoomH),duration:200}
                ).start();
            }else{
                this.setState({
                    background:'#c6c6c6',
                    alarmType:null,
                    isDynamicNotification:false
                });
                Animated.timing(
                    this.state.left,
                    {toValue:(2/zoomH),duration:200}
                ).start();
            }
        }else if(type == 'time'){
            if(!this.state.isTimeAlarm){
                this.setState({
                    timeBackground:'#00be3c',
                    isTimeAlarm:true
                });
                Animated.timing(
                    this.state.timeLeft,
                    {toValue:(32/zoomH),duration:200}
                ).start();
            }else{
                this.setState({
                    timeBackground:'#c6c6c6',
                    aheadTimeCount:null,
                    timeIndex:-1,
                    isTimeAlarm:false
                });
                Animated.timing(
                    this.state.timeLeft,
                    {toValue:(2/zoomH),duration:200}
                ).start();
            }
        }
    };
    /*渲染方式列表*/
    renderTypeList(item,index){
        return(
            <TouchableOpacity activeOpacity={0.8} key={index} style={styles.settingItem} onPress={() => this.selectType(item)}>
                <View style={{flex:1}}>
                    <Text style={{fontSize:17,color:'#000'}}>{item.name}</Text>
                </View>
                {!!this.state.alarmType && this.state.alarmType == item.value && <View style={{width:(50/zoomW),display:'flex',justifyContent:'center',alignItems:'center'}}>
                    <Image source={selected} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
                </View>}
            </TouchableOpacity>
        )
    };
    /*渲染提醒列表*/
    renderTimeList(item,index){
        return(
            <TouchableOpacity activeOpacity={0.8} key={index} style={styles.settingItem} onPress={() => this.selectTime(item)}>
                <View style={{flex:1}}>
                    <Text style={{fontSize:17,color:'#000'}}>{item.name}</Text>
                </View>
                {(!!this.state.aheadTimeCount || this.state.aheadTimeCount == 0) && this.state.aheadTimeCount == item.value && <View style={{width:(50/zoomW),display:'flex',justifyContent:'center',alignItems:'center'}}>
                    <Image source={selected} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
                </View>}
            </TouchableOpacity>
        )
    };
    /*设置提醒方式*/
    selectType(item){
        if(this.state.alarmType == item.value){
            this.setState({
                alarmType:null,
            })
        }else{
            this.setState({
                alarmType:item.value
            })
        }
    };
    /*设置提醒时间*/
    selectTime(item){
        if(this.state.aheadTimeCount == item.value){
            this.setState({
                aheadTimeCount:null,
            })
        }else{
            this.setState({
                aheadTimeCount:item.value
            })
        }
    };

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

    render(){
        return(
            <View style={styles.background}>
                {!this.state.loading && <ScrollView style={{width:'100%'}}>
                    <View style={styles.settingItem}>
                        <View style={{flex:1}}>
                            <Text style={{fontSize:17,color:'#000'}}>任务动态推送</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.8} style={[styles.topBtn,{backgroundColor:this.state.background}]} onPress={() => NoDoublePress.onPress(() => {this.isTop('top')})}>
                            <Animated.View style={[styles.circleDot,{left:this.state.left}]} />
                        </TouchableOpacity>
                    </View>
                    {this.state.isDynamicNotification && this.state.setting && this.state.setting.map((item,index) => this.renderTypeList(item,index))}
                    <View style={[styles.settingItem,{marginTop:(20/zoomH)}]}>
                        <View style={{flex:1}}>
                            <Text style={{fontSize:17,color:'#000'}}>时间提醒</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.8} style={[styles.topBtn,{backgroundColor:this.state.timeBackground}]} onPress={() => NoDoublePress.onPress(() => {this.isTop('time')})}>
                            <Animated.View style={[styles.circleDot,{left:this.state.timeLeft}]} />
                        </TouchableOpacity>
                    </View>
                    {this.state.timeSetting && this.state.isTimeAlarm && this.state.timeSetting.map((item,index) => this.renderTimeList(item,index))}
                </ScrollView>}
                {(this.state.loading || this.state.returnLoading) && <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',
        justifyContent:'center'
    },
    background:{
        flex:1,
        backgroundColor:'#ececf1',
        display:'flex',
        alignItems:'center'
    },
    settingItem:{
        width:'100%',
        height:(50/zoomH),
        backgroundColor:'#fff',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderBottomColor:'#eee',
        borderStyle:'solid',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW)
    },
    topBtn:{
        width:(60/zoomH),
        height:(30/zoomH),
        borderRadius:(15/zoomH),
        display:'flex',
        justifyContent:'center'
    },
    circleDot:{
        width:(26/zoomH),
        height:(26/zoomH),
        backgroundColor:'#fff',
        borderRadius:(13/zoomH),
        position:'absolute'
    },
    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'
    }
});