61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
// Metro module 9827 (f9828).
|
|
import { View } from "react-native";
|
|
import { getSingleRequirementThreshold } from "../../../../badges/BadgeDirectoryStore";
|
|
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../../_bundle/Module712";
|
|
import GiftingBadgeIcon from "./GiftingBadgeIcon";
|
|
import { Text } from "../../../../../design/components/Text/native/Text";
|
|
import { intl } from "../../../../../intl/index.native";
|
|
import GiftingBadge_messages from "../../GiftingBadge.messages";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
gap: Module712.space.PX_4,
|
|
width: "100%"
|
|
},
|
|
barRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
progressBarTrack: {
|
|
flex: 1,
|
|
height: 6,
|
|
borderRadius: Module712.radii.round,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
|
|
overflow: "hidden"
|
|
},
|
|
progressBarFill: {
|
|
height: 6,
|
|
borderRadius: Module712.radii.round,
|
|
backgroundColor: Module712.colors.BACKGROUND_BRAND
|
|
},
|
|
labels: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end"
|
|
}
|
|
});
|
|
export default function GiftingBadgeLevelUpProgress(props) {
|
|
const { progress, currentTier, newTier, style } = props;
|
|
const styles = useStyles();
|
|
const singleRequirementThreshold = getSingleRequirementThreshold(newTier);
|
|
return <View style={[styles.container, style]}>
|
|
<View style={styles.barRow}>
|
|
{currentTier?.simple_icon_url != null && <GiftingBadgeIcon icon={currentTier.simple_icon_url} size={24} />}
|
|
<View style={styles.progressBarTrack}>
|
|
<View style={[styles.progressBarFill, {
|
|
width: `${singleRequirementThreshold > 0 ? Math.min(Math.max(progress / singleRequirementThreshold * 100, 0), 100) : 100}%`
|
|
}]} />
|
|
</View>
|
|
{newTier.simple_icon_url != null && <GiftingBadgeIcon icon={newTier.simple_icon_url} size={24} />}
|
|
</View>
|
|
<View style={styles.labels}>
|
|
<Text variant="text-xs/normal" color="text-muted">
|
|
{intl.format(GiftingBadge_messages.iIpfQe, {
|
|
count: progress,
|
|
threshold: singleRequirementThreshold
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</View>;
|
|
};
|