unique-react-rating-stars
Version:
A React component for rating stars
145 lines (138 loc) • 8.14 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var FullStar = function FullStar(_a) {
_a.dir;
return /*#__PURE__*/React__default["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "21",
viewBox: "0 0 20 21",
fill: "#EFBE12"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.65538 15.5338L5.71511 18.0302C5.21145 18.3493 4.58611 17.8747\n 4.73557 17.2868L5.874 12.8085C5.90606 12.6837 5.90226 12.5525\n 5.86304 12.4298C5.82383 12.3071 5.75078 12.198 5.65232 12.115L2.11893\n 9.17413C1.65466 8.78771 1.89429 8.0172 2.49078 7.97849L7.10515\n 7.67901C7.22943 7.67013 7.34864 7.62613 7.44889 7.55212C7.54914\n 7.47812 7.6263 7.37716 7.67139 7.261L9.39235 2.92717C9.43913\n 2.80388 9.52231 2.69773 9.63085 2.62283C9.73938 2.54793 9.86813\n 2.50781 10 2.50781C10.1319 2.50781 10.2606 2.54793 10.3691\n 2.62283C10.4777 2.69773 10.5609 2.80388 10.6076 2.92717L12.3286\n 7.261C12.3737 7.37716 12.4509 7.47812 12.5511 7.55212C12.6514\n 7.62613 12.7706 7.67013 12.8948 7.67901L17.5092 7.97849C18.1057\n 8.0172 18.3453 8.78771 17.8811 9.17413L14.3477 12.115C14.2492\n 12.198 14.1762 12.3071 14.137 12.4298C14.0977 12.5525 14.0939\n 12.6837 14.126 12.8085L15.1818 16.9616C15.3611 17.6671 14.6107\n 18.2366 14.0063 17.8537L10.3446 15.5338C10.2416 15.4682 10.1221\n 15.4334 10 15.4334C9.87792 15.4334 9.75837 15.4682 9.65538\n 15.5338Z"
}));
};
var HalfStar = function HalfStar(_a) {
var _b = _a.dir,
dir = _b === void 0 ? "ltr" : _b;
var halfGradientId = "halfGradient-".concat(dir, "-").concat(Math.random());
return /*#__PURE__*/React__default["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "21",
viewBox: "0 0 20 21"
}, /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("linearGradient", {
id: halfGradientId,
x1: dir === "ltr" ? "0%" : "100%",
y1: "0%",
x2: dir === "ltr" ? "100%" : "0%",
y2: "0%"
}, /*#__PURE__*/React__default["default"].createElement("stop", {
offset: "50%",
stopColor: "#EFBE12"
}), /*#__PURE__*/React__default["default"].createElement("stop", {
offset: "50%",
stopColor: "transparent"
}))), /*#__PURE__*/React__default["default"].createElement("path", {
fill: "url(#".concat(halfGradientId, ")"),
stroke: "#EFBE12",
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M9.65538 15.5338L5.71511 18.0302C5.21145 18.3493 4.58611 17.8747\n 4.73557 17.2868L5.874 12.8085C5.90606 12.6837 5.90226 12.5525\n 5.86304 12.4298C5.82383 12.3071 5.75078 12.198 5.65232 12.115L2.11893\n 9.17414C1.65466 8.78771 1.89429 8.0172 2.49078 7.97849L7.10515\n 7.67901C7.22943 7.67014 7.34864 7.62613 7.44889 7.55213C7.54914\n 7.47812 7.6263 7.37716 7.67139 7.261L9.39235 2.92717C9.43913\n 2.80388 9.52231 2.69773 9.63085 2.62283C9.73938 2.54793 9.86813\n 2.50781 10 2.50781C10.1319 2.50781 10.2606 2.54793 10.3691\n 2.62283C10.4777 2.69773 10.5609 2.80388 10.6076 2.92717L12.3286\n 7.261C12.3737 7.37716 12.4509 7.47812 12.5511 7.55213C12.6514\n 7.62613 12.7706 7.67014 12.8948 7.67901L17.5092 7.97849C18.1057\n 8.0172 18.3453 8.78771 17.8811 9.17414L14.3477 12.115C14.2492\n 12.198 14.1762 12.3071 14.137 12.4298C14.0977 12.5525 14.0939\n 12.6837 14.126 12.8085L15.1818 16.9616C15.3611 17.6671 14.6107\n 18.2366 14.0063 17.8537L10.3446 15.5338C10.2416 15.4682 10.1221\n 15.4334 10 15.4334C9.87792 15.4334 9.75837 15.4682 9.65538\n 15.5338Z"
}));
};
var EmptyStar = function EmptyStar(_a) {
_a.dir;
return /*#__PURE__*/React__default["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "21",
viewBox: "0 0 20 21",
fill: "none",
stroke: "#EFBE12",
strokeLinecap: "round",
strokeLinejoin: "round"
}, /*#__PURE__*/React__default["default"].createElement("path", {
d: "M9.65538 15.401L5.71511 17.8974C5.21145 18.2165 4.58611 17.7419\n 4.73557 17.154L5.874 12.6756C5.90606 12.5509 5.90226 12.4197\n 5.86304 12.297C5.82383 12.1743 5.75078 12.0652 5.65232 11.9822L2.11893\n 9.04132C1.65466 8.6549 1.89429 7.88439 2.49078 7.84568L7.10515\n 7.5462C7.22943 7.53732 7.34864 7.49332 7.44889 7.41931C7.54914\n 7.34531 7.6263 7.24435 7.67139 7.12819L9.39235 2.79436C9.43913\n 2.67106 9.52231 2.56492 9.63084 2.49002C9.73938 2.41511 9.86813\n 2.375 10 2.375C10.1319 2.375 10.2606 2.41511 10.3691 2.49002C10.4777\n 2.56492 10.5609 2.67106 10.6076 2.79436L12.3286 7.12819C12.3737\n 7.24435 12.4509 7.34531 12.5511 7.41931C12.6514 7.49332 12.7706\n 7.53732 12.8948 7.5462L17.5092 7.84568C18.1057 7.88439 18.3453\n 8.6549 17.8811 9.04132L14.3477 11.9822C14.2492 12.0652 14.1762\n 12.1743 14.137 12.297C14.0977 12.4197 14.0939 12.5509 14.126\n 12.6756L15.1818 16.8288C15.3611 17.5343 14.6107 18.1038 14.0063\n 17.7209L10.3446 15.401C10.2416 15.3354 10.1221 15.3006 10\n 15.3006C9.87792 15.3006 9.75837 15.3354 9.65538 15.401V15.401Z"
}));
};
var Star = function Star(_a) {
var filled = _a.filled,
halfFilled = _a.halfFilled,
onClick = _a.onClick,
onMouseOver = _a.onMouseOver,
onMouseLeave = _a.onMouseLeave,
_b = _a.dir,
dir = _b === void 0 ? "ltr" : _b;
return /*#__PURE__*/React__default["default"].createElement("span", {
style: {
cursor: onClick ? "pointer" : "default",
marginRight: 4
},
onClick: onClick,
onMouseOver: onMouseOver,
onMouseLeave: onMouseLeave
}, filled ? (/*#__PURE__*/React__default["default"].createElement(FullStar, {
dir: dir
})) : halfFilled ? (/*#__PURE__*/React__default["default"].createElement(HalfStar, {
dir: dir
})) : (/*#__PURE__*/React__default["default"].createElement(EmptyStar, {
dir: dir
})));
};
var RatingHandler = function RatingHandler(_a) {
var value = _a.value,
onChange = _a.onChange,
_b = _a.readOnly,
readOnly = _b === void 0 ? false : _b,
_c = _a.max,
max = _c === void 0 ? 5 : _c,
_d = _a.dir,
dir = _d === void 0 ? "ltr" : _d;
var _e = React.useState(0),
hoverValue = _e[0],
setHoverValue = _e[1];
var handleClick = function handleClick(val) {
return !readOnly && onChange && onChange(val);
};
var handleMouseOver = function handleMouseOver(val) {
return !readOnly && setHoverValue(val);
};
var handleMouseLeave = function handleMouseLeave() {
return !readOnly && setHoverValue(0);
};
var starIndices = Array.from({
length: max
}, function (_, i) {
return i;
});
return /*#__PURE__*/React__default["default"].createElement("div", {
style: {
display: "flex",
flexDirection: dir === "rtl" ? "row-reverse" : "row"
}
}, starIndices.map(function (i) {
var ratingValue = dir === "ltr" ? i + 1 : max - i;
var currentValue = hoverValue || value;
var isFilled = currentValue >= ratingValue;
var isHalfFilled = !isFilled && currentValue >= ratingValue - 0.5;
return /*#__PURE__*/React__default["default"].createElement(Star, {
key: i,
filled: isFilled,
halfFilled: isHalfFilled,
onClick: function onClick() {
return handleClick(ratingValue);
},
onMouseOver: function onMouseOver() {
return handleMouseOver(ratingValue);
},
onMouseLeave: handleMouseLeave,
dir: dir
});
}));
};
exports["default"] = RatingHandler;
//# sourceMappingURL=index.cjs.js.map