You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

317 lines
9.6 KiB

import React, { useEffect } from "react";
import {
View,
Text,
FlatList,
Image,
SafeAreaView,
ScrollView,
StyleSheet,
Platform,
Dimensions,
StatusBar,
} from "react-native";
import { connect } from "react-redux";
import { blog, publicApi } from "../../redux/actions";
import { LinearGradient } from "expo-linear-gradient";
import HTMLView from "react-native-htmlview";
import moment from "jalali-moment";
//components
import Header from "../Blogs/layouts/Header";
import New from "../Blogs/layouts/New";
import Navbar from "../../components/Navbar";
//assets
import tw from "tailwind-rn";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
//variables
const ios = Platform.OS === "ios";
const { width } = Dimensions.get("window");
//func
const renderNode = (node, index, siblings, parent, defaultRenderer) => {
if (node?.name == "img") {
const a = node?.attribs;
return (
<Image
style={{ width: 300, height: 300 }}
source={{ uri: node?.attribs?.src }}
/>
);
}
};
export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
useEffect(() => {
getInfo({ id: route?.params?.id });
if (blogs?.length === 0) {
getList();
}
}, []);
useEffect(() => {
StatusBar.setBarStyle(
`${theme === "light" ? "dark" : "light"}-content`,
true
);
}, [theme]);
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Navbar
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "",
bookmark: true,
qr: false,
back: true,
bookmarkItem: { contentId: blog?.id },
}}
/>
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container, tw("flex")]}
>
<View style={tw("flex px-4 pb-24")}>
<View
style={[
tw("w-full rounded-sm overflow-hidden relative"),
{ height: ((width - 32) / 4) * 2.8 },
]}
>
<Image
source={{ uri: `https:dnvn.ir/api/v1/file/${blog?.fileIds}` }}
resizeMode="contain"
style={tw("w-full h-full absolute left-0 top-0")}
/>
<LinearGradient
colors={["transparent", "rgba(0,0,0,0.9)"]}
start={{ x: 0.0, y: 0.0 }}
end={{ x: 0.0, y: 1.1 }}
style={tw(
"flex justify-end absolute top-0 left-0 z-10 w-full h-full pb-2 px-0"
)}
>
<View
style={tw(
"flex justify-end absolute top-0 left-0 z-10 w-full h-full pb-0 px-2"
)}
>
<View
style={tw(
"w-full flex flex-row-reverse items-center justify-between"
)}
>
<View style={tw("flex")}>
<View style={tw("flex py-2 justify-center")}>
{/* <Text
style={{
fontFamily: "regular",
color: Colors.theme1.white,
fontSize: fontSize.tiny,
textAlign: ios ? "right" : "auto",
}}
>
{"نوشته از:" + " " + "کامران ایزدی"}
</Text> */}
<Text
style={{
fontFamily: "regular",
color: Colors.theme1.white,
fontSize: fontSize.tiny,
textAlign: ios ? "right" : "auto",
}}
>
{"سردبیر بخش وبلاگ دانوین"}
</Text>
</View>
</View>
<View style="flex justify-center items-end">
{
blog?.duration ? <Text
style={{
fontFamily: "regular",
color: Colors.theme1.white,
fontSize: fontSize.sm,
textAlign: ios ? "left" : "left",
}}
>
{"زمان مطالعه" + " " + blog?.duration + " دقیقه"}
</Text> : null
}
<Text
style={{
fontFamily: "regular",
color: Colors.theme1.white,
fontSize: fontSize.sm,
textAlign: ios ? "left" : "left",
}}
>
{
moment(blog?.createdAt).format('jYYYY/jMM/jDD')
}
</Text>
</View>
</View>
</View>
</LinearGradient>
</View>
<View
style={[tw("flex my-5"), { textAlign: "right", marginBottom: 50 }]}
>
<Text
style={{
fontFamily: "bold",
fontSize: fontSize.base,
textAlign: ios ? "right" : "auto",
marginBottom: 60,
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
}}
>
{blog?.title}
</Text>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<HTMLView
value={blog?.text}
renderNode={renderNode}
stylesheet={{
h1 : {
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "bold",
lineHeight: 25,
fontSize: fontSize.xl4,
marginVertical: -15,
paddingTop: 5,
},
h2 : {
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "bold",
lineHeight: 25,
fontSize: fontSize.xl,
marginVertical: -10,
},
h3 : {
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "bold",
lineHeight: 25,
fontSize: fontSize.lg,
marginVertical: -10,
},
p: {
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "light",
lineHeight: 25,
marginVertical: -20,
},
strong: {
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "bold",
lineHeight: 25,
},
ul: {
textAlign: "right",
marginVertical: -35,
},
li: {
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "light",
lineHeight: 25,
},
span : {
color : 'red'
}
}}
/>
</View>
</View>
<Header title={"پیشنهادی "} />
{blogs?.length ? (
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-3")]}
data={blogs?.filter((blog) => blog?.id !== route?.params?.id)}
renderItem={({ item }) => <New blog={item} />}
keyExtractor={(item, index) => {
return item?.id;
}}
/>
) : null}
</View>
</ScrollView>
</SafeAreaView>
);
};
const mapStateToProps = (state) => ({
blog: state.blog.blog,
blogs: state.blog.list,
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
getInfo: blog.info,
getList: blog.list,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Blog);
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 40,
},
container: {
paddingVertical: 0,
paddingHorizontal: 0,
},
font: {
textAlign: "center",
fontFamily: "render",
},
});