43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
import { useCallback } from 'react';
|
|
import { Rating as MantineRating, RatingProps } from '@mantine/core';
|
|
import debounce from 'lodash/debounce';
|
|
import styled from 'styled-components';
|
|
|
|
const StyledRating = styled(MantineRating)`
|
|
& .mantine-Rating-symbolBody {
|
|
svg {
|
|
stroke: var(--main-fg-secondary);
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const Rating = ({ onChange, ...props }: RatingProps) => {
|
|
const valueChange = useCallback(
|
|
(rating: number) => {
|
|
if (onChange) {
|
|
if (rating === props.value) {
|
|
onChange(0);
|
|
} else {
|
|
onChange(rating);
|
|
}
|
|
}
|
|
},
|
|
[onChange, props.value],
|
|
);
|
|
|
|
const debouncedOnChange = debounce(valueChange, 100);
|
|
|
|
return (
|
|
<StyledRating
|
|
{...props}
|
|
onChange={(e) => {
|
|
debouncedOnChange(e);
|
|
}}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
/>
|
|
);
|
|
};
|