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
} from "react-native";
import {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('设置成功');
                                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'
    }
});