120 lines
4.0 KiB
TypeScript
120 lines
4.0 KiB
TypeScript
// Metro module 11946 (f11947).
|
|
import { useEffect, useMemo } from "react";
|
|
import { Image as Image2, StyleSheet, View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
|
|
import { SUPPORTS_WEBP } from "../../../../utils/AvatarUtils";
|
|
import { BackgroundBlurFill } from "../../../../design/components/experimental/native";
|
|
import { Heading } from "../../../../design/components/Text/native/Text";
|
|
import GameProfileRankPill from "./GameProfileRankPill";
|
|
const useStyles = createStyles({
|
|
headerContainer: {
|
|
height: 56,
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
borderBottomColor: Module712.colors.BORDER_SUBTLE,
|
|
overflow: "hidden",
|
|
justifyContent: "center"
|
|
},
|
|
headerRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
icon: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
titleContainer: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8,
|
|
minWidth: 0
|
|
},
|
|
headerRight: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
rankPillContainer: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}
|
|
});
|
|
const __initData = {
|
|
code: "function GameProfileNavigationHeaderTsx1(){const{headerRightProgress}=this.__closure;return{opacity:headerRightProgress.get()};}"
|
|
};
|
|
const __initData2 = {
|
|
code: "function GameProfileNavigationHeaderTsx2(){const{headerRightProgress}=this.__closure;return{opacity:1-headerRightProgress.get()};}"
|
|
};
|
|
export default function GameProfileNavigationHeader(props) {
|
|
const { game, application, headerRight } = props;
|
|
const styles = useStyles();
|
|
const r4 = headerRight != null;
|
|
let c19280_2 = r4;
|
|
const sharedValue = useSharedValue(r4 ? 1 : 0);
|
|
useEffect(() => {
|
|
sharedValue.set(withTiming(c19280_2 ? 1 : 0, {
|
|
duration: 200
|
|
}));
|
|
}, [r4, sharedValue]);
|
|
const x = () => ({
|
|
opacity: sharedValue.get()
|
|
});
|
|
x.__closure = {
|
|
headerRightProgress: sharedValue
|
|
};
|
|
x.__workletHash = 16001524280109;
|
|
x.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(x);
|
|
const b = () => ({
|
|
opacity: 1 - sharedValue.get()
|
|
});
|
|
b.__closure = {
|
|
headerRightProgress: sharedValue
|
|
};
|
|
b.__workletHash = 5182160908530;
|
|
b.__initData = __initData2;
|
|
const animatedStyle2 = useAnimatedStyle(b);
|
|
const memo = useMemo(() => {
|
|
let r4 = game == null ? void 0 : game.getIconURL(32, SUPPORTS_WEBP ? "webp" : "png");
|
|
if (r4 == null) {
|
|
r4 = application == null ? void 0 : application.getIconURL(32, SUPPORTS_WEBP ? "webp" : "png");
|
|
}
|
|
if (r4 == null) {
|
|
r4 = null;
|
|
}
|
|
return r4;
|
|
}, [game, application]);
|
|
let r21 = game?.name;
|
|
if (r21 == null) {
|
|
r21 = application?.name;
|
|
}
|
|
const r55 = r21 == null;
|
|
const r56 = r55 ? null : <View style={styles.headerContainer}>
|
|
<BackgroundBlurFill />
|
|
<View style={styles.headerRow}>
|
|
{memo != null && <Image2 source={{
|
|
uri: memo
|
|
}} style={styles.icon} />}
|
|
<View style={styles.titleContainer}>
|
|
<Heading variant="redesign/heading-18/bold" color="mobile-text-heading-primary" lineClamp={1}>{r21}</Heading>
|
|
{game?.l30Rank != null && <View style={styles.rankPillContainer}>
|
|
<GameProfileRankPill rank={game.l30Rank} compact />
|
|
<ReanimatedRexport.View style={[StyleSheet.absoluteFill, animatedStyle2]}>
|
|
<GameProfileRankPill rank={game.l30Rank} />
|
|
</ReanimatedRexport.View>
|
|
</View>}
|
|
</View>
|
|
{headerRight != null && <ReanimatedRexport.View style={[styles.headerRight, animatedStyle]}>
|
|
{headerRight()}
|
|
</ReanimatedRexport.View>}
|
|
</View>
|
|
</View>;
|
|
return r56;
|
|
};
|