[go: nahoru, domu]
Skip to content

Commit

Permalink
update StarRaiong.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@AmirrMahmoudi
AmirrMahmoudi committed Jan 4, 2024
1 parent 770e545 commit bab9509
Showing 1 changed file with 153 additions and 17 deletions.
170 changes: 153 additions & 17 deletions src/components/StarRating.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,109 @@
import React, { useState } from "react";
// import React, { useState } from "react";

// const containerStyle = {
// display: "flex",
// alignItems: "center",
// gap: "16px",
// };

// const starContainerStyle = {
// display: "flex",
// };

// const StarRating = ({
// maxRating = 5,
// color = "#fcc419",
// size = 48,
// className = "",
// messages = [],
// defaultRating = 0,
// // onSetRating,
// }) => {
// const [raiting, setRating] = useState(defaultRating);
// const [tempRating, setTempRating] = useState(0);

// function handleRating(rating) {
// setRating(rating);
// // onSetRating(rating)
// }
// const textStyle = {
// lineHeight: "1",
// margin: "0",
// color,
// fontSize: `${size / 1.5}px`,
// };
// return (
// <div style={containerStyle} className={className}>
// <div style={starContainerStyle}>
// {Array.from({ length: maxRating }, (_, i) => (
// <Star
// key={i}
// full={tempRating ? tempRating >= i + 1 : raiting >= i + 1}
// => handleRating(i + 1)}
// => setTempRating(i + 1)}
// => setTempRating(0)}
// color={color}
// size={size}
// />
// ))}
// </div>
// <p style={textStyle}>
// {messages.length === maxRating
// ? messages[tempRating ? tempRating - 1 : raiting - 1]
// : tempRating || raiting || ""}
// </p>
// </div>
// );
// };

// export default StarRating;

// function Star({ onRate, full, onHoverIn, onHoverOut, size, color }) {
// const StarStyle = {
// width: `${size}px`,
// height: `${size}px`,
// display: "block",
// cursor: "pointer",
// };

// return (
// <span
// role="button"
// style={StarStyle}
// >
// => onHoverIn()}
// => onHoverOut()}
// >
// {full ? (
// <svg
// xmlns="http://www.w3.org/2000/svg"
// viewBox="0 0 20 20"
// fill={color}
// stroke={color}
// >
// <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
// </svg>
// ) : (
// <svg
// xmlns="http://www.w3.org/2000/svg"
// fill="none"
// viewBox="0 0 24 24"
// stroke={color}
// >
// <path
// strokeLinecap="round"
// strokeLinejoin="round"
// strokeWidth="{2}"
// d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
// />
// </svg>
// )}
// </span>
// );
// }

import { useState } from "react";
import PropTypes from "prop-types";

const containerStyle = {
display: "flex",
Expand All @@ -10,35 +115,47 @@ const starContainerStyle = {
display: "flex",
};

const StarRating = ({
StarRating.propTypes = {
maxRating: PropTypes.number,
defaultRating: PropTypes.number,
color: PropTypes.string,
size: PropTypes.number,
messages: PropTypes.array,
className: PropTypes.string,
onSetRating: PropTypes.func,
};

export default function StarRating({
maxRating = 5,
color = "#fcc419",
size = 48,
className = "",
messages = [],
defaultRating = 0,
// onSetRating,
}) => {
const [raiting, setRating] = useState(defaultRating);
onSetRating,
}) {
const [rating, setRating] = useState(defaultRating);
const [tempRating, setTempRating] = useState(0);

function handleRating(rating) {
setRating(rating);
// onSetRating(rating)
onSetRating(rating);
}

const textStyle = {
lineHeight: "1",
margin: "0",
color,
fontSize: `${size / 1.5}px`,
};

return (
<div style={containerStyle} className={className}>
<div style={starContainerStyle}>
{Array.from({ length: maxRating }, (_, i) => (
<Star
key={i}
full={tempRating ? tempRating >= i + 1 : raiting >= i + 1}
full={tempRating ? tempRating >= i + 1 : rating >= i + 1}
onRate={() => handleRating(i + 1)}
onHoverIn={() => setTempRating(i + 1)}
onHoverOut={() => setTempRating(0)}
Expand All @@ -49,17 +166,15 @@ const StarRating = ({
</div>
<p style={textStyle}>
{messages.length === maxRating
? messages[tempRating ? tempRating - 1 : raiting - 1]
: tempRating || raiting || ""}
? messages[tempRating ? tempRating - 1 : rating - 1]
: tempRating || rating || ""}
</p>
</div>
);
};

export default StarRating;
}

function Star({ onRate, full, onHoverIn, onHoverOut, size, color }) {
const StarStyle = {
function Star({ onRate, full, onHoverIn, onHoverOut, color, size }) {
const starStyle = {
width: `${size}px`,
height: `${size}px`,
display: "block",
Expand All @@ -69,10 +184,10 @@ function Star({ onRate, full, onHoverIn, onHoverOut, size, color }) {
return (
<span
role="button"
style={StarStyle}
style={starStyle}
onClick={onRate}
onMouseEnter={() => onHoverIn()}
onMouseLeave={() => onHoverOut()}
onMouseEnter={onHoverIn}
onMouseLeave={onHoverOut}
>
{full ? (
<svg
Expand Down Expand Up @@ -101,3 +216,24 @@ function Star({ onRate, full, onHoverIn, onHoverOut, size, color }) {
</span>
);
}

/*
FULL STAR
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#000"
stroke="#000"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
EMPTY STAR
*/

0 comments on commit bab9509

Please sign in to comment.