62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { IconTwentyStarFilled } from '@/ui/display/icon/components/IconTwentyStarFilled';
|
|
|
|
const StyledContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
`;
|
|
|
|
const StyledRatingIconContainer = styled.div<{ isActive?: boolean }>`
|
|
color: ${({ isActive, theme }) =>
|
|
isActive ? theme.font.color.secondary : theme.background.quaternary};
|
|
display: inline-flex;
|
|
`;
|
|
|
|
type RatingInputProps = {
|
|
onChange: (newValue: number) => void;
|
|
value: number;
|
|
readonly?: boolean;
|
|
};
|
|
|
|
const RATING_LEVELS_NB = 5;
|
|
|
|
export const RatingInput = ({
|
|
onChange,
|
|
value,
|
|
readonly,
|
|
}: RatingInputProps) => {
|
|
const theme = useTheme();
|
|
const [hoveredValue, setHoveredValue] = useState<number | null>(null);
|
|
const currentValue = hoveredValue ?? value;
|
|
|
|
return (
|
|
<StyledContainer
|
|
role="slider"
|
|
aria-label="Rating"
|
|
aria-valuemax={RATING_LEVELS_NB}
|
|
aria-valuemin={1}
|
|
aria-valuenow={value}
|
|
tabIndex={0}
|
|
>
|
|
{Array.from({ length: RATING_LEVELS_NB }, (_, index) => {
|
|
const rating = index + 1;
|
|
|
|
return (
|
|
<StyledRatingIconContainer
|
|
key={index}
|
|
isActive={rating <= currentValue}
|
|
onClick={readonly ? undefined : () => onChange(rating)}
|
|
onMouseEnter={readonly ? undefined : () => setHoveredValue(rating)}
|
|
onMouseLeave={readonly ? undefined : () => setHoveredValue(null)}
|
|
>
|
|
<IconTwentyStarFilled size={theme.icon.size.md} />
|
|
</StyledRatingIconContainer>
|
|
);
|
|
})}
|
|
</StyledContainer>
|
|
);
|
|
};
|