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.
 
 
 
 
 

122 lines
3.1 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: "#05335F", fontFamily: "bold" },
]}
>
{rate}
</Text>
<Rating
type="star"
ratingCount={5}
imageSize={15}
value={4}
onFinishRating={(rating) => addVote({ productId, vote: rating })}
readonly={!isBuyed}
/>
<Text
style={{
fontSize: fontSize.sm,
color: "#707070",
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: "#05335F",
fontFamily: "regular",
}}
>
{data.name}
</Text>
<View
style={[
tw("rounded-md ml-2 flex-1"),
{ height: 6, backgroundColor: Colors.theme1[theme].greenFF1 },
]}
>
<View
style={[
tw("h-full rounded-md"),
{
width: data.value + "%",
backgroundColor: Colors.theme1[theme].greenCF,
},
]}
></View>
</View>
<Text
style={{
fontSize: fontSize.xs,
fontFamily: "light",
width: width / 7.5,
textAlign: "center",
color: "#05335F",
}}
>
{data.value + "%"}
</Text>
</View>
);
};
const mapStateToProps = (state) => ({
theme: state.publicApi.theme
});
const mapDispatchToProps = {
addVote: vote.add,
};
export default connect(mapStateToProps, mapDispatchToProps)(Rates);