@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
28 lines • 1.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Typography, Box, } from '@mui/material';
import { Star, StarBorder, Favorite, FavoriteBorder } from '@mui/icons-material';
import { StyledRating, RatingContainer } from './Rating.style';
export const Rating = ({ value, onChange, max = 5, precision = 1, readOnly = false, disabled = false, size = 'medium', label, showValue = false, variant = 'star', color = 'warning', ...props }) => {
const handleChange = (event, newValue) => {
if (onChange) {
onChange(newValue);
}
};
const getIcons = () => {
switch (variant) {
case 'heart':
return {
icon: _jsx(Favorite, {}),
emptyIcon: _jsx(FavoriteBorder, {}),
};
default:
return {
icon: _jsx(Star, {}),
emptyIcon: _jsx(StarBorder, {}),
};
}
};
const icons = getIcons();
return (_jsxs(RatingContainer, { children: [label && (_jsx(Typography, { variant: "body2", gutterBottom: true, children: label })), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(StyledRating, { value: value, onChange: handleChange, max: max, precision: precision, readOnly: readOnly, disabled: disabled, size: size, color: color, icon: icons.icon, emptyIcon: icons.emptyIcon, ...props }), showValue && value !== null && value !== undefined && (_jsxs(Typography, { variant: "body2", color: "textSecondary", children: [value.toFixed(precision < 1 ? 1 : 0), "/", max] }))] })] }));
};
//# sourceMappingURL=Rating.js.map