new-react-stars
Version:
Simple star rating component for your React projects
3 lines (2 loc) • 2.85 kB
JavaScript
"use strict";var t=require("react/jsx-runtime"),e=require("react"),o=function(){return o=Object.assign||function(t){for(var e,o=1,r=arguments.length;o<r;o++)for(var a in e=arguments[o])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r={overflow:"hidden",position:"relative"},a={position:"relative",overflow:"hidden",cursor:"pointer",display:"block",float:"left"},n=function(t,e){return"\n .react-stars-".concat(e,":before {\n position: absolute;\n overflow: hidden;\n display: block;\n z-index: 1;\n top: 0; left: 0;\n width: 50%;\n content: attr(data-forhalf);\n color: ").concat(t,";\n }")};exports.ReactStars=function(i){var c=i.className,l=i.edit,s=void 0===l||l,u=i.half,d=void 0===u||u,f=i.value,h=void 0===f?0:f,v=i.count,p=void 0===v?5:v,g=i.char,M=void 0===g?"★":g,b=i.size,y=void 0===b?15:b,x=i.color1,S=void 0===x?"gray":x,m=i.color2,z=void 0===m?"#ffd700":m,j=i.onChange,w=void 0===j?function(t){}:j,N=e.useState((Math.random()+"").replace(".",""))[0],O=e.useState(h),E=O[0],k=O[1],C=e.useState([]),T=C[0],q=C[1],A=e.useState({at:Math.floor(h),hidden:d&&h%1<.5}),L=A[0],R=A[1],_=e.useState({count:p,size:y,char:M,color1:S,color2:z,half:d,edit:s}),B=_[0],H=_[1];e.useEffect((function(){q(P(E))}),[E,B]),e.useEffect((function(){q(P(h)),k(h),R({at:Math.floor(h),hidden:B.half&&h%1<.5}),H({count:p,size:y,char:M,color1:S,color2:z,half:d,edit:s})}),[h,p,y,M,S,z,d,s]);var I=function(t){return t%1!=0},P=function(t){void 0===t&&(t=B.half?Math.floor(E):Math.round(E));for(var e=[],o=0;o<B.count;o++)e.push({active:o<=t-1});return e},X=function(t){if(B.edit){var e=Number(t.currentTarget.getAttribute("data-index"));if(B.half){var r=D(t,B.size);R(o(o({},L),{hidden:r,at:r?e+1:e})),e=r?e+1:e}else e+=1;q(P(e))}},D=function(t,e){var o=t.target,r=t.clientX-o.getBoundingClientRect().left;return(r=Math.round(Math.abs(r)))>e/2},F=function(){B.edit&&(B.half&&R(o(o({},L),{hidden:!I(E),at:Math.floor(E)})),q(P()))},G=function(t){if(B.edit){var e,r=Number(t.currentTarget.getAttribute("data-index"));if(B.half){var a=D(t,B.size);R(o(o({},L),{hidden:a,at:a?r+1:r})),e=a?r:r+.5}else e=r+=1;k(e),q(P(r)),w&&w(e)}};return t.jsxs("div",{className:c,style:r,children:[B.half?t.jsx("style",{dangerouslySetInnerHTML:{__html:n(B.color2,N)}}):null,T.map((function(e,o){var r="";B.half&&!L.hidden&&L.at===o&&(r="react-stars-".concat(N));var n=Object.assign({},a,{color:e.active?B.color2:B.color1,cursor:B.edit?"pointer":"default",fontSize:"".concat(B.size,"px")});return t.jsx("span",{className:r,style:n,"data-index":o,"data-forhalf":B.char,onMouseOver:X,onMouseMove:X,onMouseLeave:F,onClick:G,children:B.char},"".concat(o,"-").concat(e.active?"active":"inactive","-").concat(N))}))]})};
//# sourceMappingURL=index.js.map