react-rating-star-with-type
Version:
This simple react rating star component with typescript support made by Ziaul Hoque Founder of Revuers.com
90 lines (89 loc) • 4.67 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const icons_1 = require("./icons");
function RatingStar(props) {
const { value = 0, count = 5, size = 14, isEdit = false, isHalf = false, valueShow = false, emptyIcon = react_1.default.createElement(icons_1.BsStar, null), halfIcon = react_1.default.createElement(icons_1.BsStarHalf, null), filledIcon = react_1.default.createElement(icons_1.BsStarFill, null), activeColor = "#FED900", activeColors = [], inactiveColor = "#808080", onChange, style = {}, classNames = "", } = props;
const initialColor = activeColors[Math.round(value) - 1] || activeColor;
const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
const [color, setColor] = (0, react_1.useState)(initialColor);
const clickHandler = (nextValue, e) => {
var _a, _b, _c;
if (!isEdit)
return;
const value = nextValue;
if (isHalf) {
const xPos = (e.pageX - ((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.left)) /
((_c = e.currentTarget) === null || _c === void 0 ? void 0 : _c.offsetWidth);
if (xPos <= 0.5) {
nextValue -= 0.5;
}
}
setCurrentValue(nextValue);
// color set
if (typeof onChange === "function")
onChange(nextValue);
const color = activeColors[value - 1]
? activeColors[value - 1]
: activeColor;
setColor(color);
};
(0, react_1.useEffect)(() => {
// Update local state when the value prop changes
setCurrentValue(value);
// Set initial color or use the color from activeColors array
const updatedColor = activeColors[Math.round(value) - 1] || activeColor;
setColor(updatedColor);
}, [value, activeColors, activeColor]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: classNames, style: Object.assign(Object.assign({}, style), { display: "flex", alignItems: "center", fontSize: typeof size === "number" ? `${size}px` : size, gap: 3 }) },
Array(count)
.fill(1)
.map((item, index) => {
const roundedValue = Math.round(currentValue * 2) / 2;
const currentValueFloor = Math.floor(roundedValue);
const isActive = currentValueFloor >= index + 1;
// Check if the current value is a half value
const isHalfActive = roundedValue === index + 0.5;
// Determine the color and icon based on the current value and half value
const starColor = isHalfActive
? color
: isActive
? color
: inactiveColor;
const starIcon = isHalfActive
? halfIcon
: isActive
? filledIcon
: emptyIcon;
return (react_1.default.createElement("span", { onClick: (e) => clickHandler(index + 1, e), key: index, style: {
color: starColor,
cursor: isEdit ? "pointer" : "default",
} }, starIcon));
}),
react_1.default.createElement("span", { style: { color: inactiveColor } }, !!currentValue && valueShow && currentValue.toFixed(1)))));
}
exports.default = (0, react_1.memo)(RatingStar);