reza fixed some page on tablet mode

master
Reza_ashrafi 2 years ago
parent 86cde35622
commit 6730829161
  1. 11
      navigation/index.js
  2. 3
      src/components/AlertModal.js
  3. 16
      src/redux/actions/public.js
  4. 5
      src/redux/reducers/public.js
  5. 1
      src/redux/reducers/userFactor.js
  6. 5
      src/screens/AR/components/Book.js
  7. 2
      src/screens/Home/components/Blogs.js
  8. 14
      src/screens/Home/components/MyBooks.js
  9. 25
      src/screens/Product/components/Book.js
  10. 2
      src/screens/Product/index.js
  11. 13
      src/screens/Products/components/Main.js
  12. 6
      src/screens/ShoppingCart/components/Code.js
  13. 5
      src/screens/ShoppingCart/index.js

@ -1,6 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { Restart } from "fiction-expo-restart"; 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 * as Linking from "expo-linking";
import Svg, { G, Path } from "react-native-svg"; import Svg, { G, Path } from "react-native-svg";
import { NavigationContainer } from "@react-navigation/native"; import { NavigationContainer } from "@react-navigation/native";
@ -583,11 +583,11 @@ const prefix = Linking.createURL("/");
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
const Navigation = ({ const Navigation = ({
getStatus, getStatus,
isLogin,
userProducts, userProducts,
ltr, ltr,
setLTR, setLTR,
theme, theme,
setOrientation,
}) => { }) => {
const linking = { const linking = {
prefixes: [prefix], prefixes: [prefix],
@ -610,6 +610,11 @@ const Navigation = ({
); );
}, []); }, []);
Dimensions.addEventListener("change", () => {
const dim = Dimensions.get("window");
setOrientation(dim.height > dim.width ? "portrait" : "landscape");
});
return ( return (
<NavigationContainer linking={linking}> <NavigationContainer linking={linking}>
<Stack.Navigator <Stack.Navigator
@ -652,7 +657,6 @@ const Navigation = ({
}; };
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isLogin: state.user.status,
userProducts: state.userProduct.list, userProducts: state.userProduct.list,
theme: state.publicApi.theme, theme: state.publicApi.theme,
ltr: state.publicApi.ltr, ltr: state.publicApi.ltr,
@ -660,6 +664,7 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = { const mapDispatchToProps = {
getStatus: user.getStatus, getStatus: user.getStatus,
setLTR: publicApi.setLTR, setLTR: publicApi.setLTR,
setOrientation: publicApi.setOrientation,
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Navigation); export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

@ -97,6 +97,9 @@ const AlertModal = (props) => {
? Colors.theme1.gray20 ? Colors.theme1.gray20
: Colors.theme1.white, : Colors.theme1.white,
}} }}
overlayStyle={{
width : width,
}}
closeOnTouchOutside={alert.closeOnTouchOutside} closeOnTouchOutside={alert.closeOnTouchOutside}
closeOnHardwareBackPress={alert.closeOnHardwareBackPress} closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
showCancelButton={alert.showCancelButton} showCancelButton={alert.showCancelButton}

@ -1,13 +1,15 @@
import proxy from "../proxy"; import proxy from "../proxy";
const publicApi = { const publicApi = {
setOrientation: (data) => async (dispatch) =>
await dispatch({ type: "public/setOrientation", data }),
setLTR: (data) => async (dispatch) => setLTR: (data) => async (dispatch) =>
await dispatch({ type: "public/setLtr", data: data }), await dispatch({ type: "public/setLtr", data }),
setIsDark: (data) => async (dispatch) => setIsDark: (data) => async (dispatch) =>
await dispatch({ type: "public/setIsDark", data: data }), await dispatch({ type: "public/setIsDark", data }),
getHomeData: (data) => async (dispatch) => getHomeData: (data) => async (dispatch) =>
await proxy.get("public/homePage", data, { dispatch }), await proxy.get("public/homePage", data, { dispatch }),
setFaqActive: (data) => async (dispatch) => setFaqActive: (data) => async (dispatch) =>
await dispatch({ type: "public/faq/activate", data: data }), await dispatch({ type: "public/faq/activate", data }),
bookInfo: bookInfo:
(data = {}, data2 = {}) => (data = {}, data2 = {}) =>
async (dispatch) => { async (dispatch) => {
@ -28,7 +30,7 @@ const publicApi = {
getBlogInfo: (data) => async (dispatch) => getBlogInfo: (data) => async (dispatch) =>
await proxy.get("public/blogInfo", data, { dispatch }), await proxy.get("public/blogInfo", data, { dispatch }),
setSubscribe: (data) => async (dispatch) => setSubscribe: (data) => async (dispatch) =>
await dispatch({ type: "public/setSubscribe", data: data }), await dispatch({ type: "public/setSubscribe", data }),
getProvince: getProvince:
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>
@ -38,15 +40,15 @@ const publicApi = {
async (dispatch) => async (dispatch) =>
await proxy.get("public/city", data, { dispatch }), await proxy.get("public/city", data, { dispatch }),
selectMenu: (data) => async (dispatch) => selectMenu: (data) => async (dispatch) =>
await dispatch({ type: "public/selectMenu", data: data }), await dispatch({ type: "public/selectMenu", data }),
getHeader: getHeader:
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>
await proxy.get("public/VOD/homePage", data, { dispatch }), await proxy.get("public/VOD/homePage", data, { dispatch }),
activeCategory: (data) => async (dispatch) => activeCategory: (data) => async (dispatch) =>
await dispatch({ type: "active/category", data: data }), await dispatch({ type: "active/category", data }),
setVideoActive: (data) => async (dispatch) => setVideoActive: (data) => async (dispatch) =>
await dispatch({ type: "active/video", data: data }), await dispatch({ type: "active/video", data }),
getArList: (data, history) => async (dispatch) => getArList: (data, history) => async (dispatch) =>
await proxy.get("public/ar", data, { history, dispatch }), await proxy.get("public/ar", data, { history, dispatch }),
}; };

@ -1,12 +1,13 @@
import { Dimensions } from "react-native"; import { Dimensions } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
const width = Dimensions.get("window").width; const { width, height } = Dimensions.get("window");
const initialState = { const initialState = {
ltr: false, ltr: false,
theme: null, theme: null,
mobile: width < 720, mobile: width < 720,
orientation: height > width ? "portrait" : "landscape",
homeData: [], homeData: [],
newProducts: [], newProducts: [],
levels: [], levels: [],
@ -78,6 +79,8 @@ const grades = [
const publicApi = (state = initialState, action) => { const publicApi = (state = initialState, action) => {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "public/setOrientation":
return { ...state, orientation: data, error: null, loading: false };
case "public/setLtr": case "public/setLtr":
return { ...state, ltr: true }; return { ...state, ltr: true };
case "public/setIsDark": case "public/setIsDark":

@ -54,7 +54,6 @@ export default function userFactor(state = initialState, action) {
case "userFactor/deleteUserOffCode": case "userFactor/deleteUserOffCode":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "userFactor/payment": case "userFactor/payment":
console.log(data);
return { ...state, loading: false, error: null, isVerified: false }; return { ...state, loading: false, error: null, isVerified: false };
case "userFactor/verifyVOD": case "userFactor/verifyVOD":
return { ...state, loading: false, error: null, isVerified: true }; return { ...state, loading: false, error: null, isVerified: true };

@ -10,7 +10,7 @@ import Colors from "../../../constants/Colors";
const { width, height } = Dimensions.get("window"); const { width, height } = Dimensions.get("window");
const Book = ({ book, mobile, theme }) => { const Book = ({ book, mobile, theme, orientation }) => {
return ( return (
<Pressable <Pressable
style={[ style={[
@ -29,7 +29,7 @@ const Book = ({ book, mobile, theme }) => {
style={[ style={[
tw("rounded-sm w-full"), tw("rounded-sm w-full"),
{ {
height: mobile ? (width - 32) / 1.5 : 200, height: mobile ? (width - 32) / 1.5 : height / 4,
flex: 1, flex: 1,
}, },
]} ]}
@ -55,6 +55,7 @@ const Book = ({ book, mobile, theme }) => {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
theme: state.publicApi.theme, theme: state.publicApi.theme,
orientation: state.publicApi.orientation,
}); });
export default connect(mapStateToProps)(Book); export default connect(mapStateToProps)(Book);

@ -61,7 +61,7 @@ const Blog = ({ blog, mobile, theme }) => {
> >
<Image <Image
source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }} source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
resizeMode="contain" resizeMode="cover"
style={[ style={[
{ {
flex: 1, flex: 1,

@ -6,6 +6,7 @@ import {
FlatList, FlatList,
Platform, Platform,
Linking, Linking,
Dimensions,
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -18,8 +19,8 @@ import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize"; import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
const { width, height } = Dimensions.get("window");
function MyBooks({ books, grades, theme }) { function MyBooks({ books, grades, theme, mobile }) {
return books?.filter( return books?.filter(
(book) => (book) =>
(book?.productType === 2 || book?.productType === 3) && (book?.productType === 2 || book?.productType === 3) &&
@ -61,7 +62,7 @@ function MyBooks({ books, grades, theme }) {
inverted={true} inverted={true}
data={books?.filter((book) => book?.condition >= 2)} data={books?.filter((book) => book?.condition >= 2)}
renderItem={({ item }) => ( renderItem={({ item }) => (
<Book book={item} grades={grades} theme={theme} /> <Book book={item} grades={grades} theme={theme} mobile={mobile} />
)} )}
keyExtractor={(book) => book?.id} keyExtractor={(book) => book?.id}
/> />
@ -70,7 +71,7 @@ function MyBooks({ books, grades, theme }) {
) : null; ) : null;
} }
const Book = ({ book, grades, theme }) => { const Book = ({ book, grades, theme, mobile }) => {
const actions = { const actions = {
3: () => 3: () =>
Linking.openURL(`https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`), 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" : ""}`)} style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)}
onPress={actions[book?.productType]} onPress={actions[book?.productType]}
> >
<View style={{ height: 165 }}> <View style={{ height: mobile ? 165 : height / 5 }}>
<Image <Image
source={{ source={{
uri: `https://dnvn.ir/api/v1/file/${book?.product?.book?.fileIds}`, uri: `https://dnvn.ir/api/v1/file/${book?.product?.book?.fileIds}`,
@ -91,7 +92,7 @@ const Book = ({ book, grades, theme }) => {
resizeMode="contain" resizeMode="contain"
style={[ style={[
{ {
width: 110, width: mobile ? 110 : height / 5 * 3 / 4,
flex: 1, flex: 1,
}, },
]} ]}
@ -131,6 +132,7 @@ const Book = ({ book, grades, theme }) => {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
grades: state.publicApi.grades, grades: state.publicApi.grades,
theme: state.publicApi.theme, theme: state.publicApi.theme,
mobile: state.publicApi.mobile,
}); });
export default connect(mapStateToProps)(MyBooks); export default connect(mapStateToProps)(MyBooks);

@ -26,7 +26,6 @@ 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 { height, width } = Dimensions.get("window");
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
function Book({ function Book({
@ -39,7 +38,9 @@ function Book({
mobile, mobile,
userProducts, userProducts,
theme, theme,
orientation,
}) { }) {
const [width, setWidth] = React.useState(Dimensions.get("window").width);
const navigation = useNavigation(); const navigation = useNavigation();
const [type, setType] = useState(1); const [type, setType] = useState(1);
const [whichTypeAdded, setWhichTypeAdded] = React.useState(null); const [whichTypeAdded, setWhichTypeAdded] = React.useState(null);
@ -72,8 +73,6 @@ function Book({
)?.length; )?.length;
}, [userProducts, book]); }, [userProducts, book]);
console.log(physicalAvailabileInCart);
const digitalAvailabileInCart = React.useMemo(() => { const digitalAvailabileInCart = React.useMemo(() => {
return userProducts?.filter( return userProducts?.filter(
(product) => (product) =>
@ -136,7 +135,10 @@ function Book({
}, [userProducts]); }, [userProducts]);
return ( return (
<View style={[tw("flex flex-1 relative")]}> <View
style={[tw("flex flex-1 relative")]}
onLayout={() => setWidth(Dimensions.get("window").width)}
>
{!mobile ? <View style={tw("mt-5")}></View> : null} {!mobile ? <View style={tw("mt-5")}></View> : null}
{/* {imageSlider ? <ImageSlider /> : null} */} {/* {imageSlider ? <ImageSlider /> : null} */}
<View style={[tw("flex flex-row-reverse")]}> <View style={[tw("flex flex-row-reverse")]}>
@ -145,10 +147,20 @@ function Book({
resizeMode="contain" resizeMode="contain"
style={[ style={[
tw("rounded-sm"), 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,
},
]} ]}
/> />
<View <View
style={[ style={[
tw("flex flex-1 justify-between items-end"), tw("flex flex-1 justify-between items-end"),
@ -685,6 +697,7 @@ const mapStateToProps = (state) => ({
userProductsLoading: state.userProduct.loading, userProductsLoading: state.userProduct.loading,
userFavoriteLoading: state.userFavorite.loading, userFavoriteLoading: state.userFavorite.loading,
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
orientation: state.publicApi.orientation,
theme: state.publicApi.theme, theme: state.publicApi.theme,
}); });

@ -13,6 +13,8 @@ import { book } from "../../redux/actions";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Navbar from "../../components/Navbar"; import Navbar from "../../components/Navbar";
const { height, width } = Dimensions.get("window");
function Product({ route, book, getBook, grades }) { function Product({ route, book, getBook, grades }) {
useEffect(() => { useEffect(() => {
getBook({ id: route.params.id, vod: true }); getBook({ id: route.params.id, vod: true });

@ -18,7 +18,7 @@ import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios"; 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 [width, setWidth] = React.useState(Dimensions.get("window").width);
const navigation = useNavigation(); const navigation = useNavigation();
const [filterLoading, setFilterLoading] = React.useState(false); const [filterLoading, setFilterLoading] = React.useState(false);
@ -266,7 +266,11 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
key={product?.product[1]?.id} key={product?.product[1]?.id}
style={[ style={[
{ {
width: mobile ? width / 2 - 25 : width / 3.2, width: mobile
? width / 2 - 25
: orientation === "portrait"
? width / 4.2
: width / 5.2,
marginBottom: 15, marginBottom: 15,
borderWidth: 1, borderWidth: 1,
borderColor: borderColor:
@ -293,7 +297,9 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
flex: 1, flex: 1,
height: mobile height: mobile
? ((width / 2 - 25) * 4) / 2.9 ? ((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, filterOptions: state.book.filterOptions,
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
theme: state.publicApi.theme, theme: state.publicApi.theme,
orientation: state.publicApi.orientation,
}); });
const mapDispatchToProps = {}; const mapDispatchToProps = {};

@ -16,7 +16,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 Code({ codeId, setCodeId, theme, loading }) { function Code({ codeId, setCodeId, theme, loading, mobile }) {
const [value, setValue] = React.useState(codeId || ""); const [value, setValue] = React.useState(codeId || "");
const [requestFlag, setRequestFlag] = React.useState(false); const [requestFlag, setRequestFlag] = React.useState(false);
@ -62,11 +62,12 @@ function Code({ codeId, setCodeId, theme, loading }) {
<Pressable <Pressable
onPress={() => setOff()} onPress={() => setOff()}
style={[ style={[
tw("py-3 px-5"), tw("py-3 px-5 flex justify-center items-center"),
{ {
backgroundColor: Colors.theme1.greenCF, backgroundColor: Colors.theme1.greenCF,
borderTopLeftRadius: 1, borderTopLeftRadius: 1,
borderBottomLeftRadius: 1, borderBottomLeftRadius: 1,
width : mobile ? "auto" : "20%"
}, },
]} ]}
> >
@ -96,6 +97,7 @@ const mapStateToProps = (state) => ({
codeId: state.userFactor.info?.codeId, codeId: state.userFactor.info?.codeId,
loading: state.userFactor.loading, loading: state.userFactor.loading,
theme: state.publicApi.theme, theme: state.publicApi.theme,
mobile : state.publicApi.mobile
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -9,6 +9,7 @@ import {
SafeAreaView, SafeAreaView,
StatusBar, StatusBar,
LayoutAnimation, LayoutAnimation,
KeyboardAvoidingView,
Appearance, Appearance,
} from "react-native"; } from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -128,9 +129,10 @@ function ShoppingCart({
style={{ style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative", position: "relative",
height: height, flex: 1,
}} }}
> >
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<Navbar <Navbar
setBoxPosition={setBoxPosition} setBoxPosition={setBoxPosition}
headerOptions={{ headerOptions={{
@ -307,6 +309,7 @@ function ShoppingCart({
buttonAction={() => navigation.navigate("Products")} buttonAction={() => navigation.navigate("Products")}
/> />
)} )}
</KeyboardAvoidingView>
</SafeAreaView> </SafeAreaView>
); );
} }

Loading…
Cancel
Save