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.
 
 
 
 
 

127 lines
3.4 KiB

import React from "react";
import { View, Text, Dimensions, Pressable } from "react-native";
import { Rating } from "react-native-ratings";
import { connect } from "react-redux";
import { vote } from "../../../redux/actions";
import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers";
//assets
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const width = Dimensions.get("window").width;
function Rates({ rate, productId, addVote, isBuyed = null, theme }) {
return (
<View style={tw("flex flex-row-reverse")}>
<Pressable
style={[tw("flex items-center justify-center"), { width: "25%" }]}
onPress={() =>
!isBuyed
? asyncAwesomeAlert("خطا", "شما این محصول رو خریداری نکرده اید.", {
showCancelButton: false,
})
: {}
}
>
<Text
style={[
{
fontSize: fontSize.xl6,
color: theme === "light" ? "#05335F" : Colors.theme1.white,
fontFamily: "bold",
},
]}
>
{rate}
</Text>
<Rating
type="star"
ratingCount={5}
imageSize={width / 25}
tintColor={
theme === "light" ? Colors.theme1.white : Colors.theme1.dark
}
value={4}
onFinishRating={(rating) => addVote({ productId, vote: rating })}
readonly={!isBuyed}
/>
{/* <Text
style={{
fontSize: fontSize.sm,
color: theme === "light" ? "#707070" : Colors.theme1.white,
fontFamily: "light",
marginTop: 5,
}}
>
{`از بین ${1150} نفر`}
</Text> */}
</Pressable>
<View style={[tw("flex flex-1"), { width: "60%" }]}>
{[
{ name: "بخش ۱", value: 40 },
{ name: "بخش ۱", value: 20 },
{ name: "بخش ۱", value: 70 },
{ name: "بخش ۱", value: 10 },
{ name: "بخش ۱", value: 50 },
].map((field, index) => (
<Progress key={index} data={field} theme={theme} />
))}
</View>
</View>
);
}
const Progress = ({ data, theme, ...props }) => {
return (
<View style={[tw("flex flex-1 flex-row items-center py-1.5")]}>
<Text
style={{
fontSize: fontSize.sm,
color: theme === "light" ? "#05335F" : Colors.theme1.white,
fontFamily: "regular",
}}
>
{data.name}
</Text>
<View
style={[
tw("rounded-md ml-2 flex-1"),
{ height: 6, backgroundColor: Colors.theme1.greenFF1 },
]}
>
<View
style={[
tw("h-full rounded-md"),
{
width: data.value + "%",
backgroundColor: Colors.theme1.greenCF,
},
]}
></View>
</View>
<Text
style={{
fontSize: fontSize.xs,
fontFamily: "light",
width: width / 7.5,
textAlign: "center",
color: theme === "light" ? "#05335F" : Colors.theme1.white,
}}
>
{data.value + "%"}
</Text>
</View>
);
};
const mapStateToProps = (state) => ({
theme: state.publicApi.theme,
});
const mapDispatchToProps = {
addVote: vote.add,
};
export default connect(mapStateToProps, mapDispatchToProps)(Rates);