admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: rating type issues (#3638)

Browse Source 
* fix: rating type issues

* fix: rebase

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Jérémy M
2024-01-30 09:57:30 +01:00
committed by GitHub
parent e7f2af6f0b
commit da8dd671d1
14 changed files with 137 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
View File

@ -2,6 +2,8 @@ import { useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/input/components/RatingFieldInput';
import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
import { IconTwentyStarFilled } from '@/ui/display/icon/components/IconTwentyStarFilled';
const StyledContainer = styled.div`
@ -16,40 +18,40 @@ const StyledRatingIconContainer = styled.div<{ isActive?: boolean }>`
`;
type RatingInputProps = {
onChange: (newValue: number) => void;
value: number;
onChange: (newValue: FieldRatingValue) => void;
value: FieldRatingValue;
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 [hoveredValue, setHoveredValue] = useState<FieldRatingValue | null>(
null,
);
const currentValue = hoveredValue ?? value;
return (
<StyledContainer
role="slider"
aria-label="Rating"
aria-valuemax={RATING_LEVELS_NB}
aria-valuemax={RATING_VALUES.length}
aria-valuemin={1}
aria-valuenow={value}
aria-valuenow={RATING_VALUES.indexOf(currentValue) + 1}
tabIndex={0}
>
{Array.from({ length: RATING_LEVELS_NB }, (_, index) => {
const rating = index + 1;
{RATING_VALUES.map((value, index) => {
const currentIndex = RATING_VALUES.indexOf(currentValue);
return (
<StyledRatingIconContainer
key={index}
isActive={rating <= currentValue}
onClick={readonly ? undefined : () => onChange(rating)}
onMouseEnter={readonly ? undefined : () => setHoveredValue(rating)}
isActive={index <= currentIndex}
onClick={readonly ? undefined : () => onChange(value)}
onMouseEnter={readonly ? undefined : () => setHoveredValue(value)}
onMouseLeave={readonly ? undefined : () => setHoveredValue(null)}
>
<IconTwentyStarFilled size={theme.icon.size.md} />