ReplyPopWin.js 3.58 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 {Button, Dimensions, Modal, StyleSheet, TextInput, TouchableOpacity, View} from 'react-native';

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

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

  componentDidMount() {
    let input = this.refs.textInput;
    if (!Utils.isEmpty(input)) {
      input.focus();
    }
  }

  render() {
    let placeholderText ="回复" + this.state.momentUsername;
    return (
      <View style={styles.container}>
        <Modal transparent={true}
               visible={this.state.show}
               onRequestClose={() => this.closeModal()}>
          <TouchableOpacity onPress={() => this.closeModal()} style={styles.modalContainer}>
            <View style={styles.modalContainer}>
              <View style={{
                flexDirection: 'row',
                alignItems: 'center',
                backgroundColor: '#EEEEEE',
                paddingLeft: 10,
                paddingRight: 10
              }}>
                <TextInput
                  style={{flex: 1}}
                  ref="textInput"
                  placeholder={placeholderText}
                  autoFocus={true}
                  onChangeText={(text) => this.setState({inputContent: text})}
                />
                {
                  !Utils.isEmpty(this.state.inputContent) ? (
                    <Button color={'#49BC1C'} title={"回复"}
                            onPress={() => this.handleBtnClick()}/>
                  ) : (null)
                }
              </View>
            </View>
          </TouchableOpacity>
        </Modal>
      </View>
    );
  }

  handleBtnClick() {
    this.sendPost();
  }

  sendPost() {
    let momentId = this.state.momentId;
    let replyContent = this.state.inputContent;
      let replyUsername = this.state.username;
      // console.warn(replyContent);
    if (Utils.isEmpty(replyContent)) {
      xnToast('回复内容不能为空');
      return;
    }
      let params = {
          objectId: momentId,
          objectType:"MOMENT",
          commentContent: replyContent,
      };

      AppService.createComment(params).then((data) => {
          if (data.message) {
              xnToast(data.message);
              return;
          }
          if (data.errors.length > 0) {
              xnToast(data.errors[0].message);
          } else {
              this.closeModal();
              // 刷新回复列表
              this.refreshReply(momentId, "评论成功");
          }
      }).catch((error) => {
          this.closeModal();
          xnToast(error)
      })
  }

  refreshReply(momentId, data) {
    let callback = this.state.successCallback;
    if (!Utils.isEmpty(callback)) {
      callback(momentId, data);
    }
  }

  closeModal() {
    this.setState({show: false})
  }

  showModal(momentId, momentUsername, successCallback) {
    this.setState({
      momentId: momentId,
      momentUsername: momentUsername,
      show: true, successCallback: successCallback,
    });
  }
}

const styles = StyleSheet.create({
  container: {
    width: width
  },
  modalContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end'
  }
});