ChargEco/Strides-APP/app/components/ModalPortal.js

/**
 * ModalPortal
 * @邠心vbe on 2022/02/28
 */
import React, { Component } from 'react';
import Modal from 'react-native-modal';

let modal
export default class ModalPortal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDialog: false,
      showLoading: false,
      children: <></>,
      loadChildren: <></>
    };
    modal = this;
    this.afterHide = undefined;
  }

  static show(children) {
    return modal.show(children);
  }

  static showLoading(children) {
    return modal.showLoading(children);
  }

  static dismiss() {
    modal.dismiss();
  }

  static dismissLoading() {
    modal.dismissLoading();
  }

  static dismissAll() {
    modal.dismissAll();
  }

  show(children) {
    if (isIOS) {
      this.setState({
        showDialog: true,
        children: children,
      })
    } else {
      this.setState({
        showDialog: true,
        children: children
      })
    }
  }

  showLoading(children) {
    if (isIOS) {
      this.setState({
        showDialog: true,
        //showLoading: true,
        children: children,
        //loadChildren: children
      });
    } else {
      this.setState({
        showLoading: true,
        loadChildren: children
      });
    }
  }

  dismiss() {
    this.setState({
      showDialog: false
    })
  }

  dismissLoading() {
    if (isIOS) {
      this.setState({
        showDialog: false
      })
    } else {
      this.setState({
        showLoading: false
      })
    }
  }

  dismissAll() {
    this.setState({
      showDialog: false,
      showLoading: false
    })
  }

  onBackPress() {
    if (this.state.showLoading) {
      this.dismissLoading();
    } else if (this.state.showDialog) {
      this.dismiss();
    }
  }

  onModalHide() {
    console.log('onModalHide', this.afterHide);
    if (this.afterHide) {
      console.log('onModalHide');
      this.afterHide();
      this.afterHide = undefined;
    }
  }

  render() {
    return (
      <>
        <Modal
          style={{zIndex: 900}}
          isVisible={this.state.showDialog}
          avoidKeyboard={true}
          animationIn={"fadeIn"}
          animationOut={"fadeOut"}
          useNativeDriver={true}
          onBackButtonPress={() => this.onBackPress()}
          //onModalHide={() => this.onModalHide()}
        >
          {this.state.children}
        </Modal>
        <Modal
          style={{zIndex: 900}}
          isVisible={this.state.showLoading}
          animationIn="fadeIn"
          animationOut="fadeOut"
          useNativeDriver={true}
          animationInTiming={80}
          animationOutTiming={100}
          onBackButtonPress={() => this.onBackPress()}
          //onModalHide={() => this.onModalHide()}
        >
          {this.state.loadChildren}
        </Modal>
      </>
    );
  }
}