62 lines
1.2 KiB
TypeScript
62 lines
1.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import NumberInput from "../input/NumberInput";
|
|
|
|
export default function RatingSelector({
|
|
rating,
|
|
onChange
|
|
}:{
|
|
rating?: number;
|
|
onChange?: (rating?: number) => void;
|
|
}){
|
|
const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
const selectorId = crypto.randomUUID().replaceAll("-", "");
|
|
const [ currentRating, setCurrentRating ] = useState(rating);
|
|
|
|
|
|
useEffect(() => {
|
|
setCurrentRating(rating);
|
|
}, [ rating, setCurrentRating ]);
|
|
|
|
useEffect(() => {
|
|
onChange?.(currentRating);
|
|
}, [ currentRating, onChange ]);
|
|
|
|
|
|
return (
|
|
<div>
|
|
<NumberInput
|
|
id={`characterRatingSelector${selectorId}`}
|
|
label="Rating"
|
|
value={currentRating}
|
|
onChange={(value) => setCurrentRating(value)}
|
|
min={0}
|
|
max={10}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<label>
|
|
<select
|
|
onChange={(e) => setCurrentRating(parseInt(e.target.value))}
|
|
value={currentRating}
|
|
>
|
|
<option value={undefined}></option>
|
|
{
|
|
ratings.map((rating) => (
|
|
<option
|
|
key={rating}
|
|
value={rating}
|
|
>
|
|
{rating}
|
|
</option>
|
|
))
|
|
}
|
|
</select>
|
|
<span>Character Rating</span>
|
|
</label>
|
|
</div>
|
|
);
|
|
}
|