MomentCommentView.js 3.47 KB
import React, {Component} from 'react';
import StorageUtil from '../utils/StorageUtil';
import Utils from '../utils/Utils';
import {xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";
import {
    Dimensions,
    Image,
    Modal,
    PixelRatio,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';

const {width, height} = Dimensions.get('window');

export default class MomentCommentView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            pageX: 0,
            pageY: 0,
            height: 0
        };
        StorageUtil.get('username', (error, object) => {
            if (!error && object != null) {
                this.setState({username: object.username});
            }
        });
    }

    render() {
        return (
            <View style={[styles.modalContainer, {height: this.state.height}]}>
                <Modal transparent={true}
                       visible={this.state.show}
                       onRequestClose={() => this.closeModal()}>
                    <TouchableOpacity style={[styles.modalContainer, {height: this.state.height}]}
                                      onPress={() => this.closeModal()}>
                        <View style={[styles.container, {left: this.state.pageX - 35, top: this.state.pageY - 50}]}>
                            <TouchableOpacity onPress={() => this.doDelComment()}>
                                <View style={styles.menuItemContainer}>
                                    <Text style={styles.menuItemText}> 删除 </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }


    doDelComment() {
        // console.warn("评论"+this.state.momentId);
        let callback = this.state.callback;
        if (!Utils.isEmpty(callback)) {
            callback(this.state.comment, this.state.momentIndex, this.state.commentIndex);
        }
        this.closeModal();
    }

    closeModal() {
        this.setState({show: false, height: 0});
    }

    showModal(pageX, pageY, comment, momentIndex, commentIndex, callback) {
        //alert(commentId);
        this.setState({
            pageX: pageX,
            pageY: pageY,
            height: height,
            show: true,
            comment: comment,
            momentIndex: momentIndex,
            commentIndex: commentIndex,
            callback: callback,
        });
    }
}

const styles = StyleSheet.create({
    modalContainer: {
        width: width,
    },
    container: {
        backgroundColor: '#fff',
        borderRadius: 2,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        width: 80,
        padding: 5,
        height: 35,
        position: 'absolute',
        left: 230,
        top: 500,
        borderColor:'#999',
        borderWidth:0.3
    },
    divider: {
        width: 1 / PixelRatio.get(),
        marginLeft: 20,
        marginRight: 20,
        height: 25,
        backgroundColor: '#DDDDDD'
    },
    menuItemContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    menuItemImg: {
        width: 20,
        height: 20,
        marginTop: 10,
        marginBottom: 10,
    },
    menuItemText: {
        color: '#000',
        fontSize: 15
    }
})