47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
// Metro module 12482 (f12483).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { useToken } from "../../../../design/tokens/native/useToken";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { MAX_REFERRALS_SENT } from "../hooks/useReferralProgramBannerDetails";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import Module12483 from "../../../../_bundle/Module12483";
|
|
import Module8531, { Circle } from "../../../../_bundle/Module8531";
|
|
import Module12484 from "../../../../_bundle/Module12484";
|
|
const width = 160;
|
|
const strokeDasharray = 2 * Math.PI * 77;
|
|
const useStyles = createStyles({
|
|
progressCircleContainer: {
|
|
width: 160,
|
|
height: 160,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginTop: 24
|
|
},
|
|
progressCircleImage: {
|
|
position: "absolute",
|
|
width: 93,
|
|
height: 93,
|
|
borderRadius: 46.5
|
|
},
|
|
glowImage: {
|
|
position: "absolute",
|
|
width: 180,
|
|
height: 180
|
|
}
|
|
});
|
|
export default function ProgressWheel(props) {
|
|
const nReferralsSent = props.nReferralsSent;
|
|
const styles = useStyles();
|
|
return <View style={styles.progressCircleContainer}>
|
|
{nReferralsSent === MAX_REFERRALS_SENT && <FastImage source={Module12483} style={styles.glowImage} />}
|
|
<Module8531 width={width} height={width}>
|
|
<Circle cx={80} cy={80} r={77} stroke={useToken(Module712.colors.BACKGROUND_MOD_STRONG)} strokeWidth={6} fill={useToken(Module712.colors.BACKGROUND_SURFACE_HIGH)} />
|
|
<Circle cx={80} cy={80} r={77} stroke="#53ac66" strokeWidth={6} fill="transparent" strokeDasharray={strokeDasharray} strokeDashoffset={strokeDasharray * (1 - 33.3 * nReferralsSent / 100)} strokeLinecap="round" rotation={-90} origin="80, 80" />
|
|
</Module8531>
|
|
<FastImage source={{
|
|
uri: Module12484
|
|
}} style={styles.progressCircleImage} />
|
|
</View>;
|
|
};
|