116 lines
4.9 KiB
TypeScript
116 lines
4.9 KiB
TypeScript
// Metro module 9681 (f9682).
|
|
import * as Module19 from "react";
|
|
import { useMemo, useCallback } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { isIOS } from "../../../../utils/PlatformUtils";
|
|
import { useGradientValue, GradientPercentage } from "../../../client_themes/native/ClientThemesUtils";
|
|
import Module689 from "../../../../_bundle/Module689";
|
|
import { useToken } from "../../../../design/tokens/native/useToken";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles((marginBottom, a1, a2, a3) => {
|
|
const wrap = {
|
|
...StyleSheet.absoluteFillObject,
|
|
alignItems: "center",
|
|
top: void 0
|
|
};
|
|
if (isIOS()) {
|
|
marginBottom = Module712.space.PX_24;
|
|
}
|
|
return {
|
|
wrap,
|
|
container: {
|
|
paddingVertical: Module712.space.PX_8,
|
|
marginHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_MARGIN_HORIZONTAL,
|
|
marginBottom,
|
|
borderRadius: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BORDER_RADIUS,
|
|
backgroundColor: a2 == null ? a1 : a2,
|
|
paddingHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_PADDING_HORIZONTAL,
|
|
borderWidth: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BORDER_WIDTH,
|
|
...Module712.shadows.SHADOW_HIGH,
|
|
...a3 ? {
|
|
borderColor: Module712.colors.BORDER_MUTED
|
|
} : {
|
|
borderTopColor: Module712.colors.BORDER_MUTED
|
|
}
|
|
},
|
|
buttonsContainer: {
|
|
gap: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_GAP,
|
|
alignItems: "stretch",
|
|
flexDirection: "row",
|
|
marginHorizontal: Module712.modules.mobile.MEDIA_KEYBOARD_BAR_BUTTONS_MARGIN_HORIZONTAL
|
|
},
|
|
button: {
|
|
flexBasis: 64,
|
|
minHeight: 48,
|
|
flexGrow: 1,
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
padding: Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_PADDING,
|
|
borderRadius: Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_BORDER_RADIUS,
|
|
gap: 4
|
|
},
|
|
gradient: {
|
|
...StyleSheet.absoluteFillObject,
|
|
color: Module712.colors.BACKGROUND_BASE_LOW
|
|
}
|
|
};
|
|
});
|
|
const r30 = Module19.memo(function MediaKeyboardBottomSheetActions(props) {
|
|
const { onHeightChange, overflowButtons } = props;
|
|
const gradientValue = useGradientValue(GradientPercentage.END);
|
|
const r14 = gradientValue != null ? Module689(gradientValue).alpha(0.95).hex() : null;
|
|
let r50 = Module689(useToken(Module712.colors.CARD_BACKGROUND_DEFAULT)).alpha(0.95).hex();
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
const enabled = useMobileVisualRefreshConfig({
|
|
location: "MediaKeyboardBottomSheetActions"
|
|
}).enabled;
|
|
const token4 = useToken(Module712.colors.MOBILE_FLOATINGBAR_BACKGROUND_HIGHER);
|
|
if (enabled) {
|
|
r50 = token4;
|
|
}
|
|
const styles = useStyles(bottom, r50, r14, enabled);
|
|
const token = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_ICON_COLOR_ACTIVE);
|
|
const token2 = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_TEXT_COLOR_ACTIVE);
|
|
const token3 = useToken(Module712.modules.mobile.MEDIA_KEYBOARD_BUTTON_TEXT_VARIANT);
|
|
const memo = useMemo(() => ({
|
|
start: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
end: {
|
|
x: 0,
|
|
y: 1
|
|
},
|
|
colors: [Module689(styles.gradient.color).alpha(0).hex(), Module689(styles.gradient.color).alpha(1).hex()]
|
|
}), [styles.gradient.color]);
|
|
return <View style={styles.wrap} pointerEvents="box-none" onLayout={useCallback((a0) => {
|
|
onHeightChange(a0.nativeEvent.layout.height);
|
|
}, [onHeightChange])}>
|
|
<Module4611 style={styles.gradient} {...memo} pointerEvents="none" />
|
|
<View style={styles.container}>
|
|
<View style={styles.buttonsContainer}>
|
|
{overflowButtons.map((overflowButton, index) => {
|
|
const { IconComponent, disabled } = overflowButton;
|
|
let color = "text-muted";
|
|
const r25 = [<IconComponent size="md" color={disabled ? "text-muted" : token} />, ,];
|
|
if (!overflowButton.disabled) {
|
|
color = token2;
|
|
}
|
|
r25[1] = <Text lineClamp={1} variant={token3} color={color}>{overflowButton.text}</Text>;
|
|
return <PressableOpacity key={index} accessibilityRole="button" accessibilityLabel={overflowButton.text} accessibilityState={{
|
|
disabled: overflowButton.disabled
|
|
}} disabled={overflowButton.disabled} style={styles.button} onPress={overflowButton.onPress}>{r25}</PressableOpacity>;
|
|
})}
|
|
</View>
|
|
</View>
|
|
</View>;
|
|
});
|
|
export default r30;
|