xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/03/06
 */
import React, { Component } from 'react';
import {
    NativeModules,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    StatusBar,
    Modal,
    Animated,
    Platform,
    ActivityIndicator
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import AliyunOSS from 'react-native-aliyun-oss';

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

const back = require('../../img/back.png');
const close = require('../../img/close.png');
const cross = require('../../img/cross.png');
const plate = require('../../img/plate.png');
const arrow = require('../../img/arrow.png');

export default class Post extends Component {
    static navigationOptions = ({ navigation, screenProps })=>({
        title: '发帖',
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}}>
            <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
                <Image source={back} style={styles.backIcon} resizeMode="contain" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.close:null}>
                <Image source={close} style={styles.closeIcon} resizeMode="contain" />
            </TouchableOpacity>
        </View>),
        headerRight:(<View style={styles.rightTop}>
            <TouchableOpacity style={styles.rightIcon} onPress={navigation.state.params?navigation.state.params.doPost:null}>
                <Text style={{fontSize:16,color:'#fff'}}>提交</Text>
            </TouchableOpacity>
        </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            plateName:'',
            title:'',
            boardId:'',
            showSelect:false,
            bottom:new Animated.Value(-157),
            loading:false
        };
    };

    componentWillMount(){
        if(this.props.navigation.state.params.name){
            this.setState({
                plateName:this.props.navigation.state.params.name,
                boardId:this.props.navigation.state.params.id
            })
        }
    };

    componentDidMount(){
        let _this = this;
        //设置头部
        this.props.navigation.setParams({
            back:()=>{
                this.props.navigation.goBack();
            },
            close:()=>{
                NativeModules.system.navTo("BACK");
            },
            /*发帖*/
            doPost:()=>{
                if(_this.state.title.length == 0){
                    xnToast('请填写标题');
                }else if(_this.state.title.length < 4){
                    xnToast('标题至少4个字');
                    return;
                }
                if(_this.state.boardId.length == 0){
                    xnToast('请选择板块');
                    return;
                }
                let post = {
                    forumId:'2',
                    boardId:this.state.boardId,
                    title:this.state.title,
                    contentText:this.state.contentText,
                    threadUserId:global.userId,
                    threadUserName:global.userName
                };
                this.setState({
                    loading:true
                });
                AppService.createPlate(post).then(data=>{
                    this.setState({
                        loading:false
                    });
                    if(data.message){
                        xnToast(data.message);
                        return;
                    }
                    if(data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    }else{
                        xnToast('发帖成功');
                        this.props.navigation.navigate('Home')
                    }
                })
            }
        });
    };
    /*跳转到选择板块*/
    toSelectPlate(){
        this.props.navigation.navigate('PlateName',{selectPlate:this.selectPlate})
    };
    selectPlate = (id,name) => {
        this.setState({
            plateName:name,
            boardId:id
        })
    };
    /*打开和关闭选择图片*/
    selectPic(){
        this.setState({
            showSelect:true
        });
        Animated.timing(
            this.state.bottom,
            {toValue:0}
        ).start();
    };
    closeSelect(){
        this.setState({
            showSelect:false,
            bottom:new Animated.Value(-157)
        });
    }
    /*打开相册*/
    toAlbum(){
        ImagePicker.launchImageLibrary({},(response) => {
            this.closeSelect();
            if(response.didCancel){}
            else{
                this.setState({
                    loading:true
                });
                AppService.getAccess({name:response.fileName}).then((data) => {
                    if(data.message){
                        xnToast(data.message);
                        return;
                    }
                    if(data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    }else{
                        const config = {
                            AccessKey:data.accessKeyId,// your accessKeyId
                            SecretKey:data.accessKeySecret// your accessKeySecret
                        };
                        const endPoint = data.info.endpoint; // your endPoint
                        AliyunOSS.initWithKey(config,endPoint);
                        const uploadConfig = {
                            bucketName:data.info.bucket,  //your bucketName
                            sourceFile:'file://'+response.path, // local file path
                            ossFile:data.info.fileUrl // the file path uploaded to oss
                        };
                        console.log(uploadConfig);
                        AliyunOSS.uploadObjectAsync(uploadConfig).then((res) => {
                            console.log(res);
                        });
                    }
                })
            }
        });
    }

    render() {
        return (
            <View style={styles.background}>
                <StatusBar barStyle='light-content' />
                <View style={styles.postTitle}>
                    <TextInput underlineColorAndroid="transparent" autoFocus={true} style={styles.titleText} placeholder='标题（必填），4-40字' maxLength={40} onChangeText={(value) => {this.setState({title:value})}} />
                </View>
                <View style={styles.content}>
                    <TextInput underlineColorAndroid="transparent" multiline={true} style={styles.contentText} placeholder='正文，来吧，尽情发挥吧...'  onChangeText={(value) => {this.setState({contentText:value})}} />
                    <View style={styles.addImg}>
                        <TouchableOpacity activeOpacity={0.6} style={styles.contentImg} onPress={() => this.selectPic()}>
                            <Image style={{width:(20/zoomW),height:(20/zoomW)}} source={cross} resizeMode="contain" />
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity activeOpacity={0.6} style={styles.selectItem} onPress={() => this.toSelectPlate()}>
                        <Image source={plate} style={styles.plateTip} resizeMode="contain" />
                        <View style={{flex:1,display:'flex',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                            <Text style={{fontSize:16,color:'#333'}}>发表到板块</Text>
                            <View style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
                                <Text style={{fontSize:16,color:'#333'}}>{this.state.plateName}</Text>
                                <Image source={arrow} style={styles.rightArrow} resizeMode="contain" />
                            </View>
                        </View>
                    </TouchableOpacity>
                </View>
                <Modal animationType={'none'} transparent={true} visible={this.state.showSelect} onRequestClose={() => {}}>
                    <TouchableOpacity activeOpacity={1} style={styles.modalBg} onPress={() => this.closeSelect()}>
                        <Animated.View style={[styles.selectContent,{bottom:this.state.bottom}]}>
                            <View style={{marginBottom:7}}>
                                <TouchableOpacity activeOpacity={.9}>
                                    <View style={styles.selectModal}>
                                        <Text style={{color:'#333',fontSize:18}}>拍摄</Text>
                                        <Text style={{color:'#999',fontSize:10}}>照片或视频</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity activeOpacity={.9} onPress={() => this.toAlbum()}>
                                    <View style={styles.selectModal}>
                                        <Text style={{color:'#333',fontSize:18}}>从手机相册选择</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <TouchableOpacity activeOpacity={.9} onPress={() => this.closeSelect()}>
                                <View style={styles.selectModal}>
                                    <Text style={{color:'#333',fontSize:18}}>取消</Text>
                                </View>
                            </TouchableOpacity>
                        </Animated.View>
                    </TouchableOpacity>
                </Modal>
                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    leftIcon:{
        width:(50/zoomW),
        height:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    backIcon:{
        width:(16/zoomW),
        height:(16/zoomH),
        marginLeft:(10/zoomW)
    },
    closeIcon:{
        width:(16/zoomW),
        height:(16/zoomH)
    },
    rightTop:{
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
    },
    rightIcon:{
        height:'100%',
        width:(34/zoomW),
        display:'flex',
        justifyContent:'center',
        marginRight:(16/zoomW)
    },
    background:{
        width:'100%',
        height:'100%',
        backgroundColor:'#f3f3f3'
    },
    postTitle:{
        width:'100%',
        height:(44/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid',
        paddingLeft:(17/zoomW),
        paddingRight:(17/zoomW),
        backgroundColor:'#fff'
    },
    titleText:{
        height:'100%',
        color:'#333',
        fontSize:18,
        padding:0
    },
    content:{
        width:'100%',
        backgroundColor:'#fff',
        paddingLeft:(17/zoomW),
        paddingRight:(17/zoomW),
    },
    selectItem:{
        width:'100%',
        height:(44/zoomH),
        borderTopWidth:1,
        borderTopColor:'#eee',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    contentText:{
        width:'100%',
        height:(180/zoomH),
        fontSize:16,
        color:'#333',
        textAlignVertical:'top',
        padding:0,
        paddingTop:(10/zoomH),
        paddingBottom:(10/zoomH)
    },
    addImg:{
        marginBottom:(10/zoomH)
    },
    contentImg:{
        width:(80/zoomW),
        height:(80/zoomW),
        borderWidth:1,
        borderColor:'#ddd',
        borderStyle:'solid',
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    plateTip:{
        width:(20/zoomW),
        height:(20/zoomW),
        marginRight:(10/zoomW)
    },
    rightArrow:{
        width:(10/zoomW),
        height:(10/zoomW),
        marginLeft:(10/zoomW)
    },
    modalBg:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,.5)'
    },
    selectContent:{
        width:'100%',
        position:'absolute'
    },
    selectModal:{
        width:'100%',
        height:50,
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#fff',
        borderBottomWidth:1,
        borderBottomColor:'#ddd'
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    }
});