react-stars - npm Package Compare versions

Comparing version 2.0.6 to 2.1.0

dist/react-stars.js

@@ -34,4 +34,4 @@ 'use strict';
 
-var getHalfStarStyles = function getHalfStarStyles(color) {
-  return '\n    .react-stars-half-star:before {\n      position: absolute;\n      overflow: hidden;\n      display: block;\n      z-index: 1;\n      top: 0; left: 0;\n      width: 50%;\n      content: attr(data-forhalf);\n      color: ' + color + ';\n  }';
+var getHalfStarStyles = function getHalfStarStyles(color, uniqueness) {
+  return '\n    .react-stars-' + uniqueness + ':before {\n      position: absolute;\n      overflow: hidden;\n      display: block;\n      z-index: 1;\n      top: 0; left: 0;\n      width: 50%;\n      content: attr(data-forhalf);\n      color: ' + color + ';\n  }';
 };
@@ -64,2 +64,3 @@
     _this.state = {
+      uniqueness: (Math.random() + '').replace('.', ''),
       value: props.value || 0,
@@ -212,4 +213,8 @@ stars: [],
     value: function renderHalfStarStyleElement() {
+      var _state4 = this.state;
+      var config = _state4.config;
+      var uniqueness = _state4.uniqueness;
+
       return _react2.default.createElement('style', { dangerouslySetInnerHTML: {
-          __html: getHalfStarStyles(this.state.config.color2)
+          __html: getHalfStarStyles(config.color2, uniqueness)
         } });
@@ -222,5 +227,6 @@ }
 
-      var _state4 = this.state;
-      var halfStar = _state4.halfStar;
-      var stars = _state4.stars;
+      var _state5 = this.state;
+      var halfStar = _state5.halfStar;
+      var stars = _state5.stars;
+      var uniqueness = _state5.uniqueness;
       var _state$config = this.state.config;
@@ -236,3 +242,3 @@ var color1 = _state$config.color1;
         if (half && !halfStar.hidden && halfStar.at === i) {
-          starClass = 'react-stars-half-star';
+          starClass = 'react-stars-' + uniqueness;
         }
@@ -239,0 +245,0 @@ var style = Object.assign({}, defaultStyles, {

package.json

 {
   "name": "react-stars",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "description": "Simple star rating component for your React projects",
@@ -13,5 +13,18 @@ "main": "dist/react-stars.js",
   },
+  "ava": {
+    "babel": {
+      "presets": [
+        "es2015",
+        "react"
+      ]
+    },
+    "require": [
+      "babel-register"
+    ]
+  },
   "scripts": {
     "build": "babel src --out-dir dist",
-    "dev": "babel src --out-dir dist --watch"
+    "dev": "babel src --out-dir dist --watch",
+    "build-example": "webpack -p --config=wepack.production.config.js",
+    "dev-example": "webpack-dev-server . --hot --inline"
   },
@@ -30,6 +43,12 @@ "keywords": [
   "devDependencies": {
+    "ava": "^0.14.0",
     "babel-cli": "^6.6.5",
+    "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0"
-  }
+    "babel-preset-react": "^6.5.0",
+    "react-addons-test-utils": "^15.0.1",
+    "webpack": "^1.12.15",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {}
 }

README.md

@@ -46,2 +46,27 @@ # react-stars :star:
 
+### Help improve the component
+###### Build on your machine:
+```bash
+# Clone the repo
+git clone [e-mail]:n49/react-stars.git
+# Go into project folder
+cd react-stars
+# Install dependancies
+npm install
+```
+Build the component:
+```bash
+npm build
+```
+Run the examples (dev):
+```bash
+npm run dev-example
+```
+Build the examples (production):
+```bash
+npm run build-example
+```
+
+Then in your browser go to: [http://127.0.0.1:8080/example](http://127.0.0.1:8080/example)
+
 ### Requirements
@@ -48,0 +73,0 @@

src/react-stars.js

@@ -16,5 +16,5 @@ import React, { Component } from 'react'
 
-const getHalfStarStyles = (color) => {
+const getHalfStarStyles = (color, uniqueness) => {
   return `
-    .react-stars-half-star:before {
+    .react-stars-${uniqueness}:before {
       position: absolute;
@@ -54,2 +54,3 @@ overflow: hidden;
     this.state = {
+      uniqueness: (Math.random() + '').replace('.', ''),
       value: props.value || 0,
@@ -72,3 +73,3 @@ stars: [],
       half:   props.half,
-      edit:   props.edit
+      edit:   props.edit,
     }
@@ -180,5 +181,6 @@
   renderHalfStarStyleElement() {
+    const { config, uniqueness } = this.state
     return (
       <style dangerouslySetInnerHTML={{
-        __html: getHalfStarStyles(this.state.config.color2)
+        __html: getHalfStarStyles(config.color2, uniqueness)
       }}></style>
@@ -189,3 +191,3 @@ )
   renderStars() {
-    const { halfStar, stars } = this.state
+    const { halfStar, stars, uniqueness } = this.state
     const { color1, color2, size, char, half } = this.state.config
@@ -195,3 +197,3 @@ return stars.map((star, i) => {
       if(half && !halfStar.hidden && halfStar.at === i) {
-        starClass = 'react-stars-half-star'
+        starClass = `react-stars-${uniqueness}`
       }
@@ -198,0 +200,0 @@ const style = Object.assign({}, defaultStyles, {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

177688

increased by1012.98%

Number of package files

11

increased by120%

Lines of code

1492

increased by240.64%

Number of lines in readme file

79

increased by46.3%

Worsened metrics

Dev dependency count

8

increased by166.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes