react-customizable-star-rating
Version:
React component to view and set rating
76 lines • 2.99 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StarRating = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Star_1 = require("./Star");
const containerStyle = {
display: 'flex',
alignItems: 'center',
gap: '16px',
};
const startContainerStyle = {
display: 'flex',
gap: '4px',
};
const StarRating = ({ maxRating = 5, color = '#FCC419', size = 48, borderColor = color, className = '', messages = [], defaultRating = 0, onSetRating, }) => {
const [rating, setRating] = (0, react_1.useState)(() => defaultRating);
const [tempRating, setTempRating] = (0, react_1.useState)(() => 0);
const [dir, setDir] = (0, react_1.useState)('ltr');
(0, react_1.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_1.default.createElement("div", { style: containerStyle, className: className },
react_1.default.createElement("div", { style: startContainerStyle }, Array.from({ length: maxRating }, (_, i) => {
if (!onSetRating) {
return (react_1.default.createElement(Star_1.Star, { key: i, index: i, full: isFull(i), half: isHalf(i), color: color, size: size, borderColor: borderColor, viewOnly: true, dir: dir }));
}
return (react_1.default.createElement(Star_1.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_1.default.createElement("div", { style: textStyle }, properMessage())));
};
exports.StarRating = StarRating;
//# sourceMappingURL=StarRating.js.map