react-ts-rating-star
Version:
React TS Rating Star allows you to create a customizable rating star component with ease.
82 lines • 4.04 kB
JavaScript
import { __assign } from "tslib";
import React, { useMemo, useState } from 'react';
import Star from './Star';
// Styles
import './styles/react-ts-rating-star.css';
/**
* RatingStar component for displaying a rating star system.
* @param numberOfStars - The number of stars to display.
* @param averageRating - The average rating to display.
* @param iconColor - The color of the icon. Default is `gold`.
* @param iconWidth - The width of the icon. Default is `2em`.
* @param iconHeight - The height of the icon. Default is `2em`.
* @param iconHoverEffect - The hover effect of the icon. Default is `none`. Allowed values: `none`, `scaling`, `rotating`, `animated-scaling`, `animated-twinkling` and `animated-rotating`.
* @param backgroundColor - The background color of the star. Default is `darkgray`.
* @param onClick - The callback function when a star is clicked.
* @returns JSX.Element representing the RatingStar component.
*/
var RatingStar = function (_a) {
var _b = _a.numberOfStars, numberOfStars = _b === void 0 ? 5 : _b, averageRating = _a.averageRating, _c = _a.iconColor, iconColor = _c === void 0 ? 'gold' : _c, _d = _a.iconWidth, iconWidth = _d === void 0 ? '2em' : _d, _e = _a.iconHeight, iconHeight = _e === void 0 ? '2em' : _e, _f = _a.iconHoverEffect, iconHoverEffect = _f === void 0 ? 'none' : _f, _g = _a.backgroundColor, backgroundColor = _g === void 0 ? 'darkgray' : _g, clickCallback = _a.onClick;
var _h = useState([]), clickedStars = _h[0], setClickedStars = _h[1];
// CSS Variables
var iconColorCSSVar = {
'--rtrs-star-color': iconColor,
};
var backgroundColorCSSVar = {
'--rtrs-star-background-color': backgroundColor,
};
var iconWidthCSSVar = {
'--rtrs-icon-width': iconWidth,
};
var iconHeightCSSVar = {
'--rtrs-icon-height': iconHeight,
};
/**
* Render the star components based on the average note.
*/
var renderStars = useMemo(function () {
/**
* Generate an array of clicked stars including the clicked star and all previous stars.
* @param starIndex - The index of the clicked star
* @returns void
*/
var handleStar = function (starIndex) {
var clickedStarsArray = Array.from({ length: starIndex }, function (_, index) { return index + 1; });
setClickedStars(clickedStarsArray);
clickCallback === null || clickCallback === void 0 ? void 0 : clickCallback(starIndex);
};
var stars = [];
// Calculate the number of filled stars and the percentage of the last star to fill
var filledStars = averageRating ? Math.floor(averageRating) : 0;
var lastStarPercentage = averageRating
? (averageRating - filledStars) * 100
: 0;
// Calculate the fill percentage for each star
for (var i = 0; i < numberOfStars; i++) {
var fillPercentage = 100;
if (i < filledStars) {
fillPercentage = 100;
}
else if (i === filledStars) {
fillPercentage = lastStarPercentage;
}
else {
fillPercentage = 0;
}
stars.push(React.createElement(Star, { key: i, currentStar: i + 1, isActive: clickedStars.includes(i + 1), iconColor: iconColor, iconWidth: iconWidth, iconHeight: iconHeight, fillPercentage: clickedStars.length > 0 ? 0 : fillPercentage, animationClassName: iconHoverEffect, onClick: handleStar }));
}
return stars;
}, [
numberOfStars,
iconColor,
iconWidth,
iconHeight,
averageRating,
clickedStars,
iconHoverEffect,
clickCallback,
]);
return (React.createElement("div", { className: 'rtrs-star-container', style: __assign(__assign(__assign(__assign({}, iconColorCSSVar), backgroundColorCSSVar), iconWidthCSSVar), iconHeightCSSVar) }, renderStars));
};
export default RatingStar;
//# sourceMappingURL=RatingStar.js.map