addTarget.js 13.6 KB
/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    InteractionManager,
    Keyboard,
    Platform
} from 'react-native';
import moment from 'moment';
import Picker from 'react-native-picker';

import {width,height,zoomW,zoomH} from '../../utils/getSize';
import {getHeaderHeight,getHeaderPadding,xnToast} from '../../utils/utils';

const close = require('../../img/cloaseB.png');
const people = require('../../img/people.png');
const bread = require('../../img/bread.png');
const time = require('../../img/time.png');
const open = require('../../img/open.png');
const remind = require('../../img/remind.png');
const cc = require('../../img/cc.png');
const progress = require('../../img/progress.png');
const upFile = require('../../img/upFile.png');
const upVoice = require('../../img/upVoice.png');
const upPic = require('../../img/upPic.png');

export default class AddTarget extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title:null,
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}}>
            <TouchableOpacity style={styles.topIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
                <Image source={close} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
            </TouchableOpacity>
        </View>),
        headerRight:(<View style={{display:'flex',flexDirection:'row'}}>
            <TouchableOpacity style={styles.topIcon} onPress={navigation.state.params?navigation.state.params.finish:null}>
                <Text style={{fontSize:16,color:'#00be3c'}}>完成</Text>
            </TouchableOpacity>
        </View>)
    });

    constructor(props){
        super(props);
        this.state = {
            allShow:false,
            title:'',
            content:'',
            bottom:-(45/zoomH),
            allWord:0,
            finishTime:moment(Number(new Date())).format('YYYY-MM-DD')+' 23:59'
        };
    };

    componentWillMount(){
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',this.keyboardDidShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',this.keyboardDidHide.bind(this));
    };

    componentDidMount(){
        this.props.navigation.setParams({
            back:()=>{
                InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
            },
            finish:()=>{
                this.createTarget();
            }
        });
    };
    /*键盘弹出*/
    keyboardDidShow(e){
        if(Platform.OS == 'android'){
            this.setState({
                bottom:0
            })
        }else if(Platform.OS == 'ios'){
            this.setState({
                bottom:e.endCoordinates.height
            })
        }
    };
    /*键盘收起*/
    keyboardDidHide(){
        this.setState({
            bottom:-(45/zoomH)
        })
    }
    /*创建任务*/
    createTarget(){

    };
    /*添加执行人*/
    addPeople(){
        InteractionManager.runAfterInteractions(() => {this.props.navigation.navigate('AddPeople');})
    }

    componentWillUnmount () {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    };
    /*选择时间*/
    openTimePicker(){
        Keyboard.dismiss();
        let hours = [],
            minutes = [],
            Phour = '',
            Pminutes = '';
        let now = new Date();
        for(let i=0;i<25;i++){
            if(i<10){
                i='0'+i;
            }
            hours.push(i);
        }
        for(let i=0;i<60;i++){
            if(i<10){
                i='0'+i;
            }
            minutes.push(i);
        }
        let cdate = [];
        let daySum = 365;
        for(let i=0;i<daySum;i++){
            var d=new Date();
            var month = '';
            var day = '';
            d.setDate(now.getDate() + i);
            if(d.getMonth()+1<10){
                month = '0' + (d.getMonth()+1);
            }else{
                month = d.getMonth()+1;
            }
            if(d.getDate()<10){
                day = '0' + d.getDate();
            }else{
                day = d.getDate();
            }
            cdate.push(d.getFullYear() + '-' + month + '-' + day);
        }
        let pickerData = [cdate,hours,minutes];
        if(now.getHours()<10){
            Phour = '0'+now.getHours();
        }else{
            Phour = now.getHours();
        }
        if(now.getMinutes()<10){
            Pminutes = '0'+now.getMinutes()
        }else{
            Pminutes =now.getMinutes()
        }
        let selectedValue = [
            d[0],
            Phour,
            Pminutes
        ];
        Picker.init({
            pickerData,
            selectedValue,
            pickerConfirmBtnText:'设置截止',
            pickerCancelBtnText:'取消',
            pickerConfirmBtnColor:[26,173,25,1],
            pickerCancelBtnColor:[153,153,153,1],
            pickerToolBarBg:[240,239,245,1],
            pickerBg:[255,255,255,1],
            pickerTitleText: '',
            wheelFlex: [1,1,1],
            showMask:true,
            onPickerConfirm:delayTime => {
                if(Number(delayTime[1]) < new Date().getHours()){
                    xnToast('时间不能倒流哦~');
                    return;
                }else if(Number(delayTime[1]) == new Date().getHours() && Number(delayTime[2]) < new Date().getMinutes()){
                    xnToast('时间不能倒流哦~');
                    return;
                }else{
                    this.setState({
                        finishTime:delayTime[0]+' '+delayTime[1]+':'+delayTime[2]
                    })
                }
            },
        });
        Picker.show()
    };


    render(){
        return(
            <View style={styles.background}>
                <View style={[styles.targetTitle,{height:(44/zoomH)}]}>
                    <TextInput placeholder='任务标题(必填)' placeholderTextColor='#999' maxLength={200} style={styles.titleText} underlineColorAndroid="transparent"  clearButtonMode="while-editing" onFocus={() => {this.setState({allWord:200})}} onChangeText={(value) => {this.setState({title:value})}} />
                </View>
                <View style={[styles.targetTitle,{height:(230/zoomH)}]}>
                    <TextInput placeholder='输入内容' multiline={true} placeholderTextColor='#999' maxLength={10000} style={[styles.titleText,{textAlignVertical:'top',paddingTop:(10/zoomH),paddingBottom:(10/zoomH)}]} underlineColorAndroid="transparent"  clearButtonMode="while-editing" onFocus={() => {this.setState({allWord:10000})}} onChangeText={(value) => {this.setState({content:value})}} />
                </View>
                <TouchableOpacity activeOpacity={0.8} style={styles.settingItem} onPress={() => this.addPeople()}>
                    <Image source={people} style={{width:(17/zoomW),height:(16/zoomH)}} resizeMode="contain" />
                    <TextInput pointerEvents="none" editable={false} placeholder='添加执行人' placeholderTextColor='#999' style={{flex:1,fontSize:16,color:'#000',paddingLeft:(15/zoomW),padding:0}} underlineColorAndroid="transparent" />
                    <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} style={styles.settingItem} onPress={() => this.openTimePicker()}>
                    <Image source={time} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
                    <TextInput pointerEvents="none" editable={false} value={this.state.finishTime} style={{flex:1,fontSize:16,color:'#000',paddingLeft:(15/zoomW),padding:0}} underlineColorAndroid="transparent" />
                    <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                </TouchableOpacity>
                {!this.state.allShow && <TouchableOpacity activeOpacity={0.8} style={styles.settingItem} onPress={() => {this.setState({allShow:true})}}>
                    <Image source={open} style={{width:(17/zoomW),height:(16/zoomH)}} resizeMode="contain" />
                    <Text style={{flex:1,fontSize:16,color:'#00be3c',paddingLeft:(15/zoomW)}}>显示全部</Text>
                </TouchableOpacity>}
                {this.state.allShow && <View>
                    <TouchableOpacity activeOpacity={0.8} style={styles.settingItem}>
                        <Image source={remind} style={{width:(18/zoomW),height:(19/zoomH)}} resizeMode="contain" />
                        <TextInput pointerEvents="none" editable={false} placeholder='设置提醒' placeholderTextColor='#999' style={{flex:1,fontSize:16,color:'#000',paddingLeft:(15/zoomW),padding:0}} underlineColorAndroid="transparent" />
                        <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} style={styles.settingItem}>
                        <Image source={cc} style={{width:(17/zoomW),height:(15/zoomH)}} resizeMode="contain" />
                        <TextInput pointerEvents="none" editable={false} placeholder='添加抄送人' placeholderTextColor='#999' style={{flex:1,fontSize:16,color:'#000',paddingLeft:(15/zoomW),padding:0}} underlineColorAndroid="transparent" />
                        <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} style={styles.settingItem}>
                        <Image source={progress} style={{width:(19/zoomW),height:(15/zoomH)}} resizeMode="contain" />
                        <TextInput pointerEvents="none" editable={false} placeholder='设置进度汇报' placeholderTextColor='#999' style={{flex:1,fontSize:16,color:'#000',paddingLeft:(15/zoomW),padding:0}} underlineColorAndroid="transparent" />
                        <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                </View>}
                <View style={[styles.inputTip,{bottom:this.state.bottom}]}>
                    {this.state.allWord == 200 && <Text style={{fontSize:16,color:'#333'}}>还可以输入<Text style={{color:'#00be3c'}}>{this.state.allWord - this.state.title.length}</Text>字</Text>}
                    {this.state.allWord == 10000 && <Text style={{fontSize:16,color:'#333'}}>还可以输入<Text style={{color:'#00be3c'}}>{this.state.allWord - this.state.content.length}</Text>字</Text>}
                    <TouchableOpacity activeOpacity={0.8} style={{height:'100%',paddingLeft:(10/zoomW),display:'flex',justifyContent:'center',alignItems:'flex-end'}} onPress={() => {Keyboard.dismiss()}}>
                        <Text style={{fontSize:16,color:'#00be3c'}}>完成</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.addAttachment}>
                    <TouchableOpacity activeOpacity={0.8} style={{height:'100%',paddingLeft:(15/zoomW),paddingRight:(15/zoomW),display:'flex',justifyContent:'center'}}>
                        <Image source={upFile} style={{width:(23/zoomW),height:(20/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} style={{height:'100%',paddingLeft:(15/zoomW),paddingRight:(15/zoomW),display:'flex',justifyContent:'center'}}>
                        <Image source={upVoice} style={{width:(23/zoomW),height:(25/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} style={{height:'100%',paddingLeft:(15/zoomW),paddingRight:(15/zoomW),display:'flex',justifyContent:'center'}}>
                        <Image source={upPic} style={{width:(23/zoomW),height:(20/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topIcon:{
        paddingLeft:(10/zoomW),
        paddingRight:(10/zoomW),
        height:'100%',
        display:'flex',
        alignItems:'center'
    },
    background:{
        flex:1,
        backgroundColor:'#fff',
        display:'flex',
        alignItems:'center'
    },
    targetTitle:{
        width:'100%',
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderStyle:'solid',
        borderColor:'#eee',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW)
    },
    titleText:{
        flex:1,
        padding:0,
        color:'#333',
        fontSize:18
    },
    settingItem:{
        width:'100%',
        height:(44/zoomH),
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW)
    },
    inputTip:{
        width:'100%',
        height:(45/zoomH),
        borderColor:'#ddd',
        borderWidth:StyleSheet.hairlineWidth,
        borderStyle:'solid',
        backgroundColor:'#f9f9f9',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        position:'absolute'
    },
    addAttachment:{
        width:'100%',
        height:(50/zoomH),
        backgroundColor:'#f4f4f6',
        position:'absolute',
        top:height-(50/zoomH)-getHeaderHeight()-getHeaderPadding(),
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-around'
    }
});