react-color - npm Package Compare versions

Comparing version 2.6.0 to 2.8.0

CHANGELOG.md

 # Changelog
 
+## 2.8.0
+
+- Vertical Direction for Hue and Alpha [#298](https://github.com/casesandberg/react-color/pull/298)
+
+## 2.7.0
+
+- I Dun Goofed.
+
 ## 2.6.0
@@ -4,0 +12,0 @@

lib/components/alpha/Alpha.js

@@ -32,2 +32,3 @@ 'use strict';
       onChange = _ref.onChange,
+      direction = _ref.direction,
       style = _ref.style;
@@ -56,3 +57,4 @@
       pointer: _AlphaPointer2.default,
-      onChange: onChange
+      onChange: onChange,
+      direction: direction
     }))
@@ -64,5 +66,6 @@ );
   width: '316px',
-  height: '16px'
+  height: '16px',
+  direction: 'horizontal'
 };
 
 exports.default = (0, _common.ColorWrap)(AlphaPicker);

lib/components/alpha/AlphaPointer.js

@@ -18,3 +18,5 @@ 'use strict';
 
-var AlphaPointer = exports.AlphaPointer = function AlphaPointer() {
+var AlphaPointer = exports.AlphaPointer = function AlphaPointer(_ref) {
+  var direction = _ref.direction;
+
   var styles = (0, _reactcss2.default)({
@@ -30,4 +32,10 @@ 'default': {
       }
+    },
+    'vertical': {
+      picker: {
+        transform: 'translate(-3px, -9px)'
+      }
     }
-  });
+  }, { vertical: direction === 'vertical' });
+
   return _react2.default.createElement('div', { style: styles.picker });
@@ -34,0 +42,0 @@ };

lib/components/alpha/spec.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, expect */
+
 var _react = require('react');
@@ -11,2 +13,4 @@
 
+var _color = require('../../helpers/color');
+
 var _Alpha = require('./Alpha');
@@ -22,9 +26,12 @@
 
-/* global test, expect */
-
 test('Alpha renders correctly', function () {
-  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Alpha2.default, null)).toJSON();
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Alpha2.default, _color.red)).toJSON();
   expect(tree).toMatchSnapshot();
 });
 
+test('Alpha renders vertically', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Alpha2.default, _extends({}, _color.red, { width: 20, height: 200, direction: 'vertical' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
 test('AlphaPointer renders correctly', function () {
@@ -31,0 +38,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_AlphaPointer2.default, null)).toJSON();

lib/components/common/Alpha.js

@@ -20,6 +20,2 @@ 'use strict';
 
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
-
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
-
 var _alpha = require('../../helpers/alpha');
@@ -43,10 +39,12 @@
 
-var Alpha = exports.Alpha = function (_React$Component) {
-  _inherits(Alpha, _React$Component);
+var Alpha = exports.Alpha = function (_ref) {
+  _inherits(Alpha, _ref);
 
   function Alpha() {
-    var _ref;
+    var _ref2;
 
     var _temp, _this, _ret;
 
+    _classCallCheck(this, Alpha);
+
     for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
@@ -56,5 +54,3 @@ args[_key] = arguments[_key];
 
-    _classCallCheck(this, Alpha);
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Alpha.__proto__ || Object.getPrototypeOf(Alpha)).call.apply(_ref, [this].concat(args))), _this), _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]), _this.handleChange = function (e, skip) {
+    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.refs.container);
@@ -118,4 +114,16 @@ change && _this.props.onChange(change, e);
         },
+        'vertical': {
+          gradient: {
+            background: 'linear-gradient(to bottom, rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', 0) 0%,\n           rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', 1) 100%)'
+          },
+          pointer: {
+            left: 0,
+            top: rgb.a * 100 + '%'
+          }
+        },
         'overwrite': _extends({}, this.props.style)
-      }, 'overwrite');
+      }, {
+        vertical: this.props.direction === 'vertical',
+        overwrite: true
+      });
 
@@ -151,4 +159,4 @@ return _react2.default.createElement(
   return Alpha;
-}(_react2.default.Component);
+}(_react.PureComponent || _react.Component);
 
 exports.default = Alpha;

lib/components/common/ColorWrap.js

@@ -24,6 +24,2 @@ 'use strict';
 
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
-
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,4 +34,4 @@
 var ColorWrap = exports.ColorWrap = function ColorWrap(Picker) {
-  var ColorPicker = function (_React$Component) {
-    _inherits(ColorPicker, _React$Component);
+  var ColorPicker = function (_ref) {
+    _inherits(ColorPicker, _ref);
 
@@ -47,4 +43,2 @@ function ColorPicker(props) {
 
-      _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]);
-
       _this.handleChange = function (data, event) {
@@ -85,3 +79,3 @@ var isValidColor = _color2.default.simpleCheckForValidColor(data);
     return ColorPicker;
-  }(_react2.default.Component);
+  }(_react.PureComponent || _react.Component);
 
@@ -88,0 +82,0 @@ ColorPicker.defaultProps = {

lib/components/common/EditableInput.js

@@ -18,6 +18,2 @@ 'use strict';
 
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
-
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,4 +29,4 @@
 
-var EditableInput = exports.EditableInput = function (_React$Component) {
-  _inherits(EditableInput, _React$Component);
+var EditableInput = exports.EditableInput = function (_ref) {
+  _inherits(EditableInput, _ref);
 
@@ -42,4 +38,2 @@ function EditableInput(props) {
 
-    _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]);
-
     _this.handleBlur = function () {
@@ -186,4 +180,4 @@ if (_this.state.blurValue) {
   return EditableInput;
-}(_react2.default.Component);
+}(_react.PureComponent || _react.Component);
 
 exports.default = EditableInput;

lib/components/common/Hue.js

@@ -18,6 +18,2 @@ 'use strict';
 
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
-
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
-
 var _hue = require('../../helpers/hue');
@@ -37,10 +33,12 @@
 
-var Hue = exports.Hue = function (_React$Component) {
-  _inherits(Hue, _React$Component);
+var Hue = exports.Hue = function (_ref) {
+  _inherits(Hue, _ref);
 
   function Hue() {
-    var _ref;
+    var _ref2;
 
     var _temp, _this, _ret;
 
+    _classCallCheck(this, Hue);
+
     for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
@@ -50,5 +48,3 @@ args[_key] = arguments[_key];
 
-    _classCallCheck(this, Hue);
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hue.__proto__ || Object.getPrototypeOf(Hue)).call.apply(_ref, [this].concat(args))), _this), _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]), _this.handleChange = function (e, skip) {
+    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.refs.container);
@@ -106,3 +102,3 @@ change && _this.props.onChange(change, e);
         },
-        'direction-vertical': {
+        'vertical': {
           hue: {
@@ -116,3 +112,3 @@ background: 'linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n            #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
         }
-      }, this.props);
+      }, { vertical: this.props.direction === 'vertical' });
 
@@ -142,4 +138,4 @@ return _react2.default.createElement(
   return Hue;
-}(_react2.default.Component);
+}(_react.PureComponent || _react.Component);
 
 exports.default = Hue;

lib/components/common/Saturation.js

@@ -22,6 +22,2 @@ 'use strict';
 
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
-
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
-
 var _saturation = require('../../helpers/saturation');
@@ -41,4 +37,4 @@
 
-var Saturation = exports.Saturation = function (_React$Component) {
-  _inherits(Saturation, _React$Component);
+var Saturation = exports.Saturation = function (_ref) {
+  _inherits(Saturation, _ref);
 
@@ -50,4 +46,2 @@ function Saturation(props) {
 
-    _this.shouldComponentUpdate = _reactAddonsShallowCompare2.default.bind(_this, _this, arguments[0], arguments[1]);
-
     _this.handleChange = function (e, skip) {
@@ -87,8 +81,8 @@ _this.throttle(_this.props.onChange, saturation.calculateChange(e, skip, _this.props, _this.refs.container), e);
     value: function render() {
-      var _ref = this.props.style || {},
-          color = _ref.color,
-          white = _ref.white,
-          black = _ref.black,
-          pointer = _ref.pointer,
-          circle = _ref.circle;
+      var _ref2 = this.props.style || {},
+          color = _ref2.color,
+          white = _ref2.white,
+          black = _ref2.black,
+          pointer = _ref2.pointer,
+          circle = _ref2.circle;
 
@@ -159,4 +153,4 @@ var styles = (0, _reactcss2.default)({
   return Saturation;
-}(_react2.default.Component);
+}(_react.PureComponent || _react.Component);
 
 exports.default = Saturation;

lib/components/hue/Hue.js

@@ -30,3 +30,4 @@ 'use strict';
       onChange = _ref.onChange,
-      hsl = _ref.hsl;
+      hsl = _ref.hsl,
+      direction = _ref.direction;
 
@@ -52,3 +53,4 @@ var styles = (0, _reactcss2.default)({
       pointer: _HuePointer2.default,
-      onChange: onChange
+      onChange: onChange,
+      direction: direction
     }))
@@ -60,5 +62,6 @@ );
   width: '316px',
-  height: '16px'
+  height: '16px',
+  direction: 'horizontal'
 };
 
 exports.default = (0, _common.ColorWrap)(HuePicker);

lib/components/hue/HuePointer.js

@@ -18,3 +18,5 @@ 'use strict';
 
-var SliderPointer = exports.SliderPointer = function SliderPointer() {
+var SliderPointer = exports.SliderPointer = function SliderPointer(_ref) {
+  var direction = _ref.direction;
+
   var styles = (0, _reactcss2.default)({
@@ -30,4 +32,9 @@ 'default': {
       }
+    },
+    'vertical': {
+      picker: {
+        transform: 'translate(-3px, -9px)'
+      }
     }
-  });
+  }, { vertical: direction === 'vertical' });
 
@@ -34,0 +41,0 @@ return _react2.default.createElement('div', { style: styles.picker });

lib/components/hue/spec.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, expect */
+
 var _react = require('react');
@@ -26,4 +28,9 @@
   expect(tree).toMatchSnapshot();
-}); /* global test, expect */
+});
 
+test('Hue renders vertically', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Hue2.default, _extends({}, _color.red, { width: 20, height: 200, direction: 'vertical' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
 test('HuePointer renders correctly', function () {
@@ -30,0 +37,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_HuePointer2.default, null)).toJSON();

lib/helpers/alpha.js

@@ -10,24 +10,48 @@ 'use strict';
   var containerWidth = container.clientWidth;
+  var containerHeight = container.clientHeight;
   var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
   var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
 
-  var a = void 0;
-  if (left < 0) {
-    a = 0;
-  } else if (left > containerWidth) {
-    a = 1;
+  if (props.direction === 'vertical') {
+    var a = void 0;
+    if (top < 0) {
+      a = 0;
+    } else if (top > containerHeight) {
+      a = 1;
+    } else {
+      a = Math.round(top * 100 / containerHeight) / 100;
+    }
+
+    if (props.hsl.a !== a) {
+      return {
+        h: props.hsl.h,
+        s: props.hsl.s,
+        l: props.hsl.l,
+        a: a,
+        source: 'rgb'
+      };
+    }
   } else {
-    a = Math.round(left * 100 / containerWidth) / 100;
-  }
+    var _a = void 0;
+    if (left < 0) {
+      _a = 0;
+    } else if (left > containerWidth) {
+      _a = 1;
+    } else {
+      _a = Math.round(left * 100 / containerWidth) / 100;
+    }
 
-  if (props.a !== a) {
-    return {
-      h: props.hsl.h,
-      s: props.hsl.s,
-      l: props.hsl.l,
-      a: a,
-      source: 'rgb'
-    };
+    if (props.a !== _a) {
+      return {
+        h: props.hsl.h,
+        s: props.hsl.s,
+        l: props.hsl.l,
+        a: _a,
+        source: 'rgb'
+      };
+    }
   }
   return null;
 }

package.json

 {
   "name": "react-color",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
@@ -43,4 +43,3 @@ "main": "lib/index.js",
     "material-colors": "^1.0.0",
-    "react-addons-shallow-compare": "^0.14.0 || ^15.0.0",
-    "reactcss": "^1.0.6",
+    "reactcss": "^1.1.1",
     "tinycolor2": "^1.1.2"
@@ -47,0 +46,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

1034236

increased by0.66%

Dependency count

4

decreased by-20%

Lines of code

12802

increased by0.38%

Dependency changes

• - Removedreact-addons-shallow-compare@^0.14.0 || ^15.0.0

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact-addons-shallow-compare@15.6.3(transitive)

• Updatedreactcss@^1.1.1