discord-decomp/modules/toast/native/ToastContainer.tsx

// Metro module 15780 (f15781).
import { useEffect, memo } from "react";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import ToastStore from "./ToastStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { TOAST_CONTAINER_SHADOW_COLOR } from "../../../design/migrations/native/LegacyTokens";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
import { useMobileQuestDockHeight } from "../../quests/native/QuestHooks.native";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
import { useIsScreenReaderEnabled } from "../../a11y/native/useIsScreenReaderEnabled.native";
import { useYouBarTotalHeight } from "../../main_tabs_v2/native/you_bar/hooks/useYouBarTotalHeight";
import * as _spring from "../../../design/animation/reanimated/spring/spring";
import * as _TransitionGroup from "../../../design/components/TransitionGroup/TransitionGroup";
import { TransitionGroup } from "../../../design/components/TransitionGroup/TransitionGroup";
import { AccessibilityAnnouncer } from "../../../_bundle/Module3902";
import Toast from "./Toast";
import { NonExpandingOverlayView } from "../../../design/void/native";
import ToastActionCreators from "./ToastActionCreators";
let useStyles, c11276_8, ANIMATION_STATE_INPUT, OPACITY_SPRING_PHYSICS, TOAST_SPRING_PHYSICS, __initData, __initData2, renderItem, getItemKey, wrapChildren;
const AnimatedToast = function AnimatedToast(props) {
  let r95;
  let content, c22437_10, position, sharedValue2, youBarTotalHeight;
  const toast = props.toast;
  const { key, ...props2 } = toast;
  let c22437_0 = props2;
  const { state, cleanUp } = props;
  content = void 0;
  c22437_10 = void 0;
  position = void 0;
  sharedValue2 = void 0;
  youBarTotalHeight = void 0;
  const styles = useStyles();
  const sharedValue = useSharedValue(0);
  const windowDimensions_native = useWindowDimensions_native();
  const { width, height } = windowDimensions_native;
  const mobileQuestDockHeight = useMobileQuestDockHeight();
  const top = useSafeAreaInsets_native().top;
  const stateFromStores = useStateFromStores([AccessibilityStore], () => {
    let r4 = AccessibilityStore.useReducedMotion || c22437_0.disableAnimations;
    if (r4 == null) {
      r4 = false;
    }
    return r4;
  });
  content = props2.content;
  const isScreenReaderEnabled = useIsScreenReaderEnabled();
  const r2 = content != null && typeof content === "string";
  c22437_10 = r2;
  const position2 = props2.position;
  position = position2 !== void 0 ? position2 : "top";
  const r58 = stateFromStores ? c11276_8.END : c11276_8.START;
  L10: {
    sharedValue2 = useSharedValue(r58);
    youBarTotalHeight = useYouBarTotalHeight(8);
    const r66 = function() {
      const r2 = position === "top";
      const r11 = r2 ? top + 8 : height - sharedValue.get() - mobileQuestDockHeight - 8 - youBarTotalHeight;
      const r43 = _ReanimatedRexport.interpolate(sharedValue2.get(), ANIMATION_STATE_INPUT, [r2 ? -30 : height - mobileQuestDockHeight - sharedValue.get() - youBarTotalHeight, r11]);
      const opacity = stateFromStores ? sharedValue2.get() : _spring.withSpring(sharedValue2.get(), OPACITY_SPRING_PHYSICS);
      let translateY = r43;
      if (!stateFromStores) {
        const t = function t(a0) {
          if (a0 ? state === _TransitionGroup.TransitionStates.YEETED : a0) {
            _ReanimatedRexport.runOnJS(cleanUp)();
          }
        };
        t.__closure = {
          state,
          TransitionStates: _TransitionGroup.TransitionStates,
          runOnJS: _ReanimatedRexport.runOnJS,
          cleanUp
        };
        t.__workletHash = 633151838569;
        t.__initData = __initData2;
        translateY = _spring.withSpring(r43, TOAST_SPRING_PHYSICS, "respect-motion-settings", t);
      }
      return {
        opacity,
        transform: [{
          translateY
        }],
        maxWidth: width - 32
      };
    };
    r66.__closure = {
      position,
      safeAreaTop: top,
      CONTAINER_DISTANCE_VERTICAL: 8,
      screenHeight: height,
      toastHeight: sharedValue,
      bottomTabsHeight: mobileQuestDockHeight,
      youBarHeight: youBarTotalHeight,
      interpolate: _ReanimatedRexport.interpolate,
      animationState: sharedValue2,
      ANIMATION_STATE_INPUT,
      CONTAINER_TOP_POSITION_START: -30,
      isReducedMotion: stateFromStores,
      withSpring: _spring.withSpring,
      OPACITY_SPRING_PHYSICS,
      TOAST_SPRING_PHYSICS,
      state,
      TransitionStates: _TransitionGroup.TransitionStates,
      runOnJS: _ReanimatedRexport.runOnJS,
      cleanUp,
      screenWidth: width,
      CONTAINER_DISTANCE_SIDES: 16
    };
    r66.__workletHash = 3455640999355;
    r66.__initData = __initData;
    const animatedStyle = useAnimatedStyle(r66);
    useEffect(() => {
      if (state === _TransitionGroup.TransitionStates.YEETED) {
        sharedValue2.set(c11276_8.START);
        if (stateFromStores) {
          cleanUp();
        }
      } else {
        sharedValue2.set(c11276_8.END);
      }
    }, [state, sharedValue2, stateFromStores, cleanUp]);
    useEffect(() => {
      if (c22437_10) {
        AccessibilityAnnouncer.announce(content);
      }
    }, [r2, content]);
    if (r2) {
      r95 = null;
      if (isScreenReaderEnabled) {
        break L10;
      }
    }
    r95 = <ReanimatedRexport.View pointerEvents="none" style={[styles.container, animatedStyle]} onLayout={(event) => {
      sharedValue.set(event.nativeEvent.layout.height);
    }}>
      <Toast key={key} {...props2} />
    </ReanimatedRexport.View>;
  }
  return r95;
};
renderItem = function renderItem(a0, a1, a2, a3) {
  return <AnimatedToast key={a0} toast={a1} state={a2} cleanUp={a3} />;
};
getItemKey = function getItemKey(a0) {
  return a0.key;
};
wrapChildren = function wrapChildren(a0) {
  return <NonExpandingOverlayView>
    {a0}
  </NonExpandingOverlayView>;
};
useStyles = createStyles({
  container: {
    position: "absolute",
    alignSelf: "center",
    flexDirection: "row",
    justifyContent: "center",
    shadowColor: TOAST_CONTAINER_SHADOW_COLOR
  }
});
c11276_8 = {
  START: 0,
  0: "START",
  END: 1,
  1: "END"
};
ANIMATION_STATE_INPUT = [c11276_8.START, c11276_8.END];
OPACITY_SPRING_PHYSICS = {
  mass: 0.1,
  damping: 10,
  stiffness: 100,
  overshootClamping: true
};
TOAST_SPRING_PHYSICS = {
  mass: 0.35,
  damping: 15,
  stiffness: 350,
  restDisplacementThreshold: 0.1,
  restSpeedThreshold: 0.1
};
__initData = {
  code: "function ToastContainerTsx1(){const{position,safeAreaTop,CONTAINER_DISTANCE_VERTICAL,screenHeight,toastHeight,bottomTabsHeight,youBarHeight,interpolate,animationState,ANIMATION_STATE_INPUT,CONTAINER_TOP_POSITION_START,isReducedMotion,withSpring,OPACITY_SPRING_PHYSICS,TOAST_SPRING_PHYSICS,state,TransitionStates,runOnJS,cleanUp,screenWidth,CONTAINER_DISTANCE_SIDES}=this.__closure;const verticalPositionEnd=position==='top'?safeAreaTop+CONTAINER_DISTANCE_VERTICAL:screenHeight-toastHeight.get()-bottomTabsHeight-CONTAINER_DISTANCE_VERTICAL-youBarHeight;const translateY=interpolate(animationState.get(),ANIMATION_STATE_INPUT,[position==='top'?CONTAINER_TOP_POSITION_START:screenHeight-bottomTabsHeight-toastHeight.get()-youBarHeight,verticalPositionEnd]);return{opacity:!isReducedMotion?withSpring(animationState.get(),OPACITY_SPRING_PHYSICS):animationState.get(),transform:[{translateY:!isReducedMotion?withSpring(translateY,TOAST_SPRING_PHYSICS,'respect-motion-settings',function(finished){if(finished&&state===TransitionStates.YEETED){runOnJS(cleanUp)();}}):translateY}],maxWidth:screenWidth-CONTAINER_DISTANCE_SIDES*2};}"
};
__initData2 = {
  code: "function ToastContainerTsx2(finished){const{state,TransitionStates,runOnJS,cleanUp}=this.__closure;if(finished&&state===TransitionStates.YEETED){runOnJS(cleanUp)();}}"
};
const r49 = memo(function() {
  const stateFromStoresArray = useStateFromStoresArray([ToastStore], () => {
    const content2 = ToastStore.getContent();
    return content2 == null ? [] : [content2];
  });
  useEffect(() => {
    if (stateFromStoresArray.length !== 0) {
      const r5 = setTimeout;
      let toastDurationMs = stateFromStoresArray[0].toastDurationMs;
      if (toastDurationMs == null) {
        toastDurationMs = 2000;
      }
      let c28154_0 = r5(() => ToastActionCreators.close(), toastDurationMs);
      return () => clearTimeout(c28154_0);
    }
  }, [stateFromStoresArray]);
  return <TransitionGroup items={stateFromStoresArray} renderItem={renderItem} getItemKey={getItemKey} wrapChildren={wrapChildren} />;
});
export default r49;