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

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);