star-product-rating
Version:
A simple react component library that enable react developers easily use, edit, tweak and style a rating functionality on the go for products or services in an e-commerce web-application or mobile application
1 lines • 6.53 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../src/Components/StarIcon/StarIcon.jsx","../src/Components/StarRating/StarRating.jsx"],"sourcesContent":["import React from 'react'\r\nimport PropTypes from \"prop-types\";\r\n\r\n\r\nconst StarIcon = ({ onClick, full, color, size }) => {\r\n StarIcon.propTypes = {\r\n onClick: PropTypes.func,\r\n full: PropTypes.bool,\r\n color: PropTypes.string,\r\n size: PropTypes.number\r\n };\r\n\r\n return (\r\n <div onClick={onClick} onMouseOver={onClick} style={{ width: `${size}px`, height: `${size}px`, cursor: 'pointer'}} >\r\n {\r\n full ? (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill={color}\r\n stroke= {color}\r\n >\r\n <path\r\n d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke={color}\r\n >\r\n <path\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n strokeWidth=\"{2}\"\r\n d=\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"\r\n />\r\n </svg>\r\n )\r\n }\r\n </div>\r\n )\r\n}\r\n\r\nexport default StarIcon\r\n","import React from 'react';\r\nimport { useState } from 'react';\r\nimport PropTypes from \"prop-types\";\r\nimport StarIcon from \"../StarIcon/StarIcon\";\r\n\r\n\r\nconst StarRating = ({ starLength = 5, color = '#000000', size = 24, disabled = false, starStyle = { display: \"flex\", alignItems: \"center\", gap: \"2px\" }, starTextStyle = { color: color }, messages = [\"Terrible\", \"Bad\", \"Okay\", \"Good\", \"Amazing\"], defaultRating = 1, newRating }) => {\r\n StarRating.propTypes = {\r\n starLength: PropTypes.number,\r\n color: PropTypes.string.isRequired,\r\n size: PropTypes.number.isRequired,\r\n starStyle: PropTypes.object,\r\n starTextStyle: PropTypes.object,\r\n messages: PropTypes.array,\r\n defaultRating: PropTypes.number.isRequired,\r\n newRating: PropTypes.func.isRequired,\r\n disabled: PropTypes.bool,\r\n };\r\n\r\n const arrayLength = Array.from({ length: starLength });\r\n const [rating, setRating] = useState(arrayLength);\r\n const [storedRating, setStoredRating] = useState(defaultRating);\r\n\r\n\r\n const handleStoreRating = (rating, disabled) => {\r\n if (!disabled) {\r\n setStoredRating(rating);\r\n if (newRating) {\r\n newRating(rating);\r\n } else {\r\n setStoredRating(rating);\r\n }\r\n } else {\r\n return undefined;\r\n }\r\n }\r\n\r\n return (\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }} >\r\n <div style={starStyle} >\r\n {\r\n rating.map((item, index) => (<StarIcon key={index} onClick={() => handleStoreRating(index + 1, disabled)} full={storedRating >= index + 1} color={color} size={size} />))\r\n }\r\n </div>\r\n <p style={starTextStyle} >{messages.length === starLength ? messages[storedRating ? storedRating - 1 : rating - 1] : storedRating}</p>\r\n </div>\r\n )\r\n}\r\n\r\nexport default StarRating"],"names":["StarIcon","onClick","full","color","size","propTypes","PropTypes","func","bool","string","number","React","createElement","onMouseOver","style","width","height","cursor","xmlns","viewBox","fill","stroke","d","strokeLinecap","strokeLinejoin","strokeWidth","StarRating","starLength","disabled","starStyle","display","alignItems","gap","starTextStyle","messages","defaultRating","newRating","isRequired","object","array","arrayLength","Array","from","length","rating","setRating","useState","storedRating","setStoredRating","map","item","index","key","handleStoreRating"],"mappings":"8DAIA,MAAMA,EAAWA,EAAGC,UAASC,OAAMC,QAAOC,WACtCJ,EAASK,UAAY,CACjBJ,QAASK,EAAUC,KACnBL,KAAMI,EAAUE,KAChBL,MAAOG,EAAUG,OACjBL,KAAME,EAAUI,QAIhBC,EAAAC,cAAA,MAAA,CAAKX,QAASA,EAASY,YAAaZ,EAASa,MAAO,CAAEC,MAAO,GAAGX,MAAUY,OAAQ,GAAGZ,MAAUa,OAAQ,YAE/Ff,EACIS,EAAAC,cAAA,MAAA,CACIM,MAAM,6BACNC,QAAQ,YACRC,KAAMjB,EACNkB,OAASlB,GAETQ,EAAAC,cAAA,OAAA,CACIU,EAAE,8VAIVX,EAAAC,cAAA,MAAA,CACIM,MAAM,6BACNE,KAAK,OACLD,QAAQ,YACRE,OAAQlB,GAERQ,EAAAC,cAAA,OAAA,CACIW,cAAc,QACdC,eAAe,QACfC,YAAY,MACZH,EAAE,+WC/BxBI,EAAaA,EAAGC,aAAa,EAAGxB,QAAQ,UAAWC,OAAO,GAAIwB,YAAW,EAAOC,YAAY,CAAEC,QAAS,OAAQC,WAAY,SAAUC,IAAK,OAASC,gBAAgB,CAAE9B,MAAOA,GAAS+B,WAAW,CAAC,WAAY,MAAO,OAAQ,OAAQ,WAAYC,gBAAgB,EAAGC,gBACrQV,EAAWrB,UAAY,CACnBsB,WAAYrB,EAAUI,OACtBP,MAAOG,EAAUG,OAAO4B,WACxBjC,KAAME,EAAUI,OAAO2B,WACvBR,UAAWvB,EAAUgC,OACrBL,cAAe3B,EAAUgC,OACzBJ,SAAU5B,EAAUiC,MACpBJ,cAAe7B,EAAUI,OAAO2B,WAChCD,UAAW9B,EAAUC,KAAK8B,WAC1BT,SAAUtB,EAAUE,MAGxB,MAAMgC,EAAcC,MAAMC,KAAK,CAAEC,OAAQhB,KAClCiB,EAAQC,GAAaC,EAASN,IAC9BO,EAAcC,GAAmBF,EAASX,GAgBjD,OACIxB,EAAAC,cAAA,MAAA,CAAKE,MAAO,CAAEgB,QAAS,OAAQC,WAAY,SAAUC,IAAK,SACtDrB,EAAAC,cAAA,MAAA,CAAKE,MAAOe,GAEJe,EAAOK,KAAI,CAACC,EAAMC,IAAWxC,EAAAC,cAACZ,EAAQ,CAACoD,IAAKD,EAAOlD,QAASA,IAjBlDoD,EAACT,EAAQhB,KAC1BA,IACDoB,EAAgBJ,GACZR,EACAA,EAAUQ,GAEVI,EAAgBJ,GAIxB,EAO8ES,CAAkBF,EAAQ,EAAGvB,GAAW1B,KAAM6C,GAAgBI,EAAQ,EAAGhD,MAAOA,EAAOC,KAAMA,OAGvKO,EAAAC,cAAA,IAAA,CAAGE,MAAOmB,GAAiBC,EAASS,SAAWhB,EAAaO,EAASa,EAAeA,EAAe,EAAIH,EAAS,GAAKG,GACnH"}