react-color - npm Package Compare versions

Comparing version 2.17.0 to 2.17.1

lib/components/chrome/Chrome.js

@@ -41,3 +41,4 @@ 'use strict';
 var Chrome = exports.Chrome = function Chrome(_ref) {
-  var onChange = _ref.onChange,
+  var width = _ref.width,
+      onChange = _ref.onChange,
       disableAlpha = _ref.disableAlpha,
@@ -57,2 +58,3 @@ rgb = _ref.rgb,
       picker: {
+        width: width,
         background: '#fff',
@@ -62,3 +64,2 @@ borderRadius: '2px',
         boxSizing: 'initial',
-        width: '225px',
         fontFamily: 'Menlo'
@@ -206,2 +207,3 @@ },
 Chrome.propTypes = {
+  width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   disableAlpha: _propTypes2.default.bool,
@@ -212,2 +214,3 @@ styles: _propTypes2.default.object
 Chrome.defaultProps = {
+  width: 225,
   disableAlpha: false,
@@ -214,0 +217,0 @@ styles: {}

lib/components/chrome/spec.js

@@ -89,2 +89,7 @@ 'use strict';
   expect(tree.props.style.boxShadow).toBe('none');
+});
+
+test('Chrome renders correctly with width', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Chrome2.default, { width: 300 })).toJSON();
+  expect(tree.props.style.width).toBe(300);
 });

lib/components/common/Alpha.js

@@ -52,7 +52,7 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Alpha.__proto__ || Object.getPrototypeOf(Alpha)).call.apply(_ref2, [this].concat(args))), _this), _this.handleChange = function (e, skip) {
-      var change = alpha.calculateChange(e, skip, _this.props, _this.container);
-      change && _this.props.onChange && _this.props.onChange(change, e);
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Alpha.__proto__ || Object.getPrototypeOf(Alpha)).call.apply(_ref2, [this].concat(args))), _this), _this.handleChange = function (e) {
+      var change = alpha.calculateChange(e, _this.props.hsl, _this.props.direction, _this.props.a, _this.container);
+      change && typeof _this.props.onChange === 'function' && _this.props.onChange(change, e);
     }, _this.handleMouseDown = function (e) {
-      _this.handleChange(e, true);
+      _this.handleChange(e);
       window.addEventListener('mousemove', _this.handleChange);
@@ -59,0 +59,0 @@ window.addEventListener('mouseup', _this.handleMouseUp);

lib/components/common/EditableInput.js

@@ -28,2 +28,21 @@ 'use strict';
 
+var DEFAULT_ARROW_OFFSET = 1;
+
+var UP_KEY_CODE = 38;
+var DOWN_KEY_CODE = 40;
+var VALID_KEY_CODES = [UP_KEY_CODE, DOWN_KEY_CODE];
+var isValidKeyCode = function isValidKeyCode(keyCode) {
+  return VALID_KEY_CODES.indexOf(keyCode) > -1;
+};
+
+var getFormattedPercentage = function getFormattedPercentage(number) {
+  return number + '%';
+};
+var getNumberValue = function getNumberValue(value) {
+  return Number(String(value).replace(/%/g, ''));
+};
+var getIsPercentage = function getIsPercentage(value) {
+  return String(value).indexOf('%') > -1;
+};
+
 var EditableInput = exports.EditableInput = function (_ref) {
@@ -44,9 +63,3 @@ _inherits(EditableInput, _ref);
     _this.handleChange = function (e) {
-      if (_this.props.label) {
-        _this.props.onChange && _this.props.onChange(_defineProperty({}, _this.props.label, e.target.value), e);
-      } else {
-        _this.props.onChange && _this.props.onChange(e.target.value, e);
-      }
-
-      _this.setState({ value: e.target.value });
+      _this.setUpdatedValue(e.target.value, e);
     };
@@ -58,37 +71,8 @@
       // 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)) {
-        var amount = _this.props.arrowOffset || 1;
+      var value = getNumberValue(e.target.value);
+      if (!isNaN(value) && isValidKeyCode(e.keyCode)) {
+        var offset = _this.getArrowOffset();
+        var updatedValue = e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
 
-        // Up
-        if (e.keyCode === 38) {
-          if (_this.props.label !== null) {
-            _this.props.onChange && _this.props.onChange(_defineProperty({}, _this.props.label, number + amount), e);
-          } else {
-            _this.props.onChange && _this.props.onChange(number + amount, e);
-          }
-
-          if (isPercentage) {
-            _this.setState({ value: number + amount + '%' });
-          } else {
-            _this.setState({ value: number + amount });
-          }
-        }
-
-        // Down
-        if (e.keyCode === 40) {
-          if (_this.props.label !== null) {
-            _this.props.onChange && _this.props.onChange(_defineProperty({}, _this.props.label, number - amount), e);
-          } else {
-            _this.props.onChange && _this.props.onChange(number - amount, e);
-          }
-
-          if (isPercentage) {
-            _this.setState({ value: number - amount + '%' });
-          } else {
-            _this.setState({ value: number - amount });
-          }
-        }
+        _this.setUpdatedValue(updatedValue, e);
       }
@@ -101,3 +85,3 @@ };
         if (newValue >= 0 && newValue <= _this.props.dragMax) {
-          _this.props.onChange && _this.props.onChange(_defineProperty({}, _this.props.label, newValue), e);
+          _this.props.onChange && _this.props.onChange(_this.getValueObjectWithLabel(newValue), e);
         }
@@ -150,2 +134,23 @@ }
   }, {
+    key: 'getValueObjectWithLabel',
+    value: function getValueObjectWithLabel(value) {
+      return _defineProperty({}, this.props.label, value);
+    }
+  }, {
+    key: 'getArrowOffset',
+    value: function getArrowOffset() {
+      return this.props.arrowOffset || DEFAULT_ARROW_OFFSET;
+    }
+  }, {
+    key: 'setUpdatedValue',
+    value: function setUpdatedValue(value, e) {
+      var onChangeValue = this.props.label !== null ? this.getValueObjectWithLabel(value) : value;
+      this.props.onChange && this.props.onChange(onChangeValue, e);
+
+      var isPercentage = getIsPercentage(e.target.value);
+      this.setState({
+        value: isPercentage ? getFormattedPercentage(value) : value
+      });
+    }
+  }, {
     key: 'render',
@@ -152,0 +157,0 @@ value: function render() {

lib/components/common/Hue.js

@@ -46,7 +46,7 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Hue.__proto__ || Object.getPrototypeOf(Hue)).call.apply(_ref2, [this].concat(args))), _this), _this.handleChange = function (e, skip) {
-      var change = hue.calculateChange(e, skip, _this.props, _this.container);
-      change && _this.props.onChange && _this.props.onChange(change, e);
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Hue.__proto__ || Object.getPrototypeOf(Hue)).call.apply(_ref2, [this].concat(args))), _this), _this.handleChange = function (e) {
+      var change = hue.calculateChange(e, _this.props.direction, _this.props.hsl, _this.container);
+      change && typeof _this.props.onChange === 'function' && _this.props.onChange(change, e);
     }, _this.handleMouseDown = function (e) {
-      _this.handleChange(e, true);
+      _this.handleChange(e);
       window.addEventListener('mousemove', _this.handleChange);
@@ -53,0 +53,0 @@ window.addEventListener('mouseup', _this.handleMouseUp);

lib/components/common/Saturation.js

@@ -44,8 +44,8 @@ 'use strict';
 
-    _this.handleChange = function (e, skip) {
-      _this.props.onChange && _this.throttle(_this.props.onChange, saturation.calculateChange(e, skip, _this.props, _this.container), e);
+    _this.handleChange = function (e) {
+      typeof _this.props.onChange === 'function' && _this.throttle(_this.props.onChange, saturation.calculateChange(e, _this.props.hsl, _this.container), e);
     };
 
     _this.handleMouseDown = function (e) {
-      _this.handleChange(e, true);
+      _this.handleChange(e);
       window.addEventListener('mousemove', _this.handleChange);
@@ -52,0 +52,0 @@ window.addEventListener('mouseup', _this.handleMouseUp);

lib/components/github/Github.js

@@ -127,3 +127,3 @@ 'use strict';
     'top-right-triangle': triangle === 'top-right',
-    'bottom-left-triangle': triangle == 'bottom-left',
+    'bottom-left-triangle': triangle === 'bottom-left',
     'bottom-right-triangle': triangle === 'bottom-right'
@@ -130,0 +130,0 @@ });

lib/components/photoshop/PhotoshopButton.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.PhotoshopBotton = undefined;
+exports.PhotoshopButton = undefined;
 
@@ -19,3 +19,3 @@ var _react = require('react');
 
-var PhotoshopBotton = exports.PhotoshopBotton = function PhotoshopBotton(_ref) {
+var PhotoshopButton = exports.PhotoshopButton = function PhotoshopButton(_ref) {
   var onClick = _ref.onClick,
@@ -56,2 +56,2 @@ label = _ref.label,
 
-exports.default = PhotoshopBotton;
+exports.default = PhotoshopButton;

lib/components/slider/Slider.js

@@ -59,3 +59,3 @@ 'use strict';
     'div',
-    { style: styles.wrap || '', className: 'slider-picker ' + className },
+    { style: styles.wrap || {}, className: 'slider-picker ' + className },
     _react2.default.createElement(
@@ -62,0 +62,0 @@ 'div',

lib/components/slider/SliderSwatches.js

@@ -43,2 +43,5 @@ 'use strict';
 
+  // Acceptible difference in floating point equality
+  var epsilon = 0.1;
+
   return _react2.default.createElement(
@@ -53,3 +56,3 @@ 'div',
         offset: '.80',
-        active: Math.round(hsl.l * 100) / 100 === 0.80 && Math.round(hsl.s * 100) / 100 === 0.50,
+        active: Math.abs(hsl.l - 0.80) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
         onClick: onClick,
@@ -65,3 +68,3 @@ first: true
         offset: '.65',
-        active: Math.round(hsl.l * 100) / 100 === 0.65 && Math.round(hsl.s * 100) / 100 === 0.50,
+        active: Math.abs(hsl.l - 0.65) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
         onClick: onClick
@@ -76,3 +79,3 @@ })
         offset: '.50',
-        active: Math.round(hsl.l * 100) / 100 === 0.50 && Math.round(hsl.s * 100) / 100 === 0.50,
+        active: Math.abs(hsl.l - 0.50) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
         onClick: onClick
@@ -87,3 +90,3 @@ })
         offset: '.35',
-        active: Math.round(hsl.l * 100) / 100 === 0.35 && Math.round(hsl.s * 100) / 100 === 0.50,
+        active: Math.abs(hsl.l - 0.35) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
         onClick: onClick
@@ -98,3 +101,3 @@ })
         offset: '.20',
-        active: Math.round(hsl.l * 100) / 100 === 0.20 && Math.round(hsl.s * 100) / 100 === 0.50,
+        active: Math.abs(hsl.l - 0.20) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
         onClick: onClick,
@@ -101,0 +104,0 @@ last: true

lib/helpers/alpha.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-var calculateChange = exports.calculateChange = function calculateChange(e, skip, props, container) {
+var calculateChange = exports.calculateChange = function calculateChange(e, hsl, direction, initialA, container) {
   e.preventDefault();
@@ -16,3 +16,3 @@ var containerWidth = container.clientWidth;
 
-  if (props.direction === 'vertical') {
+  if (direction === 'vertical') {
     var a = void 0;
@@ -27,7 +27,7 @@ if (top < 0) {
 
-    if (props.hsl.a !== a) {
+    if (hsl.a !== a) {
       return {
-        h: props.hsl.h,
-        s: props.hsl.s,
-        l: props.hsl.l,
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
         a: a,
@@ -47,7 +47,7 @@ source: 'rgb'
 
-    if (props.a !== _a) {
+    if (initialA !== _a) {
       return {
-        h: props.hsl.h,
-        s: props.hsl.s,
-        l: props.hsl.l,
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
         a: _a,
@@ -54,0 +54,0 @@ source: 'rgb'

lib/helpers/checkboard.js

@@ -30,3 +30,2 @@ 'use strict';
   var key = c1 + '-' + c2 + '-' + size + (serverCanvas ? '-server' : '');
-  var checkboard = render(c1, c2, size, serverCanvas);
 
@@ -36,4 +35,6 @@ if (checkboardCache[key]) {
   }
+
+  var checkboard = render(c1, c2, size, serverCanvas);
   checkboardCache[key] = checkboard;
   return checkboard;
 };

lib/helpers/hue.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-var calculateChange = exports.calculateChange = function calculateChange(e, skip, props, container) {
+var calculateChange = exports.calculateChange = function calculateChange(e, direction, hsl, container) {
   e.preventDefault();
@@ -16,3 +16,3 @@ var containerWidth = container.clientWidth;
 
-  if (props.direction === 'vertical') {
+  if (direction === 'vertical') {
     var h = void 0;
@@ -28,8 +28,8 @@ if (top < 0) {
 
-    if (props.hsl.h !== h) {
+    if (hsl.h !== h) {
       return {
         h: h,
-        s: props.hsl.s,
-        l: props.hsl.l,
-        a: props.hsl.a,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
         source: 'rgb'
@@ -49,8 +49,8 @@ };
 
-    if (props.hsl.h !== _h) {
+    if (hsl.h !== _h) {
       return {
         h: _h,
-        s: props.hsl.s,
-        l: props.hsl.l,
-        a: props.hsl.a,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
         source: 'rgb'
@@ -57,0 +57,0 @@ };

lib/helpers/saturation.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-var calculateChange = exports.calculateChange = function calculateChange(e, skip, props, container) {
+var calculateChange = exports.calculateChange = function calculateChange(e, hsl, container) {
   e.preventDefault();
@@ -33,8 +33,8 @@
   return {
-    h: props.hsl.h,
+    h: hsl.h,
     s: saturation,
     v: bright,
-    a: props.hsl.a,
+    a: hsl.a,
     source: 'rgb'
   };
 };

package.json

 {
   "name": "react-color",
-  "version": "2.17.0",
+  "version": "2.17.1",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
@@ -42,3 +42,3 @@ "main": "lib/index.js",
     "@icons/material": "^0.2.4",
-    "lodash": ">4.17.4",
+    "lodash": "^4.17.11",
     "material-colors": "^1.2.1",
@@ -45,0 +45,0 @@ "prop-types": "^15.5.10",

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

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

228564

increased by0.18%

Lines of code

5739

increased by0.24%

Dependency changes

• Updatedlodash@^4.17.11