-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
65 lines (54 loc) · 1.69 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React, { useState } from 'react';
import { Answer } from 'types/answer';
import { DisplayType } from 'types/question';
export const ratingDataTestIds = {
base: 'rating__base',
};
interface RatingProps {
items: Answer[];
displayType: DisplayType;
onValueChanged: (answer: Answer) => void;
}
const Rating = ({ items, displayType, onValueChanged }: RatingProps): JSX.Element => {
const [selectedIndex, setSelectedIndex] = useState(0);
const handleOnSelectRating = (index: number, answer: Answer) => {
setSelectedIndex(index);
onValueChanged(answer);
};
const faceModes = ['😡', '😕', '😐', '🙂', '😄'];
const generateDisplayTypeContent = (index: number): string => {
switch (displayType) {
case DisplayType.Heart:
return '❤️';
case DisplayType.Star:
return '⭐️';
case DisplayType.Smiley:
return faceModes.at(index) ?? faceModes[4];
case DisplayType.Thumbs:
default:
return '👍🏻';
}
};
const buildClassAttribute = (index: number): string => {
if (displayType === DisplayType.Smiley) {
return selectedIndex === index ? '' : 'opacity-50';
} else {
return selectedIndex >= index ? '' : 'opacity-50';
}
};
return (
<div
className="flex justify-center text-large font-extrabold tracking-survey-tighter gap-4"
data-test-id={ratingDataTestIds.base}
>
{items.map((item, index) => {
return (
<button key={item.id} className={buildClassAttribute(index)} onClick={() => handleOnSelectRating(index, item)}>
{generateDisplayTypeContent(index)}
</button>
);
})}
</div>
);
};
export default Rating;