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

87
src/components/StarRating/StarRating.scss
View File

@ -1,45 +1,44 @@
.rating{
display: flex;
align-items: center;
font-size: var(--size);
line-height: 0.75;
&__body{
position: relative;
&::before{
content: attr(data-content);
display: block;
color: var(--color);
}
}
&__active{
position: absolute;
height: 100%;
width: var(--width);
top: 0;
left: 0;
overflow: hidden;
&::before{
content: attr(data-content);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: var(--color);
}
}
&__items{
display: flex;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
&__item{
flex: 0 0 20%;
height: 100%;
opacity: 0;
}
.rating {
display: flex;
align-items: center;
font-size: var(--size);
line-height: 0.75;
&__body {
position: relative;
&::before {
content: attr(data-content);
display: block;
color: var(--color);
}
}
&__active {
position: absolute;
height: 100%;
width: var(--width);
top: 0;
left: 0;
overflow: hidden;
&::before {
content: attr(data-content);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: var(--color);
}
}
&__items {
display: flex;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
&__item {
flex: 0 0 20%;
height: 100%;
opacity: 0;
}
}