You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

154 lines
4.7 KiB

import React from "react";
import {
Image,
View,
Pressable,
Dimensions,
StyleSheet,
Text,
} from "react-native";
import Svg, { G, Path } from "react-native-svg";
import { connect } from "react-redux";
//components
import Modal from "../components/Modal";
//assets
import avatarPng from "../assets/icons/avatar.png";
//style
import tw from "tailwind-rn";
import Colors from "../constants/Colors";
import fontSize from "../constants/fontSize";
const { height, width } = Dimensions.get("window");
function Avatar({ source, size, theme, action }) {
const [openModal, setOpenModal] = React.useState(false);
return (
<Pressable
onPress={() => setOpenModal(true)}
style={[
tw("rounded-full overflow-hidden flex justify-center items-center"),
{
width: size,
height: size,
backgroundColor:
theme === "light"
? Colors.theme1.grayE3
: Colors.theme1.white + "55",
},
]}
>
{source ? (
<Image
source={{ uri: source }}
style={{ width: "100%", height: "100%" }}
resizeMode="contain"
/>
) : (
<Svg
data-name="vuesax/bold/frame"
xmlns="http://www.w3.org/2000/svg"
width={36.975}
height={36.975}
>
<G fill="none">
<Path d="M18.488 3.081a7.311 7.311 0 0 0-.185 14.621 1.243 1.243 0 0 1 .339 0h.108a7.313 7.313 0 0 0-.262-14.621Z" />
<Path
d="M18.488 5.081a5.324 5.324 0 0 0-5.318 5.318c0 1.395.528 2.705 1.486 3.689.94.965 2.215 1.535 3.6 1.61.165-.011.328-.01.484.002a5.31 5.31 0 0 0 5.066-5.304 5.324 5.324 0 0 0-5.318-5.315m0-2a7.325 7.325 0 0 1 7.318 7.318 7.3 7.3 0 0 1-7.056 7.303h-.108a1.243 1.243 0 0 0-.339 0c-4.036-.14-7.133-3.344-7.133-7.303a7.325 7.325 0 0 1 7.318-7.318Z"
fill={theme === "light" ? "#818181" : Colors.theme1.white}
/>
<G data-name="Vector">
<Path d="M26.314 21.8a15.3 15.3 0 0 0-15.637 0 6.081 6.081 0 0 0-3.035 4.976 6.03 6.03 0 0 0 3.02 4.945 14.234 14.234 0 0 0 7.826 2.172 14.234 14.234 0 0 0 7.826-2.172 6.078 6.078 0 0 0 3.02-4.976 6.066 6.066 0 0 0-3.02-4.945Z" />
<Path
d="M18.507 21.651c-2.528 0-4.977.661-6.721 1.814-1.383.926-2.144 2.102-2.144 3.311 0 1.201.756 2.366 2.129 3.282l.006.003c1.734 1.165 4.18 1.833 6.711 1.833 2.53 0 4.977-.668 6.708-1.83 1.762-1.189 2.136-2.455 2.138-3.31-.01-.862-.388-2.129-2.129-3.29-1.729-1.152-4.17-1.813-6.698-1.813m0-2c2.831 0 5.658.716 7.807 2.15 1.942 1.293 3.005 3.05 3.02 4.945 0 1.91-1.078 3.666-3.02 4.976-4.313 2.896-11.339 2.896-15.652 0-1.942-1.294-3.02-3.05-3.02-4.946 0-1.895 1.078-3.666 3.035-4.976 2.165-1.433 5-2.149 7.83-2.149Z"
fill={theme === "light" ? "#818181" : Colors.theme1.white}
/>
</G>
</G>
</Svg>
)}
<Modal openModal={openModal} setOpenModal={setOpenModal} type="fade">
<Pressable
style={[tw("flex-1 justify-center items-center bg-black relative")]}
onPress={() => setOpenModal(!openModal)}
>
<Text
onPress={() => action()}
style={{
position: "absolute",
top: 16,
left: 16,
color: "white",
fontFamily: "Medium",
fontSize: fontSize.tiny,
}}
>
ویرایش
</Text>
<Pressable
onPress={(e) => e.stopPropagation()}
style={{ width, height: width, backgroundColor: "white" }}
>
<Image
source={source ? { uri: source } : avatarPng}
style={{ width: "100%", height: width }}
resizeMode="contain"
/>
</Pressable>
</Pressable>
</Modal>
</Pressable>
);
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen: {
backgroundColor: "#F194FF",
},
buttonClose: {
backgroundColor: "#2196F3",
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center",
},
modalText: {
marginBottom: 15,
textAlign: "center",
},
});
const mapStateToProps = (state) => ({
theme: state.publicApi.theme,
});
export default connect(mapStateToProps)(Avatar);