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

Fixed reset rating field to "no value" on star re-click (#6296)

Browse Source 
### Description
Resolves Issue:  [https://github.com/twentyhq/twenty/issues/6224](#6224)

### Additional Consideration
I have changed the default start rating value from 1 star to no star
since clicking on the selected start was reverting the filed to 1 star
which didn't seem like the appropriate behaviour. Let me know if this
change is fine

---------

Co-authored-by: JosephAshwin23 <joseph.sanjivi@anywhere.co>
Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
This commit is contained in:
Ashmash100
2024-07-22 15:47:10 +05:30
committed by GitHub
parent 33fc4ff907
commit 52c6320f74
4 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
import { useContext, useState } from 'react';
import { styled } from '@linaria/react';
import { useContext, useState } from 'react';
import { IconTwentyStarFilled, THEME_COMMON, ThemeContext } from 'twenty-ui';
import { useClearField } from '@/object-record/record-field/hooks/useClearField';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
@ -31,16 +32,29 @@ export const RatingInput = ({
readonly,
}: RatingInputProps) => {
const { theme } = useContext(ThemeContext);
const clearField = useClearField();
const activeColor = theme.font.color.secondary;
const inactiveColor = theme.background.quaternary;
const [hoveredValue, setHoveredValue] = useState<FieldRatingValue | null>(
null,
);
const [hoveredValue, setHoveredValue] = useState<FieldRatingValue>(null);
const currentValue = hoveredValue ?? value;
const selectedIndex = RATING_VALUES.indexOf(currentValue);
const selectedIndex =
currentValue !== null ? RATING_VALUES.indexOf(currentValue) : -1;
const canClick = !readonly;
const handleClick = (newValue: FieldRatingValue) => {
if (!canClick) return;
if (newValue === value) {
setHoveredValue(null);
clearField();
} else {
onChange?.(newValue);
}
};
return (
<StyledContainer
@ -48,7 +62,7 @@ export const RatingInput = ({
aria-label="Rating"
aria-valuemax={RATING_VALUES.length}
aria-valuemin={1}
aria-valuenow={RATING_VALUES.indexOf(currentValue) + 1}
aria-valuenow={selectedIndex + 1}
tabIndex={0}
>
{RATING_VALUES.map((value, index) => {
@ -58,7 +72,7 @@ export const RatingInput = ({
<StyledRatingIconContainer
key={index}
color={isActive ? activeColor : inactiveColor}
onClick={readonly ? undefined : () => onChange?.(value)}
onClick={() => handleClick(value)}
onMouseEnter={readonly ? undefined : () => setHoveredValue(value)}
onMouseLeave={readonly ? undefined : () => setHoveredValue(null)}
>