70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
// Metro module 9826 (f9827).
|
|
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";
|
|
let useStyles;
|
|
const GiftingBadgeProgressBar = function GiftingBadgeProgressBar(props) {
|
|
const percent = props.percent;
|
|
const styles = useStyles();
|
|
return <View style={styles.progressBarTrack}>
|
|
<View style={[styles.progressBarFill, {
|
|
width: `${Math.min(Math.max(percent, 0), 100)}%`
|
|
}]} />
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: Module712.space.PX_16
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingHorizontal: Module712.space.PX_8,
|
|
gap: Module712.space.PX_4
|
|
},
|
|
progressBarTrack: {
|
|
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",
|
|
alignItems: "center",
|
|
minHeight: Module712.space.PX_16
|
|
}
|
|
});
|
|
export default function GiftingBadgeProgress(props) {
|
|
const { progress, currentTier, nextTier, iconSize = 24, title } = props;
|
|
const styles = useStyles();
|
|
const singleRequirementThreshold = getSingleRequirementThreshold(nextTier);
|
|
return <View style={styles.container}>
|
|
{currentTier?.simple_icon_url != null && <GiftingBadgeIcon icon={currentTier.simple_icon_url} size={iconSize} />}
|
|
<View style={styles.content}>
|
|
{title != null && <Text variant="text-md/semibold">{title}</Text>}
|
|
<GiftingBadgeProgressBar percent={nextTier != null && singleRequirementThreshold > 0 ? Math.min(Math.max(progress / singleRequirementThreshold * 100, 0), 100) : 100} />
|
|
<View style={styles.labels}>
|
|
{nextTier != null && <Text variant="text-xs/normal" color="text-muted">
|
|
{intl.format(GiftingBadge_messages.iIpfQe, {
|
|
count: progress,
|
|
threshold: singleRequirementThreshold
|
|
})}
|
|
</Text>}
|
|
</View>
|
|
</View>
|
|
{nextTier?.simple_icon_url != null && <GiftingBadgeIcon icon={nextTier.simple_icon_url} size={iconSize} />}
|
|
</View>;
|
|
};
|