targetProgress.js 16.3 KB
/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    ScrollView,
    Platform,
    InteractionManager,
    KeyboardAvoidingView,
    Keyboard,
    FlatList
} from 'react-native';
import PercentageCircle from 'react-native-percentage-circle';

import {width,zoomW,zoomH} from '../../utils/getSize';

const back = require('../../img/returnB.png');
const avatar = require('../../img/avatar.png');
const bread = require('../../img/bread.png');
const rar = require('../../img/rar.png');
const discuss = require('../../img/discuss.png');
const toTop = require('../../img/toTop.png');
const videoPlayer = require('../../img/videoPlayer.png');
const sendMore = require('../../img/sendMore.png');
const upPic = require('../../img/upPic.png');
const upFile = require('../../img/upFile.png');
const upVoice = require('../../img/upVoice.png');

export default class TargetProgress extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title:'任务进度',
        headerLeft:(<View style={{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={{display:'flex',flexDirection:'row'}} />)
    });

    constructor(props){
        super(props);
        this.state = {
            percent:25,
            attachmentList:['0','0','0','0','0','0','0','0','0','0','0','0','0'],
            progressList:['0','0'],
            bottom:0,
            moreShow:false,
            currentList:[],
            content:''
        };
    };

    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();})
            }
        });
    };
    /*键盘弹出*/
    keyboardDidShow(e){
        this.setState({
            moreShow:false
        });
        if(Platform.OS == 'android'){
            this.setState({
                bottom:(12/zoomH)
            })
        }else if(Platform.OS == 'ios'){
            this.setState({
                bottom:(7/zoomH)
            })
        }
    };
    /*键盘收起*/
    keyboardDidHide(){
        this.setState({
            bottom:0
        })
    };
    /* 渲染进度列表*/
    keyExtractor = (item,index) => index;
    renderProgressItem = ({item,index}) => (
        <View>
            <View style={styles.progressItem}>
                <Text style={{fontSize:16,color:'#333'}}>今天</Text>
                <View style={{display:'flex',flexDirection:'row',marginTop:(15/zoomH),marginBottom:(10/zoomH)}}>
                    <View style={{width:(34/zoomH),height:(34/zoomH),borderRadius:4,borderWidth:StyleSheet.hairlineWidth,borderColor:'#ddd'}}>
                        <Image source={avatar} style={{width:(34/zoomH),height:(34/zoomH),borderRadius:4}} resizeMode="contain" />
                    </View>
                    <View style={{paddingLeft:(12.5/zoomW),justifyContent:'center'}}>
                        <Text style={{fontSize:16,color:'#576B95'}}>Olivia</Text>
                        <Text style={{fontSize:16,color:'#333'}}>设计稿已完成</Text>
                    </View>
                </View>
                <View style={[styles.attachList,{height:(50/zoomH)}]}>
                    <TouchableOpacity activeOpacity={0.8} style={{width:'100%',height:'100%',display:'flex',flexDirection:'row',alignItems:'center'}}>
                        <Image source={rar} style={{width:(30/zoomH),height:(30/zoomH),borderRadius:4}} resizeMode="contain" />
                        <Text style={{fontSize:16,color:'#333',marginLeft:(10/zoomW)}}>设计稿.ZIP</Text>
                    </TouchableOpacity>
                    <FlatList showsHorizontalScrollIndicator={false} horizontal={true} keyExtractor={this.keyExtractor} data={this.state.attachmentList} renderItem={this.renderItem} />
                </View>
                <View style={[styles.attachList,{backgroundColor:'#fff',height:(20/zoomH),flexDirection:'row',alignItems:'center',justifyContent:'space-between',padding:0}]}>
                    <Text style={{fontSize:12,color:'#999',paddingTop:(10/zoomH)}}>09:00</Text>
                    <TouchableOpacity style={{width:(48/zoomW),paddingLeft:(30/zoomW),paddingTop:(10/zoomH)}} activeOpacity={0.8} onPress={() => this.refs.input.focus()}>
                        <Image source={discuss} style={{width:(18/zoomW),height:(12.5/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                </View>
                <View>
                    <Image source={toTop} style={{width:(10/zoomW),height:(6/zoomH),marginLeft:(55/zoomW),marginTop:(7.5/zoomH)}} resizeMode="contain" />
                    <View style={[styles.attachList,{backgroundColor:'#f3f3f3',padding:(15/zoomH)}]}>
                        <Text style={{fontSize:14,color:'#576b95'}}>James<Text style={{color:'#151515'}}>:周三开会对稿子!</Text></Text>
                        <Text style={{fontSize:14,color:'#576b95'}}>Olivia<Text style={{color:'#151515'}}>回复</Text>James<Text style={{color:'#151515'}}>:好的好的好的好的好的好的好的好的好的好的好的好的好的好的好的</Text></Text>
                        <Text style={{fontSize:14,color:'#576b95'}}>James<Text style={{color:'#151515'}}>:周三开会对稿子!</Text></Text>
                    </View>
                </View>
            </View>
            <View style={styles.progressItem}>
                <Text style={{fontSize:16,color:'#333'}}>今天</Text>
                <View style={{display:'flex',flexDirection:'row',marginTop:(15/zoomH),marginBottom:(10/zoomH)}}>
                    <View style={{width:(34/zoomH),height:(34/zoomH),borderRadius:4,borderWidth:StyleSheet.hairlineWidth,borderColor:'#ddd'}}>
                        <Image source={avatar} style={{width:(34/zoomH),height:(34/zoomH),borderRadius:4}} resizeMode="contain" />
                    </View>
                    <View style={{paddingLeft:(12.5/zoomW),justifyContent:'center'}}>
                        <Text style={{fontSize:16,color:'#576B95'}}>Olivia</Text>
                    </View>
                </View>
                <TouchableOpacity activeOpacity={0.8} style={{width:'100%',display:'flex',flexDirection:'row',alignItems:'center',backgroundColor:'rgba(0,0,0,0)',marginTop:-(10/zoomH)}}>
                    <Image source={videoPlayer} style={{width:(169/zoomW),height:(40/zoomH),marginLeft:(45/zoomW)}} resizeMode="stretch" />
                </TouchableOpacity>
                <View style={[styles.attachList,{backgroundColor:'#fff',height:(20/zoomH),flexDirection:'row',alignItems:'center',justifyContent:'space-between',padding:0,marginTop:(2/zoomH)}]}>
                    <Text style={{fontSize:12,color:'#999',paddingTop:(10/zoomH)}}>09:00</Text>
                    <TouchableOpacity style={{width:(48/zoomW),paddingLeft:(30/zoomW),paddingTop:(10/zoomH)}} activeOpacity={0.8}>
                        <Image source={discuss} style={{width:(18/zoomW),height:(12.5/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
    /* 渲染附件列表*/
    renderItem = ({item,index}) => (
        <TouchableOpacity activeOpacity={0.8} style={{display:'flex',flexDirection:'row',alignItems:'center',marginRight:(7.5/zoomW)}}>
            <Image source={rar} style={{width:(30/zoomH),height:(30/zoomH),borderRadius:2}} resizeMode="contain" />
        </TouchableOpacity>
    );
    /*打开更多*/
    showMore(){
        Keyboard.dismiss();
        this.setState({
            moreShow:true
        })
    };
    /*判断是否@*/
    atOrNot(){
        setTimeout(() => {
            if(this.state.content.substring(this.state.content.length-1) == '@'){
                InteractionManager.runAfterInteractions(() => {this.props.navigation.navigate('AddEmployee',{from:'@',callback:this.updateEmployee});})
            }
        },10)
    };
    /*回调刷新*/
    updateEmployee = (employee) =>{
        let currentList = this.state.currentList;
        currentList.push({name:'@'+employee.name,id:employee.id});
        this.setState({
            currentList:currentList,
            content:this.state.content + employee.name
        });
    };
    /*发布信息*/
    sendMsg(){
        let resultName = [];
        for(let i=0;i<this.state.currentList.length;i++){
            if(this.state.content.indexOf(this.state.currentList[i].name) != -1){
                resultName.push(this.state.currentList[i]);
            }
        }
    }

    render(){
        return(
            <View style={styles.background}>
                <TouchableOpacity activeOpacity={0.8} style={styles.taskContent}>
                    <View style={styles.taskTop}>
                        <PercentageCircle collapsable={false} radius={(28/zoomH)} percent={this.state.percent} color={'#28c35a'} borderWidth={(2/zoomH)}>
                            <Image source={avatar} style={{width:(50/zoomH),height:(50/zoomH),borderRadius:(25/zoomH)}} resizeMode="contain" />
                            <View style={{width:(50/zoomH),height:(50/zoomH),borderRadius:(25/zoomH),position:'absolute',display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'rgba(0,0,0,.2)'}}>
                                <Text style={{fontSize:14,color:'#fff'}}>{this.state.percent}%</Text>
                            </View>
                        </PercentageCircle>
                        <View style={{flex:1,marginLeft:(15/zoomW)}}>
                            <View style={{flex:1,height:(25/zoomH),display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'flex-end'}}>
                                <Text style={{fontSize:18,color:'#000'}} numberOfLines={1}>企信2.0设计</Text>
                                <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                            </View>
                            <View style={{flex:1,height:(25/zoomH),display:'flex',justifyContent:'flex-start'}}>
                                <Text style={{fontSize:14,color:'#999'}} numberOfLines={1}>还剩下17</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{width:'100%',paddingLeft:(63/zoomW),paddingRight:(15/zoomW),paddingBottom:(15/zoomH)}}>
                        <Text style={{fontSize:16,color:'#666'}} numberOfLines={3}>
                            不少设计师开始利用诸如斑点和小气泡这样的装饰性元素,分散在网页的各个角落。这些装饰性的元素大多以小不少设计师开始利用诸如斑点和小气泡这样的装饰性元素,分散在网页的各个角落。这些装饰性的元素大多以小不少设计师开始利用诸如斑点和小气泡这样的装饰性元素,分散在网页的各个角落。这些装饰性的元素大多以小不少设计师开始利用诸如斑点和小气泡这样的装饰性元素,分散在网页的各个角落。这些装饰性的元素大多以小不少设计师开始利用诸如斑点和小气泡这样的装饰性元素,分散在网页的各个角落。这些装饰性的元素大多以小
                        </Text>
                    </View>
                </TouchableOpacity>
                <FlatList style={{marginBottom:(58/zoomH)}} showsVerticalScrollIndicator={false} keyExtractor={this.keyExtractor} data={this.state.progressList} renderItem={this.renderProgressItem} />
                <View style={[styles.inputBox,{bottom:this.state.bottom}]}>
                    <View style={{display:'flex',flexDirection:'row',alignItems:'center',paddingLeft:(15/zoomH),marginBottom:(7/zoomH)}}>
                        <TextInput ref="input" placeholder='发布任务进度' placeholderTextColor='#999' returnKeyType="send" underlineColorAndroid="transparent" style={styles.inputText} onChangeText={(value) => {this.setState({content:value},this.atOrNot())}} defaultValue={this.state.content} onSubmitEditing={() => this.sendMsg()} />
                        <TouchableOpacity activeOpacity={0.8} style={{paddingLeft:(12/zoomW),paddingRight:(12/zoomW)}} onPress={() => this.showMore()}>
                            <Image source={sendMore} style={{width:(28/zoomH),height:(28/zoomH)}} resizeMode="contain" />
                        </TouchableOpacity>
                    </View>
                    {this.state.moreShow && <View style={styles.progressMore}>
                        <TouchableOpacity activeOpacity={0.8} style={styles.moreItem}>
                            <View style={{width:'100%',height:(60/zoomH),borderRadius:8,display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff'}}>
                                <Image source={upPic} resizeMode="contain" />
                            </View>
                            <Text style={{fontSize:12,color:'#909090',marginTop:(9/zoomH)}}>照片</Text>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8} style={styles.moreItem}>
                            <View style={{width:'100%',height:(60/zoomH),borderRadius:8,display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff'}}>
                                <Image source={upFile} resizeMode="contain" />
                            </View>
                            <Text style={{fontSize:12,color:'#909090',marginTop:(9/zoomH)}}>文件</Text>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8} style={styles.moreItem}>
                            <View style={{width:'100%',height:(60/zoomH),borderRadius:8,display:'flex',justifyContent:'center',alignItems:'center',backgroundColor:'#fff'}}>
                                <Image source={upVoice} resizeMode="contain" />
                            </View>
                            <Text style={{fontSize:12,color:'#909090',marginTop:(9/zoomH)}}>语音</Text>
                        </TouchableOpacity>
                    </View>}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topIcon:{
        paddingLeft:(10/zoomW),
        paddingRight:(10/zoomW),
        height:'100%',
        display:'flex',
        alignItems:'center'
    },
    background:{
        flex:1,
        backgroundColor:'#ececf1',
        display:'flex',
        alignItems:'center'
    },
    taskContent:{
        width:'100%',
        marginTop:StyleSheet.hairlineWidth,
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        backgroundColor:'#fff',
        display:'flex',
        justifyContent:'center',
        marginBottom:(10/zoomH)
    },
    taskTop:{
        width:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingTop:(15/zoomH)
    },
    progressItem:{
        width:'100%',
        padding:(17/zoomH),
        backgroundColor:'#fff'
    },
    attachList:{
        width:(292/zoomW),
        marginLeft:(45/zoomW),
        backgroundColor:'#f3f3f3',
        padding:(10/zoomH),
        display:'flex'
    },
    inputBox:{
        width:'100%',
        backgroundColor:'#f5f5f5',
        paddingTop:(7/zoomH),
        position:'absolute',
        bottom:0
    },
    inputText:{
        flex:1,
        height:(36/zoomH),
        borderRadius:4,
        padding:0,
        paddingLeft:(10/zoomW),
        paddingRight:(10/zoomW),
        backgroundColor:'#fff',
        fontSize:16,
        color:'#333'
    },
    progressMore:{
        width:'100%',
        height:(115/zoomH),
        paddingLeft:(30/zoomW),
        paddingRight:(30/zoomW),
        paddingTop:(15/zoomH),
        display:'flex',
        flexDirection:'row',
        flexWrap:'wrap'
    },
    moreItem:{
        width:(60/zoomH),
        display:'flex',
        alignItems:'center',
        marginRight:(25/zoomW)
    }
});