addTarget.js 8.58 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 {width,height,zoomW,zoomH} from '../../utils/getSize';

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');

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
        };
    };

    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();
    };


    render(){
        return(
            <View style={styles.background}>
                <View style={[styles.targetTitle,{height:(44/zoomH)}]}>
                    <TextInput placeholder='任务标题(必填)' placeholderTextColor='#999' 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' 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" />
                    <Text style={{flex:1,fontSize:16,color:'#999',paddingLeft:(15/zoomW)}}>添加执行人</Text>
                    <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                </TouchableOpacity>
                <View style={styles.settingItem}>
                    <Image source={time} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
                    <Text style={{flex:1,fontSize:16,color:'#999',paddingLeft:(15/zoomW)}}>选择截止时间</Text>
                    <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                </View>
                {!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>
                    <View style={styles.settingItem}>
                        <Image source={remind} style={{width:(18/zoomW),height:(19/zoomH)}} resizeMode="contain" />
                        <Text style={{flex:1,fontSize:16,color:'#999',paddingLeft:(15/zoomW)}}>设置提醒</Text>
                        <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                    </View>
                    <View style={styles.settingItem}>
                        <Image source={cc} style={{width:(17/zoomW),height:(15/zoomH)}} resizeMode="contain" />
                        <Text style={{flex:1,fontSize:16,color:'#999',paddingLeft:(15/zoomW)}}>添加抄送人</Text>
                        <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                    </View>
                    <View style={styles.settingItem}>
                        <Image source={progress} style={{width:(19/zoomW),height:(15/zoomH)}} resizeMode="contain" />
                        <Text style={{flex:1,fontSize:16,color:'#999',paddingLeft:(15/zoomW)}}>设置进度汇报</Text>
                        <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                    </View>
                </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:'#007aff'}}>完成</Text>
                    </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,
        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'
    }
});