update Pressable.js, MyBooks.js and Videos.js

master
Reza_ashrafi 2 years ago
parent b9d457ae50
commit 37efeaf529
  1. 1
      src/components/Pressable.js
  2. 117
      src/screens/Home/components/MyBooks.js
  3. 13
      src/screens/Home/components/Videos.js

@ -45,6 +45,7 @@ function Pressable1({
: fontSize.base,
color: color,
fontFamily: "bold",
textAlign: "center",
}}
>
{title}

@ -1,3 +1,4 @@
import React from "react";
import {
View,
Text,
@ -9,9 +10,13 @@ import {
Dimensions,
} from "react-native";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { AntDesign } from "@expo/vector-icons";
//components
import Progress from "../../../components/Progress";
import Modal from "../../../components/Modal";
import CustomPressable from "../../../components/Pressable";
//Color
import Colors from "../../../constants/Colors";
@ -20,6 +25,7 @@ import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios";
const { width, height } = Dimensions.get("window");
function MyBooks({ books, grades, theme, mobile }) {
return books?.filter(
(book) =>
@ -72,6 +78,9 @@ function MyBooks({ books, grades, theme, mobile }) {
}
const Book = ({ book, grades, theme, mobile }) => {
const [openModal, setOpenModal] = React.useState(false);
const navigation = useNavigation();
const actions = {
3: () =>
Linking.openURL(`https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`),
@ -82,7 +91,7 @@ const Book = ({ book, grades, theme, mobile }) => {
return (
<Pressable
style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)}
onPress={actions[book?.productType]}
onPress={() => setOpenModal(true)}
>
<View style={{ height: mobile ? 165 : height / 5 }}>
<Image
@ -92,7 +101,7 @@ const Book = ({ book, grades, theme, mobile }) => {
resizeMode="contain"
style={[
{
width: mobile ? 110 : height / 5 * 3 / 4,
width: mobile ? 110 : ((height / 5) * 3) / 4,
flex: 1,
},
]}
@ -125,6 +134,110 @@ const Book = ({ book, grades, theme, mobile }) => {
{"پایه" + " " + grades[book?.product?.book?.gradeId]}
</Text>
<Progress percent={60} alignItems={"items-end"} />
<Modal type="fade" openModal={openModal} setOpenModal={setOpenModal}>
<Pressable
style={[
tw("flex-1 justify-center items-center relative"),
{
shadowColor: "#00000055",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
backgroundColor: Colors.theme1.dark + "aa",
},
]}
onPress={() => setOpenModal(!openModal)}
>
<Pressable
onPress={(e) => e.stopPropagation()}
style={[
tw("flex flex-col items-center p-4 rounded-md relative"),
{
backgroundColor:
theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
},
]}
>
<AntDesign
name="close"
style={{
backgroundColor:
theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
padding: 4,
borderRadius: 200,
position: "absolute",
right: 8,
top: mobile ? -20 : -30,
}}
size={mobile ? 20 : 30}
color={Colors.theme1.redFF1}
onPress={() => setOpenModal(!openModal)}
/>
<Image
source={{
uri: `https://dnvn.ir/api/v1/file/${book?.product?.book?.fileIds}`,
}}
resizeMode="contain"
style={[
tw("bg-gray-100 mb-3"),
{
height: ((width / 2) * 4.25) / 3,
width: width / 2,
},
]}
/>
<View style={tw("flex items-center")}></View>
<Pressable
onPress={() => navigation.push("QR", { page: "activation" })}
style={{
backgroundColor: Colors.theme1.greenD9,
color: "white",
width: width / 2,
paddingVertical: 10,
borderRadius: 5,
}}
>
<Text
style={{
fontFamily: "regular",
textAlign: "center",
color: Colors.theme1.white,
fontSize: fontSize.tiny,
}}
>
QR اسکن کد
</Text>
</Pressable>
<Pressable
onPress={() =>
Linking.openURL(
`https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`
)
}
style={{
backgroundColor: Colors.theme1.gray2077,
color: "white",
width: width / 2,
paddingVertical: 10,
borderRadius: 5,
marginTop: 12,
}}
>
<Text
style={{
fontFamily: "regular",
textAlign: "center",
color: Colors.theme1.white,
fontSize: fontSize.tiny,
}}
>
واقعیت افزوده
</Text>
</Pressable>
</Pressable>
</Pressable>
</Modal>
</Pressable>
);
};

@ -1,4 +1,13 @@
import { View, Text, Image, Pressable, FlatList, Platform } from "react-native";
import React from "react";
import {
View,
Text,
Image,
Pressable,
FlatList,
Platform,
Dimensions,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import tw from "tailwind-rn";
import { connect } from "react-redux";
@ -47,6 +56,7 @@ function Videos({ videos, grades, mobile, theme }) {
const Video = ({ video, mobile, grades, theme }) => {
const navigation = useNavigation();
return (
<Pressable
style={[
@ -96,6 +106,7 @@ const Video = ({ video, mobile, grades, theme }) => {
<View style={tw("absolute bottom-0 left-0 w-full")}>
<Progress percent={60} alignItems={"items-end"} />
</View>
</Pressable>
);
};

Loading…
Cancel
Save