apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed full components

Browse Source
This commit is contained in:
MaxOvs19
2023-05-24 19:23:24 +03:00
parent 70b3845755
commit f88b22cb84
40 changed files with 1362 additions and 1096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/StarRating/StarRating.js
View File

@ -1,44 +1,85 @@
import React, { useEffect, useState } from 'react'
import './StarRating.scss'
import React, { useEffect, useState } from "react";
import "./StarRating.scss";
const StarRating = ({ countStars=1, countActiveStars=1, color='#52B709', size=61 }) => {
const [shadedStars, setShadedStars] = useState([])
const [noShadedStars, setNoShadedStars] = useState([])
const percent = (Math.abs(countActiveStars)) >= countStars ? 100 : (countActiveStars * 100 / countStars)
useEffect(() => {
for (let index = 0; index < countStars; index++) {
setShadedStars(prev => [...prev, '★'])
setNoShadedStars(prev => [...prev, '☆'])
}
}, [])
const StarRating = ({
countStars = 1,
countActiveStars = 1,
color = "#52B709",
size = 61,
}) => {
const [shadedStars, setShadedStars] = useState([]);
const [noShadedStars, setNoShadedStars] = useState([]);
const percent =
Math.abs(countActiveStars) >= countStars
? 100
: (countActiveStars * 100) / countStars;
useEffect(() => {
for (let index = 0; index < countStars; index++) {
setShadedStars((prev) => [...prev, "★"]);
setNoShadedStars((prev) => [...prev, "☆"]);
}
}, []);
const ratingStyle = {
"--size": size+'px'
}
const activeStyle = {
"--width": percent + '%',
"--color": color,
"--content": shadedStars.join('')
}
const bodyStyle = {
"--content": noShadedStars.join(''),
"--color": color
}
const ratingStyle = {
"--size": size + "px",
};
const activeStyle = {
"--width": percent + "%",
"--color": color,
"--content": shadedStars.join(""),
};
const bodyStyle = {
"--content": noShadedStars.join(""),
"--color": color,
};
return (
<div className='rating' style={ratingStyle}>
<div className="rating__body" style={bodyStyle} data-content={noShadedStars.join('')}>
<div className="rating__active" style={activeStyle} data-content={shadedStars.join('')}></div>
<div className="rating__items">
<input type='radio' className="rating__item" value={1} name='star'></input>
<input type='radio' className="rating__item" value={2} name='star'></input>
<input type='radio' className="rating__item" value={3} name='star'></input>
<input type='radio' className="rating__item" value={4} name='star'></input>
<input type='radio' className="rating__item" value={5} name='star'></input>
</div>
</div>
</div>
)
}
return (
<div className="rating" style={ratingStyle}>
<div
className="rating__body"
style={bodyStyle}
data-content={noShadedStars.join("")}
>
<div
className="rating__active"
style={activeStyle}
data-content={shadedStars.join("")}
></div>
<div className="rating__items">
<input
type="radio"
className="rating__item"
value={1}
name="star"
></input>
<input
type="radio"
className="rating__item"
value={2}
name="star"
></input>
<input
type="radio"
className="rating__item"
value={3}
name="star"
></input>
<input
type="radio"
className="rating__item"
value={4}
name="star"
></input>
<input
type="radio"
className="rating__item"
value={5}
name="star"
></input>
</div>
</div>
</div>
);
};
export default React.memo(StarRating);
export default React.memo(StarRating);