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
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);
|
|
|