reza fixed drawer left side color

master
Reza_ashrafi 2 years ago
parent 318f9fad97
commit f82165c9dd
  1. 54
      src/components/Avatar.js
  2. 62
      src/components/Drawer.js
  3. 1
      src/components/Empty.js
  4. 2
      src/components/Navbar.js
  5. 7
      src/redux/proxy.js
  6. 3
      src/redux/reducers/user.js
  7. 3
      src/screens/Product/components/Book.js
  8. 14
      src/screens/Product/components/Comments.js
  9. 44
      src/screens/Profile/components/User.js
  10. 54
      src/screens/Profile/index.js
  11. 5
      src/screens/Splash/index.js
  12. 2
      src/screens/Video/index.js
  13. 2
      src/screens/VideoDisplay/index.js

@ -0,0 +1,54 @@
import React from "react";
import { Image, View } from "react-native";
import Svg, { G, Path } from "react-native-svg";
//style
import tw from "tailwind-rn";
function Avatar({ source, size }) {
return (
<View
style={[
tw(
"bg-gray-100 rounded-full overflow-hidden flex justify-center items-center"
),
{
minWidth: size,
minHeight: size,
},
]}
>
{source ? (
<Image
source={{ uri: `https:dnvn.ir/api/v1/file/${source}` }}
style={{ minWidth: "100%", minHeight: "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="#818181"
/>
<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="#818181"
/>
</G>
</G>
</Svg>
)}
</View>
);
}
export default Avatar;

@ -9,6 +9,7 @@ import {
TouchableOpacity, TouchableOpacity,
Image, Image,
LayoutAnimation, LayoutAnimation,
Animated,
} from "react-native"; } from "react-native";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { asyncAwesomeAlert } from "../utils/AsyncWrappers"; import { asyncAwesomeAlert } from "../utils/AsyncWrappers";
@ -17,11 +18,15 @@ import { user } from "../redux/actions";
import Svg, { Path, G } from "react-native-svg"; import Svg, { Path, G } from "react-native-svg";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
//components
import Avatar from "../components/Avatar";
//style //style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from "../constants/fontSize"; import fontSize from "../constants/fontSize";
import Colors from "../constants/Colors"; import Colors from "../constants/Colors";
//variables
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
if ( if (
@ -34,6 +39,7 @@ if (
const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => { const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
const [height, setHeight] = useState(Dimensions.get("window").height); const [height, setHeight] = useState(Dimensions.get("window").height);
const [width, setWidth] = useState(Dimensions.get("window").width); const [width, setWidth] = useState(Dimensions.get("window").width);
const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
const [dropdown, setDropdown] = useState(false); const [dropdown, setDropdown] = useState(false);
const [dropdownHeight, setDropdownHeight] = useState(0); const [dropdownHeight, setDropdownHeight] = useState(0);
const navigation = useNavigation(); const navigation = useNavigation();
@ -246,6 +252,23 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
[mobile, position] [mobile, position]
); );
React.useEffect(() => {
if (position === "0%") {
setTimeout(() => {
Animated.timing(fadeAnim, {
toValue: 0.5,
duration: 300,
}).start();
}, 300);
}
if (position === "100%") {
Animated.timing(fadeAnim, {
toValue: 0,
duration: 10,
}).start();
}
}, [position]);
const onLayout = React.useCallback(() => { const onLayout = React.useCallback(() => {
setHeight(Dimensions.get("window").height); setHeight(Dimensions.get("window").height);
setWidth(Dimensions.get("window").width); setWidth(Dimensions.get("window").width);
@ -270,14 +293,14 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
]} ]}
onLayout={() => onLayout()} onLayout={() => onLayout()}
> >
<Pressable <Animated.View
onPress={() => setBoxPosition()} style={[tw("w-1/5 h-full bg-black"), { opacity: fadeAnim }]}
style={[ >
tw( <Pressable
`w-1/5 h-full ${position === "0%" ? "bg-black bg-opacity-40" : ""}` style={tw("flex-1")}
), onPress={() => setBoxPosition()}
]} ></Pressable>
></Pressable> </Animated.View>
<View style={[tw("w-4/5 bg-white h-full flex")]}> <View style={[tw("w-4/5 bg-white h-full flex")]}>
<View <View
style={[ style={[
@ -286,26 +309,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
]} ]}
> >
<View style={tw("flex flex-row-reverse w-full justify-between")}> <View style={tw("flex flex-row-reverse w-full justify-between")}>
{user?.picFileIds ? ( <Avatar souce={user.picFileIds} size={width / 6} />
<Image
source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
style={[
tw("rounded-full"),
{ width: mobile ? 60 : 100, height: mobile ? 60 : 100 },
]}
/>
) : (
<View
style={[
tw("rounded-full bg-gray-200"),
{
width: mobile ? 60 : 100,
height: mobile ? 60 : 100,
zIndex: 1,
},
]}
></View>
)}
<AntDesign <AntDesign
name="close" name="close"
size={mobile ? 20 : 30} size={mobile ? 20 : 30}
@ -336,7 +340,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
color: "white", color: "white",
fontFamily: "bold", fontFamily: "bold",
marginTop: 5, marginTop: 5,
textAlign: ios ? "right" : "auto", textAlign: "right",
}} }}
> >
{user?.cellphone} {user?.cellphone}

@ -8,7 +8,6 @@ import tw from "tailwind-rn";
import fontSize from "../constants/fontSize"; import fontSize from "../constants/fontSize";
const Empty = ({ text, buttonText, buttonAction, theme }) => { const Empty = ({ text, buttonText, buttonAction, theme }) => {
console.log('first');
return ( return (
<View style={tw("flex-1 flex justify-center items-center")}> <View style={tw("flex-1 flex justify-center items-center")}>
<Text <Text

@ -141,7 +141,7 @@ const Navbar = ({
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
width={19.644} width={19.644}
height={30.908} height={30.908}
style={{ transform: [{ translateY: -15.454 }] }} style={{ transform: [{ translateY: -15.454 }, {scale: 1.3}] }}
> >
<Defs> <Defs>
<Pattern <Pattern

@ -2,6 +2,7 @@ import { ApiConfig } from "../constants/defaultValues";
import axios from "axios"; import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
import { asyncAwesomeAlert } from "../utils/AsyncWrappers";
let { baseUrl } = ApiConfig; let { baseUrl } = ApiConfig;
let access; let access;
@ -66,8 +67,12 @@ class Proxy {
let response = fetch(); let response = fetch();
dispatch({ type: url, data: response.data.data, params }); dispatch({ type: url, data: response.data.data, params });
return response.data.data; return response.data.data;
} }
return; return;
case 403:
asyncAwesomeAlert("", 'خطای ورود اطلاعات', {
showCancelButton: false,
});
default: default:
dispatch({ dispatch({
type: url.split("/")[0] + "/" + "error", type: url.split("/")[0] + "/" + "error",

@ -62,6 +62,9 @@ const user = (state = initialState, action) => {
case "user/loading": case "user/loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "user/error": case "user/error":
asyncAwesomeAlert("خطا", data.message, {
showCancelButton: false,
});
return { ...state, error : true }; return { ...state, error : true };
default: default:
return state; return state;

@ -527,7 +527,7 @@ function Book({
<Text <Text
style={[ style={[
{ {
fontSize: fontSize.sm, fontSize: fontSize.tiny,
color: "#275077", color: "#275077",
fontFamily: "regular", fontFamily: "regular",
}, },
@ -536,7 +536,6 @@ function Book({
> >
امتیازات و نظرات امتیازات و نظرات
</Text> </Text>
<Entypo name="chevron-small-left" size={20} color="#196EC0" />
</View> </View>
<Rates rate={book?.rate || 4} productId={book?.product[1]?.id} /> <Rates rate={book?.rate || 4} productId={book?.product[1]?.id} />
<Comments <Comments

@ -15,13 +15,14 @@ import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers";
//components //components
import Pressable from "../../../components/Pressable"; import Pressable from "../../../components/Pressable";
import Avatar from "../../../components/Avatar";
//assets //assets
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
const width = Dimensions.get("window").width; const {width} = Dimensions.get("window");
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
function Commnets({ function Commnets({
@ -142,16 +143,7 @@ const AddComment = ({ addComment, productId, ...props }) => {
behavior={ios ? "padding" : "height"} behavior={ios ? "padding" : "height"}
style={[tw("flex items-end")]} style={[tw("flex items-end")]}
> >
<View <Avatar source={null} size={width / 5.5} />
style={[
tw("rounded-full"),
{
width: 70,
height: 70,
backgroundColor: Colors.theme1[colorScheme].grayE3,
},
]}
></View>
<TextInput <TextInput
style={[ style={[
tw("w-full mt-4 px-2 rounded-md"), tw("w-full mt-4 px-2 rounded-md"),

@ -1,27 +1,33 @@
import { View, Text, Image, Platform, Pressable, BackHandler } from "react-native"; import { View, Text, Platform, Pressable, Dimensions } from "react-native";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import {user} from "../../../redux/actions"; import { user } from "../../../redux/actions";
import Svg, { Path } from "react-native-svg"; import Svg, { Path } from "react-native-svg";
import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers"; import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
//components
import Avatar from "../../../components/Avatar";
//style //style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors"; import Colors from "../../../constants/Colors";
//variables
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
const {width} = Dimensions.get("window");
const User = ({ user, mobile, theme, logout }) => { const User = ({ user, mobile, theme }) => {
const [dropdown, setDropdown] = React.useState(true); const [dropdown, setDropdown] = React.useState(true);
const navigation = useNavigation(); const navigation = useNavigation();
React.useEffect(() => { React.useEffect(() => {
if(!user){ if (!user) {
navigation.navigate('Login'); navigation.navigate("Login");
} }
},[user]); }, [user]);
return ( return (
<View style={tw(`w-full ${ios ? "items-end" : ""}`)}> <View style={tw(`w-full ${ios ? "items-end" : ""}`)}>
@ -32,28 +38,8 @@ const User = ({ user, mobile, theme, logout }) => {
onPress={() => setDropdown(!dropdown)} onPress={() => setDropdown(!dropdown)}
> >
<View style={tw(`flex items-center flex-row-reverse`)}> <View style={tw(`flex items-center flex-row-reverse`)}>
{user?.picFileIds ? ( <Avatar source={user.picFileIds} size={width / 5.5} />
<Image <View style={tw(`flex mr-2 ${ios ? "items-end" : ""}`)}>
source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
style={[
tw("rounded-full"),
{ width: mobile ? 70 : 140, height: mobile ? 70 : 140 },
]}
/>
) : (
<View
style={[
tw("rounded-full"),
{
width: mobile ? 70 : 140,
height: mobile ? 70 : 140,
zIndex: 1,
backgroundColor: "#ddd",
},
]}
></View>
)}
<View style={tw(`flex mr-1 ${ios ? "items-end" : ""}`)}>
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.lg : fontSize.xl5, fontSize: mobile ? fontSize.lg : fontSize.xl5,
@ -69,6 +55,7 @@ const User = ({ user, mobile, theme, logout }) => {
color: Colors.theme1[theme].gray20, color: Colors.theme1[theme].gray20,
fontFamily: "light", fontFamily: "light",
marginTop: mobile ? 3 : 6, marginTop: mobile ? 3 : 6,
textAlign: "right",
}} }}
> >
{user?.cellphone} {user?.cellphone}
@ -141,5 +128,4 @@ const mapStateToProps = (state) => ({
theme: state.publicApi.theme, theme: state.publicApi.theme,
}); });
export default connect(mapStateToProps)(User); export default connect(mapStateToProps)(User);

@ -9,6 +9,7 @@ import {
SafeAreaView, SafeAreaView,
StatusBar, StatusBar,
LayoutAnimation, LayoutAnimation,
ActivityIndicator,
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
@ -28,7 +29,7 @@ import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors"; import Colors from "../../constants/Colors";
import tw from "tailwind-rn"; import tw from "tailwind-rn";
function Profile({ mobile, theme, logout }) { function Profile({ mobile, theme, logout, loading }) {
const navigation = useNavigation(); const navigation = useNavigation();
const [position, setPosition] = useState("100%"); const [position, setPosition] = useState("100%");
@ -78,33 +79,41 @@ function Profile({ mobile, theme, logout }) {
<View <View
style={[tw(`flex items-center w-full pb-3 mb-3 flex-row-reverse`)]} style={[tw(`flex items-center w-full pb-3 mb-3 flex-row-reverse`)]}
> >
<Svg {loading ? (
data-name="vuesax/linear/logout" <ActivityIndicator
xmlns="http://www.w3.org/2000/svg" color={Colors.theme1[theme].redC0}
width={34.034} size={fontSize.xl}
height={34.034} />
style={{ transform : [{scale : 0.8}] }} ) : (
> <Svg
<G data-name="vuesax/linear/logout"
fill="none" xmlns="http://www.w3.org/2000/svg"
stroke="#ff2020" width={34.034}
strokeLinecap="round" height={34.034}
strokeLinejoin="round" style={{ transform: [{ scale: 0.8 }] }}
strokeWidth={2}
> >
<Path d="M12.621 10.721c.44-5.105 3.063-7.19 8.806-7.19h.184c6.339 0 8.877 2.538 8.877 8.877v9.246c.001 6.339-2.537 8.877-8.876 8.877h-.185c-5.7 0-8.324-2.056-8.792-7.076" /> <G
<Path fill="none"
data-name="Vector" stroke="#ff2020"
d="M21.272 17.017H5.134M8.296 12.267l-4.751 4.751 4.751 4.749" strokeLinecap="round"
/> strokeLinejoin="round"
</G> strokeWidth={2}
</Svg> >
<Path d="M12.621 10.721c.44-5.105 3.063-7.19 8.806-7.19h.184c6.339 0 8.877 2.538 8.877 8.877v9.246c.001 6.339-2.537 8.877-8.876 8.877h-.185c-5.7 0-8.324-2.056-8.792-7.076" />
<Path
data-name="Vector"
d="M21.272 17.017H5.134M8.296 12.267l-4.751 4.751 4.751 4.749"
/>
</G>
</Svg>
)}
<Text <Text
style={{ style={{
fontSize: mobile ? fontSize.base : fontSize.xl, fontSize: mobile ? fontSize.base : fontSize.xl,
fontFamily: "bold", fontFamily: "bold",
color: Colors.theme1[theme].redFF1, color: Colors.theme1[theme].redFF1,
marginRight : 4 marginRight: 4,
}} }}
> >
خروج از حساب کاربری خروج از حساب کاربری
@ -119,6 +128,7 @@ function Profile({ mobile, theme, logout }) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
theme: state.publicApi.theme, theme: state.publicApi.theme,
loading: state.user.loading,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -44,10 +44,7 @@ function Splash({
setOut(false); setOut(false);
BackHandler.exitApp(); BackHandler.exitApp();
} }
// if(isFocused){
// console.log('bi rabt');
// }
if(isFocused && !out){ if(isFocused && !out){
if (isLogin !== null) { if (isLogin !== null) {

@ -161,7 +161,7 @@ function Product({
<Divider type={"vertical"} /> <Divider type={"vertical"} />
</View> </View>
<CustomPressable <CustomPressable
title={`خرید با قیمت ${separate(book?.product[2]?.price)} تومان`} title={`خرید با قیمت ${separate(book?.product[2]?.price || ' ')} تومان`}
backgroundColor={Colors.theme1[theme].greenCF} backgroundColor={Colors.theme1[theme].greenCF}
color={"white"} color={"white"}
border={{ color: "#196EC0", width: 0 }} border={{ color: "#196EC0", width: 0 }}

@ -38,8 +38,6 @@ function VideoDisplay({ route, mobile, theme }) {
setPosition(position === "100%" ? "0%" : "100%"); setPosition(position === "100%" ? "0%" : "100%");
}; };
console.log(video);
return ( return (
<SafeAreaView <SafeAreaView
style={{ style={{

Loading…
Cancel
Save