customer / shanghai-railway-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,
    Keyboard,
    ScrollView,
    Alert,
    AsyncStorage
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import EmojiSelector,{Categories} from 'react-native-emoji-selector';
import VideoPlayer from 'react-native-video-controls';

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

const back = require('../../img/back_gray.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');
const deleteIcon = require('../../img/deleteIcon.png');
const emoji = require('../../img/emoji.png');
const keyBoard = require('../../img/keyBoard.png');
const video = require('../../img/video.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 activeOpacity={1} style={styles.leftIcon} onPress={()=>{}}>
                <Image 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:'#1c1c20'}}>提交</Text>
            </TouchableOpacity>
        </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            plateName:'',
            title:'',
            boardId:'',
            showSelect:false,
            bottom:new Animated.Value(-157),
            loading:false,
            imgList:[],
            videoList:[],
            showEmoji:false,
            contentText:'',
            modalVisible:false,
            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']
        };
    };

    componentWillMount(){
        let _this = this;
        this.keyboardShow = Keyboard.addListener('keyboardDidShow', this.updateKeyboardSpace.bind(this));
        if(this.props.navigation.state.params.name){
            this.setState({
                plateName:this.props.navigation.state.params.name ,
                boardId:this.props.navigation.state.params.id
            })
        }else{
            this.setState({
                plateName:global.threadName || '',
                boardId:global.threadId || ''
            })
        };
        AppService.getPostId({count:1}).then((data) => {
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else{
                this.setState({
                    threadId:data.ids[0]
                })
            }
        });
        AsyncStorage.getItem('cache',function(errs,result) {
            if(!errs){
                let cache = JSON.parse(result);
                if(cache){
                    _this.setState({
                        title:cache.title,
                        contentText:cache.contentText,
                        imgList:cache.imgList,
                        plateName:cache.plateName
                    })
                }
            }
        });
    };

    updateKeyboardSpace(e){
        this.setState({
            keyBoardHeight:e.endCoordinates.height
        });
    };

    componentDidMount(){
        let _this = this;
        //设置头部
        this.props.navigation.setParams({
            back:()=>{
                if(this.state.title.length != 0 || this.state.contentText.length != 0 || this.state.imgList.length != 0 || this.state.plateName.length != 0 ){
                    Alert.alert(
                        '提示',
                        '将此次编辑保留？',
                        [
                            {text: '不保留', onPress:() => {
                                _this.props.navigation.goBack();
                                AsyncStorage.removeItem('cache');
                            }},
                            {text: '保留', onPress:() => {
                                _this.props.navigation.goBack();
                                AsyncStorage.setItem('cache',JSON.stringify({
                                    title:_this.state.title || '',
                                    contentText:_this.state.contentText || '',
                                    imgList:_this.state.imgList || '',
                                    plateName:_this.state.plateName || ''
                                }));
                            }}
                        ],
                        {cancelable:false}
                    );
                }else{
                    _this.props.navigation.goBack()
                }
            },
            // close:()=>{
            //     NativeModules.system.navTo("BACK");
            // },
            /*发帖*/
            doPost:()=>{
                this.setState({
                    showEmoji:false,
                    canEmoji:false
                });
                if(!_this.state.title ||_this.state.title.length == 0){
                    xnToast('请填写标题');
                    return;
                }
                if(_this.state.title.length < 4){
                    xnToast('标题至少4个字');
                    return;
                }
                if(_this.state.boardId.length == 0){
                    xnToast('请选择板块');
                    return;
                }
                let post = {
                    id:this.state.threadId,
                    forumId:global.forumId,
                    boardId:this.state.boardId,
                    title:this.state.title,
                    contentText:this.state.contentText,
                    threadUserId:global.user.id,
                    threadUserName:global.passport.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('Community')
                    }
                })
            }
        });
    };

    componentWillUnmount() {
        this.keyboardShow.remove();
    };
    /*跳转到选择板块*/
    toSelectPlate(){
        this.props.navigation.navigate('PlateName',{selectPlate:this.selectPlate})
    };
    selectPlate = (id,name) => {
        this.setState({
            plateName:name,
            boardId:id
        })
    };
    /*打开和关闭选择图片*/
    selectPic(){
        this.closeEmoji();
        this.setState({
            showSelect:true,
        });
        Animated.timing(
            this.state.bottom,
            {toValue:0}
        ).start();
    };
    closeSelect(){
        this.setState({
            showSelect:false,
            bottom:new Animated.Value(-157)
        });
    };
    /*打开相机*/
    openCamera(){
        NativeModules.BlueToolManage.openCameraWithpassportId(global.passport.id).then((data) => {
            this.closeSelect();
            let res = JSON.parse(data);
            let url = res.url;
            let fileType = '';
            if(res.type == 'IMAGE'){
                fileType = 'IMAGE';
            }else if(res.type == 'VIDEO'){
                fileType = 'VEDIO';
            }
            if(fileType == 'VEDIO' && this.state.videoList.length != 0){
                xnToast('只能发送一个视屏~');
                return;
            }
            let params = {
                businessId:this.state.threadId,
                businessType:'THREAD',
                type:fileType,
                name:url.substring(url.lastIndexOf('/')+1,url.lastIndexOf('.')),
                extension:url.substring(url.lastIndexOf('.')+1),
                storagePath:url,
                sourceType:'DIRECT'
            };
            this.setState({
                loading:true
            });
            AppService.postAddattact(params).then((response) => {
                this.setState({
                    loading:false
                });
                if(response.message){
                    xnToast(response.message);
                    return;
                }
                if(response.errors.length > 0) {
                    xnToast(response.errors[0].message);
                }else{
                    this.setState({
                        loading:false
                    });
                    let imgList = this.state.imgList;
                    let videoList = this.state.videoList;
                    if(fileType == 'VEDIO'){
                        videoList.push(url);
                    }
                    imgList.push({url:url,id:response.attachmentId,type:fileType});
                    this.setState({
                        imgList:imgList,
                        videoList:videoList
                    });
                }
            })
        })
    };
    /*打开相册*/
    toAlbum(){
        global.openImg = true;
        ImagePicker.launchImageLibrary({},(response) => {
            this.closeSelect();
            if(response.didCancel){}
            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.BlueToolManage.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 = {
                                businessId:this.state.threadId,
                                businessType:'THREAD',
                                type:fileType,
                                name:res.substring(res.lastIndexOf('/')+1,res.lastIndexOf('.')),
                                extension:extension,
                                storagePath:res,
                                sourceType:'DIRECT'
                            };
                            AppService.postAddattact(params).then((data) => {
                                this.setState({
                                    loading:false
                                });
                                if(data.message){
                                    xnToast(data.message);
                                    return;
                                }
                                if(data.errors.length > 0) {
                                    xnToast(data.errors[0].message);
                                }else{
                                    let imgList = this.state.imgList;
                                    imgList.push({url:res,id:data.attachmentId,type:fileType});
                                    this.setState({
                                        imgList:imgList
                                    });
                                }
                            })
                        })
                    }
                })
            }
        });
    };
    /*渲染图片*/
    renderImg(item,index){
        return(
            item.type == 'IMAGE' ? <TouchableOpacity key={index} onPress={() => this.preview(item.url,item.type)}>
                <Image style={styles.imgItem} source={{uri:item.url+'?x-oss-process=image/resize,w_1000'}} resizeMode="cover" />
                <TouchableOpacity style={styles.deleteIcon} onPress={() => this.deleteImg(item.id,index,item.type)}>
                    <Image source={deleteIcon} style={{width:(16/zoomW),height:(16/zoomW)}} resizeMode="cover" />
                </TouchableOpacity>
            </TouchableOpacity>:<TouchableOpacity key={index}>
                <VideoPlayer onError={false} showOnStart={false} disableFullscreen={false} disablePlayPause={false} disableSeekbar={false} disableVolume={false} disableTimer={false} disableBack={false} style={{width:(80/zoomW),height:(80/zoomW),marginRight:(5/zoomW),backgroundColor:'rgba(0,0,0,0)'}} videoStyle={{width:(80/zoomW),height:(80/zoomW)}} source={{ uri:item.url}}/>
                <TouchableOpacity style={styles.videoIcon} onPress={() => this.preview(item.url,item.type)}>
                    <Image source={video} style={{width:(16/zoomW),height:(16/zoomW)}} resizeMode="cover" />
                </TouchableOpacity>
                <TouchableOpacity style={styles.deleteIcon} onPress={() => this.deleteImg(item.id,index,item.type)}>
                    <Image source={deleteIcon} style={{width:(16/zoomW),height:(16/zoomW)}} resizeMode="cover" />
                </TouchableOpacity>
            </TouchableOpacity>
        )
    };
    /*删除图片*/
    deleteImg(id,index,type){
        AppService.deleteAddattact({attachmentId:id}).then((data) => {
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else{
                if(type == 'VEDIO'){
                    this.setState({
                        videoList:[]
                    })
                }
                let imgList = this.state.imgList;
                imgList.splice(index,1);
                this.setState({
                    imgList:imgList
                })
            }
        })
    };
    /*显示表情包*/
    showEmoji(){
        this.refs.text.focus();
        this.setState({
            showEmoji:true
        },function(){
            Keyboard.dismiss();
        })
    };
    /*选择表情包*/
    selectEmoji(emoji){
        let content = this.state.contentText + emoji;
        this.setState({
            contentText:content
        })
    };
    /*关闭表情包*/
    closeEmoji(){
        this.setState({
            showEmoji:false
        },function(){
            this.refs.text.focus()
        })
    };
    /*图片预览*/
    preview(url,type){
        this.setState({
            modalVisible:true,
            url:url,
            preType:type
        })
    };
    closeModal(){
        this.setState({
            modalVisible:false
        })
    };

    render(){
        return (
            <ScrollView style={styles.background} keyboardShouldPersistTaps="handled">
                <StatusBar barStyle='default' />
                <View style={styles.postTitle}>
                    <TextInput underlineColorAndroid="transparent" autoFocus={true} style={styles.titleText} placeholder='标题（必填），4-40字' maxLength={40} onFocus={() => {this.setState({canEmoji:false})}}  defaultValue={this.state.title} onChangeText={(value) => {this.setState({title:value})}} />
                </View>
                <View style={styles.content}>
                    <TextInput ref="text" underlineColorAndroid="transparent" multiline={true} style={styles.contentText} placeholder='正文，来吧，尽情发挥吧...' maxLength={1000} onFocus={() => {this.setState({canEmoji:true})}} defaultValue={this.state.contentText} onChangeText={(value) => {this.setState({contentText:value})}} />
                    <View style={{display:'flex',flexDirection:'row'}}>
                        {!this.state.showEmoji && this.state.canEmoji && <TouchableOpacity style={{width:(22/zoomW),marginRight:(24/zoomW),marginBottom:(14/zoomW)}} onPress={() => this.showEmoji()}>
                            <Image source={emoji} style={styles.iconTip} resizeMode="cover" />
                        </TouchableOpacity>}
                        {this.state.showEmoji && this.state.canEmoji && <TouchableOpacity style={{width:(22/zoomW),marginRight:(24/zoomW),marginBottom:(14/zoomW)}} onPress={() => this.closeEmoji()}>
                            <Image source={keyBoard} style={styles.iconTip} resizeMode="cover" />
                        </TouchableOpacity>}
                        {this.state.canEmoji && <TouchableOpacity style={{marginLeft:(8/zoomW)}} onPress={() => {Keyboard.dismiss();this.setState({canEmoji:false})}}>
                            <Text style={{color:'#999',fontSize:14}}>收起键盘</Text>
                        </TouchableOpacity>}
                    </View>
                    <View style={styles.addImg}>
                        {this.state.imgList && this.state.imgList.map((item,index) => this.renderImg(item,index))}
                        {this.state.imgList.length < 10 &&<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} onPress={() => this.openCamera()}>
                                    <View style={styles.selectModal}>
                                        <Text style={{color:'#333',fontSize:18,marginBottom:(5/zoomH)}}>拍摄</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.showEmoji && this.state.canEmoji && <View style={{width:'100%',height:this.state.keyBoardHeight,backgroundColor:'#fff'}}>
                    <EmojiSelector
                        onEmojiSelected={(emoji) => this.selectEmoji(emoji)}
                        showSearchBar={false}
                        showTabs={true}
                        showSectionTitles={false}
                        category={Categories.all}
                        columns={8}
                    />
                </View>}
                {/*图片或视频查看*/}
                <Modal animationType={'fade'} transparent visible={this.state.modalVisible} onRequestClose={() => {}}
                >
                    {this.state.preType == 'VEDIO' && <TouchableOpacity activeOpacity={1}>
                        <View style={styles.ImgmodalBg}>
                            <VideoPlayer onBack={() => {this.setState({modalVisible:false})}} showOnStart={true} disableFullscreen={false} source={{uri:this.state.url}}/>
                        </View>
                    </TouchableOpacity>}
                    {this.state.preType == 'IMAGE' && <TouchableOpacity activeOpacity={1} onPress={() => this.closeModal()}>
                        <View style={styles.ImgmodalBg}>
                            <Image style={{width:'100%',height:'100%'}} resizeMode="contain" source={{uri:this.state.url+'?x-oss-process=image/resize,w_1000'}}/>
                        </View>
                    </TouchableOpacity>}
                </Modal>
                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}
            </ScrollView>
        );
    }
}

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:{
        display:'flex',
        flexDirection:'row',
        flexWrap:'wrap',
        marginBottom:(10/zoomH)
    },
    contentImg:{
        width:(80/zoomW),
        height:(80/zoomW),
        borderWidth:1,
        borderColor:'#ddd',
        borderStyle:'solid',
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    imgItem:{
        width:(80/zoomW),
        height:(80/zoomW),
        marginRight:(5/zoomW),
        marginBottom:(10/zoomH)
    },
    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'
    },
    imgBg:{
        position:'absolute',
        top:0,
        width:'100%',
        height:'100%',
        backgroundColor:'#000'
    },
    deleteIcon:{
        position:'absolute',
        right:(10/zoomW),
        top:(6/zoomH)
    },
    videoIcon:{
        width:'100%',
        height:'100%',
        position:'absolute',
        top:0,
        backgroundColor:'rgba(0,0,0,0)',
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    ImgmodalBg: {
        width: '100%',
        height: '100%',
        paddingTop:getHeaderPadding(),
        backgroundColor: '#000',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }
});