discord-decomp/modules/media_keyboard/native/components/MediaKeyboardBottomSheet.tsx

// Metro module 15594 (f15595).
import { memo, useCallback, useState, useRef, useLayoutEffect } from "react";
import { View } from "react-native";
import { HEADER_HANDLE_HEIGHT, MediaPickerActionSheetEngagedActions } from "../MediaKeyboardConstants";
import { AnalyticEvents } from "../../../../Constants";
import * as _MetaQuestUtils_android from "../../../device/MetaQuestUtils.android";
import * as _PlatformUtils from "../../../../utils/PlatformUtils";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { intl, t } from "../../../../intl/index.native";
import useCustomKeyboardBottomSheetConfig from "../../../action_sheet/native/useCustomKeyboardBottomSheetConfig";
import { TransitionStates } from "../../../../design/components/TransitionGroup/TransitionGroup";
import MobileVisualRefreshExperiment from "../../../themes/experiments/MobileVisualRefreshExperiment";
import useColorThemeBackground from "../../../client_themes/native/useColorThemeBackground";
import Module5245, { BottomSheetBackdrop } from "../../../../_bundle/Module5245";
import REAWorkaroundView from "../../../reanimated/native/REAWorkaroundView";
import { triggerHapticFeedback } from "../../../haptics/HapticUtils.native";
import HapticFeedbackTypes from "../../../haptics/HapticFeedbackTypes";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
import { setAccessibilityFocus } from "../../../a11y/native/setAccessibilityFocus.android";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import { useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
import useMountEffect from "../../../../hooks/useMountEffect";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
import { AccessibilityViewAnimated } from "../../../../design/components/AccessibilityView/AccessibilityView.native";
import { dismissKeyboard } from "../../../../utils/native/ChatInputUtils";
let isMetaQuest, isIOS, useStyles, __initData, __initData2, __initData3, __initData4;
const MediaKeyboardBackground = function MediaKeyboardBackground(props) {
  const { pointerEvents, style } = props;
  const styles = useStyles();
  return <View pointerEvents={pointerEvents} accessible accessibilityRole="adjustable" accessibilityLabel={intl.string(t.XONG6A)} style={[style, styles.background]} />;
};
isMetaQuest = _MetaQuestUtils_android.isMetaQuest();
isIOS = _PlatformUtils.isIOS();
useStyles = createStyles({
  background: {
    backgroundColor: Module712.colors.MOBILE_KEYBOARD_PANEL_BACKGROUND,
    borderRadius: Module712.modules.mobile.MOBILE_MEDIA_KEYBOARD_TOP_BORDER_RADIUS
  }
});
__initData = {
  code: "function MediaKeyboardBottomSheetTsx1(){const{animatedIndex}=this.__closure;return animatedIndex.get()>=0;}"
};
__initData2 = {
  code: "function MediaKeyboardBottomSheetTsx2(isOpen,wasOpen){const{IS_IOS,runOnJS,handleSheetOpenChange}=this.__closure;if(IS_IOS&&isOpen!==wasOpen&&(wasOpen!=null||isOpen)){runOnJS(handleSheetOpenChange)(isOpen);}}"
};
__initData3 = {
  code: "function MediaKeyboardBottomSheetTsx3(){const{animatedIndex}=this.__closure;return Math.max(animatedIndex.get(),0)>0;}"
};
__initData4 = {
  code: "function MediaKeyboardBottomSheetTsx4(result,previous){const{runOnJS,setAccessibilityViewIsModal}=this.__closure;if(result===previous)return;runOnJS(setAccessibilityViewIsModal)(result);}"
};
const r61 = memo(function MediaKeyboardBottomSheet(props) {
  let isScreenReaderEnabled, setState, ref, ref2, ref3, callback;
  const { accessoriesComponent, animatedIndex, animatedPosition, bottomSheetRef, children, handleComponent, onClose, onAccessibilityFocusRestore, transitionState, animationConfigs, overlayComponent } = props;
  isScreenReaderEnabled = void 0;
  setState = void 0;
  ref = void 0;
  ref2 = void 0;
  ref3 = void 0;
  callback = void 0;
  const styles = useStyles();
  const customKeyboardBottomSheetConfig = useCustomKeyboardBottomSheetConfig({
    forceMaxHeight: false
  });
  const r4 = transitionState === TransitionStates.YEETED;
  let c22226_4 = r4;
  const r12 = MobileVisualRefreshExperiment("MediaKeyboardBottomSheet");
  const colorThemeBackground = useColorThemeBackground();
  const callback4 = useCallback((a0) => <MediaKeyboardBackground {...a0} />, []);
  const callback3 = useCallback((a0) => <BottomSheetBackdrop {...a0} ViewComponent={REAWorkaroundView} pressBehavior="collapse" />, []);
  const callback2 = useCallback((a0, a1) => {
    L8: {
      if (c22226_4 && a1 !== -1) {
        if (onClose == null) {
          break L8;
        }
        onClose();
      } else if (a0 !== a1 && a0 === 0) {
        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
        AnalyticsUtils.track(AnalyticEvents.MEDIA_PICKER_ACTION_SHEET_ENGAGED, {
          action: MediaPickerActionSheetEngagedActions.FULLY_EXPANDED
        });
      }
    }
  }, [r4, onClose]);
  isScreenReaderEnabled = useIsScreenReaderEnabled();
  const r27 = isScreenReaderEnabled ? isScreenReaderEnabled : r4;
  let accessibilityViewIsModal;
  [accessibilityViewIsModal, setState] = useState(false);
  ref = useRef(null);
  ref2 = useRef(false);
  ref3 = useRef(null);
  callback = useCallback((a0) => {
    if (ref3.current != null) {
      clearTimeout(ref3.current);
      ref3.current = null;
    }
    if (a0) {
      let r13 = isScreenReaderEnabled;
      if (isScreenReaderEnabled) {
        r13 = !ref2.current;
      }
      if (r13) {
        ref3.current = setTimeout(() => {
          ref3.current = null;
          ref2.current = true;
          setAccessibilityFocus({
            ref
          });
        }, 100);
      }
    } else {
      ref2.current = false;
    }
  }, [isScreenReaderEnabled]);
  const T = () => animatedIndex.get() >= 0;
  T.__closure = {
    animatedIndex
  };
  T.__workletHash = 14174017487042;
  T.__initData = __initData;
  const D = function D(a0, a1) {
    let r1 = isIOS;
    if (isIOS) {
      r1 = a0 !== a1;
    }
    if (r1) {
      r1 = a1 != null || a0;
    }
    if (r1) {
      _ReanimatedRexport.runOnJS(callback)(a0);
    }
  };
  D.__closure = {
    IS_IOS: isIOS,
    runOnJS: _ReanimatedRexport.runOnJS,
    handleSheetOpenChange: callback
  };
  D.__workletHash = 12464478404147;
  D.__initData = __initData2;
  useAnimatedReaction(T, D);
  const H = () => Math.max(animatedIndex.get(), 0) > 0;
  H.__closure = {
    animatedIndex
  };
  H.__workletHash = 12101028946794;
  H.__initData = __initData3;
  const w = function w(a0, a1) {
    if (a0 !== a1) {
      _ReanimatedRexport.runOnJS(setState)(a0);
    }
  };
  w.__closure = {
    runOnJS: _ReanimatedRexport.runOnJS,
    setAccessibilityViewIsModal: setState
  };
  w.__workletHash = 4587285719468;
  w.__initData = __initData4;
  useAnimatedReaction(H, w);
  useMountEffect(() => () => {
    if (ref3.current != null) {
      clearTimeout(ref3.current);
    }
    if (onClose != null) {
      onClose();
    }
  });
  useLayoutEffect(() => {
    if (c22226_4) {
      if (bottomSheetRef.current != null) {
        bottomSheetRef.current.forceClose();
        let c28093_0 = setTimeout(() => onClose == null ? void 0 : onClose(), 500);
        return () => clearTimeout(c28093_0);
      }
      if (onClose != null) {
        onClose();
      }
    }
  }, [bottomSheetRef, r4, onClose]);
  const safeAreaInsets_native = useSafeAreaInsets_native();
  return <ThemeContextProvider gradient={r12 ? colorThemeBackground : null}>
    <Module5245 style={{
      marginLeft: safeAreaInsets_native.left,
      marginRight: safeAreaInsets_native.right
    }} BodyComponent={REAWorkaroundView} ref={bottomSheetRef} animationConfigs={animationConfigs} animatedIndex={animatedIndex} animatedPosition={animatedPosition} enableContentPanningGesture={r27 ? !r27 : !isMetaQuest} enableHandlePanningGesture={!r27} handleComponent={handleComponent} backgroundComponent={callback4} backgroundStyle={styles.background} backdropComponent={callback3} onAnimate={callback2} handleHeight={HEADER_HANDLE_HEIGHT} onClose={onClose} {...customKeyboardBottomSheetConfig}>
      <AccessibilityViewAnimated ref={ref} nativeID="media-keyboard-sheet" onAccessibilityEscape={function onAccessibilityEscape() {
        if (onAccessibilityFocusRestore != null) {
          onAccessibilityFocusRestore();
        }
        dismissKeyboard();
      }} accessibilityViewIsModal={accessibilityViewIsModal}>{children}</AccessibilityViewAnimated>
    </Module5245>
    {accessoriesComponent(customKeyboardBottomSheetConfig)}
    {overlayComponent}
  </ThemeContextProvider>;
});
export default r61;