1 | import _ from "lodash";
|
2 | import React, { useState, useEffect } from "react";
|
3 | import { StyleSheet, Text, View } from "react-native";
|
4 | import Star from "./components/Star";
|
5 | const TapRating = props => {
|
6 | const [position, setPosition] = useState(props.defaultRating);
|
7 | useEffect(() => {
|
8 | const { defaultRating } = props;
|
9 | if (defaultRating === null || defaultRating === undefined) {
|
10 | setPosition(3);
|
11 | }
|
12 | else {
|
13 | setPosition(defaultRating);
|
14 | }
|
15 | }, [props.defaultRating]);
|
16 | const renderStars = rating_array => {
|
17 | return _.map(rating_array, star => {
|
18 | return star;
|
19 | });
|
20 | };
|
21 | const starSelectedInPosition = position => {
|
22 | const { onFinishRating } = props;
|
23 | if (typeof onFinishRating === "function") {
|
24 | onFinishRating(position);
|
25 | }
|
26 | setPosition(position);
|
27 | };
|
28 | const { count, reviews, showRating, reviewColor, reviewSize } = props;
|
29 | const rating_array = [];
|
30 | const starContainerStyle = [styles.starContainer];
|
31 | if (props.starContainerStyle) {
|
32 | starContainerStyle.push(props.starContainerStyle);
|
33 | }
|
34 | const ratingContainerStyle = [styles.ratingContainer];
|
35 | if (props.ratingContainerStyle) {
|
36 | ratingContainerStyle.push(props.ratingContainerStyle);
|
37 | }
|
38 | _.times(count, index => {
|
39 | rating_array.push(<Star key={index} position={index + 1} starSelectedInPosition={value => {
|
40 | starSelectedInPosition(value);
|
41 | }} fill={position >= index + 1} {...props}/>);
|
42 | });
|
43 | return (<View style={ratingContainerStyle}>
|
44 | {showRating &&
|
45 | <Text style={[
|
46 | styles.reviewText,
|
47 | { fontSize: reviewSize, color: reviewColor }
|
48 | ]}>
|
49 | {reviews[position - 1]}
|
50 | </Text>}
|
51 | <View style={starContainerStyle}>{renderStars(rating_array)}</View>
|
52 | </View>);
|
53 | };
|
54 | TapRating.defaultProps = {
|
55 | defaultRating: 3,
|
56 | reviews: ["Terrible", "Bad", "Okay", "Good", "Great"],
|
57 | count: 5,
|
58 | showRating: true,
|
59 | reviewColor: "rgba(230, 196, 46, 1)",
|
60 | reviewSize: 25
|
61 | };
|
62 | const styles = StyleSheet.create({
|
63 | ratingContainer: {
|
64 | backgroundColor: "transparent",
|
65 | flexDirection: "column",
|
66 | alignItems: "center",
|
67 | justifyContent: "center"
|
68 | },
|
69 | reviewText: {
|
70 | fontWeight: "bold",
|
71 | margin: 10
|
72 | },
|
73 | starContainer: {
|
74 | flexDirection: "row",
|
75 | alignItems: "center",
|
76 | justifyContent: "center"
|
77 | }
|
78 | });
|
79 | export default TapRating;
|
80 |
|
\ | No newline at end of file |