react-star-rate
Version:
Lightweight, customizable star ratings component for React
3 lines (2 loc) • 7.09 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e,n,l,t,o=require("react"),r=require("goober"),a=require("goober/prefixer");function s(){return(s=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var l=arguments[n];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t])}return e}).apply(this,arguments)}function i(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function u(e,n){return n||(n=e.slice(0)),e.raw=n,e}var f,c,v,d=function(a){function s(){var e;return(e=a.apply(this,arguments)||this).onClick=function(n){var l=e.props;(0,l.onClick)(n,l.index)},e.onHover=function(n){var l=e.props;(0,l.onHover)(n,l.index)},e.getStarType=function(){var n=e.props,l=n.value,t=n.index+1;return n.allowHalf&&l+.5>=t&&l<t?"half":t<=l?"full":"zero"},e.getValue=function(n,l){var t=e.props,o=t.index+1;if(t.allowHalf){var r,a,s=e.starRef.ownerDocument,i=s.body,u=s.documentElement,f=null==(r=e.starRef)?void 0:r.getBoundingClientRect(),c=null==f?void 0:f.left;c-=(null==u?void 0:u.clientLeft)||i.clientLeft||0;var v=(s.defaultView||s.parentWindow).pageXOffset;"number"!=typeof v&&"number"!=typeof(v=s.documentElement.scrollLeft)&&(v=s.body.scrollLeft),c+=v;var d=null==(a=e.starRef)?void 0:a.clientWidth;(!l&&n-c<d/2||l&&n-c>d/2)&&(o-=.5)}return o},e}return i(s,a),s.prototype.render=function(){var a,s,i,f,c=this,v=this.props,d=v.classNamePrefix,p=v.count,h=v.disabled,y=v.index,g=v.reverse,m=v.style,b=v.styleFull,H=v.styleFullHover,x=v.styleHalf,_=v.styleHalfHover,C=v.styleHover,V=v.styleZero,S=v.styleZeroHover,w=v.symbol,z=v.value,R="function"==typeof w?w(this.props):w,k=this.getStarType(),F=d+"__star "+{zero:d+"__star--zero",half:d+"__star--half",full:d+"__star--full"}[k],O={zero:V,full:b,half:x},M={zero:S,full:H,half:_},N=r.css(e||(e=u(["\n position: absolute;\n left: 0;\n top: 0;\n width: 50%;\n height: 100%;\n overflow: hidden;\n opacity: 0;\n transition: all 500ms ease;\n "]))),P=r.css({"&:hover":null==(a=M[k])?void 0:a.first}),E=r.css({"&:hover":null==(s=M[k])?void 0:s.second}),L={zero:"",half:r.css(n||(n=u(["\n ."," {\n opacity: 1;\n color: #ffd166;\n }\n\n &:hover {\n ."," {\n color: #ffe3a2;\n }\n }\n "])),N,N),full:r.css(l||(l=u(["\n color: #ffd166 !important;\n\n &:hover {\n color: #ffe3a2;\n }\n "])))},B=r.css(t||(t=u(["\n margin: 0;\n padding: 0;\n display: inline-block;\n margin-right: 8px;\n position: relative;\n color: #e8eaeb;\n cursor: pointer;\n transition: all 500ms ease;\n ","\n "])),g?"\n margin-right: 0;\n margin-left: 8px;\n float: right;\n\n ."+N+" {\n right: 0;\n left: auto;\n }\n ":""),j=r.css({"&:hover":C[k]});return o.createElement("li",{"aria-checked":z>y?"true":"false","aria-label":y+1+" out of "+p+" stars","aria-posinset":y+1,"aria-setsize":p,className:F+" "+B+" "+j+" "+L[k],onClick:h?void 0:this.onClick,onMouseMove:h?void 0:this.onHover,ref:function(e){c.starRef=e},role:"radio",style:m[k],tabIndex:h?-1:0},o.createElement("div",{"aria-hidden":"true",className:d+"__star__first "+N+" "+P,style:null==(i=O[k])?void 0:i.first},R),o.createElement("div",{"aria-hidden":"true",className:d+"__star__second "+E,style:null==(f=O[k])?void 0:f.second},R))},s}(o.Component);r.setup(o.createElement,a.prefix);var p=function(){},h=function(e){function n(n){var l;(l=e.call(this,n)||this).onHover=function(e,n){var t=l.props.onHoverChange,o=l.state.clearedValue,r=l.getStarValue(n,e.pageX);r!==o&&l.setState({hoverValue:r,clearedValue:void 0}),t(r)},l.onMouseLeave=function(){var e=l.props.onHoverChange;l.setState({hoverValue:void 0,clearedValue:void 0}),e(void 0)},l.onClick=function(e,n){var t=l.props.allowClear,o=l.state.value,r=l.getStarValue(n,e.pageX),a=!!t&&r===o;l.onMouseLeave(),l.changeValue(a?0:r),l.setState({clearedValue:a?r:void 0})},l.onFocus=function(){var e=l.props.onFocus;e&&e()},l.onBlur=function(){var e=l.props.onBlur;e&&e()},l.changeValue=function(e){var n=l.props.onChange;"value"in l.props||l.setState({value:e}),n(e)},l.saveStarRef=function(e){return function(n){l.starRefs[e]=n}},l.getStarValue=function(e,n){return l.starRefs[e].getValue(n,"rtl"===l.props.direction)},l.focus=function(){var e;l.props.disabled||null==(e=l.ratingContainerRef)||e.focus()};var t=n.defaultValue,o=n.value;return l.starRefs={},l.state={value:null!=o?o:t},l}i(n,e);var l=n.prototype;return l.componentDidMount=function(){var e=this.props;e.autoFocus&&!e.disabled&&this.focus()},n.getDerivedStateFromProps=function(e,n){return"value"in e&&void 0!==e.value?s({},n,{value:e.value}):n},l.render=function(){for(var e,n=this,l=this.props,t=l.allowHalf,a=l.classNamePrefix,s=l.count,i=l.direction,p=l.disabled,h=l.style,y=l.symbol,g=l.tabIndex,m=this.state,b=m.hoverValue,H=m.value,x=[],_=0;_<(null!=s?s:0);_++){var C,V,S,w,z,R,k,F,O,M,N,P;x.push(o.createElement(d,{allowHalf:t,classNamePrefix:a,count:s,disabled:p,index:_,key:_,ref:this.saveStarRef(_),onClick:this.onClick,onHover:this.onHover,reverse:"rtl"===i,style:{full:null==h||null==(C=h.full)?void 0:C.star,half:null==h||null==(V=h.half)?void 0:V.star,zero:null==h||null==(S=h.zero)?void 0:S.star},styleFull:null==h?void 0:h.full,styleFullHover:null==h||null==(w=h.hover)?void 0:w.full,styleHalf:null==h?void 0:h.half,styleHalfHover:null==h||null==(z=h.hover)?void 0:z.half,styleHover:{full:null==h||null==(R=h.hover)||null==(k=R.full)?void 0:k.star,half:null==h||null==(F=h.hover)||null==(O=F.half)?void 0:O.star,zero:null==h||null==(M=h.hover)||null==(N=M.zero)?void 0:N.star},styleZero:null==h?void 0:h.zero,styleZeroHover:null==h||null==(P=h.hover)?void 0:P.zero,symbol:y,value:void 0===b?H:b}))}var E=r.css(f||(f=u(["\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: 40px;\n display: inline-block;\n vertical-align: middle;\n font-weight: normal;\n font-style: normal;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n "]))),L=r.css({"&:hover":null==h||null==(e=h.hover)?void 0:e.style});return o.createElement("ul",{"aria-label":"Stars Rating",className:a+" "+E+" "+L+" "+("rtl"===i?a+"--rtl "+r.css(c||(c=u(["\n direction: rtl;\n "]))):a+"--ltr "+r.css(v||(v=u(["\n direction: ltr;\n "])))),onBlur:this.onBlur,onFocus:this.onFocus,onMouseLeave:p?void 0:this.onMouseLeave,ref:function(e){n.ratingContainerRef=e},role:"radiogroup",style:null==h?void 0:h.style,tabIndex:p?-1:g},x)},n}(o.Component);h.defaultProps={allowClear:!0,allowHalf:!0,classNamePrefix:"react-star-rate",count:5,defaultValue:0,direction:"ltr",disabled:!1,onChange:p,onHoverChange:p,style:{},symbol:"★",tabIndex:0},exports.default=h;
//# sourceMappingURL=react-star-rate.cjs.production.min.js.map