From 73bb287197a8236c93403c8fa781c7c7e6391b00 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sun, 23 Jan 2022 03:11:40 +0330 Subject: [PATCH] reza added some change --- navigation/index.js | 4 +- package.json | 2 + src/components/BottomSheet.js | 13 ++ .../BottomSheetComponents/ProductQuestion.js | 110 +++++++++++++++ .../BottomSheetComponents/ProductReview.js | 110 +++++++++++++++ .../ProductSpecifications.js | 110 +++++++++++++++ src/components/Drawer.js | 3 +- src/components/Pressable.js | 12 +- src/screens/Activation/index.js | 128 ++++++++---------- src/screens/Contact/Box.js | 6 +- src/screens/Home/components/Header.js | 16 ++- src/screens/Product/components/Book.js | 61 +++++++-- src/screens/Product/components/LinkBox.js | 80 +++++++---- src/screens/QR/Scan/index.js | 2 +- src/screens/QRContent/index.js | 2 +- src/screens/ShoppingCart/index.js | 63 +++++---- src/screens/Splash/index.js | 3 +- src/screens/Tests/index.js | 38 ++++-- src/screens/Video/components/Season.js | 41 +++--- src/screens/Video/index.js | 12 +- .../VideoDisplay/components/Season/index.js | 41 +++--- src/screens/Videos/components/NewestVideo.js | 2 +- yarn.lock | 18 +++ 23 files changed, 669 insertions(+), 208 deletions(-) create mode 100644 src/components/BottomSheet.js create mode 100644 src/components/BottomSheetComponents/ProductQuestion.js create mode 100644 src/components/BottomSheetComponents/ProductReview.js create mode 100644 src/components/BottomSheetComponents/ProductSpecifications.js diff --git a/navigation/index.js b/navigation/index.js index 97b3eb8..1291aa3 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -102,6 +102,8 @@ const BottomTabNavigator = () => { name="VODTab" component={VODStackScreen} options={{ + unmountOnExit : true, + unmountOnBlur : true, title : "ویدئوها", tabBarIcon: ({ focused, color }) => focused ? ( @@ -185,7 +187,7 @@ const VODStackScreen = () => { return ( - + ); diff --git a/package.json b/package.json index a64b329..9a27c90 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,13 @@ "react-native-awesome-alerts": "^1.5.2", "react-native-openanything": "^0.0.6", "react-native-qrcode-scanner": "^1.5.4", + "react-native-raw-bottom-sheet": "^2.2.0", "react-native-restart": "^0.0.22", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.10.1", "react-native-select-dropdown": "^1.6.0", "react-native-web": "0.17.1", + "react-navigation-stack": "^2.10.4", "react-redux": "^7.2.6", "redux": "^4.1.2", "redux-logger": "^3.0.6", diff --git a/src/components/BottomSheet.js b/src/components/BottomSheet.js new file mode 100644 index 0000000..31eaab4 --- /dev/null +++ b/src/components/BottomSheet.js @@ -0,0 +1,13 @@ +import { View, Text } from 'react-native'; +import React from 'react'; + +const BottomSheet = () => { + return ( + + + + ); +}; + +export default BottomSheet; + diff --git a/src/components/BottomSheetComponents/ProductQuestion.js b/src/components/BottomSheetComponents/ProductQuestion.js new file mode 100644 index 0000000..8d0bd48 --- /dev/null +++ b/src/components/BottomSheetComponents/ProductQuestion.js @@ -0,0 +1,110 @@ +import { View, Text, ScrollView, Dimensions } from "react-native"; + +import React from "react"; +import fontSize from "../../constants/fontSize"; +import tw from "tailwind-rn"; + +const { width } = Dimensions.get("window"); + +const ProductQuestion = ({ list }) => { + const Property = ({ prop }) => { + return ( + + + + {persian[prop]} + + + + + {list[prop]} + + + + ); + }; + return ( + + refRBSheet.current.open()} + style={[ + tw( + "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" + ), + { + backgroundColor: "#50A9FF33", + }, + ]} + > + + مشخصات محصول + + + + {Object?.keys(list)?.map((prop, index) => ( + + ))} + + + ); +}; + +export default ProductQuestion; + +ProductQuestion.defaultProps = { + list: { + display: "IPS LCD 4K Samsung backlight", + weight: "2 کیلوگرم", + proccessor: "Intel core I7 11700H", + graphic: "Nvidia 3090TI 6GB", + audio: "Sonic master", + keyboard: "جزیره ای", + accessories: "کیف + کابل تبدیل برق شهری", + }, +}; + +const persian = { + display: "صفحه نمایش", + weight: "وزن", + proccessor: "پردازنده", + graphic: "پردازنده گرافیکی", + audio: "کارت صدا", + keyboard: "کیبرد", + accessories: "متعلقات جعبه", +}; diff --git a/src/components/BottomSheetComponents/ProductReview.js b/src/components/BottomSheetComponents/ProductReview.js new file mode 100644 index 0000000..9e7d382 --- /dev/null +++ b/src/components/BottomSheetComponents/ProductReview.js @@ -0,0 +1,110 @@ +import { View, Text, ScrollView, Dimensions } from "react-native"; + +import React from "react"; +import fontSize from "../../constants/fontSize"; +import tw from "tailwind-rn"; + +const { width } = Dimensions.get("window"); + +const ProductReviews = ({ list }) => { + const Property = ({ prop }) => { + return ( + + + + {persian[prop]} + + + + + {list[prop]} + + + + ); + }; + return ( + + refRBSheet.current.open()} + style={[ + tw( + "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" + ), + { + backgroundColor: "#50A9FF33", + }, + ]} + > + + مشخصات محصول + + + + {Object?.keys(list)?.map((prop, index) => ( + + ))} + + + ); +}; + +export default ProductReviews; + +ProductReviews.defaultProps = { + list: { + display: "IPS LCD 4K Samsung backlight", + weight: "2 کیلوگرم", + proccessor: "Intel core I7 11700H", + graphic: "Nvidia 3090TI 6GB", + audio: "Sonic master", + keyboard: "جزیره ای", + accessories: "کیف + کابل تبدیل برق شهری", + }, +}; + +const persian = { + display: "صفحه نمایش", + weight: "وزن", + proccessor: "پردازنده", + graphic: "پردازنده گرافیکی", + audio: "کارت صدا", + keyboard: "کیبرد", + accessories: "متعلقات جعبه", +}; diff --git a/src/components/BottomSheetComponents/ProductSpecifications.js b/src/components/BottomSheetComponents/ProductSpecifications.js new file mode 100644 index 0000000..595b959 --- /dev/null +++ b/src/components/BottomSheetComponents/ProductSpecifications.js @@ -0,0 +1,110 @@ +import { View, Text, ScrollView, Dimensions } from "react-native"; + +import React from "react"; +import fontSize from "../../constants/fontSize"; +import tw from "tailwind-rn"; + +const { width } = Dimensions.get("window"); + +const ProductSpecifications = ({ list }) => { + const Property = ({ prop }) => { + return ( + + + + {persian[prop]} + + + + + {list[prop]} + + + + ); + }; + return ( + + refRBSheet.current.open()} + style={[ + tw( + "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" + ), + { + backgroundColor: "#50A9FF33", + }, + ]} + > + + مشخصات محصول + + + + {Object?.keys(list)?.map((prop, index) => ( + + ))} + + + ); +}; + +export default ProductSpecifications; + +ProductSpecifications.defaultProps = { + list: { + display: "IPS LCD 4K Samsung backlight", + weight: "2 کیلوگرم", + proccessor: "Intel core I7 11700H", + graphic: "Nvidia 3090TI 6GB", + audio: "Sonic master", + keyboard: "جزیره ای", + accessories: "کیف + کابل تبدیل برق شهری", + }, +}; + +const persian = { + display: "صفحه نمایش", + weight: "وزن", + proccessor: "پردازنده", + graphic: "پردازنده گرافیکی", + audio: "کارت صدا", + keyboard: "کیبرد", + accessories: "متعلقات جعبه", +}; diff --git a/src/components/Drawer.js b/src/components/Drawer.js index 2c828ff..4c8e888 100644 --- a/src/components/Drawer.js +++ b/src/components/Drawer.js @@ -97,11 +97,12 @@ const Drawer = ({ position, setBoxPosition }) => { return ( diff --git a/src/components/Pressable.js b/src/components/Pressable.js index d77f12f..1f46e1f 100644 --- a/src/components/Pressable.js +++ b/src/components/Pressable.js @@ -1,9 +1,7 @@ import React from 'react'; -import {TouchableOpacity, Text, Dimensions} from 'react-native'; -import tw from 'tailwind-react-native-classnames'; - -const fullWidth = Dimensions.get('window').width; - +import {TouchableOpacity, Text} from 'react-native'; +import tw from 'tailwind-rn'; +import fontSize from '../constants/fontSize'; export default function Pressable1({ title, backgroundColor, @@ -16,7 +14,7 @@ export default function Pressable1({ onPress()} style={[ - tw.style('rounded-md py-3 flex flex-row justify-center mb-3'), + tw('rounded-md py-3 flex flex-row justify-center mb-3'), { backgroundColor: backgroundColor, borderWidth: border.width, @@ -24,7 +22,7 @@ export default function Pressable1({ width : width, }, ]}> - {title} + {title} ); } diff --git a/src/screens/Activation/index.js b/src/screens/Activation/index.js index 2ece875..185ebc2 100644 --- a/src/screens/Activation/index.js +++ b/src/screens/Activation/index.js @@ -1,19 +1,21 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import { View, Dimensions, - ScrollView, Image, TextInput, SafeAreaView, StatusBar, Platform, KeyboardAvoidingView, + TouchableWithoutFeedback, + Keyboard, } from "react-native"; +import { Header } from "@react-navigation/native-stack"; import { connect } from "react-redux"; import tw from "tailwind-rn"; import fontSize from "../../constants/fontSize"; -import Header from "../../components/Header"; +import TopHeader from "../../components/Header"; import Navbar from "../../components/Navbar"; import CustomPressable from "../../components/Pressable"; import Or from "../../components/Or"; @@ -36,41 +38,27 @@ function Activation({}) { }; return ( - - - - - + + + + -
- - - - - - - - - + + + + + + + + + ); } diff --git a/src/screens/Contact/Box.js b/src/screens/Contact/Box.js index ea64b64..d83dcb1 100644 --- a/src/screens/Contact/Box.js +++ b/src/screens/Contact/Box.js @@ -19,8 +19,8 @@ const Box = ({ info }) => { @@ -42,7 +42,7 @@ const Box = ({ info }) => { style={[ tw("self-start mt-2"), { - fontFamily: "light", + fontFamily: "bold", fontSize: fontSize.sm, color: info?.link?.color, }, diff --git a/src/screens/Home/components/Header.js b/src/screens/Home/components/Header.js index 0dbfa0b..e5f7aef 100644 --- a/src/screens/Home/components/Header.js +++ b/src/screens/Home/components/Header.js @@ -1,8 +1,8 @@ import React from "react"; import { View, Text, Pressable } from "react-native"; -import {Entypo} from '@expo/vector-icons'; +import { Entypo } from "@expo/vector-icons"; import { useNavigation } from "@react-navigation/native"; -import fontSize from '../../../constants/fontSize'; +import fontSize from "../../../constants/fontSize"; import tw from "tailwind-rn"; //Color @@ -16,16 +16,18 @@ const Header = ({ title, route }) => { style={[ { color: Color.theme1.light.blue5, - fontFamily : 'bold', - fontSize : fontSize.base + fontFamily: "bold", + fontSize: fontSize.base, }, ]} > {title} - navigation.navigate(route)}> - - + {route ? ( + navigation.navigate(route)}> + + + ) : null} ); }; diff --git a/src/screens/Product/components/Book.js b/src/screens/Product/components/Book.js index 0d7fdce..fb348f8 100644 --- a/src/screens/Product/components/Book.js +++ b/src/screens/Product/components/Book.js @@ -1,10 +1,12 @@ -import React, { useState } from "react"; +import React, { useState, useRef } from "react"; import { View, Text, Image, ScrollView, - TouchableOpacity + TouchableOpacity, + Dimensions, + StatusBar, } from "react-native"; import { useNavigation } from "@react-navigation/native"; import { Entypo } from "@expo/vector-icons"; @@ -13,11 +15,16 @@ import Description from "./Description"; import LinkBox from "./LinkBox"; import Comments from "./Comments"; import Rates from "./Rates"; +import ProductSpecifications from "../../../components/BottomSheetComponents/ProductSpecifications"; +import ProductReview from "../../../components/BottomSheetComponents/ProductReview"; +import ProductQuestion from "../../../components/BottomSheetComponents/ProductQuestion"; import tw from "tailwind-react-native-classnames"; import fontSize from "../../../constants/fontSize"; import { product, userProduct } from "../../../redux/actions"; import { connect } from "react-redux"; +const { height } = Dimensions.get("window"); + function Book({ book, grades, pushToCart, userId }) { const navigation = useNavigation(); const [type, setType] = useState(1); @@ -53,7 +60,7 @@ function Book({ book, grades, pushToCart, userId }) { @@ -81,7 +88,7 @@ function Book({ book, grades, pushToCart, userId }) { color: "#196EC0", textAlign: "center", fontSize: fontSize.sm, - fontFamily: "light", + fontFamily: "regular", }} > {" "} @@ -97,7 +104,7 @@ function Book({ book, grades, pushToCart, userId }) { color: "#196EC0", textAlign: "center", fontSize: fontSize.sm, - fontFamily: "light", + fontFamily: "regular", }} > {" "} @@ -113,7 +120,7 @@ function Book({ book, grades, pushToCart, userId }) { color: "#196EC0", textAlign: "center", fontSize: fontSize.sm, - fontFamily: "light", + fontFamily: "regular", }} > {" "} @@ -121,11 +128,15 @@ function Book({ book, grades, pushToCart, userId }) { - + نسخه محصول را انتخاب کنید @@ -171,21 +182,26 @@ function Book({ book, grades, pushToCart, userId }) { color={"#196EC0"} border={{ color: "#196EC0", width: 1 }} width={"33%"} + onPress={() => {}} /> navigation.navigate("Video", {id : book.id})} + onPress={() => navigation.navigate("Video", { id: book.id })} > مشاهده دوره ویدئویی این محصول @@ -195,9 +211,24 @@ function Book({ book, grades, pushToCart, userId }) { {book.product[type].description && ( )} - - - + } + height={height - height / 4} + /> + } + height={height - height / 4} + /> + } + height={height - height / 4} + /> {product.rates && ( - + refRBSheet.current.open()} style={[ - {fontSize: fontSize.sm, color: '#275077', fontFamily: 'regular'}, - tw.style(''), - ]}> - {title} - - - + tw.style( + "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-3" + ), + { + backgroundColor: "#50A9FF33", + }, + ]} + > + + {title} + + + + + {component} + + ); } diff --git a/src/screens/QR/Scan/index.js b/src/screens/QR/Scan/index.js index 490dc35..034587b 100644 --- a/src/screens/QR/Scan/index.js +++ b/src/screens/QR/Scan/index.js @@ -13,7 +13,7 @@ import { BarCodeScanner } from "expo-barcode-scanner"; import Colors from "../../../constants/Colors"; import { Entypo } from "@expo/vector-icons"; -const { width, height } = Dimensions.get("window"); +const { width, height } = Dimensions.get("screen"); //assets import laptopImage from "../assets/laptop.png"; diff --git a/src/screens/QRContent/index.js b/src/screens/QRContent/index.js index 1c1832b..21acb92 100644 --- a/src/screens/QRContent/index.js +++ b/src/screens/QRContent/index.js @@ -16,7 +16,7 @@ const {height} = Dimensions.get("window"); function QRContent({ route, getQrData, data, grades }) { useEffect(() => { - getQrData({ tail: "zist10-17" }); + getQrData({ tail: route.params.data }); }, []); useEffect(() => { diff --git a/src/screens/ShoppingCart/index.js b/src/screens/ShoppingCart/index.js index 790ce12..18dd750 100644 --- a/src/screens/ShoppingCart/index.js +++ b/src/screens/ShoppingCart/index.js @@ -11,7 +11,7 @@ import { LayoutAnimation, } from "react-native"; import { connect } from "react-redux"; -import { userProduct, userFactor} from "../../redux/actions"; +import { userProduct, userFactor } from "../../redux/actions"; import { Ionicons } from "@expo/vector-icons"; import Product from "./components/Product"; import Code from "./components/Code"; @@ -20,7 +20,7 @@ import Navbar from "../../components/Navbar"; import Drawer from "../../components/Drawer"; import tw from "tailwind-react-native-classnames"; -const width = Dimensions.get("window").width; +const { width, height } = Dimensions.get("window"); const PriceStatus = ({ name, value, type }) => { return ( @@ -67,6 +67,7 @@ function ShoppingCart({ userId, list, factorInfo, getList, getFactorInfo }) { style={{ paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, position: "relative", + height: height, }} > - {list.length > 0 && list.map((product, index) => ( - - ))} + {list.length > 0 && + list.map((product, index) => ( + + ))} - {factorInfo?.payPrice + ' ' + 'تومان'} + {factorInfo?.payPrice + " " + "تومان"} - - + - هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود - - - - + + هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود + + + + + + ); @@ -183,6 +188,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart); const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 100, + flex: 1, + position: "relative", }, container: { width: Dimensions.get("window").width, diff --git a/src/screens/Splash/index.js b/src/screens/Splash/index.js index 822a07b..ea40497 100644 --- a/src/screens/Splash/index.js +++ b/src/screens/Splash/index.js @@ -10,7 +10,8 @@ function Splash({ navigation, isLogin }) { useEffect(() => { if (isLogin !== null) { setTimeout(() => { - isLogin === false + // isLogin === false + 0 ? navigation.navigate("Login") : navigation.navigate("Root"); }, 3000); diff --git a/src/screens/Tests/index.js b/src/screens/Tests/index.js index d09eecc..3033e04 100644 --- a/src/screens/Tests/index.js +++ b/src/screens/Tests/index.js @@ -1,12 +1,34 @@ -import { View, Text } from 'react-native'; -import React from 'react'; +import { View, Text, Button } from "react-native"; +import React, {useRef} from "react"; +import RBSheet from "react-native-raw-bottom-sheet"; -const Tests = () => { +export default function Test() { + const refRBSheet = useRef(); return ( - - + +