From 6730829161699cca26388e62776f6d96fea902ba Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Thu, 12 May 2022 21:44:50 +0430 Subject: [PATCH] reza fixed some page on tablet mode --- navigation/index.js | 11 +- src/components/AlertModal.js | 3 + src/redux/actions/public.js | 16 +- src/redux/reducers/public.js | 5 +- src/redux/reducers/userFactor.js | 1 - src/screens/AR/components/Book.js | 5 +- src/screens/Home/components/Blogs.js | 2 +- src/screens/Home/components/MyBooks.js | 14 +- src/screens/Product/components/Book.js | 25 +- src/screens/Product/index.js | 2 + src/screens/Products/components/Main.js | 13 +- src/screens/ShoppingCart/components/Code.js | 6 +- src/screens/ShoppingCart/index.js | 311 ++++++++++---------- 13 files changed, 228 insertions(+), 186 deletions(-) diff --git a/navigation/index.js b/navigation/index.js index 03277a6..e273c36 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { Restart } from "fiction-expo-restart"; -import { I18nManager, StatusBar } from "react-native"; +import { I18nManager, StatusBar, Dimensions } from "react-native"; import * as Linking from "expo-linking"; import Svg, { G, Path } from "react-native-svg"; import { NavigationContainer } from "@react-navigation/native"; @@ -583,11 +583,11 @@ const prefix = Linking.createURL("/"); const Stack = createNativeStackNavigator(); const Navigation = ({ getStatus, - isLogin, userProducts, ltr, setLTR, theme, + setOrientation, }) => { const linking = { prefixes: [prefix], @@ -610,6 +610,11 @@ const Navigation = ({ ); }, []); + Dimensions.addEventListener("change", () => { + const dim = Dimensions.get("window"); + setOrientation(dim.height > dim.width ? "portrait" : "landscape"); + }); + return ( ({ - isLogin: state.user.status, userProducts: state.userProduct.list, theme: state.publicApi.theme, ltr: state.publicApi.ltr, @@ -660,6 +664,7 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = { getStatus: user.getStatus, setLTR: publicApi.setLTR, + setOrientation: publicApi.setOrientation, }; export default connect(mapStateToProps, mapDispatchToProps)(Navigation); diff --git a/src/components/AlertModal.js b/src/components/AlertModal.js index 03eee00..5822846 100644 --- a/src/components/AlertModal.js +++ b/src/components/AlertModal.js @@ -97,6 +97,9 @@ const AlertModal = (props) => { ? Colors.theme1.gray20 : Colors.theme1.white, }} + overlayStyle={{ + width : width, + }} closeOnTouchOutside={alert.closeOnTouchOutside} closeOnHardwareBackPress={alert.closeOnHardwareBackPress} showCancelButton={alert.showCancelButton} diff --git a/src/redux/actions/public.js b/src/redux/actions/public.js index b46e0d3..9bd7d7f 100644 --- a/src/redux/actions/public.js +++ b/src/redux/actions/public.js @@ -1,13 +1,15 @@ import proxy from "../proxy"; const publicApi = { + setOrientation: (data) => async (dispatch) => + await dispatch({ type: "public/setOrientation", data }), setLTR: (data) => async (dispatch) => - await dispatch({ type: "public/setLtr", data: data }), + await dispatch({ type: "public/setLtr", data }), setIsDark: (data) => async (dispatch) => - await dispatch({ type: "public/setIsDark", data: data }), + await dispatch({ type: "public/setIsDark", data }), getHomeData: (data) => async (dispatch) => await proxy.get("public/homePage", data, { dispatch }), setFaqActive: (data) => async (dispatch) => - await dispatch({ type: "public/faq/activate", data: data }), + await dispatch({ type: "public/faq/activate", data }), bookInfo: (data = {}, data2 = {}) => async (dispatch) => { @@ -28,7 +30,7 @@ const publicApi = { getBlogInfo: (data) => async (dispatch) => await proxy.get("public/blogInfo", data, { dispatch }), setSubscribe: (data) => async (dispatch) => - await dispatch({ type: "public/setSubscribe", data: data }), + await dispatch({ type: "public/setSubscribe", data }), getProvince: (data = {}) => async (dispatch) => @@ -38,15 +40,15 @@ const publicApi = { async (dispatch) => await proxy.get("public/city", data, { dispatch }), selectMenu: (data) => async (dispatch) => - await dispatch({ type: "public/selectMenu", data: data }), + await dispatch({ type: "public/selectMenu", data }), getHeader: (data = {}) => async (dispatch) => await proxy.get("public/VOD/homePage", data, { dispatch }), activeCategory: (data) => async (dispatch) => - await dispatch({ type: "active/category", data: data }), + await dispatch({ type: "active/category", data }), setVideoActive: (data) => async (dispatch) => - await dispatch({ type: "active/video", data: data }), + await dispatch({ type: "active/video", data }), getArList: (data, history) => async (dispatch) => await proxy.get("public/ar", data, { history, dispatch }), }; diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index eb31f56..2a788c1 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -1,12 +1,13 @@ import { Dimensions } from "react-native"; import AsyncStorage from "@react-native-async-storage/async-storage"; -const width = Dimensions.get("window").width; +const { width, height } = Dimensions.get("window"); const initialState = { ltr: false, theme: null, mobile: width < 720, + orientation: height > width ? "portrait" : "landscape", homeData: [], newProducts: [], levels: [], @@ -78,6 +79,8 @@ const grades = [ const publicApi = (state = initialState, action) => { let { type, data } = action; switch (type) { + case "public/setOrientation": + return { ...state, orientation: data, error: null, loading: false }; case "public/setLtr": return { ...state, ltr: true }; case "public/setIsDark": diff --git a/src/redux/reducers/userFactor.js b/src/redux/reducers/userFactor.js index cab3709..a19f59d 100644 --- a/src/redux/reducers/userFactor.js +++ b/src/redux/reducers/userFactor.js @@ -54,7 +54,6 @@ export default function userFactor(state = initialState, action) { case "userFactor/deleteUserOffCode": return { ...state, loading: false, error: null }; case "userFactor/payment": - console.log(data); return { ...state, loading: false, error: null, isVerified: false }; case "userFactor/verifyVOD": return { ...state, loading: false, error: null, isVerified: true }; diff --git a/src/screens/AR/components/Book.js b/src/screens/AR/components/Book.js index 61606b2..7fb6e7c 100644 --- a/src/screens/AR/components/Book.js +++ b/src/screens/AR/components/Book.js @@ -10,7 +10,7 @@ import Colors from "../../../constants/Colors"; const { width, height } = Dimensions.get("window"); -const Book = ({ book, mobile, theme }) => { +const Book = ({ book, mobile, theme, orientation }) => { return ( { style={[ tw("rounded-sm w-full"), { - height: mobile ? (width - 32) / 1.5 : 200, + height: mobile ? (width - 32) / 1.5 : height / 4, flex: 1, }, ]} @@ -55,6 +55,7 @@ const Book = ({ book, mobile, theme }) => { const mapStateToProps = (state) => ({ mobile: state.publicApi.mobile, theme: state.publicApi.theme, + orientation: state.publicApi.orientation, }); export default connect(mapStateToProps)(Book); diff --git a/src/screens/Home/components/Blogs.js b/src/screens/Home/components/Blogs.js index 121a5dd..2d08ff7 100644 --- a/src/screens/Home/components/Blogs.js +++ b/src/screens/Home/components/Blogs.js @@ -61,7 +61,7 @@ const Blog = ({ blog, mobile, theme }) => { > (book?.productType === 2 || book?.productType === 3) && @@ -61,7 +62,7 @@ function MyBooks({ books, grades, theme }) { inverted={true} data={books?.filter((book) => book?.condition >= 2)} renderItem={({ item }) => ( - + )} keyExtractor={(book) => book?.id} /> @@ -70,7 +71,7 @@ function MyBooks({ books, grades, theme }) { ) : null; } -const Book = ({ book, grades, theme }) => { +const Book = ({ book, grades, theme, mobile }) => { const actions = { 3: () => Linking.openURL(`https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`), @@ -83,7 +84,7 @@ const Book = ({ book, grades, theme }) => { style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)} onPress={actions[book?.productType]} > - + { resizeMode="contain" style={[ { - width: 110, + width: mobile ? 110 : height / 5 * 3 / 4, flex: 1, }, ]} @@ -131,6 +132,7 @@ const Book = ({ book, grades, theme }) => { const mapStateToProps = (state) => ({ grades: state.publicApi.grades, theme: state.publicApi.theme, + mobile: state.publicApi.mobile, }); export default connect(mapStateToProps)(MyBooks); diff --git a/src/screens/Product/components/Book.js b/src/screens/Product/components/Book.js index b4ee2ef..677d370 100644 --- a/src/screens/Product/components/Book.js +++ b/src/screens/Product/components/Book.js @@ -26,7 +26,6 @@ import tw from "tailwind-rn"; import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; -const { height, width } = Dimensions.get("window"); const ios = Platform.OS === "ios"; function Book({ @@ -39,7 +38,9 @@ function Book({ mobile, userProducts, theme, + orientation, }) { + const [width, setWidth] = React.useState(Dimensions.get("window").width); const navigation = useNavigation(); const [type, setType] = useState(1); const [whichTypeAdded, setWhichTypeAdded] = React.useState(null); @@ -72,8 +73,6 @@ function Book({ )?.length; }, [userProducts, book]); - console.log(physicalAvailabileInCart); - const digitalAvailabileInCart = React.useMemo(() => { return userProducts?.filter( (product) => @@ -136,7 +135,10 @@ function Book({ }, [userProducts]); return ( - + setWidth(Dimensions.get("window").width)} + > {!mobile ? : null} {/* {imageSlider ? : null} */} @@ -145,10 +147,20 @@ function Book({ resizeMode="contain" style={[ tw("rounded-sm"), - { height: ((width / 3) * 4) / 2.6, width: width / 3 }, + { + height: mobile + ? ((width / 3) * 4) / 2.6 + : orientation === "portrait" + ? ((width / 4) * 4) / 2.6 + : ((width / 6) * 4) / 2.6, + width: mobile + ? width / 3 + : orientation === "portrait" + ? width / 4 + : width / 6, + }, ]} /> - ({ userProductsLoading: state.userProduct.loading, userFavoriteLoading: state.userFavorite.loading, mobile: state.publicApi.mobile, + orientation: state.publicApi.orientation, theme: state.publicApi.theme, }); diff --git a/src/screens/Product/index.js b/src/screens/Product/index.js index b32767a..bb21f72 100644 --- a/src/screens/Product/index.js +++ b/src/screens/Product/index.js @@ -13,6 +13,8 @@ import { book } from "../../redux/actions"; import { connect } from "react-redux"; import Navbar from "../../components/Navbar"; +const { height, width } = Dimensions.get("window"); + function Product({ route, book, getBook, grades }) { useEffect(() => { getBook({ id: route.params.id, vod: true }); diff --git a/src/screens/Products/components/Main.js b/src/screens/Products/components/Main.js index 9c1a1ac..139f190 100644 --- a/src/screens/Products/components/Main.js +++ b/src/screens/Products/components/Main.js @@ -18,7 +18,7 @@ import fontSize from "../../../constants/fontSize"; const ios = Platform.OS === "ios"; -const Main = ({ books, filterOptions, grades, mobile, theme }) => { +const Main = ({ books, filterOptions, grades, mobile, theme, orientation }) => { const [width, setWidth] = React.useState(Dimensions.get("window").width); const navigation = useNavigation(); const [filterLoading, setFilterLoading] = React.useState(false); @@ -266,7 +266,11 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => { key={product?.product[1]?.id} style={[ { - width: mobile ? width / 2 - 25 : width / 3.2, + width: mobile + ? width / 2 - 25 + : orientation === "portrait" + ? width / 4.2 + : width / 5.2, marginBottom: 15, borderWidth: 1, borderColor: @@ -293,7 +297,9 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => { flex: 1, height: mobile ? ((width / 2 - 25) * 4) / 2.9 - : ((width / 3.2) * 16) / 11, + : orientation === "portrait" + ? ((width / 4.2) * 16) / 11 + : ((width / 5.2) * 16) / 11, }, ]} /> @@ -392,6 +398,7 @@ const mapStateToProps = (state) => ({ filterOptions: state.book.filterOptions, mobile: state.publicApi.mobile, theme: state.publicApi.theme, + orientation: state.publicApi.orientation, }); const mapDispatchToProps = {}; diff --git a/src/screens/ShoppingCart/components/Code.js b/src/screens/ShoppingCart/components/Code.js index 0d0bee6..ebe2cb8 100644 --- a/src/screens/ShoppingCart/components/Code.js +++ b/src/screens/ShoppingCart/components/Code.js @@ -16,7 +16,7 @@ import fontSize from "../../../constants/fontSize"; import Colors from "../../../constants/Colors"; import tw from "tailwind-rn"; -function Code({ codeId, setCodeId, theme, loading }) { +function Code({ codeId, setCodeId, theme, loading, mobile }) { const [value, setValue] = React.useState(codeId || ""); const [requestFlag, setRequestFlag] = React.useState(false); @@ -62,11 +62,12 @@ function Code({ codeId, setCodeId, theme, loading }) { setOff()} style={[ - tw("py-3 px-5"), + tw("py-3 px-5 flex justify-center items-center"), { backgroundColor: Colors.theme1.greenCF, borderTopLeftRadius: 1, borderBottomLeftRadius: 1, + width : mobile ? "auto" : "20%" }, ]} > @@ -96,6 +97,7 @@ const mapStateToProps = (state) => ({ codeId: state.userFactor.info?.codeId, loading: state.userFactor.loading, theme: state.publicApi.theme, + mobile : state.publicApi.mobile }); const mapDispatchToProps = { diff --git a/src/screens/ShoppingCart/index.js b/src/screens/ShoppingCart/index.js index b83cb9d..f8db8c8 100644 --- a/src/screens/ShoppingCart/index.js +++ b/src/screens/ShoppingCart/index.js @@ -9,6 +9,7 @@ import { SafeAreaView, StatusBar, LayoutAnimation, + KeyboardAvoidingView, Appearance, } from "react-native"; import { connect } from "react-redux"; @@ -128,89 +129,75 @@ function ShoppingCart({ style={{ paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, position: "relative", - height: height, + flex: 1, }} > - - - {list?.filter((product) => product?.condition < 2)?.length ? ( - - {list - ?.sort((a, b) => a?.id - b?.id) - ?.map((product, index) => - product?.condition < 2 ? ( - - ) : null - )} - - - - - - - + + + {list?.filter((product) => product?.condition < 2)?.length ? ( + - a?.id - b?.id) + ?.map((product, index) => + product?.condition < 2 ? ( + + ) : null + )} + + + + + + + - جمع کل سبد خرید - - - {isEmpty ? 0 : separate(factorInfo?.payPrice || "")} - - - تومان + جمع کل سبد خرید + + + {isEmpty ? 0 : separate(factorInfo?.payPrice || "")} + + + تومان + + - - - - + - هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود - - + هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود + + + + + + isEmpty + ? asyncAwesomeAlert("خطا", "سبد خرید شما خالی است.", { + showCancelButton: false, + }) + : hasPhysical + ? navigation.navigate("DeliveryForm") + : payFactor({ userId }) } /> - - - - isEmpty - ? asyncAwesomeAlert("خطا", "سبد خرید شما خالی است.", { - showCancelButton: false, - }) - : hasPhysical - ? navigation.navigate("DeliveryForm") - : payFactor({ userId }) - } - /> - - - ) : ( - navigation.navigate("Products")} - /> - )} + + + ) : ( + navigation.navigate("Products")} + /> + )} + ); }