xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    ScrollView,
    Animated,
    NativeModules,
    InteractionManager
} from 'react-native';
import {SwipeListView,SwipeRow} from 'react-native-swipe-list-view';
import moment from 'moment';
import ImagePicker from 'react-native-image-picker';

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

const back = require('../../img/returnB.png');
const circleAdd = require('../../img/circleAdd.png');
const avatar = require('../../img/avatar.png');
const del = require('../../img/del.png');
const bread = require('../../img/bread.png');

const photoOptions = {
    title:'上传图片',
    storageOptions:{
        skipBackup:true,
        path:'images',
        waitUntilSaved:true
    },
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'从手机相册选择',
    quality:0.75,
    noData:true,
    mediaType:'photo',
    allowsEditing:false
};

export default class CreateTeam extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title:navigation.state.params?navigation.state.params.title:null,
        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'}}>
            {navigation.state.params && <TouchableOpacity activeOpacity={navigation.state.params.opacity} style={styles.topIcon} onPress={navigation.state.params.addTeam}>
                <Text style={{fontSize:16,color:'#00be3c'}}>{navigation.state.params.edit}</Text>
            </TouchableOpacity>}
        </View>)
    });

    constructor(props){
        super(props);
        this.state = {
            left:new Animated.Value(2/zoomH),
            background:'#c6c6c6',
            sheetList:[],
            percent:30,
            delPic:true,
            attachment:'',
            imgType:['bmp','jpeg','jp2','gif','tiff','png','exif','wbmp','mbm','jpg','heic'],
            videoType:['avi','wmv','mpeg','mp4','mov','mkv','flv','f4v','m4v','rmvb','rm','3gp','dat','ts','mts','vob'],
            avatar:''
        };
    };

    componentDidMount(){
        this.props.navigation.setParams({
            color:'rgba(0,190,60,.5)',
            opacity:this.state.sheetList.length == 0 ? 1:0.8,
            title:this.props.navigation.state.params.from == 'create'?'新建任务组':'编辑',
            edit:this.props.navigation.state.params.from == 'create'?'新建':'完成',
            back:()=>{
                InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
            },
            addTeam:()=>{

            }
        });
    };
    /*设置是否置顶*/
    isTop(){
        if(this.state.background == '#c6c6c6'){
            this.setState({
                background:'#27c159'
            });
            Animated.timing(
                this.state.left,
                {toValue:(32/zoomH),duration:200}
            ).start();
        }else if(this.state.background == '#27c159'){
            this.setState({
                background:'#c6c6c6'
            });
            Animated.timing(
                this.state.left,
                {toValue:(2/zoomH),duration:200}
            ).start();
        }
    };
    /* 渲染列表*/
    keyExtractor = (item,index) => index;
    renderItem(rowData,rowMap){
        return(
        <SwipeRow disableRightSwipe={true} rightOpenValue={-(60/zoomW)}>
            <TouchableOpacity activeOpacity={0.8} style={styles.delBtn} onPress={() => this.delTarget(rowData,rowMap)}>
                {this.state.delPic && <Image source={del} style={{width:(24/zoomH),height:(24/zoomH)}} resizeMode="contain" />}
                {!this.state.delPic && <Text style={{fontSize:14,color:'#fff'}}>确认删除</Text>}
            </TouchableOpacity>
            <View style={styles.listItem}>
                <View style={{borderRadius:(30/zoomH),display:'flex',justifyContent:'center',alignItems:'center',borderStyle:'solid',borderColor:'#ddd',borderWidth:StyleSheet.hairlineWidth}}>
                    <Image source={avatar} style={{width:(50/zoomH),height:(50/zoomH),borderRadius:(25/zoomH)}} resizeMode="contain" />
                </View>
                <View style={styles.taskDetail}>
                    <Text style={{fontSize:17,color:'#000'}} numberOfLines={1}>{rowData.item.objectName}</Text>
                    <Text style={{fontSize:14,color:'#666'}} numberOfLines={1}>{'结束时间：'+ moment(Number(rowData.item.endTime)).format('YYYY-MM-DD HH:mm')}</Text>
                    <Text style={{fontSize:14,color:'#666'}} numberOfLines={1}>{'任务详情：'+ rowData.item.objectDescription}</Text>
                </View>
            </View>
        </SwipeRow>
        )
    };
    /*删除关联任务*/
    delTarget(rowData,rowMap){
        if(this.state.delPic){
            this.setState({
                delPic:false
            });
            return;
        }else{
            let list = this.state.sheetList;
            list.splice(rowData.index,1);
            xnToast('删除成功');
            rowMap[rowData.index].closeRow();
            this.setState({
                sheetList:list,
                delPic:true
            })
        }
    };
    /*选择任务回调*/
    addTarget = (list) =>{
        this.setState({
            sheetList:list
        })
    };
    /*上传头像*/
    uploadAvatar(){
        ImagePicker.showImagePicker(photoOptions,(response) => {
            if(response.didCancel){}
            else if(response.error){}
            else if(response.customButton){}
            else{
                this.setState({
                    loading:true
                });
                let fileName = response.fileName ? response.fileName : response.uri.substring(response.uri.lastIndexOf('/')+1);
                AppService.getAccess({name:fileName}).then((data) => {
                    if(data.message){
                        xnToast(data.message);
                        return;
                    }
                    if(data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    }else{
                        NativeModules.system.simpleUpload(data.accessKeyId,data.accessKeySecret,data.securityToken,data.info.endpoint,data.info.bucket,fileName,response.path || response.uri).then((res) => {
                            let extension = res.substring(res.lastIndexOf('.')+1).toLowerCase();
                            let fileType = '';
                            if(this.state.imgType.indexOf(extension) != -1){
                                fileType = 'IMAGE'
                            }else if(this.state.videoType.indexOf(extension) != -1){
                                fileType = 'VEDIO'
                            }
                            let params = {
                                type:fileType,
                                name:res.substring(res.lastIndexOf('/')+1,res.lastIndexOf('.')),
                                extension:extension,
                                storagePath:res,
                                sourceType:'DIRECT'
                            };
                            this.setState({
                                avatar:res,
                                attachment:params
                            })
                        })
                    }
                })
            }
        })
    }

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


    render(){
        return(
            <View style={styles.background}>
                <ScrollView showsVerticalScrollIndicator={false} alwaysBounceVertical={false}>
                    <View style={styles.teamName}>
                        <TextInput placeholder='任务组名称(必填）' placeholderTextColor='#999' style={styles.nameText} underlineColorAndroid="transparent" onChangeText={(value) => {this.setState({title:value})}} />
                    </View>
                    <TouchableOpacity activeOpacity={0.8} style={[styles.isTop,{height:(86/zoomH)}]} onPress={() => this.uploadAvatar()}>
                        <Text style={{fontSize:18,color:'#000'}}>头像</Text>
                        <View style={{flex:1,display:'flex',flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                            <View style={{width:(60/zoomH),height:(60/zoomH),borderRadius:(30/zoomH),marginRight:(15/zoomW),borderWidth:StyleSheet.hairlineWidth,borderColor:'#ddd',borderStyle:'solid'}}>
                                <Image source={this.state.avatar ? {uri:this.state.avatar +'?x-oss-process=image/resize,w_100'}:avatar} style={{width:(60/zoomH),height:(60/zoomH),borderRadius:(30/zoomH)}} resizeMode="contain" />
                            </View>
                            <Image source={bread} style={{width:(6/zoomW),height:(11/zoomH)}} resizeMode="contain" />
                        </View>
                    </TouchableOpacity>
                    <View style={styles.isTop}>
                        <Text style={{fontSize:18,color:'#000'}}>置顶任务组</Text>
                        <TouchableOpacity activeOpacity={0.8} style={[styles.topBtn,{backgroundColor:this.state.background}]} onPress={() => this.isTop()}>
                            <Animated.View style={[styles.circleDot,{left:this.state.left}]} />
                        </TouchableOpacity>
                    </View>
                    <Text style={{fontSize:12,color:'#999',padding:(5/zoomH),paddingLeft:(15/zoomW)}}>已关联任务({this.state.sheetList.length})</Text>
                    <View style={{flex:1,backgroundColor:'#fff'}}>
                        <TouchableOpacity activeOpacity={0.8} style={styles.addBtn} onPress={() => InteractionManager.runAfterInteractions(() => {this.props.navigation.navigate('SelectTarget',{selected:this.state.sheetList,callback:this.addTarget});})}>
                            <Image source={circleAdd} style={{width:(50/zoomH),height:(50/zoomH),marginRight:(10/zoomW)}} />
                            <Text style={{fontSize:17,color:'#999'}}>选择关联任务</Text>
                        </TouchableOpacity>
                        <SwipeListView useFlatList={true} showsVerticalScrollIndicator={false} onRowOpen={(rowData,rowMap) => {this.setState({delPic:true});if(rowData != 0){rowMap[0].closeRow();}}} keyExtractor={this.keyExtractor} data={this.state.sheetList} renderItem={(rowData,rowMap) => this.renderItem(rowData,rowMap)} />
                    </View>
                </ScrollView>
                {this.props.navigation.state.params.from == 'update' &&
                <View style={{width:width,backgroundColor:'#fff',display:'flex',justifyContent:'center',alignItems:'center'}}>
                    <TouchableOpacity activeOpacity={0.8} style={styles.disbandTeam}>
                        <Text style={{fontSize:14,color:'#fff'}}>解散任务组</Text>
                    </TouchableOpacity>
                </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'
    },
    teamName:{
        width:width,
        height:(44/zoomH),
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderStyle:'solid',
        borderColor:'#eee',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        backgroundColor:'#fff'
    },
    nameText:{
        flex:1,
        padding:0,
        color:'#333',
        fontSize:18
    },
    isTop:{
        width:width,
        height:(58/zoomH),
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        backgroundColor:'#fff',
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    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'
    },
    addBtn:{
        width:'100%',
        height:(80/zoomH),
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderColor:'#eee',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:(15/zoomW)
    },
    listItem:{
        width:width,
        height:(80/zoomH),
        display:'flex',
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        borderStyle:'solid',
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderBottomColor:'#eee',
        paddingTop:(10/zoomH),
        paddingBottom:(10/zoomH),
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        backgroundColor:'#fff'
    },
    taskDetail:{
        flex:1,
        paddingLeft:(10/zoomW)
    },
    cornerMark:{
        width:(18/zoomH),
        height:(18/zoomH),
        borderRadius:(9/zoomH),
        backgroundColor:'#f43530',
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        position:'absolute',
        top:0,
        right:0
    },
    delBtn:{
        width:(60/zoomW),
        height:'100%',
        display:'flex',
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#ea281a',
        position:'absolute',
        right:0
    },
    disbandTeam:{
        width:(348/zoomW),
        height:(40/zoomH),
        backgroundColor:'#ff5649',
        borderRadius:4,
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        marginTop:(12/zoomH),
        marginBottom:(12/zoomH)
    }
});