react-star-rate - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

dist/react-star-rate.cjs.development.js

@@ -53,13 +53,2 @@ 'use strict';
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var FirstStarStyles = /*#__PURE__*/goober.css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
-
-var StarStyles = function StarStyles(props) {
-  return goober.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), props.reverse ? "\n    margin-right: 0;\n    margin-left: 8px;\n    float: right;\n\n    ." + FirstStarStyles + " {\n        right: 0;\n        left: auto;\n    }\n  " : "");
-};
-
-var StarActiveStyles = {
-  '': '',
-  half: /*#__PURE__*/goober.css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    .", " {\n      opacity: 1;\n      color: #ffd166;\n    }\n\n    &:hover {\n      .", " {\n        color: #ffe3a2;\n      }\n    }\n  "])), FirstStarStyles, FirstStarStyles),
-  full: /*#__PURE__*/goober.css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    color: #ffd166 !important;\n\n    &:hover {\n      color: #ffe3a2;\n    }\n  "])))
-};
 var Star = /*#__PURE__*/function (_React$Component) {
@@ -100,3 +89,3 @@ _inheritsLoose(Star, _React$Component);
 
-      return '';
+      return 'zero';
     };
@@ -150,3 +139,7 @@
   _proto.render = function render() {
-    var _this2 = this;
+    var _styleHoverMap$starTy,
+        _styleHoverMap$starTy2,
+        _this2 = this,
+        _styleMap$starType,
+        _styleMap$starType2;
 
@@ -159,11 +152,46 @@ var _this$props5 = this.props,
         reverse = _this$props5.reverse,
+        style = _this$props5.style,
+        styleFull = _this$props5.styleFull,
+        styleFullHover = _this$props5.styleFullHover,
+        styleHalf = _this$props5.styleHalf,
+        styleHalfHover = _this$props5.styleHalfHover,
+        styleHover = _this$props5.styleHover,
+        styleZero = _this$props5.styleZero,
+        styleZeroHover = _this$props5.styleZeroHover,
         symbol = _this$props5.symbol,
         value = _this$props5.value;
     var symbolNode = typeof symbol === 'function' ? symbol(this.props) : symbol;
+    var starType = this.getStarType();
     var classNameMap = {
-      '': '',
+      zero: classNamePrefix + "__star--zero",
       half: classNamePrefix + "__star--half",
       full: classNamePrefix + "__star--full"
     };
-    var className = classNamePrefix + "__star " + classNameMap[this.getStarType()];
+    var className = classNamePrefix + "__star " + classNameMap[starType];
+    var styleMap = {
+      zero: styleZero,
+      full: styleFull,
+      half: styleHalf
+    };
+    var styleHoverMap = {
+      zero: styleZeroHover,
+      full: styleFullHover,
+      half: styleHalfHover
+    };
+    var FirstStarStyles = goober.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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    "])));
+    var FirstStarHoverStyles = goober.css({
+      '&:hover': (_styleHoverMap$starTy = styleHoverMap[starType]) == null ? void 0 : _styleHoverMap$starTy.first
+    });
+    var SecondStarHoverStyles = goober.css({
+      '&:hover': (_styleHoverMap$starTy2 = styleHoverMap[starType]) == null ? void 0 : _styleHoverMap$starTy2.second
+    });
+    var StarActiveStyles = {
+      zero: '',
+      half: goober.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        .", " {\n          opacity: 1;\n          color: #ffd166;\n        }\n\n        &:hover {\n          .", " {\n            color: #ffe3a2;\n          }\n        }\n      "])), FirstStarStyles, FirstStarStyles),
+      full: goober.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        color: #ffd166 !important;\n\n        &:hover {\n          color: #ffe3a2;\n        }\n      "])))
+    };
+    var StarStyles = goober.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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    "])), reverse ? "\n        margin-right: 0;\n        margin-left: 8px;\n        float: right;\n\n        ." + FirstStarStyles + " {\n            right: 0;\n            left: auto;\n        }\n      " : "");
+    var StarHoverStyles = goober.css({
+      '&:hover': styleHover[starType]
+    });
     return React.createElement("li", {
@@ -174,5 +202,3 @@ "aria-checked": value > index ? 'true' : 'false',
       "aria-setsize": count,
-      className: className + " " + StarStyles({
-        reverse: reverse
-      }) + " " + StarActiveStyles[this.getStarType()],
+      className: className + " " + StarStyles + " " + StarHoverStyles + " " + StarActiveStyles[starType],
       onClick: disabled ? undefined : this.onClick,
@@ -184,9 +210,12 @@ onMouseMove: disabled ? undefined : this.onHover,
       role: "radio",
+      style: style[starType],
       tabIndex: disabled ? -1 : 0
     }, React.createElement("div", {
-      className: classNamePrefix + "__star-first " + FirstStarStyles,
-      "aria-hidden": "true"
+      "aria-hidden": "true",
+      className: classNamePrefix + "__star__first " + FirstStarStyles + " " + FirstStarHoverStyles,
+      style: (_styleMap$starType = styleMap[starType]) == null ? void 0 : _styleMap$starType.first
     }, symbolNode), React.createElement("div", {
-      className: classNamePrefix + "__star-second",
-      "aria-hidden": "true"
+      "aria-hidden": "true",
+      className: classNamePrefix + "__star__second " + SecondStarHoverStyles,
+      style: (_styleMap$starType2 = styleMap[starType]) == null ? void 0 : _styleMap$starType2.second
     }, symbolNode));
@@ -203,4 +232,2 @@ };
 
-var ListContainerStyles = /*#__PURE__*/goober.css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
-
 var StarsRating = /*#__PURE__*/function (_React$Component) {
@@ -334,3 +361,4 @@ _inheritsLoose(StarsRating, _React$Component);
   _proto.render = function render() {
-    var _this2 = this;
+    var _style$hover7,
+        _this2 = this;
 
@@ -352,2 +380,4 @@ var _this$props2 = this.props,
     for (var index = 0; index < (count != null ? count : 0); index++) {
+      var _style$full, _style$half, _style$zero, _style$hover, _style$hover2, _style$hover3, _style$hover3$full, _style$hover4, _style$hover4$half, _style$hover5, _style$hover5$zero, _style$hover6;
+
       stars.push(React.createElement(Star, {
@@ -364,2 +394,18 @@ allowHalf: allowHalf,
         reverse: direction === 'rtl',
+        style: {
+          full: style == null ? void 0 : (_style$full = style.full) == null ? void 0 : _style$full.star,
+          half: style == null ? void 0 : (_style$half = style.half) == null ? void 0 : _style$half.star,
+          zero: style == null ? void 0 : (_style$zero = style.zero) == null ? void 0 : _style$zero.star
+        },
+        styleFull: style == null ? void 0 : style.full,
+        styleFullHover: style == null ? void 0 : (_style$hover = style.hover) == null ? void 0 : _style$hover.full,
+        styleHalf: style == null ? void 0 : style.half,
+        styleHalfHover: style == null ? void 0 : (_style$hover2 = style.hover) == null ? void 0 : _style$hover2.half,
+        styleHover: {
+          full: style == null ? void 0 : (_style$hover3 = style.hover) == null ? void 0 : (_style$hover3$full = _style$hover3.full) == null ? void 0 : _style$hover3$full.star,
+          half: style == null ? void 0 : (_style$hover4 = style.hover) == null ? void 0 : (_style$hover4$half = _style$hover4.half) == null ? void 0 : _style$hover4$half.star,
+          zero: style == null ? void 0 : (_style$hover5 = style.hover) == null ? void 0 : (_style$hover5$zero = _style$hover5.zero) == null ? void 0 : _style$hover5$zero.star
+        },
+        styleZero: style == null ? void 0 : style.zero,
+        styleZeroHover: style == null ? void 0 : (_style$hover6 = style.hover) == null ? void 0 : _style$hover6.zero,
         symbol: symbol,
@@ -370,5 +416,9 @@ value: hoverValue === undefined ? value : hoverValue
 
+    var ListContainerStyles = goober.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\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    "])));
+    var ListContainerHoverStyles = goober.css({
+      '&:hover': style == null ? void 0 : (_style$hover7 = style.hover) == null ? void 0 : _style$hover7.style
+    });
     return React.createElement("ul", {
       "aria-label": "Stars Rating",
-      className: classNamePrefix + " " + ListContainerStyles + " " + (direction === 'rtl' ? classNamePrefix + "--rtl " + goober.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n                direction: rtl;\n              "]))) : classNamePrefix + "--ltr " + goober.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n                direction: ltr;\n              "])))),
+      className: classNamePrefix + " " + ListContainerStyles + " " + ListContainerHoverStyles + " " + (direction === 'rtl' ? classNamePrefix + "--rtl " + goober.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n                direction: rtl;\n              "]))) : classNamePrefix + "--ltr " + goober.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n                direction: ltr;\n              "])))),
       onBlur: this.onBlur,
@@ -381,3 +431,3 @@ onFocus: this.onFocus,
       role: "radiogroup",
-      style: style,
+      style: style == null ? void 0 : style.style,
       tabIndex: disabled ? -1 : tabIndex
@@ -384,0 +434,0 @@ }, stars);

dist/react-star-rate.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n,t,r,o=require("react"),a=require("goober"),l=require("goober/prefixer");function i(){return(i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function s(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 c,f,p,v=a.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"]))),d={"":"",half:a.css(t||(t=u(["\n    ."," {\n      opacity: 1;\n      color: #ffd166;\n    }\n\n    &:hover {\n      ."," {\n        color: #ffe3a2;\n      }\n    }\n  "])),v,v),full:a.css(r||(r=u(["\n    color: #ffd166 !important;\n\n    &:hover {\n      color: #ffe3a2;\n    }\n  "])))},h=function(e){function t(){var n;return(n=e.apply(this,arguments)||this).onClick=function(e){var t=n.props;(0,t.onClick)(e,t.index)},n.onHover=function(e){var t=n.props;(0,t.onHover)(e,t.index)},n.getStarType=function(){var e=n.props,t=e.value,r=e.index+1;return e.allowHalf&&t+.5>=r&&t<r?"half":r<=t?"full":""},n.getValue=function(e,t){var r=n.props,o=r.index+1;if(r.allowHalf){var a,l,i=n.starRef.ownerDocument,s=i.body,u=i.documentElement,c=null==(a=n.starRef)?void 0:a.getBoundingClientRect(),f=null==c?void 0:c.left;f-=(null==u?void 0:u.clientLeft)||s.clientLeft||0;var p=(i.defaultView||i.parentWindow).pageXOffset;"number"!=typeof p&&"number"!=typeof(p=i.documentElement.scrollLeft)&&(p=i.body.scrollLeft),f+=p;var v=null==(l=n.starRef)?void 0:l.clientWidth;(!t&&e-f<v/2||t&&e-f>v/2)&&(o-=.5)}return o},n}return s(t,e),t.prototype.render=function(){var e,t=this,r=this.props,l=r.classNamePrefix,i=r.count,s=r.disabled,c=r.index,f=r.reverse,p=r.symbol,h=r.value,g="function"==typeof p?p(this.props):p,m=l+"__star "+{"":"",half:l+"__star--half",full:l+"__star--full"}[this.getStarType()];return o.createElement("li",{"aria-checked":h>c?"true":"false","aria-label":c+1+" out of "+i+" stars","aria-posinset":c+1,"aria-setsize":i,className:m+" "+(e={reverse:f},a.css(n||(n=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"])),e.reverse?"\n    margin-right: 0;\n    margin-left: 8px;\n    float: right;\n\n    ."+v+" {\n        right: 0;\n        left: auto;\n    }\n  ":"")+" ")+d[this.getStarType()],onClick:s?void 0:this.onClick,onMouseMove:s?void 0:this.onHover,ref:function(e){t.starRef=e},role:"radio",tabIndex:s?-1:0},o.createElement("div",{className:l+"__star-first "+v,"aria-hidden":"true"},g),o.createElement("div",{className:l+"__star-second","aria-hidden":"true"},g))},t}(o.Component);a.setup(o.createElement,l.prefix);var g=function(){},m=a.css(c||(c=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"]))),y=function(e){function n(n){var t;(t=e.call(this,n)||this).onHover=function(e,n){var r=t.props.onHoverChange,o=t.state.clearedValue,a=t.getStarValue(n,e.pageX);a!==o&&t.setState({hoverValue:a,clearedValue:void 0}),r(a)},t.onMouseLeave=function(){var e=t.props.onHoverChange;t.setState({hoverValue:void 0,clearedValue:void 0}),e(void 0)},t.onClick=function(e,n){var r=t.props.allowClear,o=t.state.value,a=t.getStarValue(n,e.pageX),l=!!r&&a===o;t.onMouseLeave(),t.changeValue(l?0:a),t.setState({clearedValue:l?a:void 0})},t.onFocus=function(){var e=t.props.onFocus;e&&e()},t.onBlur=function(){var e=t.props.onBlur;e&&e()},t.changeValue=function(e){var n=t.props.onChange;"value"in t.props||t.setState({value:e}),n(e)},t.saveStarRef=function(e){return function(n){t.starRefs[e]=n}},t.getStarValue=function(e,n){return t.starRefs[e].getValue(n,"rtl"===t.props.direction)},t.focus=function(){var e;t.props.disabled||null==(e=t.ratingContainerRef)||e.focus()};var r=n.defaultValue,o=n.value;return t.starRefs={},t.state={value:null!=o?o:r},t}s(n,e);var t=n.prototype;return t.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?i({},n,{value:e.value}):n},t.render=function(){for(var e=this,n=this.props,t=n.allowHalf,r=n.classNamePrefix,l=n.count,i=n.direction,s=n.disabled,c=n.style,v=n.symbol,d=n.tabIndex,g=this.state,y=g.hoverValue,b=g.value,x=[],C=0;C<(null!=l?l:0);C++)x.push(o.createElement(h,{allowHalf:t,classNamePrefix:r,count:l,disabled:s,index:C,key:C,ref:this.saveStarRef(C),onClick:this.onClick,onHover:this.onHover,reverse:"rtl"===i,symbol:v,value:void 0===y?b:y}));return o.createElement("ul",{"aria-label":"Stars Rating",className:r+" "+m+" "+("rtl"===i?r+"--rtl "+a.css(f||(f=u(["\n                direction: rtl;\n              "]))):r+"--ltr "+a.css(p||(p=u(["\n                direction: ltr;\n              "])))),onBlur:this.onBlur,onFocus:this.onFocus,onMouseLeave:s?void 0:this.onMouseLeave,ref:function(n){e.ratingContainerRef=n},role:"radiogroup",style:c,tabIndex:s?-1:d},x)},n}(o.Component);y.defaultProps={allowClear:!0,allowHalf:!0,classNamePrefix:"react-star-rate",count:5,defaultValue:0,direction:"ltr",disabled:!1,onChange:g,onHoverChange:g,style:{},symbol:"★",tabIndex:0},exports.default=y;
+"use strict";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

dist/react-star-rate.esm.js

@@ -49,13 +49,2 @@ import { createElement, Component } from 'react';
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var FirstStarStyles = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
-
-var StarStyles = function StarStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), props.reverse ? "\n    margin-right: 0;\n    margin-left: 8px;\n    float: right;\n\n    ." + FirstStarStyles + " {\n        right: 0;\n        left: auto;\n    }\n  " : "");
-};
-
-var StarActiveStyles = {
-  '': '',
-  half: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    .", " {\n      opacity: 1;\n      color: #ffd166;\n    }\n\n    &:hover {\n      .", " {\n        color: #ffe3a2;\n      }\n    }\n  "])), FirstStarStyles, FirstStarStyles),
-  full: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    color: #ffd166 !important;\n\n    &:hover {\n      color: #ffe3a2;\n    }\n  "])))
-};
 var Star = /*#__PURE__*/function (_React$Component) {
@@ -96,3 +85,3 @@ _inheritsLoose(Star, _React$Component);
 
-      return '';
+      return 'zero';
     };
@@ -146,3 +135,7 @@
   _proto.render = function render() {
-    var _this2 = this;
+    var _styleHoverMap$starTy,
+        _styleHoverMap$starTy2,
+        _this2 = this,
+        _styleMap$starType,
+        _styleMap$starType2;
 
@@ -155,11 +148,46 @@ var _this$props5 = this.props,
         reverse = _this$props5.reverse,
+        style = _this$props5.style,
+        styleFull = _this$props5.styleFull,
+        styleFullHover = _this$props5.styleFullHover,
+        styleHalf = _this$props5.styleHalf,
+        styleHalfHover = _this$props5.styleHalfHover,
+        styleHover = _this$props5.styleHover,
+        styleZero = _this$props5.styleZero,
+        styleZeroHover = _this$props5.styleZeroHover,
         symbol = _this$props5.symbol,
         value = _this$props5.value;
     var symbolNode = typeof symbol === 'function' ? symbol(this.props) : symbol;
+    var starType = this.getStarType();
     var classNameMap = {
-      '': '',
+      zero: classNamePrefix + "__star--zero",
       half: classNamePrefix + "__star--half",
       full: classNamePrefix + "__star--full"
     };
-    var className = classNamePrefix + "__star " + classNameMap[this.getStarType()];
+    var className = classNamePrefix + "__star " + classNameMap[starType];
+    var styleMap = {
+      zero: styleZero,
+      full: styleFull,
+      half: styleHalf
+    };
+    var styleHoverMap = {
+      zero: styleZeroHover,
+      full: styleFullHover,
+      half: styleHalfHover
+    };
+    var FirstStarStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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    "])));
+    var FirstStarHoverStyles = css({
+      '&:hover': (_styleHoverMap$starTy = styleHoverMap[starType]) == null ? void 0 : _styleHoverMap$starTy.first
+    });
+    var SecondStarHoverStyles = css({
+      '&:hover': (_styleHoverMap$starTy2 = styleHoverMap[starType]) == null ? void 0 : _styleHoverMap$starTy2.second
+    });
+    var StarActiveStyles = {
+      zero: '',
+      half: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        .", " {\n          opacity: 1;\n          color: #ffd166;\n        }\n\n        &:hover {\n          .", " {\n            color: #ffe3a2;\n          }\n        }\n      "])), FirstStarStyles, FirstStarStyles),
+      full: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        color: #ffd166 !important;\n\n        &:hover {\n          color: #ffe3a2;\n        }\n      "])))
+    };
+    var StarStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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    "])), reverse ? "\n        margin-right: 0;\n        margin-left: 8px;\n        float: right;\n\n        ." + FirstStarStyles + " {\n            right: 0;\n            left: auto;\n        }\n      " : "");
+    var StarHoverStyles = css({
+      '&:hover': styleHover[starType]
+    });
     return createElement("li", {
@@ -170,5 +198,3 @@ "aria-checked": value > index ? 'true' : 'false',
       "aria-setsize": count,
-      className: className + " " + StarStyles({
-        reverse: reverse
-      }) + " " + StarActiveStyles[this.getStarType()],
+      className: className + " " + StarStyles + " " + StarHoverStyles + " " + StarActiveStyles[starType],
       onClick: disabled ? undefined : this.onClick,
@@ -180,9 +206,12 @@ onMouseMove: disabled ? undefined : this.onHover,
       role: "radio",
+      style: style[starType],
       tabIndex: disabled ? -1 : 0
     }, createElement("div", {
-      className: classNamePrefix + "__star-first " + FirstStarStyles,
-      "aria-hidden": "true"
+      "aria-hidden": "true",
+      className: classNamePrefix + "__star__first " + FirstStarStyles + " " + FirstStarHoverStyles,
+      style: (_styleMap$starType = styleMap[starType]) == null ? void 0 : _styleMap$starType.first
     }, symbolNode), createElement("div", {
-      className: classNamePrefix + "__star-second",
-      "aria-hidden": "true"
+      "aria-hidden": "true",
+      className: classNamePrefix + "__star__second " + SecondStarHoverStyles,
+      style: (_styleMap$starType2 = styleMap[starType]) == null ? void 0 : _styleMap$starType2.second
     }, symbolNode));
@@ -199,4 +228,2 @@ };
 
-var ListContainerStyles = /*#__PURE__*/css(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
-
 var StarsRating = /*#__PURE__*/function (_React$Component) {
@@ -330,3 +357,4 @@ _inheritsLoose(StarsRating, _React$Component);
   _proto.render = function render() {
-    var _this2 = this;
+    var _style$hover7,
+        _this2 = this;
 
@@ -348,2 +376,4 @@ var _this$props2 = this.props,
     for (var index = 0; index < (count != null ? count : 0); index++) {
+      var _style$full, _style$half, _style$zero, _style$hover, _style$hover2, _style$hover3, _style$hover3$full, _style$hover4, _style$hover4$half, _style$hover5, _style$hover5$zero, _style$hover6;
+
       stars.push(createElement(Star, {
@@ -360,2 +390,18 @@ allowHalf: allowHalf,
         reverse: direction === 'rtl',
+        style: {
+          full: style == null ? void 0 : (_style$full = style.full) == null ? void 0 : _style$full.star,
+          half: style == null ? void 0 : (_style$half = style.half) == null ? void 0 : _style$half.star,
+          zero: style == null ? void 0 : (_style$zero = style.zero) == null ? void 0 : _style$zero.star
+        },
+        styleFull: style == null ? void 0 : style.full,
+        styleFullHover: style == null ? void 0 : (_style$hover = style.hover) == null ? void 0 : _style$hover.full,
+        styleHalf: style == null ? void 0 : style.half,
+        styleHalfHover: style == null ? void 0 : (_style$hover2 = style.hover) == null ? void 0 : _style$hover2.half,
+        styleHover: {
+          full: style == null ? void 0 : (_style$hover3 = style.hover) == null ? void 0 : (_style$hover3$full = _style$hover3.full) == null ? void 0 : _style$hover3$full.star,
+          half: style == null ? void 0 : (_style$hover4 = style.hover) == null ? void 0 : (_style$hover4$half = _style$hover4.half) == null ? void 0 : _style$hover4$half.star,
+          zero: style == null ? void 0 : (_style$hover5 = style.hover) == null ? void 0 : (_style$hover5$zero = _style$hover5.zero) == null ? void 0 : _style$hover5$zero.star
+        },
+        styleZero: style == null ? void 0 : style.zero,
+        styleZeroHover: style == null ? void 0 : (_style$hover6 = style.hover) == null ? void 0 : _style$hover6.zero,
         symbol: symbol,
@@ -366,5 +412,9 @@ value: hoverValue === undefined ? value : hoverValue
 
+    var ListContainerStyles = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\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    "])));
+    var ListContainerHoverStyles = css({
+      '&:hover': style == null ? void 0 : (_style$hover7 = style.hover) == null ? void 0 : _style$hover7.style
+    });
     return createElement("ul", {
       "aria-label": "Stars Rating",
-      className: classNamePrefix + " " + ListContainerStyles + " " + (direction === 'rtl' ? classNamePrefix + "--rtl " + css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n                direction: rtl;\n              "]))) : classNamePrefix + "--ltr " + css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n                direction: ltr;\n              "])))),
+      className: classNamePrefix + " " + ListContainerStyles + " " + ListContainerHoverStyles + " " + (direction === 'rtl' ? classNamePrefix + "--rtl " + css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n                direction: rtl;\n              "]))) : classNamePrefix + "--ltr " + css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n                direction: ltr;\n              "])))),
       onBlur: this.onBlur,
@@ -377,3 +427,3 @@ onFocus: this.onFocus,
       role: "radiogroup",
-      style: style,
+      style: style == null ? void 0 : style.style,
       tabIndex: disabled ? -1 : tabIndex
@@ -380,0 +430,0 @@ }, stars);

dist/star.d.ts

 import * as React from 'react';
+import { CSSAttribute } from 'goober';
 export interface StarProps {
@@ -11,2 +12,36 @@ allowHalf?: boolean;
     reverse?: boolean;
+    style?: {
+        full?: CSSAttribute;
+        half?: CSSAttribute;
+        zero?: CSSAttribute;
+    };
+    styleFull?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+    };
+    styleFullHover?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+    };
+    styleHalf?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+    };
+    styleHalfHover?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+    };
+    styleHover?: {
+        full?: CSSAttribute;
+        half?: CSSAttribute;
+        zero?: CSSAttribute;
+    };
+    styleZero?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+    };
+    styleZeroHover?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+    };
     symbol?: React.ReactNode;
@@ -19,3 +54,3 @@ value?: number;
     onHover: React.MouseEventHandler<HTMLLIElement>;
-    getStarType: () => "" | "half" | "full";
+    getStarType: () => "half" | "full" | "zero";
     getValue: (x: number, reverse: boolean) => number;
@@ -22,0 +57,0 @@ render(): JSX.Element;

dist/stars-rating.d.ts

 import * as React from 'react';
+import { CSSAttribute } from 'goober';
 import Star from './star';
@@ -16,3 +17,3 @@ export interface StarsRatingProps {
     onHoverChange?: (value?: number) => void;
-    style?: React.CSSProperties;
+    style?: StarsRatingStyles;
     symbol?: React.ReactNode;
@@ -22,2 +23,21 @@ tabIndex?: number;
 }
+declare type StarsRatingStyles = {
+    style?: CSSAttribute;
+    full?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+        star?: CSSAttribute;
+    };
+    half?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+        star?: CSSAttribute;
+    };
+    zero?: {
+        first?: CSSAttribute;
+        second?: CSSAttribute;
+        star?: CSSAttribute;
+    };
+    hover?: Omit<StarsRatingStyles, 'hover'>;
+};
 interface StarsRatingState {
@@ -24,0 +44,0 @@ clearedValue?: number;

package.json

 {
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "MIT",
+  "name": "react-star-rate",
+  "author": "Raymon Zhang",
+  "keywords": [
+    "react",
+    "reactjs",
+    "rating",
+    "star",
+    "input"
+  ],
+  "description": "Lightweight, customizable star ratings component for React",
+  "repository": "raymon-zhang/react-star-rate",
+  "sideEffects": false,
   "main": "dist/index.js",
@@ -36,13 +48,2 @@ "typings": "dist/index.d.ts",
   },
-  "name": "react-star-rate",
-  "author": "Raymon Zhang",
-  "keywords": [
-    "react",
-    "reactjs",
-    "rating",
-    "star",
-    "input"
-  ],
-  "description": "Lightweight, customizable star ratings component for React",
-  "repository": "raymon-zhang/react-star-rate",
   "module": "dist/react-star-rate.esm.js",
@@ -49,0 +50,0 @@ "size-limit": [

README.md

 <a href="https://raymon-zhang.github.io/react-star-rate">
   <p align="center">
-      <img height=100 alt="React Star Rate" src="https://github.com/raymon-zhang/react-star-rate/raw/main/assets/header.svg"/>
+    <img height=100 alt="React Star Rate" src="https://github.com/raymon-zhang/react-star-rate/raw/main/assets/header.svg"/>
   </p>
@@ -8,5 +8,5 @@ </a>
 <div align="center">
-    <img src="https://badgen.net/npm/v/react-star-rate" alt="NPM Version" />
+  <img src="https://badgen.net/npm/v/react-star-rate" alt="NPM Version" />
   <img src="https://badgen.net/bundlephobia/minzip/react-star-rate" alt="minzipped size"/>
-    <img src="https://github.com/raymon-zhang/react-star-rate/workflows/CI/badge.svg" alt="Build Status" />
+  <img src="https://github.com/raymon-zhang/react-star-rate/workflows/CI/badge.svg" alt="Build Status" />
 </div>
@@ -19,2 +19,5 @@ <br />
 </div>
+<div align="center">
+  <img alt="React Star Rate" src="https://github.com/raymon-zhang/react-star-rate/raw/main/assets/demo.svg" />
+</div>
 
@@ -31,2 +34,3 @@ <br />
 
+- [Example](#example)
 - [Installation](#installation)
@@ -37,4 +41,15 @@ - [With yarn](#with-yarn)
 - [Props](#props)
-- [Example](#example)
+- [Styling](#styling)
+  - [Style Object](#style-object)
+    - [Style Keys](#style-keys)
+  - [With CSS](#with-css)
+    - [Classnames](#classnames)
+- [License](#license)
 
+## Example
+
+You can visit the example here:
+<br />
+[![View on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-star-rate-okxlw)
+
 ## Installation
@@ -83,3 +98,3 @@
 | `allowClear`      | boolean  | `true`              | Allow the value to be reset when clicked again                                     |
-| `allowHalf`       | boolean  | `true`              | Support half of the star to be selected                                            |
+| `allowHalf`       | boolean  | `true`              | Allow half of the star to be selected                                              |
 | `autoFocus`       | boolean  | -                   | Automatically focus the element                                                    |
@@ -95,3 +110,3 @@ | `classNamePrefix` | string   | `"react-star-rate"` | The components will have classNames with the given prefix                          |
 | `onHoverChange`   | function | `(value) => {}`     | Will be triggered on hover                                                         |
-| `style`           | object   | `{}`                | Custom styles                                                                      |
+| `style`           | object   | `{}`                | Custom styles. See [styling](#styling)                                             |
 | `symbol`          | string   | `"★"`               | The symbol to be displayed                                                         |
@@ -101,4 +116,40 @@ | `tabIndex`        | number   | `0`                 | The tab index of the stars container                                               |
 
-## Example
+## Styling
 
-You can visit the example here: [https://codesandbox.io/s/react-star-rate-okxlw](https://codesandbox.io/s/react-star-rate-okxlw).
+### Style Object
+
+Each component inside the `StarsRating` component is keyed and ships with default styles. You can apply custom styles by accessing the key on the `style` prop.
+
+#### Style Keys
+
+- `style.style` - The main wrapper `ul` element.
+- `style.full` - Styles for when the star is fully active.
+  - `style.full.star` - The wrapper `li` element every star.
+  - `style.full.first` - The first half star, on top.
+  - `style.full.second` - The second full star, in the background.
+- `style.half` - Styles for when the star is half active.
+  - `style.half.star` - The wrapper `li` element every star.
+  - `style.half.first` - The first half star, on top.
+  - `style.half.second` - The second full star, in the background.
+- `style.zero` - Styles for when the star is not active.
+  - `style.zero.star` - The wrapper `li` element every star.
+  - `style.zero.first` - The first half star, on top.
+  - `style.zero.second` - The second full star, in the background.
+- `style.hover` - Styles for when the element is hovered over. You can use access of the keys listed above in the `hover` object.
+
+### With CSS
+
+You can also apply custom styles using CSS Stylesheets. The classnames are determined with the `classNamePrefix` prop (defaults to `"react-star-rate"`).
+
+#### Classnames
+
+- `${classNamePrefix}` - The main `ul` element.
+- `${classNamePrefix}--ltr` | - `${classNamePrefix}--rtl` - If the rating component is from left-to-right or right-to-left respectively.
+- `${classNamePrefix}__star` - The star `li` element.
+- `${classNamePrefix}__star--zero` | `${classNamePrefix}__star--half` | `${classNamePrefix}__star--full` - When the star is inactive, half, or completely full.
+- `${classNamePrefix}__star__first` - The first half star, on top.
+- `${classNamePrefix}__star__second` - The second full star, in the background.
+
+## License
+
+[MIT](https://github.com/raymon-zhang/react-star-rate/blob/main/LICENSE) Licensed. Copyright (c) 2021-present, Raymon Zhang.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

135538

increased by27.86%

Lines of code

1361

increased by21.41%

Number of lines in readme file

149

increased by52.04%

No dependency changes