79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
// Metro module 16270 (f16271).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import Module13000 from "../../../../_bundle/Module13000";
|
|
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import { Icon } from "../../../../design/void/native";
|
|
import Module11872 from "../../../../_bundle/Module11872";
|
|
const useStyles = createStyles({
|
|
avatarContainer: {
|
|
display: "flex",
|
|
paddingTop: 24
|
|
},
|
|
defaultLogoStyle: {
|
|
tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
|
|
width: 96
|
|
},
|
|
uploadedAvatarStyle: {
|
|
width: 200,
|
|
height: 200,
|
|
borderRadius: 100,
|
|
position: "relative"
|
|
},
|
|
avatarWrapper: {
|
|
borderColor: Module712.colors.BORDER_MUTED,
|
|
borderStyle: "dashed",
|
|
borderWidth: 2,
|
|
borderRadius: Module712.radii.round,
|
|
width: 200,
|
|
height: 200,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
position: "relative",
|
|
overflow: "visible"
|
|
},
|
|
uploadAvatarWrapper: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BRAND,
|
|
borderRadius: Module712.radii.round,
|
|
tintColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
position: "absolute",
|
|
right: 10,
|
|
top: 10,
|
|
width: 40,
|
|
height: 40,
|
|
flex: 1,
|
|
justifyContent: "center"
|
|
},
|
|
uploadAvatarIcon: {
|
|
tintColor: Module712.colors.WHITE,
|
|
alignSelf: "center"
|
|
}
|
|
});
|
|
export default function TouchableUploadAvatar(props) {
|
|
let source;
|
|
const { avatarSource, showPendingAvatar = false, onSelectAvatar } = props;
|
|
const styles = useStyles();
|
|
if (showPendingAvatar) {
|
|
source = avatarSource;
|
|
if (source == null) {
|
|
source = Module13000;
|
|
}
|
|
} else {
|
|
source = Module13000;
|
|
}
|
|
const style = showPendingAvatar && avatarSource != null ? styles.uploadedAvatarStyle : styles.defaultLogoStyle;
|
|
return <View style={styles.avatarContainer}>
|
|
<PressableOpacity onPress={onSelectAvatar} accessibilityRole="button" accessibilityLabel={intl.string(t["70lEQe"])}>
|
|
<View style={styles.avatarWrapper}>
|
|
<FastImage resizeMode="contain" style={style} source={source} />
|
|
<View style={styles.uploadAvatarWrapper}>
|
|
<Icon size={Icon.Sizes.MEDIUM} source={Module11872} style={styles.uploadAvatarIcon} />
|
|
</View>
|
|
</View>
|
|
</PressableOpacity>
|
|
</View>;
|
|
};
|