Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-custom-ratings

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-custom-ratings - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

src/components/ProgressBar/Progress/progress.css

14

dist/react-custom-ratings.cjs.development.js

@@ -86,4 +86,3 @@ 'use strict';

var css_248z$1 = ".Unfilled-module_unfilled__2wGJ3 {\n position: relative;\n display: inline-block;\n}\n.Unfilled-module_unfilled__2wGJ3 span {\n font-size: 3rem;\n padding: 0.1rem;\n}\n\n.Unfilled-module_unfilled__2wGJ3 .Unfilled-module_filled__-I2up {\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n}\n";
var classes = {"unfilled":"Unfilled-module_unfilled__2wGJ3","filled":"Unfilled-module_filled__-I2up"};
var css_248z$1 = ".unfilled {\n position: relative;\n display: inline-block;\n}\n.unfilled span {\n font-size: 3rem;\n padding: 0.1rem;\n}\n\n.unfilled .filled {\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n}\n";
styleInject(css_248z$1);

@@ -106,3 +105,3 @@

return React.createElement("div", {
className: classes.unfilled
className: 'unfilled'
}, [].concat(Array(numberOfRating)).map(function (_, i) {

@@ -112,3 +111,3 @@ return React.createElement("span", {

// eslint-disable-next-line no-unneeded-ternary
className: clsx(classes.star, ratingIconClassname),
className: clsx('star', ratingIconClassname),
style: {

@@ -204,4 +203,3 @@ // eslint-disable-next-line no-unneeded-ternary

var css_248z$4 = ".progress-module_progress_bar__QisS6 {\n display: flex;\n flex: 1;\n align-self: stretch;\n border-radius: 4px;\n}\n\n.progress-module_filled_bar__gDcZy {\n border-radius: 4px 0 0 4px;\n height: 100%;\n}\n";
var classes$1 = {"progress_bar":"progress-module_progress_bar__QisS6","filled_bar":"progress-module_filled_bar__gDcZy"};
var css_248z$4 = ".progress_bar {\n display: flex;\n flex: 1;\n align-self: stretch;\n border-radius: 4px;\n}\n\n.filled_bar {\n border-radius: 4px 0 0 4px;\n height: 100%;\n}\n";
styleInject(css_248z$4);

@@ -214,3 +212,3 @@

return React.createElement("div", {
className: classes$1.progress_bar,
className: 'progress_bar',
style: {

@@ -224,3 +222,3 @@ backgroundColor: unfilledColor || progressBarColors.unfilled

}, React.createElement("div", {
className: classes$1.filled_bar,
className: 'filled_bar',
style: {

@@ -227,0 +225,0 @@ width: percentage + "%",

@@ -1,2 +0,2 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,t=require("react-icons/ai");function l(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&l.firstChild?l.insertBefore(r,l.firstChild):l.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}l(".filled {\n font-size: 3rem;\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n /* overflow: hidden; */\n}\nspan {\n font-size: 3rem;\n /* overflow: hidden; */\n}\n.star {\n font-size: 3rem;\n /* overflow: hidden; */\n}\n");var r=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n.filter(Boolean).map((function(e){return e.trim()})).join(" ")};function a(e){var t=e.filledColor,l=void 0===t?"":t,a=e.ratingIconClassname,i=void 0===a?"":a,o=e.FilledRatingIcon,d=e.width,s=Math.max.apply(Math,e.data.map((function(e){return e.rating})));return n.createElement("div",{className:"filled",style:{width:d}},[].concat(Array(s)).map((function(e,t){return n.createElement("span",{key:"unfilled-star custom icon "+t,className:r("star",i),style:{color:l||"#ffa41c"}},o)})))}var i={unfilled:"Unfilled-module_unfilled__2wGJ3",filled:"Unfilled-module_filled__-I2up"};l(".Unfilled-module_unfilled__2wGJ3 {\n position: relative;\n display: inline-block;\n}\n.Unfilled-module_unfilled__2wGJ3 span {\n font-size: 3rem;\n padding: 0.1rem;\n}\n\n.Unfilled-module_unfilled__2wGJ3 .Unfilled-module_filled__-I2up {\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n}\n");var o=function(e){var t=e.data,l=e.filledColor,o=e.unfilledColor,d=e.ratingIconClassname,s=void 0===d?"":d,c=e.FilledRatingIcon,u=e.UnfilledRatingIcon,f=e.width,p=Math.max.apply(Math,t.map((function(e){return e.rating})));return n.createElement("div",{className:i.unfilled},[].concat(Array(p)).map((function(e,t){return n.createElement("span",{key:"unfilled-star custom icon "+t,className:r(i.star,s),style:{color:o||"#ffa41c"}},o?c:u)})),n.createElement(a,{data:t,filledColor:l,ratingIconClassname:s,FilledRatingIcon:c,width:f}))};function d(e){var l=e.data,a=e.options,i=void 0===a?{}:a,d=i.filledColor,s=i.unfilledColor,c=i.ratingIconClassname,u=i.show,f=void 0===u||u,p=i.className,m=void 0===p?"":p,g=i.FilledRatingIcon,v=void 0===g?n.createElement(t.AiFillStar,null):g,h=i.UnfilledRatingIcon,x=void 0===h?n.createElement(t.AiOutlineStar,null):h,_=i.headerText,y=Math.max.apply(Math,l.map((function(e){return e.rating}))),w=l.reduce((function(e,n){return e+n.count}),0),C={},b=0;for(var E in l.forEach((function(e){C[""+e.rating]=e.count/w})),C)b+=Number(E)*C[E];var N=Number(b.toFixed(2))/y*100;return n.createElement(n.Fragment,null,f&&n.createElement("div",{className:"starRating"},n.createElement(o,{data:l,filledColor:d,unfilledColor:s,ratingIconClassname:c,FilledRatingIcon:v,UnfilledRatingIcon:x,width:N+"%"}),(null==_?void 0:_(b))||n.createElement("p",{className:r("rating",m)},b.toFixed(2)," out of ",y)))}function s(){return(s=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e}).apply(this,arguments)}function c(e){return n.createElement("div",{className:"progress-module_progress_bar__QisS6",style:{backgroundColor:e.unfilledColor||"#f0f2f2"},role:"progressbar","aria-valuenow":40,"aria-valuemax":20,"aria-valuemin":0},n.createElement("div",{className:"progress-module_filled_bar__gDcZy",style:{width:e.percentage+"%",backgroundColor:e.filledColor||"#ffa41c"}}))}function u(e){var t=e.data,l=void 0===t?[]:t,a=e.options,i=void 0===a?{}:a,o=i.className,d=void 0===o?"":o,u=i.filledColor,f=i.unfilledColor,p=i.onClick,m=l.reduce((function(e,n){var t,l;return s({},e,e[n.rating]?((t={})[n.rating]=e[n.rating]+n.count,t):((l={})[n.rating]=n.count,l))}),{}),g=Math.max.apply(Math,l.map((function(e){return e.rating}))),v=[].concat(Array(g)).map((function(e,n){return n+1})).reduce((function(e,n){var t,l;return s({},e,m[n]?((t={})[n]=m[n],t):((l={})[n]=0,l))}),{}),h=Object.entries(v).map((function(e){return{count:e[1],rating:Number(e[0])}})),x=h.reduce((function(e,n){return e+n.count}),0);return n.createElement("div",{className:"container"},h.map((function(e,t){var l=e.count,a=e.rating,o=100*l/x||0;return n.createElement("div",{key:t+l,className:r("inner_container",d),onClick:function(){return p&&p(e)}},null!=i&&i.progressBarText?i.progressBarText(e):n.createElement("span",{className:"subtext"},a," stars"),n.createElement(c,{rating:a,value:l,total:x,percentage:o,filledColor:u,unfilledColor:f}),n.createElement("div",null,null!=i&&i.percentage?n.createElement(n.Fragment,null,i.percentage(o,e)," "):n.createElement("span",{className:"percent_text"},Math.ceil(o)," %")))})))}l(".starRating {\n display: flex;\n justify-content: center;\n}\n.starRating .rating {\n font-size: 14px;\n white-space: nowrap;\n margin-left: 1rem;\n}\n"),l(".ratings_container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n justify-content: center;\n background-color: #fff;\n}\n"),l(".progress-module_progress_bar__QisS6 {\n display: flex;\n flex: 1;\n align-self: stretch;\n border-radius: 4px;\n}\n\n.progress-module_filled_bar__gDcZy {\n border-radius: 4px 0 0 4px;\n height: 100%;\n}\n"),l(".container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 1.2rem;\n box-sizing: border-box;\n padding: 10px;\n}\n\n.inner_container {\n width: 100%;\n height: 1.2rem;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0.8rem;\n}\n\n.subtext {\n font-size: 14px;\n white-space: nowrap;\n display: flex;\n}\n\n.percent_text {\n font-size: 14px;\n white-space: nowrap;\n display: flex;\n width: 35px;\n justify-content: flex-end;\n}\n"),exports.ProgressBar=u,exports.Rating=d,exports.Ratings=function(e){var t=e.data,l=e.options,r=void 0===l?{progressBar:{},rating:{}}:l,a=r.progressBar,i=r.rating;return n.createElement("div",{className:"ratings_container"},n.createElement(d,{data:t,options:{show:null==i?void 0:i.show,filledColor:null==i?void 0:i.filledColor,unfilledColor:null==i?void 0:i.unfilledColor,ratingIconClassname:null==i?void 0:i.className,className:null==i?void 0:i.className,FilledRatingIcon:null==i?void 0:i.FilledRatingIcon,UnfilledRatingIcon:null==i?void 0:i.UnfilledRatingIcon,headerText:null==i?void 0:i.headerText}}),n.createElement(u,{data:t,options:{filledColor:null==a?void 0:a.filledColor,unfilledColor:null==a?void 0:a.unfilledColor,className:null==a?void 0:a.className,percentage:null==a?void 0:a.percentage,progressBarText:null==a?void 0:a.progressBarText,onClick:null==a?void 0:a.onClick}}))};
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n,e=(n=require("react"))&&"object"==typeof n&&"default"in n?n.default:n,t=require("react-icons/ai");function a(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}a(".filled {\n font-size: 3rem;\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n /* overflow: hidden; */\n}\nspan {\n font-size: 3rem;\n /* overflow: hidden; */\n}\n.star {\n font-size: 3rem;\n /* overflow: hidden; */\n}\n");var r=function(){for(var n=arguments.length,e=new Array(n),t=0;t<n;t++)e[t]=arguments[t];return e.filter(Boolean).map((function(n){return n.trim()})).join(" ")};function l(n){var t=n.filledColor,a=void 0===t?"":t,l=n.ratingIconClassname,i=void 0===l?"":l,o=n.FilledRatingIcon,c=n.width,s=Math.max.apply(Math,n.data.map((function(n){return n.rating})));return e.createElement("div",{className:"filled",style:{width:c}},[].concat(Array(s)).map((function(n,t){return e.createElement("span",{key:"unfilled-star custom icon "+t,className:r("star",i),style:{color:a||"#ffa41c"}},o)})))}a(".unfilled {\n position: relative;\n display: inline-block;\n}\n.unfilled span {\n font-size: 3rem;\n padding: 0.1rem;\n}\n\n.unfilled .filled {\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n}\n");var i=function(n){var t=n.data,a=n.filledColor,i=n.unfilledColor,o=n.ratingIconClassname,c=void 0===o?"":o,s=n.FilledRatingIcon,d=n.UnfilledRatingIcon,u=n.width,f=Math.max.apply(Math,t.map((function(n){return n.rating})));return e.createElement("div",{className:"unfilled"},[].concat(Array(f)).map((function(n,t){return e.createElement("span",{key:"unfilled-star custom icon "+t,className:r("star",c),style:{color:i||"#ffa41c"}},i?s:d)})),e.createElement(l,{data:t,filledColor:a,ratingIconClassname:c,FilledRatingIcon:s,width:u}))};function o(n){var a=n.data,l=n.options,o=void 0===l?{}:l,c=o.filledColor,s=o.unfilledColor,d=o.ratingIconClassname,u=o.show,f=void 0===u||u,p=o.className,m=void 0===p?"":p,g=o.FilledRatingIcon,v=void 0===g?e.createElement(t.AiFillStar,null):g,h=o.UnfilledRatingIcon,x=void 0===h?e.createElement(t.AiOutlineStar,null):h,y=o.headerText,C=Math.max.apply(Math,a.map((function(n){return n.rating}))),w=a.reduce((function(n,e){return n+e.count}),0),b={},E=0;for(var N in a.forEach((function(n){b[""+n.rating]=n.count/w})),b)E+=Number(N)*b[N];var I=Number(E.toFixed(2))/C*100;return e.createElement(e.Fragment,null,f&&e.createElement("div",{className:"starRating"},e.createElement(i,{data:a,filledColor:c,unfilledColor:s,ratingIconClassname:d,FilledRatingIcon:v,UnfilledRatingIcon:x,width:I+"%"}),(null==y?void 0:y(E))||e.createElement("p",{className:r("rating",m)},E.toFixed(2)," out of ",C)))}function c(){return(c=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a])}return n}).apply(this,arguments)}function s(n){return e.createElement("div",{className:"progress_bar",style:{backgroundColor:n.unfilledColor||"#f0f2f2"},role:"progressbar","aria-valuenow":40,"aria-valuemax":20,"aria-valuemin":0},e.createElement("div",{className:"filled_bar",style:{width:n.percentage+"%",backgroundColor:n.filledColor||"#ffa41c"}}))}function d(n){var t=n.data,a=void 0===t?[]:t,l=n.options,i=void 0===l?{}:l,o=i.className,d=void 0===o?"":o,u=i.filledColor,f=i.unfilledColor,p=i.onClick,m=a.reduce((function(n,e){var t,a;return c({},n,n[e.rating]?((t={})[e.rating]=n[e.rating]+e.count,t):((a={})[e.rating]=e.count,a))}),{}),g=Math.max.apply(Math,a.map((function(n){return n.rating}))),v=[].concat(Array(g)).map((function(n,e){return e+1})).reduce((function(n,e){var t,a;return c({},n,m[e]?((t={})[e]=m[e],t):((a={})[e]=0,a))}),{}),h=Object.entries(v).map((function(n){return{count:n[1],rating:Number(n[0])}})),x=h.reduce((function(n,e){return n+e.count}),0);return e.createElement("div",{className:"container"},h.map((function(n,t){var a=n.count,l=n.rating,o=100*a/x||0;return e.createElement("div",{key:t+a,className:r("inner_container",d),onClick:function(){return p&&p(n)}},null!=i&&i.progressBarText?i.progressBarText(n):e.createElement("span",{className:"subtext"},l," stars"),e.createElement(s,{rating:l,value:a,total:x,percentage:o,filledColor:u,unfilledColor:f}),e.createElement("div",null,null!=i&&i.percentage?e.createElement(e.Fragment,null,i.percentage(o,n)," "):e.createElement("span",{className:"percent_text"},Math.ceil(o)," %")))})))}a(".starRating {\n display: flex;\n justify-content: center;\n}\n.starRating .rating {\n font-size: 14px;\n white-space: nowrap;\n margin-left: 1rem;\n}\n"),a(".ratings_container {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n justify-content: center;\n background-color: #fff;\n}\n"),a(".progress_bar {\n display: flex;\n flex: 1;\n align-self: stretch;\n border-radius: 4px;\n}\n\n.filled_bar {\n border-radius: 4px 0 0 4px;\n height: 100%;\n}\n"),a(".container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: 1.2rem;\n box-sizing: border-box;\n padding: 10px;\n}\n\n.inner_container {\n width: 100%;\n height: 1.2rem;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 0.8rem;\n}\n\n.subtext {\n font-size: 14px;\n white-space: nowrap;\n display: flex;\n}\n\n.percent_text {\n font-size: 14px;\n white-space: nowrap;\n display: flex;\n width: 35px;\n justify-content: flex-end;\n}\n"),exports.ProgressBar=d,exports.Rating=o,exports.Ratings=function(n){var t=n.data,a=n.options,r=void 0===a?{progressBar:{},rating:{}}:a,l=r.progressBar,i=r.rating;return e.createElement("div",{className:"ratings_container"},e.createElement(o,{data:t,options:{show:null==i?void 0:i.show,filledColor:null==i?void 0:i.filledColor,unfilledColor:null==i?void 0:i.unfilledColor,ratingIconClassname:null==i?void 0:i.className,className:null==i?void 0:i.className,FilledRatingIcon:null==i?void 0:i.FilledRatingIcon,UnfilledRatingIcon:null==i?void 0:i.UnfilledRatingIcon,headerText:null==i?void 0:i.headerText}}),e.createElement(d,{data:t,options:{filledColor:null==l?void 0:l.filledColor,unfilledColor:null==l?void 0:l.unfilledColor,className:null==l?void 0:l.className,percentage:null==l?void 0:l.percentage,progressBarText:null==l?void 0:l.progressBarText,onClick:null==l?void 0:l.onClick}}))};
//# sourceMappingURL=react-custom-ratings.cjs.production.min.js.map

@@ -80,4 +80,3 @@ import React from 'react';

var css_248z$1 = ".Unfilled-module_unfilled__2wGJ3 {\n position: relative;\n display: inline-block;\n}\n.Unfilled-module_unfilled__2wGJ3 span {\n font-size: 3rem;\n padding: 0.1rem;\n}\n\n.Unfilled-module_unfilled__2wGJ3 .Unfilled-module_filled__-I2up {\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n}\n";
var classes = {"unfilled":"Unfilled-module_unfilled__2wGJ3","filled":"Unfilled-module_filled__-I2up"};
var css_248z$1 = ".unfilled {\n position: relative;\n display: inline-block;\n}\n.unfilled span {\n font-size: 3rem;\n padding: 0.1rem;\n}\n\n.unfilled .filled {\n position: absolute;\n top: 0;\n left: 0;\n white-space: nowrap;\n overflow: hidden;\n width: 0;\n}\n";
styleInject(css_248z$1);

@@ -100,3 +99,3 @@

return React.createElement("div", {
className: classes.unfilled
className: 'unfilled'
}, [].concat(Array(numberOfRating)).map(function (_, i) {

@@ -106,3 +105,3 @@ return React.createElement("span", {

// eslint-disable-next-line no-unneeded-ternary
className: clsx(classes.star, ratingIconClassname),
className: clsx('star', ratingIconClassname),
style: {

@@ -198,4 +197,3 @@ // eslint-disable-next-line no-unneeded-ternary

var css_248z$4 = ".progress-module_progress_bar__QisS6 {\n display: flex;\n flex: 1;\n align-self: stretch;\n border-radius: 4px;\n}\n\n.progress-module_filled_bar__gDcZy {\n border-radius: 4px 0 0 4px;\n height: 100%;\n}\n";
var classes$1 = {"progress_bar":"progress-module_progress_bar__QisS6","filled_bar":"progress-module_filled_bar__gDcZy"};
var css_248z$4 = ".progress_bar {\n display: flex;\n flex: 1;\n align-self: stretch;\n border-radius: 4px;\n}\n\n.filled_bar {\n border-radius: 4px 0 0 4px;\n height: 100%;\n}\n";
styleInject(css_248z$4);

@@ -208,3 +206,3 @@

return React.createElement("div", {
className: classes$1.progress_bar,
className: 'progress_bar',
style: {

@@ -218,3 +216,3 @@ backgroundColor: unfilledColor || progressBarColors.unfilled

}, React.createElement("div", {
className: classes$1.filled_bar,
className: 'filled_bar',
style: {

@@ -221,0 +219,0 @@ width: percentage + "%",

{
"version": "0.1.4",
"version": "0.1.5",
"license": "MIT",

@@ -4,0 +4,0 @@ "main": "dist/index.js",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc