Merge pull request #45 from ProntoPro/feature/44-rating-stars-are-not…

…-changing-passing-updated-props refs #44: Rating stars are not changing passing updated props
homeruntech · Mar 13, 2018 · 5b5afbc · 5b5afbc
2 parents 233e734 + 6bd9e16
commit 5b5afbc
Show file tree

Hide file tree

Showing 9 changed files with 232 additions and 140 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -1,7 +1,6 @@
 ### Is this a bug report?
 
 
-
 ### Environment
 
 1. `node -v`:
@@ -26,5 +25,4 @@ Then, specify:
 ### Expected Behavior
 
 
-
 ### Actual Behavior
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,3 +1,5 @@
+Closes #ISSUE_NUMBER
+
 ### Issue Description
 
 ### What I did

diff --git a/.templates/index.js b/.templates/index.js
@@ -1,8 +1,19 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { render } from 'react-dom'
 import ReactRating from '@prontopro/react-rating'
 import styled from 'styled-components'
 
+const Button = styled.button`
+  background-color: rgba(55,201,217,0.9);
+  border-radius: 4px;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  margin: 8px 0;
+  outline: none;
+  padding: 8px;
+`
+
 const ReactExample = styled.div`
   align-items: center;
   display: flex;
@@ -21,29 +32,52 @@ const Wrapper = styled.div`
   justify-content: center;
 `
 
-const App = () => (
-  <Wrapper>
-    <ReactExample className="row">
-      <Title>Default</Title>
-      <ReactRating />
-    </ReactExample>
-    <ReactExample className="row">
-      <Title>Animate onHover</Title>
-      <ReactRating animateOnHover />
-    </ReactExample>
-    <ReactExample className="row">
-      <Title>Animate onHover with animation disabled</Title>
-      <ReactRating animateOnHover disableAnimation />
-    </ReactExample>
-    <ReactExample className="row">
-      <Title>ReadOnly</Title>
-      <ReactRating readonly />
-    </ReactExample>
-    <ReactExample className="row">
-      <Title>10 StarsRating</Title>
-      <ReactRating animateOnHover stop={10} />
-    </ReactExample>
-  </Wrapper>
-)
+class App extends PureComponent {
+  state = {
+    initialRate: 0,
+  }
+
+  handleRate = () => {
+    const initialRate = Math.floor(Math.random() * 5) + 1
+
+    this.setState({ initialRate })
+  }
+
+  render() {
+    const { initialRate } = this.state
+
+    return (
+      <Wrapper>
+        <ReactExample className="row">
+          <Title>Default</Title>
+          <ReactRating />
+        </ReactExample>
+        <ReactExample className="row">
+          <Title>Animate onHover</Title>
+          <ReactRating animateOnHover />
+        </ReactExample>
+        <ReactExample className="row">
+          <Title>Animate onHover with animation disabled</Title>
+          <ReactRating animateOnHover disableAnimation />
+        </ReactExample>
+        <ReactExample className="row">
+          <Title>ReadOnly</Title>
+          <ReactRating readonly />
+        </ReactExample>
+        <ReactExample className="row">
+          <Title>10 StarsRating</Title>
+          <ReactRating animateOnHover stop={10} />
+        </ReactExample>
+        <ReactExample className="row">
+          <Title>Rating with initialRate</Title>
+          <ReactRating animateOnHover initialRate={initialRate} />
+
+          <Button onClick={this.handleRate}>Generate random rating</Button>
+          <Title>Current rating: {initialRate}</Title>
+        </ReactExample>
+      </Wrapper>
+    )
+  }
+}
 
 render(<App />, document.getElementById('root'))
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## v0.1.4 - 2018-03-13
+### Fix
+- [Rating stars are not changing passing updated props](https://github.com/ProntoPro/react-rating/issues/44)
+
 ## v0.1.3 - 2018-02-28
 ### Feature
 - [Update dependencies](https://github.com/ProntoPro/react-rating/issues/41)

diff --git a/dist/react-rating.js b/dist/react-rating.js
@@ -294,7 +294,7 @@ var Rating = function (_PureComponent) {
 
     (0, _utils.validateParams)(props);
 
-    _this.state = (_this$state = {}, _defineProperty(_this$state, _constants.ratingTypes.FIXED, _this.getRating()), _defineProperty(_this$state, 'elements', (0, _utils.range)(stop - start, function (_, i) {
+    _this.state = (_this$state = {}, _defineProperty(_this$state, _constants.ratingTypes.FIXED, _this.getRating(props)), _defineProperty(_this$state, 'elements', (0, _utils.range)(stop - start, function (_, i) {
       return 'react-rating-' + i;
     })), _this$state);
     return _this;
@@ -304,7 +304,7 @@ var Rating = function (_PureComponent) {
     key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
       if (this.propsAreChanged(nextProps)) {
-        this.setState(_defineProperty({}, _constants.ratingTypes.FIXED, this.getRating()));
+        this.setState(_defineProperty({}, _constants.ratingTypes.FIXED, this.getRating(nextProps)));
       }
     }
   }, {
@@ -368,20 +368,17 @@ var _initialiseProps = function _initialiseProps() {
     return index - currentRoundedRatingValue < 0 ? 100 : 0;
   };
 
-  this.getRating = function () {
-    var _props2 = _this3.props,
-        initialRate = _props2.initialRate,
-        start = _props2.start,
-        step = _props2.step;
-
-
+  this.getRating = function (_ref2) {
+    var initialRate = _ref2.initialRate,
+        start = _ref2.start,
+        step = _ref2.step;
     return (initialRate - start) / step || 0;
   };
 
   this.handleClick = function (event, index) {
-    var _props3 = _this3.props,
-        onClick = _props3.onClick,
-        onChange = _props3.onChange;
+    var _props2 = _this3.props,
+        onClick = _props2.onClick,
+        onChange = _props2.onChange;
     var currentRating = _this3.state.currentRating;
 
 
@@ -417,25 +414,25 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.indexToRate = function (index) {
-    var _props4 = _this3.props,
-        start = _props4.start,
-        step = _props4.step;
+    var _props3 = _this3.props,
+        start = _props3.start,
+        step = _props3.step;
 
 
     return start + Math.floor(index) * step + step * _this3.round(index % 1);
   };
 
-  this.propsAreChanged = function (_ref2) {
-    var initialRate = _ref2.initialRate,
-        start = _ref2.start,
-        stop = _ref2.stop;
+  this.propsAreChanged = function (_ref3) {
+    var initialRate = _ref3.initialRate,
+        start = _ref3.start,
+        stop = _ref3.stop;
     return initialRate !== _this3.props.initialRate || start !== _this3.props.start || stop !== _this3.props.stop;
   };
 
   this.round = function (index) {
-    var _props5 = _this3.props,
-        fractions = _props5.fractions,
-        stop = _props5.stop;
+    var _props4 = _this3.props,
+        fractions = _props4.fractions,
+        stop = _props4.stop;
 
     var value = (0, _utils.getFractionValue)(index, fractions);
 

diff --git a/dist/react-rating.min.js b/dist/react-rating.min.js