From 2f87b0a7e4f375eddaf264f9457ed21696125e31 Mon Sep 17 00:00:00 2001
From: Milton Inostroza <minostro@minostro.com>
Date: Sat, 31 Mar 2018 20:02:42 -0700
Subject: [PATCH] Bugfix: state is updated through props

---
 dist/react-stars.js | 32 ++++++++++++++++++--------------
 src/react-stars.js  | 25 +++++++++++++------------
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/dist/react-stars.js b/dist/react-stars.js
index bcb0ede..8b43138 100644
--- a/dist/react-stars.js
+++ b/dist/react-stars.js
@@ -60,7 +60,8 @@ var ReactStars = function (_Component) {
       halfStar: {
         at: Math.floor(props.value),
         hidden: props.half && props.value % 1 < 0.5
-      }
+      },
+      edit: props.edit
     };
 
     _this.state.config = {
@@ -71,10 +72,8 @@ var ReactStars = function (_Component) {
       color1: props.color1,
       // color of an active star
       color2: props.color2,
-      half: props.half,
-      edit: props.edit
+      half: props.half
     };
-
     return _this;
   }
 
@@ -88,13 +87,15 @@ var ReactStars = function (_Component) {
   }, {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(props) {
+      console.log(props);
       this.setState({
         stars: this.getStars(props.value),
         value: props.value,
         halfStar: {
           at: Math.floor(props.value),
           hidden: this.state.config.half && props.value % 1 < 0.5
-        }
+        },
+        edit: props.edit
       });
     }
   }, {
@@ -132,9 +133,10 @@ var ReactStars = function (_Component) {
     value: function mouseOver(event) {
       var _state = this.state,
           config = _state.config,
-          halfStar = _state.halfStar;
+          halfStar = _state.halfStar,
+          edit = _state.edit;
 
-      if (!config.edit) return;
+      if (!edit) return;
       var index = Number(event.target.getAttribute('data-index'));
       if (config.half) {
         var isAtHalf = this.moreThanHalf(event, config.size);
@@ -163,9 +165,10 @@ var ReactStars = function (_Component) {
       var _state2 = this.state,
           value = _state2.value,
           halfStar = _state2.halfStar,
-          config = _state2.config;
+          config = _state2.config,
+          edit = _state2.edit;
 
-      if (!config.edit) return;
+      if (!edit) return;
       if (config.half) {
         halfStar.hidden = !this.isDecimal(value);
         halfStar.at = Math.floor(this.state.value);
@@ -179,9 +182,10 @@ var ReactStars = function (_Component) {
     value: function clicked(event) {
       var _state3 = this.state,
           config = _state3.config,
-          halfStar = _state3.halfStar;
+          halfStar = _state3.halfStar,
+          edit = _state3.edit;
 
-      if (!config.edit) return;
+      if (!edit) return;
       var index = Number(event.target.getAttribute('data-index'));
       var value = void 0;
       if (config.half) {
@@ -219,13 +223,13 @@ var ReactStars = function (_Component) {
           halfStar = _state5.halfStar,
           stars = _state5.stars,
           uniqueness = _state5.uniqueness,
-          config = _state5.config;
+          config = _state5.config,
+          edit = _state5.edit;
       var color1 = config.color1,
           color2 = config.color2,
           size = config.size,
           char = config.char,
-          half = config.half,
-          edit = config.edit;
+          half = config.half;
 
       return stars.map(function (star, i) {
         var starClass = '';
diff --git a/src/react-stars.js b/src/react-stars.js
index 9066a74..9d91ed1 100644
--- a/src/react-stars.js
+++ b/src/react-stars.js
@@ -45,7 +45,8 @@ class ReactStars extends Component {
       halfStar: {
         at: Math.floor(props.value),
         hidden: props.half && props.value % 1 < 0.5
-      }
+      },
+      edit: props.edit
     }
 
     this.state.config = {
@@ -57,9 +58,7 @@ class ReactStars extends Component {
       // color of an active star
       color2: props.color2,
       half: props.half,
-      edit: props.edit,
     }
-
   }
 
   componentDidMount() {
@@ -69,13 +68,15 @@ class ReactStars extends Component {
   }
 
   componentWillReceiveProps(props) {
+    console.log(props);
     this.setState({
       stars: this.getStars(props.value),
       value: props.value,
       halfStar: {
         at: Math.floor(props.value),
         hidden: this.state.config.half && props.value % 1 < 0.5
-      }
+      },
+      edit: props.edit,
     })
   }
 
@@ -107,8 +108,8 @@ class ReactStars extends Component {
   }
 
   mouseOver(event) {
-    let { config, halfStar } = this.state
-    if (!config.edit) return;
+    let { config, halfStar, edit } = this.state
+    if (!edit) return;
     let index = Number(event.target.getAttribute('data-index'))
     if (config.half) {
       const isAtHalf = this.moreThanHalf(event, config.size)
@@ -131,8 +132,8 @@ class ReactStars extends Component {
   }
 
   mouseLeave() {
-    const { value, halfStar, config } = this.state
-    if (!config.edit) return
+    const { value, halfStar, config, edit } = this.state
+    if (!edit) return
     if (config.half) {
       halfStar.hidden = !this.isDecimal(value)
       halfStar.at = Math.floor(this.state.value)
@@ -143,8 +144,8 @@ class ReactStars extends Component {
   }
 
   clicked(event) {
-    const { config, halfStar } = this.state
-    if (!config.edit) return
+    const { config, halfStar, edit } = this.state
+    if (!edit) return
     let index = Number(event.target.getAttribute('data-index'))
     let value
     if (config.half) {
@@ -173,8 +174,8 @@ class ReactStars extends Component {
   }
 
   renderStars() {
-    const { halfStar, stars, uniqueness, config } = this.state
-    const { color1, color2, size, char, half, edit } = config
+    const { halfStar, stars, uniqueness, config, edit } = this.state
+    const { color1, color2, size, char, half } = config
     return stars.map((star, i) => {
       let starClass = ''
       if (half && !halfStar.hidden && halfStar.at === i) {