index.js

import React from 'react';
import PropTypes from 'prop-types';
import {
  Modal,
  View,
  Text,
  ScrollView,
  TouchableOpacity
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import styles from './styles';

class Dialog extends React.Component {
  static propTypes = {
    payload: PropTypes.object,
    show: PropTypes.bool,
    customDesign: PropTypes.array,
    title: PropTypes.string,
    content: PropTypes.string,
    buttonTxt: PropTypes.string,
    cancelTxt: PropTypes.string,
    confirmFun: PropTypes.func,
    cancelFun: PropTypes.func,
    showCancel: PropTypes.bool,
    contentStyle: PropTypes.object,
    titleStyle: PropTypes.object,
  };

  static defaultProps = {
    payload: {},
    show: false,
    customDesign: [],
    title: '',
    content: '',
    buttonTxt: '登出',
    cancelTxt: '取消',
    confirmFun: () => {},
    cancelFun: () => {},
    showCancel: false,
    contentStyle: {},
    titleStyle: {}
  };

  constructor(props) {
    super(props);
    const {
      show, title, content, buttonTxt, cancelTxt, showCancel, payload, customDesign
    } = this.props;
    this.state = {
      show,
      title,
      content,
      buttonTxt,
      cancelTxt,
      showCancel,
      customDesign
    };
    this.payload = payload;
    this.doConfirm = this.doConfirm.bind(this);
    this.doCancel = this.doCancel.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const {
      show, title, content, payload
    } = nextProps;
    if (show !== this.props.show) {
      this.payload = payload;
      this.setState({ show, title, content });
    }
  }

  doConfirm() {
    this.setState({ show: false }, () => this.props.confirmFun(this.payload));
  }

  doCancel() {
    this.setState({ show: false }, () => this.props.cancelFun());
  }

  render() {
    const {
      showCancel, show, title, cancelTxt, customDesign
    } = this.state;
    const { contentStyle, titleStyle } = this.props;
    if (!this.props.show && !show) {
      return null;
    }
    const buttonStyle = (showCancel) ? { borderLeftWidth: 1, borderLeftColor: '#BCBBC1' } : {};
    return (
      <Modal
        transparent
        visible={this.state.show}
        onRequestClose={() => {
          this.doCancel();
        }}
      >
        <View style={styles.modalContainer}>
          {customDesign && customDesign.length > 0 ? customDesign : (
            <Animatable.View
              animation="bounceIn"
              duration={300}
              style={styles.modalContent}
              useNativeDriver
            >
              {title !== '' ? (
                <View style={styles.modalTitle}>
                  <Text style={[styles.modalTitle_txt, titleStyle]}>{title}</Text>
                </View>
              ) : []}
              <ScrollView keyboardShouldPersistTaps="always">
                <View style={styles.modalMessage}>
                  <Text style={[styles.modalMessage_txt, contentStyle]}>
                    {this.state.content}
                  </Text>
                </View>
              </ScrollView>
              <View style={styles.modalFooter}>
                {(showCancel)
                  ? (
                    <TouchableOpacity
                      style={styles.modalFooter_btn}
                      onPress={() => this.doCancel()}
                    >
                      <Text style={styles.modalFooter_txt}>
                        {cancelTxt}
                      </Text>
                    </TouchableOpacity>
                  ) : []
                    }
                <TouchableOpacity
                  style={[styles.modalFooter_btn, buttonStyle]}
                  onPress={() => this.doConfirm()}
                >
                  <Text style={[styles.modalFooter_txt, { fontWeight: 'bold' }]}>
                    {this.state.buttonTxt}
                  </Text>
                </TouchableOpacity>
              </View>
            </Animatable.View>)}
        </View>
      </Modal>
    );
  }
}

export default Dialog;