rc-rate - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

es/Rate.js

@@ -36,3 +36,4 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
       value: value,
-      focused: false
+      focused: false,
+      cleanedValue: null
     };
@@ -67,5 +68,6 @@ return _this;
     if (this.props.allowHalf) {
-      var leftEdge = getOffsetLeft(this.getStarDOM(0));
-      var width = getOffsetLeft(this.getStarDOM(1)) - leftEdge;
-      if (x - leftEdge - width * index < width / 2) {
+      var starEle = this.getStarDOM(index);
+      var leftDis = getOffsetLeft(starEle);
+      var width = starEle.clientWidth;
+      if (x - leftDis < width / 2) {
         value -= 0.5;
@@ -155,2 +157,3 @@ }
   allowHalf: PropTypes.bool,
+  allowClear: PropTypes.bool,
   style: PropTypes.object,
@@ -172,2 +175,3 @@ prefixCls: PropTypes.string,
   allowHalf: false,
+  allowClear: true,
   style: {},
@@ -186,5 +190,10 @@ prefixCls: 'rc-rate',
     var hoverValue = _this2.getStarValue(index, event.pageX);
-    _this2.setState({
-      hoverValue: hoverValue
-    });
+    var cleanedValue = _this2.state.cleanedValue;
+
+    if (hoverValue !== cleanedValue) {
+      _this2.setState({
+        hoverValue: hoverValue,
+        cleanedValue: null
+      });
+    }
     _this2.props.onHoverChange(hoverValue);
@@ -195,3 +204,4 @@ };
     _this2.setState({
-      hoverValue: undefined
+      hoverValue: undefined,
+      cleanedValue: null
     });
@@ -203,4 +213,11 @@ _this2.props.onHoverChange(undefined);
     var value = _this2.getStarValue(index, event.pageX);
-    _this2.onMouseLeave();
-    _this2.changeValue(value);
+    var isReset = false;
+    if (_this2.props.allowClear) {
+      isReset = value === _this2.state.value;
+    }
+    _this2.onMouseLeave(true);
+    _this2.changeValue(isReset ? 0 : value);
+    _this2.setState({
+      cleanedValue: isReset ? value : null
+    });
   };
@@ -207,0 +224,0 @@

HISTORY.md

@@ -0,1 +1,5 @@
+## 2.4.0
+
+- Add allowClear support.
+
 ## 2.3.0
@@ -2,0 +6,0 @@

lib/Rate.js

@@ -60,3 +60,4 @@ 'use strict';
       value: value,
-      focused: false
+      focused: false,
+      cleanedValue: null
     };
@@ -91,5 +92,6 @@ return _this;
     if (this.props.allowHalf) {
-      var leftEdge = (0, _util.getOffsetLeft)(this.getStarDOM(0));
-      var width = (0, _util.getOffsetLeft)(this.getStarDOM(1)) - leftEdge;
-      if (x - leftEdge - width * index < width / 2) {
+      var starEle = this.getStarDOM(index);
+      var leftDis = (0, _util.getOffsetLeft)(starEle);
+      var width = starEle.clientWidth;
+      if (x - leftDis < width / 2) {
         value -= 0.5;
@@ -179,2 +181,3 @@ }
   allowHalf: _propTypes2['default'].bool,
+  allowClear: _propTypes2['default'].bool,
   style: _propTypes2['default'].object,
@@ -196,2 +199,3 @@ prefixCls: _propTypes2['default'].string,
   allowHalf: false,
+  allowClear: true,
   style: {},
@@ -210,5 +214,10 @@ prefixCls: 'rc-rate',
     var hoverValue = _this2.getStarValue(index, event.pageX);
-    _this2.setState({
-      hoverValue: hoverValue
-    });
+    var cleanedValue = _this2.state.cleanedValue;
+
+    if (hoverValue !== cleanedValue) {
+      _this2.setState({
+        hoverValue: hoverValue,
+        cleanedValue: null
+      });
+    }
     _this2.props.onHoverChange(hoverValue);
@@ -219,3 +228,4 @@ };
     _this2.setState({
-      hoverValue: undefined
+      hoverValue: undefined,
+      cleanedValue: null
     });
@@ -227,4 +237,11 @@ _this2.props.onHoverChange(undefined);
     var value = _this2.getStarValue(index, event.pageX);
-    _this2.onMouseLeave();
-    _this2.changeValue(value);
+    var isReset = false;
+    if (_this2.props.allowClear) {
+      isReset = value === _this2.state.value;
+    }
+    _this2.onMouseLeave(true);
+    _this2.changeValue(isReset ? 0 : value);
+    _this2.setState({
+      cleanedValue: isReset ? value : null
+    });
   };
@@ -231,0 +248,0 @@

package.json

 {
   "name": "rc-rate",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React Star Rate Component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -98,2 +98,8 @@ # rc-rate
         <tr>
+          <td>allowClear</td>
+          <td>bool</td>
+          <td>true</td>
+          <td>reset when click again</td>
+        </tr>
+        <tr>
           <td>style</td>
@@ -100,0 +106,0 @@ <td>object</td>

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

34364

increased by3.11%

Lines of code

853

increased by3.9%

Number of lines in readme file

149

increased by4.2%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes