react-color - npm Package Compare versions

Comparing version 2.13.3 to 2.13.4

lib/components/chrome/ChromeFields.js

@@ -90,4 +90,4 @@ 'use strict';
           h: data.h || _this.props.hsl.h,
-          s: data.s && data.s.replace('%', '') || _this.props.hsl.s,
-          l: data.l && data.l.replace('%', '') || _this.props.hsl.l,
+          s: data.s && data.s || _this.props.hsl.s,
+          l: data.l && data.l || _this.props.hsl.l,
           source: 'hsl'
@@ -94,0 +94,0 @@ }, e);

lib/components/common/EditableInput.js

@@ -53,3 +53,8 @@ 'use strict';
     _this.handleKeyDown = function (e) {
-      var number = Number(e.target.value);
+      // In case `e.target.value` is a percentage remove the `%` character
+      // and update accordingly with a percentage
+      // https://github.com/casesandberg/react-color/issues/383
+      var stringValue = String(e.target.value);
+      var isPercentage = stringValue.indexOf('%') > -1;
+      var number = Number(stringValue.replace(/%/g, ''));
       if (!isNaN(number)) {
@@ -66,3 +71,7 @@ var amount = _this.props.arrowOffset || 1;
 
-          _this.setState({ value: number + amount });
+          if (isPercentage) {
+            _this.setState({ value: number + amount + '%' });
+          } else {
+            _this.setState({ value: number + amount });
+          }
         }
@@ -78,3 +87,7 @@
 
-          _this.setState({ value: number - amount });
+          if (isPercentage) {
+            _this.setState({ value: number - amount + '%' });
+          } else {
+            _this.setState({ value: number - amount });
+          }
         }
@@ -81,0 +94,0 @@ }

package.json

 {
   "name": "react-color",
-  "version": "2.13.3",
+  "version": "2.13.4",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

768160

increased by0.07%

Lines of code

13293

increased by0.1%

No dependency changes