UNPKG

star-meter

Version:

A highly customizable React star rating component with support for half-stars, animations, and custom styling

3 lines (2 loc) 5.02 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,l,i=[],s=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(r=a.call(n)).done)&&(i.push(r.value),i.length!==t);s=!0);}catch(e){c=!0,o=e}finally{try{if(!s&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t){var r=t.maxRating,a=void 0===r?5:r,i=t.color,s=void 0===i?"#fcc419":i,c=t.textcolor,u=void 0===c?"#0d0d0d":c,f=t.size,d=void 0===f?48:f,m=t.messages,v=void 0===m?[]:m,h=t.className,p=void 0===h?"":h,g=t.defaultRating,y=void 0===g?0:g,w=t.onSetRating,x=void 0===w?function(){}:w,E=t.allowHalfStars,b=void 0===E||E,M=t.animation,S=void 0===M?"none":M,k=t.allowReset,A=void 0===k||k,C=o(e.useState(y),2),I=C[0],R=C[1],z=o(e.useState(null),2),j=z[0],B=z[1],H=null!=j?j:I;return n.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:"16px"},className:p},n.default.createElement("div",{style:{display:"flex",alignItems:"center",gap:"4px"}},Array.from({length:a},(function(e,t){var r=H>=t+1,o=H===t+.5,a=r?t+1:o?t+.5:t+1;return n.default.createElement(l,{key:t,full:r,half:o,size:d,color:s,onRate:function(){return function(e){A&&e===I?(R(0),x(0)):(R(e),x(e))}(a)},onHoverIn:function(){},onHoverOut:function(){return B(null)},onMouseMove:b?function(e){return function(e,t){var n=e.currentTarget.getBoundingClientRect(),r=n.left,o=n.width,a=e.clientX-r;B(t+(a<o/2?.5:1))}(e,t)}:void 0,animation:S})})),n.default.createElement("p",{style:{margin:"0 0 0 8px",lineHeight:"1",color:u,fontSize:"".concat(d/1.5,"px"),fontWeight:500}},v.length===a?v[Math.floor(H)-1]:H||"")))}function l(e){var t=e.full,r=e.half,o=e.onRate,a=e.onHoverIn,l=e.onHoverOut,i=e.onMouseMove,s=e.color,c=e.size,u=e.animation;return n.default.createElement("span",{role:"button",tabIndex:"0",className:"star ".concat(u),style:{cursor:"pointer",display:"inline-block"},onClick:o,onMouseEnter:a,onMouseLeave:l,onMouseMove:i,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||o()}},t?n.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:c,height:c,fill:s,viewBox:"0 0 24 24"},n.default.createElement("path",{d:"M12 17.27l-5.18 3.73c-.68.49-1.6-.17-1.39-.95l1.64-6.36-4.9-4.24c-.61-.53-.28-1.54.52-1.63l6.56-.57 2.52-6.1c.3-.72 1.32-.72 1.62 0l2.52 6.1 6.56.57c.8.07 1.13 1.1.52 1.63l-4.9 4.24 1.64 6.36c.21.78-.71 1.44-1.39.95L12 17.27z"})):r?n.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:c,height:c,viewBox:"0 0 24 24"},n.default.createElement("defs",null,n.default.createElement("linearGradient",{id:"half"},n.default.createElement("stop",{offset:"50%",stopColor:s}),n.default.createElement("stop",{offset:"50%",stopColor:"transparent"}))),n.default.createElement("path",{fill:"url(#half)",stroke:s,strokeWidth:"2",d:"M12 17.27l-5.18 3.73c-.68.49-1.6-.17-1.39-.95l1.64-6.36-4.9-4.24c-.61-.53-.28-1.54.52-1.63l6.56-.57 2.52-6.1c.3-.72 1.32-.72 1.62 0l2.52 6.1 6.56.57c.8.07 1.13 1.1.52 1.63l-4.9 4.24 1.64 6.36c.21.78-.71 1.44-1.39.95L12 17.27z"})):n.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:c,height:c,fill:"none",stroke:s,strokeWidth:"2",viewBox:"0 0 24 24"},n.default.createElement("path",{d:"M12 17.27l-5.18 3.73c-.68.49-1.6-.17-1.39-.95l1.64-6.36-4.9-4.24c-.61-.53-.28-1.54.52-1.63l6.56-.57 2.52-6.1c.3-.72 1.32-.72 1.62 0l2.52 6.1 6.56.57c.8.07 1.13 1.1.52 1.63l-4.9 4.24 1.64 6.36c.21.78-.71 1.44-1.39.95L12 17.27z"})))}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".star{transition:transform .2s ease}.star.scale:hover{transform:scale(1.2)}.star.rotate:hover{transform:rotate(-10deg) scale(1.1)}.star.bounce:hover{animation:bounce .4s ease}@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}",{insertAt:"top"}),exports.StarRating=a,exports.default=a; //# sourceMappingURL=index.js.map