Upload index

src/Dialog/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;
\ No newline at end of file