update 2 Rating on Hover n49#48

anatolyevych · Jul 30, 2019 · 241ef82 · 241ef82
1 parent 77f813a
commit 241ef82
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -44,9 +44,9 @@ This a list of props that you can pass down to the component:
 | `edit` | Should you be able to select rating or just see rating (for reusability) | `true` | boolean |
 | `half` | Should component use half stars, if not the decimal part will be dropped otherwise normal algebra rools will apply to round to half stars | `true` | boolean
 | `onChange(new_rating)` | Will be invoked any time the rating is changed | `null` | function |
-| `onMouseOver(star_index)` | Will be invoked any time the when over mouse | `null` | function |
-| `onMouseMove(star_index)` | Will be invoked any time the when move mouse | `null` | function |
-| `onMouseLeave(star_index)` | Will be invoked any time the when leave mouse | `null` | function |
+| `onMouseOver(new_rating)` | Will be invoked any time the when over mouse | `null` | function |
+| `onMouseMove(new_rating)` | Will be invoked any time the when move mouse | `null` | function |
+| `onMouseLeave(new_rating)` | Will be invoked any time the when leave mouse | `null` | function |
 
 ### Help improve the component
 ###### Build on your machine:

diff --git a/dist/react-stars.js b/dist/react-stars.js
@@ -144,20 +144,16 @@ var ReactStars = function (_Component) {
           halfStar = _state.halfStar;
 
       if (!config.edit) return;
-      var index = Number(event.target.getAttribute('data-index'));
-      if (config.half) {
-        var isAtHalf = this.moreThanHalf(event, config.size);
-        halfStar.hidden = isAtHalf;
-        if (isAtHalf) index = index + 1;
-        halfStar.at = index;
-      } else {
-        index = index + 1;
-      }
+
+      var _calcData = calcData(),
+          value = _calcData.value,
+          index = _calcData.index;
+
       this.setState({
         stars: this.getStars(index)
       });
 
-      this.props.onMouseOver(index);
+      this.props.onMouseOver(value);
     }
   }, {
     key: 'mouseMove',
@@ -167,20 +163,16 @@ var ReactStars = function (_Component) {
           halfStar = _state2.halfStar;
 
       if (!config.edit) return;
-      var index = Number(event.target.getAttribute('data-index'));
-      if (config.half) {
-        var isAtHalf = this.moreThanHalf(event, config.size);
-        halfStar.hidden = isAtHalf;
-        if (isAtHalf) index = index + 1;
-        halfStar.at = index;
-      } else {
-        index = index + 1;
-      }
+
+      var _calcData2 = calcData(),
+          value = _calcData2.value,
+          index = _calcData2.index;
+
       this.setState({
         stars: this.getStars(index)
       });
 
-      this.props.onMouseMove(index);
+      this.props.onMouseMove(value);
     }
   }, {
     key: 'moreThanHalf',
@@ -218,6 +210,21 @@ var ReactStars = function (_Component) {
           halfStar = _state4.halfStar;
 
       if (!config.edit) return;
+
+      var _calcData3 = calcData(),
+          value = _calcData3.value,
+          index = _calcData3.index;
+
+      this.setState({
+        value: value,
+        stars: this.getStars(index)
+      });
+
+      this.props.onChange(value);
+    }
+  }, {
+    key: 'calcData',
+    value: function calcData(event, config, halfStar) {
       var index = Number(event.target.getAttribute('data-index'));
       var value = void 0;
       if (config.half) {
@@ -229,11 +236,8 @@ var ReactStars = function (_Component) {
       } else {
         value = index = index + 1;
       }
-      this.setState({
-        value: value,
-        stars: this.getStars(index)
-      });
-      this.props.onChange(value);
+
+      return { value: value, index: index };
     }
   }, {
     key: 'renderHalfStarStyleElement',

diff --git a/src/react-stars.js b/src/react-stars.js
@@ -116,41 +116,29 @@ class ReactStars extends Component {
   }
 
   mouseOver(event) {
-    let { config, halfStar } = this.state
-    if (!config.edit) return;
-    let index = Number(event.target.getAttribute('data-index'))
-    if (config.half) {
-      const isAtHalf = this.moreThanHalf(event, config.size)
-      halfStar.hidden = isAtHalf
-      if (isAtHalf) index = index + 1
-      halfStar.at = index
-    } else {
-      index = index + 1
-    }
+    const { config, halfStar } = this.state
+    if (!config.edit) return
+
+    const { value, index } = calcData();
+
     this.setState({
       stars: this.getStars(index)
     })
 
-    this.props.onMouseOver(index)
+    this.props.onMouseOver(value);
   }
 
   mouseMove(event) {
-    let { config, halfStar } = this.state
-    if (!config.edit) return;
-    let index = Number(event.target.getAttribute('data-index'))
-    if (config.half) {
-      const isAtHalf = this.moreThanHalf(event, config.size)
-      halfStar.hidden = isAtHalf
-      if (isAtHalf) index = index + 1
-      halfStar.at = index
-    } else {
-      index = index + 1
-    }
+    const { config, halfStar } = this.state
+    if (!config.edit) return
+
+    const { value, index } = calcData();
+
     this.setState({
       stars: this.getStars(index)
     })
 
-    this.props.onMouseMove(index)
+    this.props.onMouseMove(value)
   }
 
   moreThanHalf(event, size) {
@@ -171,12 +159,24 @@ class ReactStars extends Component {
       stars: this.getStars()
     })
 
-    this.props.onMouseLeave(value)
+    this.props.onMouseLeave(value);
   }
 
   clicked(event) {
     const { config, halfStar } = this.state
     if (!config.edit) return
+
+    const { value, index } = calcData();
+
+    this.setState({
+      value: value,
+      stars: this.getStars(index)
+    })
+
+    this.props.onChange(value);
+  }
+
+  calcData(event, config, halfStar) {
     let index = Number(event.target.getAttribute('data-index'))
     let value
     if (config.half) {
@@ -188,11 +188,8 @@ class ReactStars extends Component {
     } else {
       value = index = index + 1
     }
-    this.setState({
-      value: value,
-      stars: this.getStars(index)
-    })
-    this.props.onChange(value)
+
+    return { value, index };
   }
 
   renderHalfStarStyleElement() {