94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
// Metro module 12161 (f12162).
|
|
import { Image as Image2, View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { ResolvedValueType, resolveSingleStringOrSkeleton, resolveProgressPercentage, decimalToClampedPercentage } from "../../../_bundle/Module12070";
|
|
import { ImageSkeleton, TextSkeleton } from "../../user_profile/native/UserProfileApplicationWidgetSkeletons";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
root: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_12
|
|
},
|
|
image: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden",
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
gap: Module712.space.PX_4,
|
|
minWidth: 0
|
|
},
|
|
progressContainer: {
|
|
width: "100%",
|
|
height: 6,
|
|
borderRadius: Module712.radii.md,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
|
|
},
|
|
progress: {
|
|
height: 6,
|
|
borderRadius: Module712.radii.md,
|
|
backgroundColor: Module712.colors.ICON_STRONG
|
|
},
|
|
textContent: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
gap: Module712.space.PX_4
|
|
},
|
|
textLeft: {
|
|
flex: 1,
|
|
minWidth: 0
|
|
},
|
|
progressText: {
|
|
flexShrink: 0
|
|
}
|
|
});
|
|
export default function UserProfileApplicationWidgetBottomProgressLayout(props) {
|
|
const { bottomConfig, resolveFieldValue } = props;
|
|
const styles = useStyles();
|
|
const objective = bottomConfig.components.objective;
|
|
const r12 = resolveFieldValue(objective == null ? void 0 : objective.fields.image, [ResolvedValueType.MEDIA]);
|
|
const r26 = resolveSingleStringOrSkeleton(objective, "name", resolveFieldValue);
|
|
const r25 = resolveSingleStringOrSkeleton(objective, "description", resolveFieldValue);
|
|
const progress = bottomConfig.components.progress;
|
|
const r19 = resolveFieldValue(progress == null ? void 0 : progress.fields.current, [ResolvedValueType.NUMBER]);
|
|
const r18 = resolveFieldValue(progress == null ? void 0 : progress.fields.max, [ResolvedValueType.NUMBER]);
|
|
const r14 = resolveProgressPercentage(r19, r18);
|
|
const r81 = [r12 != null ? <Image2 source={{
|
|
uri: r12.media.url
|
|
}} style={styles.image} resizeMode="contain" /> : <ImageSkeleton style={styles.image} />, ,];
|
|
let max = r18?.value;
|
|
if (max == null) {
|
|
max = 1;
|
|
}
|
|
let now = r19?.value;
|
|
if (now == null) {
|
|
now = 0;
|
|
}
|
|
const r99 = [<View style={styles.progressContainer} accessibilityRole="progressbar" accessibilityValue={{
|
|
min: 0,
|
|
max,
|
|
now
|
|
}}>
|
|
<View style={[styles.progress, {
|
|
width: `${r14}%`
|
|
}]} />
|
|
</View>, <View style={styles.textContent}>
|
|
<View style={styles.textLeft}>
|
|
{r26.status === "value" ? <Text variant="heading-sm/medium" lineClamp={2}>{r26.text}</Text> : <TextSkeleton variant="heading-sm/medium" />}
|
|
{r25.status === "value" ? <Text variant="text-xs/medium" color="text-subtle" lineClamp={2}>{r25.text}</Text> : <TextSkeleton variant="text-xs/medium" />}
|
|
</View>
|
|
{r19 != null ? <Text variant="text-sm/medium" lineClamp={1} style={styles.progressText}>
|
|
{r18 != null ? `${r19.value}/${r18.value}` : `${decimalToClampedPercentage(r19.value)}%`}
|
|
</Text> : <TextSkeleton variant="text-sm/medium" widthChars={4} />}
|
|
</View>];
|
|
r81[1] = <View style={styles.content}>{r99}</View>;
|
|
return <View style={styles.root}>{r81}</View>;
|
|
};
|