react-customizable-star-rating
Version:
React component to view and set rating
56 lines • 4.91 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Star = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const Star = ({ index, onRate, full, half, onHoverIn, onHoverOut, size, color, borderColor, onSetRating, viewOnly, dir }) => {
const starStyle = {
width: `${size}px`,
height: `${size}px`,
display: 'block',
cursor: 'pointer',
};
const handleRating = (e, temp = false) => {
const rect = e.target.getBoundingClientRect();
const pixelsFromLeft = e.clientX - rect.left;
const pixelsFromRight = rect.right - e.clientX;
let halfStar = pixelsFromRight > pixelsFromLeft;
if (dir === 'rtl') {
halfStar = pixelsFromRight < pixelsFromLeft;
console.log('dir', dir);
console.log('halfStar', halfStar);
}
if (temp && onHoverIn) {
return onHoverIn(halfStar ? index + 0.5 : index + 1);
}
if (onRate) {
onRate(halfStar ? index + 0.5 : index + 1);
}
if (onSetRating) {
onSetRating(halfStar ? index + 0.5 : index + 1);
}
};
const renderSuitableStar = () => {
if (full) {
return (react_1.default.createElement("svg", { "data-testid": "rating", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none" },
react_1.default.createElement("g", { transform: "translate(-1021.982 -806.071)" },
react_1.default.createElement("path", { d: "M-1962.1,17.233l-3.976-2.888a1,1,0,0,0-1.176,0l-3.975,2.888a1,1,0,0,1-1.538-1.118l1.518-4.674a1,1,0,0,0-.364-1.118l-3.976-2.888a1,1,0,0,1,.589-1.81h4.914a1,1,0,0,0,.95-.69l1.519-4.674a1,1,0,0,1,1.9,0l1.518,4.674a1,1,0,0,0,.95.69h4.915a1,1,0,0,1,.588,1.81l-3.975,2.888a1,1,0,0,0-.364,1.118l1.518,4.674a1,1,0,0,1-.953,1.314A.984.984,0,0,1-1962.1,17.233Z", transform: "translate(2998 807)" }),
react_1.default.createElement("path", { d: "M11.049,2.927a1,1,0,0,1,1.9,0L14.47,7.6a1,1,0,0,0,.95.69h4.915a1,1,0,0,1,.588,1.81l-3.976,2.888a1,1,0,0,0-.363,1.118L18.1,18.781A1,1,0,0,1,16.564,19.9l-3.976-2.888a1,1,0,0,0-1.176,0L7.436,19.9A1,1,0,0,1,5.9,18.781l1.518-4.674a1,1,0,0,0-.363-1.118L3.077,10.1a1,1,0,0,1,.588-1.81H8.579A1,1,0,0,0,9.53,7.6l1.519-4.674Z", transform: "translate(1019.837 804.334)", fill: color, stroke: borderColor, strokeWidth: "1" }))));
}
if (half) {
return (react_1.default.createElement("svg", { "data-testid": "rating", style: { transform: dir === 'rtl' ? 'rotateY(180deg)' : 'rotateY(0)' }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" },
react_1.default.createElement("g", { transform: "translate(-1021.982 -806.071)" },
react_1.default.createElement("path", { d: "M-1972.765,16.115l1.518-4.674a1,1,0,0,0-.364-1.118l-3.976-2.888a1,1,0,0,1,.589-1.81h4.914a1,1,0,0,0,.95-.69l1.519-4.674a.986.986,0,0,1,1.014-.689V14.156a1,1,0,0,0-.652.189l-3.975,2.888a.984.984,0,0,1-.584.2A1,1,0,0,1-1972.765,16.115Z", transform: "translate(2998 807)", fill: color }),
react_1.default.createElement("path", { d: "M11.049,2.927a1,1,0,0,1,1.9,0L14.47,7.6a1,1,0,0,0,.95.69h4.915a1,1,0,0,1,.588,1.81l-3.976,2.888a1,1,0,0,0-.363,1.118L18.1,18.781A1,1,0,0,1,16.564,19.9l-3.976-2.888a1,1,0,0,0-1.176,0L7.436,19.9A1,1,0,0,1,5.9,18.781l1.518-4.674a1,1,0,0,0-.363-1.118L3.077,10.1a1,1,0,0,1,.588-1.81H8.579A1,1,0,0,0,9.53,7.6l1.519-4.674Z", transform: "translate(1019.837 804.334)", fill: "none", stroke: borderColor, strokeWidth: "1" }))));
}
return (react_1.default.createElement("svg", { "data-testid": "rating", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none" },
react_1.default.createElement("g", { transform: "translate(-1021.982 -806.071)" },
react_1.default.createElement("path", { d: "M11.049,2.927a1,1,0,0,1,1.9,0L14.47,7.6a1,1,0,0,0,.95.69h4.915a1,1,0,0,1,.588,1.81l-3.976,2.888a1,1,0,0,0-.363,1.118L18.1,18.781A1,1,0,0,1,16.564,19.9l-3.976-2.888a1,1,0,0,0-1.176,0L7.436,19.9A1,1,0,0,1,5.9,18.781l1.518-4.674a1,1,0,0,0-.363-1.118L3.077,10.1a1,1,0,0,1,.588-1.81H8.579A1,1,0,0,0,9.53,7.6l1.519-4.674Z", transform: "translate(1019.837 804.334)", fill: "none", stroke: borderColor, strokeWidth: "1" }))));
};
if (viewOnly) {
return (react_1.default.createElement("span", { style: { ...starStyle, cursor: 'auto' } }, renderSuitableStar()));
}
return (react_1.default.createElement("button", { type: "button", style: { ...starStyle, background: 'none', border: 'none' }, onClick: (e) => handleRating(e), onMouseMove: (e) => handleRating(e, true), onMouseLeave: onHoverOut }, renderSuitableStar()));
};
exports.Star = Star;
//# sourceMappingURL=Star.js.map