309 lines
14 KiB
TypeScript
309 lines
14 KiB
TypeScript
// Metro module 11253 (f11254).
|
|
import { forwardRef, useRef, useLayoutEffect, useCallback, useState } from "react";
|
|
import { View, Platform } from "react-native";
|
|
import NativeMenuStore from "../../native_menu/native/NativeMenuStore";
|
|
import * as _PlatformUtils from "../../../utils/PlatformUtils";
|
|
import { isAndroid } from "../../../utils/PlatformUtils";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { ActionSheetDragHandle, ACTION_SHEET_DRAG_HANDLE_HEIGHT } from "../../../design/components/experimental/native";
|
|
import { useIsScreenReaderEnabled } from "../../a11y/native/useIsScreenReaderEnabled.native";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useDerivedValue, useAnimatedReaction, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import { useMobileVisualRefreshConfig } from "../../themes/experiments/MobileVisualRefreshExperiment";
|
|
import useCustomKeyboardBottomSheetConfig from "../../action_sheet/native/useCustomKeyboardBottomSheetConfig";
|
|
import { TransitionStates } from "../../../design/components/TransitionGroup/TransitionGroup";
|
|
import { useBottomSheetImperativeHandle } from "../../../design/components/Sheet/native/BottomSheetHandle";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import Module5245, { ANIMATION_SOURCE, BottomSheetBackdrop, BottomSheetFooter } from "../../../_bundle/Module5245";
|
|
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
|
|
import { isChannelFocused } from "../../panels/isChannelFocused.native";
|
|
import * as _KeyboardManagerUtils from "../../../utils/native/KeyboardManagerUtils";
|
|
import useMountEffect from "../../../hooks/useMountEffect";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
|
|
import { PortalHost } from "../../../_bundle/Module4060";
|
|
import useColorThemeBackground from "../../client_themes/native/useColorThemeBackground";
|
|
import { ThemeContextProvider } from "../../../_bundle/Module3901";
|
|
import { AccessibilityViewAnimated } from "../../../design/components/AccessibilityView/AccessibilityView.native";
|
|
import PortalKeyboardFooterIOS_ios from "./PortalKeyboardFooterIOS.ios";
|
|
import { NavScrim } from "../../../design/components/Navigator/native/NavScrim.android";
|
|
let isIOS, useStyles, PortalKeyboardBackground, __initData, __initData2, __initData3, __initData4, __initData5, __initData6;
|
|
const PortalKeyboardBottomSheetHeader = function PortalKeyboardBottomSheetHeader(props) {
|
|
const { style, handleCollapse: handleCollapse2 } = props;
|
|
const styles = useStyles();
|
|
return <View style={[styles.headerContainer, useIsScreenReaderEnabled() ? styles.headerContainerScreenReaderEnabled : void 0, style]}>
|
|
<ActionSheetDragHandle onPress={handleCollapse2} />
|
|
</View>;
|
|
};
|
|
PortalKeyboardBackground = function PortalKeyboardBackground(props) {
|
|
const { pointerEvents, style, roundingStyle } = props;
|
|
return <ReanimatedRexport.View pointerEvents={pointerEvents} style={[style, useStyles().background, roundingStyle]} />;
|
|
};
|
|
Platform;
|
|
isIOS = _PlatformUtils.isIOS();
|
|
useStyles = createStyles({
|
|
container: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0
|
|
},
|
|
background: {
|
|
backgroundColor: Module712.colors.MOBILE_KEYBOARD_PANEL_BACKGROUND,
|
|
overflow: "hidden"
|
|
},
|
|
headerContainer: {
|
|
borderTopLeftRadius: Module712.radii.none,
|
|
borderTopRightRadius: Module712.radii.none,
|
|
width: "100%",
|
|
height: ACTION_SHEET_DRAG_HANDLE_HEIGHT,
|
|
marginBottom: -ACTION_SHEET_DRAG_HANDLE_HEIGHT
|
|
},
|
|
headerContainerScreenReaderEnabled: {
|
|
marginBottom: -Module712.space.PX_8
|
|
},
|
|
roundingView: {
|
|
overflow: "hidden",
|
|
display: "flex"
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function PortalKeyboardBottomSheetTsx1(){const{animatedIndex}=this.__closure;return animatedIndex.get()>0.975;}"
|
|
};
|
|
__initData2 = {
|
|
code: "function PortalKeyboardBottomSheetTsx2(){const{isFullyExpanded}=this.__closure;return isFullyExpanded.get();}"
|
|
};
|
|
__initData3 = {
|
|
code: "function PortalKeyboardBottomSheetTsx3(isFullyExpanded,isFullExpandedPrevious){const{forceMaxHeight,runOnJS,dismissGlobalKeyboard}=this.__closure;if(isFullExpandedPrevious==null){return;}if(!isFullyExpanded&&!forceMaxHeight){runOnJS(dismissGlobalKeyboard)();}}"
|
|
};
|
|
__initData4 = {
|
|
code: "function PortalKeyboardBottomSheetTsx4(){const{interpolate,animatedIndex,cornerRadiusInputStart,cornerRadiusInputEnd,cornerRadius}=this.__closure;return{borderTopLeftRadius:interpolate(animatedIndex.get(),[cornerRadiusInputStart,cornerRadiusInputEnd],[0,cornerRadius],'clamp'),borderTopRightRadius:interpolate(animatedIndex.get(),[cornerRadiusInputStart,cornerRadiusInputEnd],[0,cornerRadius],'clamp')};}"
|
|
};
|
|
__initData5 = {
|
|
code: "function PortalKeyboardBottomSheetTsx5(){const{animatedIndex}=this.__closure;return Math.max(animatedIndex.get(),0)>0;}"
|
|
};
|
|
__initData6 = {
|
|
code: "function PortalKeyboardBottomSheetTsx6(result,previous){const{runOnJS,setAccessibilityViewIsModal}=this.__closure;if(result===previous)return;runOnJS(setAccessibilityViewIsModal)(result);}"
|
|
};
|
|
const r75 = forwardRef(function PortalKeyboardBottomSheet(props, a1) {
|
|
let isScreenReaderEnabled, derivedValue, token, c18683_13, c18683_14, animatedStyle, setState;
|
|
const { animatedIndex, animatedPosition, chatInputRef, children, isAppsKeyboard = false } = props;
|
|
let c18683_2 = isAppsKeyboard;
|
|
const { animationConfigs, onClose, transitionState } = props;
|
|
let backdropComponent = props.backdropComponent;
|
|
const { headerStyle, disableHeaderRoundingAnimation, roundingViewStyle, onAnimate, rendersHandle = true } = props;
|
|
let c18683_6 = rendersHandle;
|
|
let width2 = props.width;
|
|
let forceMaxHeight = props.forceMaxHeight;
|
|
if (forceMaxHeight === void 0) {
|
|
forceMaxHeight = false;
|
|
}
|
|
let c18683_7 = forceMaxHeight;
|
|
let enablePanDownToClose = props.enablePanDownToClose;
|
|
if (enablePanDownToClose === void 0) {
|
|
enablePanDownToClose = false;
|
|
}
|
|
let renderExpressionFooter = props.renderExpressionFooter;
|
|
if (renderExpressionFooter === void 0) {
|
|
renderExpressionFooter = false;
|
|
}
|
|
isScreenReaderEnabled = void 0;
|
|
derivedValue = void 0;
|
|
token = void 0;
|
|
c18683_13 = void 0;
|
|
c18683_14 = void 0;
|
|
animatedStyle = void 0;
|
|
setState = void 0;
|
|
const styles = useStyles();
|
|
const ref = useRef(null);
|
|
const mobileVisualRefreshConfig = useMobileVisualRefreshConfig({
|
|
location: "AutocompleteWrapper"
|
|
});
|
|
const { enabled, chatInputFloating } = mobileVisualRefreshConfig;
|
|
const customKeyboardBottomSheetConfig = useCustomKeyboardBottomSheetConfig({
|
|
forceMaxHeight,
|
|
enablePanDownToClose
|
|
});
|
|
const r3 = transitionState === TransitionStates.YEETED;
|
|
let c18683_9 = r3;
|
|
useBottomSheetImperativeHandle(a1, ref);
|
|
useLayoutEffect(() => {
|
|
if (c18683_9) {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.forceClose();
|
|
}
|
|
}
|
|
}, [ref, r3]);
|
|
const stateFromStores = useStateFromStores([NativeMenuStore], () => NativeMenuStore.isOpen());
|
|
if (renderExpressionFooter) {
|
|
renderExpressionFooter = !r3;
|
|
}
|
|
isScreenReaderEnabled = useIsScreenReaderEnabled();
|
|
const callback3 = useCallback((a0, a1, a2) => {
|
|
L21: {
|
|
if (c18683_9 && a1 !== -1) {
|
|
if (onClose == null) {
|
|
break L21;
|
|
}
|
|
onClose();
|
|
} else if (a0 !== a1 && a1 !== -1) {
|
|
if (onAnimate != null) {
|
|
onAnimate(a0, a1, a2);
|
|
}
|
|
if (a0 === 0) {
|
|
if (a2 !== ANIMATION_SOURCE.KEYBOARD) {
|
|
triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
|
|
}
|
|
} else if (a0 === 1 && a1 === 0 && !isChannelFocused() && c18683_2) {
|
|
const current = chatInputRef.current;
|
|
if (current != null) {
|
|
current.closeCustomKeyboard();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}, [chatInputRef, r3, onAnimate, onClose, isAppsKeyboard]);
|
|
const U = function U() {
|
|
return animatedIndex.get() > 0.975;
|
|
};
|
|
U.__closure = {
|
|
animatedIndex
|
|
};
|
|
U.__workletHash = 2001839633402;
|
|
U.__initData = __initData;
|
|
derivedValue = useDerivedValue(U);
|
|
const W = () => derivedValue.get();
|
|
W.__closure = {
|
|
isFullyExpanded: derivedValue
|
|
};
|
|
W.__workletHash = 9531298805666;
|
|
W.__initData = __initData2;
|
|
const X = function X(a0, a1) {
|
|
if (a1 != null && !(a0 ? a0 : c18683_7)) {
|
|
_ReanimatedRexport.runOnJS(_KeyboardManagerUtils.dismissGlobalKeyboard)();
|
|
}
|
|
};
|
|
X.__closure = {
|
|
forceMaxHeight,
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
dismissGlobalKeyboard: _KeyboardManagerUtils.dismissGlobalKeyboard
|
|
};
|
|
X.__workletHash = 14649856286006;
|
|
X.__initData = __initData3;
|
|
useAnimatedReaction(W, X);
|
|
useMountEffect(() => () => {
|
|
if (onClose != null) {
|
|
onClose();
|
|
}
|
|
});
|
|
const callback4 = useCallback((a0) => <BottomSheetBackdrop {...a0} pressBehavior="collapse" />, []);
|
|
const callback = useCallback(() => c18683_6 !== false ? <PortalKeyboardBottomSheetHeader style={headerStyle} handleCollapse={function handleCollapse() {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.collapse();
|
|
}
|
|
if (isScreenReaderEnabled) {
|
|
const current2 = ref.current;
|
|
if (current2 != null) {
|
|
current2.forceClose();
|
|
}
|
|
}
|
|
}} isFullyExpanded={derivedValue} /> : null, [headerStyle, ref, rendersHandle, derivedValue, isScreenReaderEnabled]);
|
|
token = useToken(Module712.modules.mobile.MOBILE_KEYBOARD_TOP_BORDER_RADIUS);
|
|
const cornerRadiusInputStart = chatInputFloating ? -1 : 0;
|
|
c18683_13 = cornerRadiusInputStart;
|
|
const cornerRadiusInputEnd = chatInputFloating ? 0 : 1;
|
|
c18683_14 = cornerRadiusInputEnd;
|
|
const ee = () => {
|
|
const r17 = animatedIndex.get();
|
|
return {
|
|
borderTopLeftRadius: _ReanimatedRexport.interpolate(r17, [c18683_13, c18683_14], [0, token], "clamp"),
|
|
borderTopRightRadius: _ReanimatedRexport.interpolate(animatedIndex.get(), [c18683_13, c18683_14], [0, token], "clamp")
|
|
};
|
|
};
|
|
ee.__closure = {
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
animatedIndex,
|
|
cornerRadiusInputStart,
|
|
cornerRadiusInputEnd,
|
|
cornerRadius: token
|
|
};
|
|
ee.__workletHash = 6979425892410;
|
|
ee.__initData = __initData4;
|
|
const animatedStyle2 = useAnimatedStyle(ee);
|
|
animatedStyle = chatInputFloating ? disableHeaderRoundingAnimation ? void 0 : animatedStyle2 : void 0;
|
|
const callback5 = useCallback((a0) => <PortalKeyboardBackground {...a0} roundingStyle={animatedStyle} />, [animatedStyle]);
|
|
const safeAreaInsets_native = useSafeAreaInsets_native();
|
|
const { left, right } = safeAreaInsets_native;
|
|
const windowDimensions_native = useWindowDimensions_native({
|
|
ignoreKeyboard: true
|
|
});
|
|
const { height, width } = windowDimensions_native;
|
|
const callback2 = useCallback((a0) => <BottomSheetFooter {...a0}>
|
|
<PortalHost name="expression-footer" />
|
|
</BottomSheetFooter>, []);
|
|
let accessibilityViewIsModal;
|
|
[accessibilityViewIsModal, setState] = useState(false);
|
|
const ne = () => Math.max(animatedIndex.get(), 0) > 0;
|
|
ne.__closure = {
|
|
animatedIndex
|
|
};
|
|
ne.__workletHash = 8952872079740;
|
|
ne.__initData = __initData5;
|
|
const te = function te(a0, a1) {
|
|
if (a0 !== a1) {
|
|
_ReanimatedRexport.runOnJS(setState)(a0);
|
|
}
|
|
};
|
|
te.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
setAccessibilityViewIsModal: setState
|
|
};
|
|
te.__workletHash = 16051387075966;
|
|
te.__initData = __initData6;
|
|
useAnimatedReaction(ne, te);
|
|
const r177 = isScreenReaderEnabled ? isScreenReaderEnabled : r3;
|
|
const colorThemeBackground = useColorThemeBackground();
|
|
const gradient = enabled ? colorThemeBackground : null;
|
|
const importantForAccessibility = stateFromStores ? "no-hide-descendants" : void 0;
|
|
const style = [styles.container, {
|
|
marginLeft: left,
|
|
marginRight: right
|
|
}, ,];
|
|
const r44 = Math;
|
|
if (width2 == null) {
|
|
width2 = Number.MAX_SAFE_INTEGER;
|
|
}
|
|
style[2] = {
|
|
width: r44.min(width2, width - left - right),
|
|
height
|
|
};
|
|
const renderFooter = isAndroid() ? renderExpressionFooter ? callback2 : void 0 : void 0;
|
|
if (backdropComponent == null) {
|
|
backdropComponent = callback4;
|
|
}
|
|
const r229 = [<Module5245 ref={ref} animatedIndex={animatedIndex} animatedPosition={animatedPosition} animationConfigs={animationConfigs} onClose={onClose} onAnimate={callback3} enableContentPanningGesture={!r177} enableHandlePanningGesture={!r177} handleComponent={callback} renderFooter={renderFooter} backgroundComponent={callback5} backgroundStyle={styles.background} backdropComponent={backdropComponent} activeOffsetY={[-10, 10]} handleHeight={rendersHandle ? ACTION_SHEET_DRAG_HANDLE_HEIGHT : 0} {...customKeyboardBottomSheetConfig}>
|
|
<AccessibilityViewAnimated nativeID="portal-keyboard-sheet" style={[styles.roundingView, disableHeaderRoundingAnimation ? !disableHeaderRoundingAnimation : animatedStyle2, roundingViewStyle]} onAccessibilityEscape={function onAccessibilityEscape() {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.collapse();
|
|
}
|
|
}} accessibilityViewIsModal={accessibilityViewIsModal}>{children}</AccessibilityViewAnimated>
|
|
</Module5245>, , ,];
|
|
let r230 = isIOS;
|
|
if (isIOS) {
|
|
r230 = renderExpressionFooter;
|
|
}
|
|
if (r230) {
|
|
r230 = <PortalKeyboardFooterIOS_ios animatedSheetIndex={animatedIndex} />;
|
|
}
|
|
r229[1] = r230;
|
|
r229[2] = <NavScrim />;
|
|
return <ThemeContextProvider gradient={gradient}>
|
|
<ReanimatedRexport.View importantForAccessibility={importantForAccessibility} style={style} pointerEvents="box-none">{r229}</ReanimatedRexport.View>
|
|
</ThemeContextProvider>;
|
|
});
|
|
export default r75;
|