react-customizable-star-rating/dist/esm/components/StarRating.js

React component to view and set rating

import React, { useState, useEffect } from 'react';
import { Star } from './Star';
const containerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '16px',
};
const startContainerStyle = {
    display: 'flex',
    gap: '4px',
};
export const StarRating = ({ maxRating = 5, color = '#FCC419', size = 48, borderColor = color, className = '', messages = [], defaultRating = 0, onSetRating, }) => {
    const [rating, setRating] = useState(() => defaultRating);
    const [tempRating, setTempRating] = useState(() => 0);
    const [dir, setDir] = useState('ltr');
    useEffect(() => {
        const dir = document.documentElement.dir || 'ltr';
        setDir(() => dir);
    }, [dir]);
    const textStyle = {
        lineHeight: '1',
        margin: '0',
        color,
        fontSize: `${size / 1.5}px`,
    };
    const properMessage = () => {
        if (messages.length === maxRating) {
            return messages[tempRating ? Math.round(tempRating - 1) : rating - 1];
        }
        else {
            return tempRating || rating;
        }
    };
    const isHalf = (i) => {
        if (tempRating) {
            if (tempRating === 0.5 && i === 0) {
                return true;
            }
            if (i !== 0 && tempRating !== 0.5) {
                return tempRating % i === 0.5;
            }
            return false;
        }
        else {
            if (rating === 0.5 && i === 0) {
                return true;
            }
            if (i !== 0 && rating !== 0.5) {
                return rating % i === 0.5;
            }
            return false;
        }
    };
    const isFull = (i) => {
        if (tempRating) {
            return tempRating >= i + 1;
        }
        else {
            return rating >= i + 1;
        }
    };
    return (React.createElement("div", { style: containerStyle, className: className },
        React.createElement("div", { style: startContainerStyle }, Array.from({ length: maxRating }, (_, i) => {
            if (!onSetRating) {
                return (React.createElement(Star, { key: i, index: i, full: isFull(i), half: isHalf(i), color: color, size: size, borderColor: borderColor, viewOnly: true, dir: dir }));
            }
            return (React.createElement(Star, { key: i, index: i, full: isFull(i), half: isHalf(i), onRate: setRating, onHoverIn: setTempRating, onHoverOut: () => setTempRating(0), color: color, size: size, borderColor: borderColor, onSetRating: onSetRating, dir: dir }));
        })),
        React.createElement("div", { style: textStyle }, properMessage())));
};
//# sourceMappingURL=StarRating.js.map