react-star-review - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

build/index.js

@@ -1,2 +0,2 @@
-!function(e,t){if("object"===typeof exports&&"object"===typeof module)module.exports=t(require("react"));else if("function"===typeof define&&define.amd)define(["react"],t);else{var r=t("object"===typeof exports?require("react"):e.react);for(var n in r)("object"===typeof exports?exports:e)[n]=r[n]}}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function i(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=r(2),s=r.n(a),c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=function(e){function t(){var e,r,i,a;n(this,t);for(var c=arguments.length,u=Array(c),p=0;p<c;p++)u[p]=arguments[p];return r=i=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i.state={hoveredOn:0,rating:i.props.rating},i.onHover=function(e){return function(){i.setState(function(){return{hoveredOn:e}})}},i.onHoverExit=function(){i.setState(function(){return{hoveredOn:0}})},i.setRating=function(e){return function(){i.setState(function(){return{rating:e}},function(){"function"===typeof i.props.onRatingChanged&&i.props.onRatingChanged(i.state.rating)})}},i.ratingContainerStyle=Object.assign({display:"flex",flexWrap:"nowrap"},i.props.style),i.starContainerStyle=function(e){return Object.assign({},i.getDivStyle(e),{width:i.props.size,height:i.props.size,background:i.props.borderColor,position:"relative"})},i.getDivStyle=function(e){var t=i.props,r=t.borderThickness,n=t.size,o=t.clearColor,a=t.filledColor,s=i.state.rating,c=e<s?1:0;if(e===Math.ceil(s)){var u=s%1;c=0!==u?u:1}var p=100*c,f={};return i.state.hoveredOn&&i.state.hoveredOn>=e&&(f={background:i.props.hoverColor,cursor:"pointer"}),Object.assign({position:"absolute",top:r,left:r,background:"linear-gradient(\n              "+(i.props.rtl?"-90deg":"90deg")+",\n              "+a+" 0%,\n              "+a+" "+p+"%,\n              "+o+" "+p+"%,\n              "+o+" 100%\n            )",height:n-2*r,width:n-2*r,clipPath:"polygon(47.553% 75.000%, 18.164% 90.451%, 23.776% 57.725%, 0.000% 34.549%, 32.858% 29.775%, 47.553% 0.000%, 62.247% 29.775%, 95.106% 34.549%, 71.329% 57.725%, 76.942% 90.451%)"},f)},i.renderStars=function(){for(var e=i.props.count,t=[],r=1;r<=e;r++){var n={onMouseEnter:i.onHover(r),onMouseLeave:i.onHoverExit,onClick:i.setRating(r)},o=i.props.interactive?n:{};t.push(s.a.createElement("div",Object.assign({style:i.starContainerStyle(r)},o,{key:r}),s.a.createElement("div",{style:i.getDivStyle(r)})))}return i.props.rtl?t.reverse():t},a=r,o(i,a)}return i(t,e),c(t,[{key:"componentDidMount",value:function(){if(this.props.interactive){if("function"!==typeof this.props.onRatingChanged)throw new Error("An interactive rating needs an `onRatingChanged` prop.");this.props.borderThickness||console.warn("Interactive ratings with no border is bad UX. Consider adding a tiny border.")}}},{key:"render",value:function(){return s.a.createElement("div",{style:this.ratingContainerStyle},this.renderStars())}}]),t}(s.a.Component);u.defaultProps={size:30,rating:4.25,count:5,borderThickness:2,filledColor:"#FFC82C",clearColor:"#FFF",borderColor:"#E4B50E",hoverColor:"#FBDC84",interactive:!1,rtl:!1},t.default=u},function(t,r){t.exports=e}])});
+!function(e,t){if("object"===typeof exports&&"object"===typeof module)module.exports=t(require("react"));else if("function"===typeof define&&define.amd)define(["react"],t);else{var r=t("object"===typeof exports?require("react"):e.react);for(var n in r)("object"===typeof exports?exports:e)[n]=r[n]}}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function i(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=r(2),s=r.n(a),c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=function(e){function t(){var e,r,i,a;n(this,t);for(var c=arguments.length,u=Array(c),p=0;p<c;p++)u[p]=arguments[p];return r=i=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i.state={hoveredOn:0,rating:i.props.rating},i.onHover=function(e){return function(){i.setState(function(){return{hoveredOn:e}})}},i.onHoverExit=function(){i.setState(function(){return{hoveredOn:0}})},i.setRating=function(e){return function(){i.setState(function(){return{rating:e}},function(){"function"===typeof i.props.onRatingChanged&&i.props.onRatingChanged(i.state.rating)})}},i.ratingContainerStyle=Object.assign({display:"flex",flexWrap:"nowrap"},i.props.style),i.starContainerStyle=function(e){return Object.assign({},i.getDivStyle(e),{width:i.props.size,height:i.props.size,background:i.props.borderColor,position:"relative"})},i.getDivStyle=function(e){var r=i.props,n=r.borderThickness,o=r.size,a=r.clearColor,s=r.filledColor,c=i.state.rating,u=e<c?1:0;if(e===Math.ceil(c)){var p=c%1;u=0!==p?p:1}var f=100*u,l={};return i.state.hoveredOn&&i.state.hoveredOn>=e&&(l={background:i.props.hoverColor,cursor:"pointer"}),Object.assign({position:"absolute",top:n,left:n,background:"linear-gradient(\n              "+(i.props.rtl?"-90deg":"90deg")+",\n              "+s+" 0%,\n              "+s+" "+f+"%,\n              "+a+" "+f+"%,\n              "+a+" 100%\n            )",height:o-2*n,width:o-2*n,clipPath:i.props.icon||t.STAR_CLIPPER},l)},i.renderStars=function(){for(var e=i.props.count,t=[],r=1;r<=e;r++){var n={onMouseEnter:i.onHover(r),onMouseLeave:i.onHoverExit,onClick:i.setRating(r)},o=i.props.interactive?n:{};t.push(s.a.createElement("div",Object.assign({style:i.starContainerStyle(r)},o,{key:r}),s.a.createElement("div",{style:i.getDivStyle(r)})))}return i.props.rtl?t.reverse():t},a=r,o(i,a)}return i(t,e),c(t,[{key:"componentDidMount",value:function(){if(this.props.interactive){if("function"!==typeof this.props.onRatingChanged)throw new Error("An interactive rating needs an `onRatingChanged` prop.");this.props.borderThickness||console.warn("Interactive ratings with no border is bad UX. Consider adding a tiny border.")}}},{key:"render",value:function(){return s.a.createElement("div",{style:this.ratingContainerStyle},this.renderStars())}}]),t}(s.a.Component);u.defaultProps={size:30,rating:4.25,count:5,borderThickness:2,filledColor:"#FFC82C",clearColor:"#FFF",borderColor:"#E4B50E",hoverColor:"#FBDC84",interactive:!1,rtl:!1,icon:u.STAR_CLIPPER},u.STAR_CLIPPER="polygon(47.553% 75.000%, 18.164% 90.451%, 23.776% 57.725%, 0.000% 34.549%, 32.858% 29.775%, 47.553% 0.000%, 62.247% 29.775%, 95.106% 34.549%, 71.329% 57.725%, 76.942% 90.451%)",t.default=u},function(t,r){t.exports=e}])});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-star-review",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A simple and customizable rating component for React ",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -8,4 +8,6 @@ # React star review
 A simple and customizable rating component for React
-![Banner](assets/demo_rating.png "React star rating demo")
+![Banner](assets/banner_.png "React star rating demo")
 
+View the [demo](https://reviews.demos.sahajr.com).
+
 ## Install
@@ -27,2 +29,3 @@ ```js
 | onRatingChanged | Function | Callback when rating changes | null |
+| icon | String | A valid CSS Basic shape to be used as a mask for ratings | Star |
 | count | Number | Number of stars, aka the scale | 5 |
@@ -29,0 +32,0 @@ | borderThickness | Number | The stars' border thickness | 2 |

No alert changes

Improved metrics

Total package byte prevSize

45608

increased by11.19%

Number of lines in readme file

40

increased by8.11%

No dependency changes