fixes

package.json

@@ -4,10 +4,10 @@
   "description": "A simple star rating component built with React.",
   "main": "./dist/react-star-rating.min.js",
   "scripts": {
-    "start": "npm run watch",
+    "start": "npm run dev",
     "dev": "webpack serve",
     "build": "webpack",
-    "test": "karma start",
+    "test": "karma start ./test/karma.conf.js",
     "prepublish": ""
   },
   "repository": "cameronroe/react-star-rating",
@@ -34,13 +34,14 @@
     "istanbul-instrumenter-loader": "^2.0.0",
     "jshint-stylish": "^2.2.1",
     "karma": "^6.4.1",
-    "karma-babel-preprocessor": "^8.0.2",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-mocha": "^2.0.1",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-sinon": "^1.0.5",
     "karma-sourcemap-loader": "^0.3.8",
+    "karma-webpack": "^5.0.0",
     "mocha": "^10.1.0",
     "node-bourbon": "^4.2.8",
     "node-sass": "^7.0.3",

src/StarRating.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { utils } from './utils';
@@ -27,7 +27,7 @@ function isFloat(n) {
  *   onRatingClick={function} - a handler function that gets called onClick of the rating (optional)
  *   />
  */
-class StarRating extends React.Component {
+class StarRating extends Component {
 
   // static propTypes = {
   //   name: React.PropTypes.string.isRequired,
@@ -120,18 +120,18 @@ class StarRating extends React.Component {
   }
 
   getRatingEvent(e) {
-    var root = this.root;
-    var pos = utils.getPosition(e, root);
+    let root = this.root;
+    let pos = utils.getPosition(e, root);
     return this.calculate(pos);
   }
 
   /**
    * Get Star SVG
    */
   getSvg(rating) {
-    var stars = [];
-    for (var i = 0; i < this.props.totalStars; i++) {
-      var attrs = {};
+    let stars = [];
+    for (let i = 0; i < this.props.totalStars; i++) {
+      let attrs = {};
       attrs['transform'] = `translate(${i*50}, 0)`;
       attrs['fill'] = (i+this.props.step <= rating) ? '#FFA91B' : '#C6C6C6';
       stars.push(
@@ -142,7 +142,7 @@ class StarRating extends React.Component {
       );
     }
 
-    var styles = {
+    let styles = {
       width: `${stars.length * this.props.size}px`,
       height: `${this.props.size}px`
     };
@@ -213,7 +213,7 @@ class StarRating extends React.Component {
    */
   handleMouseMove(e) {
     // get hover position
-    var ratingEvent = this.getRatingEvent(e);
+    let ratingEvent = this.getRatingEvent(e);
     this.updateRating(
       ratingEvent.width,
       ratingEvent.val
@@ -264,11 +264,21 @@ class StarRating extends React.Component {
     }
   }
 
+  setAttrs(isState) {
+    let attrs = {};
+    if (isState) {
+      attrs['onMouseMove'] = this.handleMouseMove.bind(this);
+      attrs['onMouseLeave'] = this.handleMouseLeave.bind(this);
+      attrs['onClick'] = this.handleClick.bind(this);
+    }
+    return attrs;
+  }
+
   render() {
 
-    var classes = this.getClasses();
-    var caption = this.getCaption();
-    var attrs = utils.setAttrs(this.state.editing, this);
+    let classes = this.getClasses();
+    let caption = this.getCaption();
+    let attrs = this.setAttrs(this.state.editing);
 
     return (
       <span className="rsr-container">

src/docs.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { createRoot } from 'react-dom/client';
 import StarRating from './StarRating';
 import pkg from '../package';
@@ -7,7 +7,7 @@ import './sass/demo.scss';
 const inject = document.querySelector('.inject');
 const root = createRoot(inject);
 
-class App extends React.Component {
+class Docs extends Component {
 
   handleRatingClick(e, data) {
     console.log(data);
@@ -147,4 +147,4 @@ class App extends React.Component {
 
 }
 
-root.render(<App />);
+root.render(<Docs />);

src/sass/demo.scss

@@ -73,7 +73,7 @@ footer {
 
 .intro {
   color: #fff;
-  /*@include background(linear-gradient(#444, #333) left repeat);*/
+  background: linear-gradient(#444, #333) left repeat;
   padding: 8em 0;
   box-shadow: inset 0px 0px 7px #000;
   text-align: center;
@@ -85,7 +85,6 @@ footer {
 .main-title {
   font-size: 4em;
   letter-spacing: 1px;
-  text-shadow: 1px 1px 0px #333;
   text-align: center;
   > small {
     display: block;

src/sass/react-star-rating.scss

@@ -26,7 +26,7 @@
   white-space: nowrap;
   overflow: hidden;
   color: #F5A71B;
-  /*@include transition(all 0.01s);*/
+  transition: all 0.01s;
 }
 
 .rsr__caption {

src/utils.js

@@ -18,16 +18,6 @@ export const utils = {
     return e.clientX - root.getBoundingClientRect().left;
   },
 
-  setAttrs(isState, obj) {
-    var attrs = {};
-    if (isState) {
-      attrs['onMouseMove'] = obj.handleMouseMove;
-      attrs['onMouseLeave'] = obj.handleMouseLeave;
-      attrs['onClick'] = obj.handleClick;
-    }
-    return attrs;
-  },
-
   treatName(title) {
     if (typeof title === 'string') {
       return title.toLowerCase().split(' ').join('_');