discord-decomp/components_native/common/Alerts.tsx

// Metro module 15742 (f15743).
import { PureComponent, memo, useRef, useEffect, useCallback } from "react";
import { Animated, Easing, StyleSheet, TouchableWithoutFeedback } from "react-native";
import AccessibilityStore from "../../modules/a11y/AccessibilityStore";
import PermissionSpeakStore from "../../stores/PermissionSpeakStore";
import PermissionVADStore from "../../stores/PermissionVADStore";
import SurveyStore from "../../stores/SurveyStore";
import AlertStore from "../../stores/native/AlertStore";
import ModalRegistry from "../../lib/ModalRegistry";
import * as _Suppressed from "../warnings/Suppressed";
import * as _VADPermission from "../warnings/VADPermission";
import * as _MobileSurvey from "../MobileSurvey";
import { createLegacyClassComponentStyles } from "../../design/components/Styles/native/createStyles";
import Module712 from "../../_bundle/Module712";
import { ThemeContext } from "../../_bundle/Module3901";
import AlertActionCreators from "../../actions/native/AlertActionCreators";
import { Dialog } from "../../design/components/Dialog/native/Dialog.native";
import KeyboardAwareView from "../../modules/keyboard/native/KeyboardAwareView";
import { useStateFromStoresObject, useStateFromStores } from "../../_bundle/Module589";
import shallowEqual from "../../_bundle/shallowEqual";
import useBackPressHandler from "../../modules/routing/native/useBackPressHandler";
import { TransitionGroup } from "../../_bundle/Module10391";
import { TransitionGroupOverlayView } from "../../design/void/native";
let styles, c11249_18;
let c11249_15 = new ModalRegistry([{
  stores: [PermissionSpeakStore],
  center: true,
  isOpen: () => PermissionSpeakStore.shouldShowWarning(),
  getComponent: () => _Suppressed.default
}, {
  stores: [PermissionVADStore],
  center: true,
  isOpen: () => PermissionVADStore.shouldShowWarning(),
  getComponent: () => _VADPermission.default
}, {
  stores: [SurveyStore],
  center: true,
  isOpen: () => SurveyStore.getCurrentSurvey() != null,
  getComponent: () => _MobileSurvey.default
}]);
styles = createLegacyClassComponentStyles({
  alertWrapper: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: Module712.colors.BACKGROUND_SCRIM,
    justifyContent: "center",
    alignItems: "center"
  },
  alertContentWrapper: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "100%"
  }
});
class AlertWrapper extends PureComponent {
  static contextType = ThemeContext;
  state = {
    opacity: new Animated.Value(0),
    scale: new Animated.Value(this.props.useReducedMotion ? 1 : 0)
  };
  componentDidAppear = () => {
    this.state.opacity.setValue(1);
    this.state.scale.setValue(1);
  };
  componentWillEnter = (a0) => {
    const r12 = [Animated.timing(this.state.opacity, {
      toValue: 1,
      easing: Easing.linear,
      duration: 250,
      useNativeDriver: true
    })];
    if (!this.props.useReducedMotion) {
      r12.push(Animated.spring(this.state.scale, {
        toValue: 1,
        useNativeDriver: true
      }));
    }
    Animated.parallel(r12).start(a0);
  };
  componentWillLeave = (a0) => {
    const r14 = [Animated.timing(this.state.opacity, {
      toValue: 0,
      easing: Easing.linear,
      duration: 100,
      useNativeDriver: true
    })];
    if (!this.props.useReducedMotion) {
      r14.push(Animated.timing(this.state.scale, {
        toValue: 0,
        easing: Easing.in(Easing.ease),
        duration: 100,
        useNativeDriver: true
      }));
    }
    Animated.parallel(r14).start(a0);
  };
  handleRequestClose = () => {
    if (this.props.isDismissable) {
      AlertActionCreators.close();
    }
  };
  render() {
    const r15 = styles(this.context);
    let renderKey = this.props.renderKey;
    if (renderKey == null) {
      renderKey = "alerts-component";
    }
    const r11 = this.props.renderAlert({
      onClose: AlertActionCreators.close
    });
    const state = this.state;
    return <Dialog dialogKey={renderKey} onDismiss={this.handleRequestClose}>
      <KeyboardAwareView style={[StyleSheet.absoluteFill, r15.alertContentWrapper]}>
        <TouchableWithoutFeedback accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessibilityRole="none" accessible={false} onPress={this.handleRequestClose}>
          <Animated.View style={[r15.alertWrapper, this.props.style, {
            opacity: state.opacity
          }]} />
        </TouchableWithoutFeedback>
        <Animated.View style={{
          transform: [{
            scale: state.scale
          }]
        }}>{r11}</Animated.View>
      </KeyboardAwareView>
    </Dialog>;
  }
}
c11249_18 = Object.freeze({
  renderAlert: void 0,
  renderKey: void 0,
  props: void 0
});
const r86 = memo(function Alerts() {
  let stateFromStores, renderAlert;
  const ref = useRef(c11249_18);
  const stateFromStoresObject = useStateFromStoresObject([AlertStore, ...c11249_15.getStores()], () => {
    const alert = AlertStore.getAlert();
    if (alert != null) {
      return {
        renderAlert: alert,
        renderKey: AlertStore.getAlertKey(),
        props: null
      };
    }
    let props;
    const OpenModal = c11249_15.getOpenModal();
    if (OpenModal != null) {
      props = OpenModal.props;
      const renderKey = `alert-registery-${OpenModal.key}`;
      return {
        renderAlert: renderKey === ref.current.renderKey && shallowEqual(props, ref.current.props) ? ref.current.renderAlert : (a0) => <OpenModal.component {...a0} {...props} />,
        renderKey,
        props: OpenModal.props
      };
    }
    return {
      renderAlert: void 0,
      renderKey: void 0,
      props: void 0
    };
  });
  useEffect(() => {
    ref.current = stateFromStoresObject;
  });
  stateFromStores = useStateFromStores([AlertStore], () => AlertStore.isAlertDismissable());
  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  renderAlert = stateFromStoresObject.renderAlert;
  const renderKey = stateFromStoresObject.renderKey;
  useBackPressHandler(useCallback(() => {
    const r4 = renderAlert != null;
    if (r4 && stateFromStores) {
      AlertActionCreators.close();
    }
    return r4;
  }, [renderAlert, stateFromStores]));
  return <TransitionGroup component={TransitionGroupOverlayView} style={StyleSheet.absoluteFill}>
    {renderAlert != null ? <AlertWrapper key={renderKey} isDismissable={stateFromStores} renderAlert={renderAlert} renderKey={renderKey} useReducedMotion={stateFromStores2} /> : void 0}
  </TransitionGroup>;
});
export default r86;