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

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

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

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

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

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

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

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

  static isShowing() {
    return modal.isShowing();
  }

  show(children, onBack=undefined) {
    if (isIOS) {
      if (!this.isHide) {
        setTimeout(() => {
          this.show(children);
        }, 500);
        return;
      }
      this.setState({
        showDialog: true,
        children: children,
      }, () => {
        this.onModalShow();
      })
    } else {
      this.setState({
        showDialog: true,
        children: children
      })
      this.onBack = onBack;
    }
  }

  showLoading(children) {
    if (isIOS) {
      //console.log("showIOSLoading", children)
      this.setState({
        loadChildren: children,
        showIOSLoading: true
      })
    } else {
      this.setState({
        showLoading: true,
        loadChildren: children
      });
    }
  }

  dismiss() {
    this.setState({
      showDialog: false
    })
    this.onBack = undefined;
  }

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

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

  isShowing() {
    //console.log("[ModalPortal] isShowing", this.state.showDialog);
    return this.state.showDialog;
  }

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

  onModalShow() {
    //console.log('onModalShow', this.isHide);
    this.isHide = false;
  }

  onModalHide() {
    //console.log('onModalHide', this.isHide);
    this.isHide = true;
  }

  render() {
    return (
      <View>
        <Modal
          visible={this.state.showDialog}
          transparent={true}
          animationType={"fade"}
          hardwareAccelerated={true}
          statusBarTranslucent={true}
          onRequestClose={() => this.onBackPress()}
          onDismiss={() => this.onModalHide()}>
          <View style={styles.layer}>
            {this.state.children}
          </View>
        </Modal>
        <Modal
          visible={this.state.showLoading}
          transparent={true}
          animationType={"fade"}
          hardwareAccelerated={true}
          statusBarTranslucent={true}
          onRequestClose={() => this.onBackPress()}>
          <View style={styles.layer}>
            {this.state.loadChildren}
          </View>
        </Modal>
        { this.state.showIOSLoading &&
          <View style={styles.iosLoadingView}>
            {this.state.loadChildren}
          </View>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  iosLoadingView: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 500,
    alignItems: 'center',
    position: 'absolute',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.7)'
  },
  layer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.6)'
  }
})