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.
206 lines
5.5 KiB
206 lines
5.5 KiB
import React, { useState } from "react"; |
|
import { |
|
View, |
|
Platform, |
|
UIManager, |
|
Dimensions, |
|
Pressable, |
|
Text, |
|
TouchableOpacity, |
|
Image, |
|
Appearance, |
|
} from "react-native"; |
|
import { useNavigation } from "@react-navigation/native"; |
|
import { Ionicons, AntDesign } from "@expo/vector-icons"; |
|
import { connect } from "react-redux"; |
|
import { user } from "../redux/actions"; |
|
import Svg, { Path } from "react-native-svg"; |
|
|
|
//style |
|
import tw from "tailwind-rn"; |
|
import fontSize from "../constants/fontSize"; |
|
import Colors from "../constants/Colors"; |
|
|
|
const width = Dimensions.get("window").width; |
|
const height = Dimensions.get("window").height; |
|
|
|
if ( |
|
Platform.OS === "android" && |
|
UIManager.setLayoutAnimationEnabledExperimental |
|
) { |
|
UIManager.setLayoutAnimationEnabledExperimental(true); |
|
} |
|
|
|
const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => { |
|
const colorScheme = Appearance.getColorScheme(); |
|
const [routes, setRoutes] = useState([ |
|
{ |
|
name: "صفحه اصلی", |
|
route: "Home", |
|
icon: <Ionicons name="home-outline" size={23} color={"#555555"} />, |
|
toast: "", |
|
message: "", |
|
}, |
|
{ |
|
name: "فعال سازی", |
|
route: "Activation", |
|
icon: <AntDesign name="check" size={23} color={"#555555"} />, |
|
toast: "", |
|
message: "", |
|
}, |
|
{ |
|
name: "واقعیت افزوده", |
|
route: "AR", |
|
icon: <Ionicons name="ios-glasses" size={23} color={"#555555"} />, |
|
toast: "", |
|
message: "", |
|
}, |
|
{ |
|
name: "سفارشات", |
|
route: "Orders", |
|
icon: <Ionicons name="reorder-four" size={23} color={"#555555"} />, |
|
toast: "", |
|
message: "", |
|
}, |
|
{ |
|
name: "سوالات متداول", |
|
route: "Faq", |
|
icon: <Ionicons name="" size={23} color={"#555555"} />, |
|
toast: "", |
|
message: "", |
|
}, |
|
{ |
|
name: "تماس با ما", |
|
route: "Contact", |
|
icon: <Ionicons name="call" size={23} color={"#555555"} />, |
|
toast: "", |
|
message: "", |
|
}, |
|
]); |
|
const [addUserDropdown, setAddUserDropdown] = useState(false); |
|
const navigation = useNavigation(); |
|
const Route = ({ route }) => { |
|
return ( |
|
<TouchableOpacity |
|
style={[ |
|
tw("w-full flex flex-row-reverse justify-start items-end mt-6"), |
|
{}, |
|
]} |
|
onPress={() => navigation.navigate(route.route)} |
|
> |
|
{route.icon} |
|
<Text |
|
style={[ |
|
tw("mr-2"), |
|
{ fontFamily: "regular", fontSize: fontSize.base }, |
|
]} |
|
> |
|
{route.name} |
|
</Text> |
|
</TouchableOpacity> |
|
); |
|
}; |
|
|
|
return ( |
|
<View |
|
style={[ |
|
tw(`absolute top-0 flex flex-row justify-end `), |
|
{ |
|
left: position, |
|
width: width, |
|
height: height, |
|
zIndex: 10000, |
|
}, |
|
]} |
|
> |
|
<Pressable |
|
onPress={() => setBoxPosition()} |
|
style={[ |
|
tw( |
|
`w-1/5 h-full ${position === "0%" ? "bg-black bg-opacity-40" : ""}` |
|
), |
|
]} |
|
></Pressable> |
|
<View style={[tw("w-4/5 bg-white h-full flex flex-col")]}> |
|
<View |
|
style={[ |
|
tw("flex flex-col items-end pt-3 pb-1 px-4"), |
|
{ backgroundColor: Colors.theme1[colorScheme].greenCF }, |
|
]} |
|
> |
|
{user?.picFileId ? ( |
|
<Image |
|
source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }} |
|
style={[tw("rounded-full"), { width: 60, height: 60 }]} |
|
/> |
|
) : ( |
|
<View |
|
style={[ |
|
tw("rounded-full bg-gray-200"), |
|
{ minWidth: 60, minHeight: 60, zIndex : 1 }, |
|
]} |
|
></View> |
|
)} |
|
<View |
|
style={tw( |
|
"flex flex-row-reverse w-full justify-between px-2 pb-3 mt-1" |
|
)} |
|
> |
|
<View style={tw("flex flex-col")}> |
|
<Text |
|
style={{ |
|
fontSize: fontSize.lg, |
|
color: "white", |
|
fontFamily: "bold", |
|
}} |
|
> |
|
{user?.firstName + " " + user?.lastName} |
|
</Text> |
|
<Text |
|
style={{ |
|
fontSize: fontSize.tiny, |
|
color: "white", |
|
fontFamily: "bold", |
|
}} |
|
> |
|
{user?.cellphone} |
|
</Text> |
|
</View> |
|
<Svg |
|
data-name="vuesax/linear/arrow-left" |
|
xmlns="http://www.w3.org/2000/svg" |
|
width={24} |
|
height={24} |
|
style={{ transform: [{ rotate: "-90deg" }] }} |
|
onClick={() => setAddUserDropdown(() => !addUserDropdown)} |
|
> |
|
<Path |
|
d="M15.002 19.92 8.479 13.4a1.986 1.986 0 0 1 0-2.8l6.523-6.52" |
|
fill="none" |
|
stroke="#fff" |
|
strokeLinecap="round" |
|
strokeLinejoin="round" |
|
strokeWidth={2} |
|
/> |
|
</Svg> |
|
</View> |
|
</View> |
|
<View style={tw("flex-1 flex flex-col px-4")}> |
|
{routes.map((route, index) => ( |
|
<Route route={route} key={index} /> |
|
))} |
|
</View> |
|
</View> |
|
</View> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
user: state.user.status, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
logout: user.logout, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Drawer);
|
|
|