Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

rc-color-picker

Package Overview
Dependencies
Maintainers
5
Versions
17
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-color-picker - npm Package Compare versions

Comparing version 1.1.7 to 1.2.0

lib/helpers/color.js
lib/helpers/percentage.js

12

History.md

@@ -0,3 +1,15 @@

## 1.2.0
- Use tinycolor2 instead colr. fixed [#31](https://github.com/react-component/color-picker/issues/31)[!47](https://github.com/react-component/color-picker/pull/47)
## 1.1.7 2017-07-01
- Added the ability to hide alpha controls, props `enableAlpha` [#43](https://github.com/react-component/color-picker/issues/43)[!45](https://github.com/react-component/color-picker/pull/45)
## 1.1.6 2017-06-30
- Fix typo in class [#44](https://github.com/react-component/color-picker/issues/43)
## 1.1.5 2017-05-20
- Update to be compatible with React 16.x and ^15.5. [!42](https://github.com/react-component/color-picker/pull/42)

144

lib/Alpha.js

@@ -13,4 +13,2 @@ 'use strict';

var _reactDom2 = _interopRequireDefault(_reactDom);
var _propTypes = require('prop-types');

@@ -20,6 +18,2 @@

var _colr = require('colr');
var _colr2 = _interopRequireDefault(_colr);
var _addEventListener = require('rc-util/lib/Dom/addEventListener');

@@ -39,4 +33,2 @@

var colr = new _colr2["default"]();
function rgbaColor(r, g, b, a) {

@@ -54,78 +46,77 @@ return 'rgba(' + [r, g, b, a / 100].join(',') + ')';

var events = ['onMouseDown', 'onDrag', 'onDragEnd', 'pointMoveTo', 'getBackground'];
events.forEach(function (e) {
_this[e] = _this[e].bind(_this);
});
return _this;
}
_this.onMouseDown = function (e) {
var x = e.clientX;
var y = e.clientY;
Alpha.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeListeners();
};
_this.pointMoveTo({
x: x,
y: y
});
Alpha.prototype.onMouseDown = function onMouseDown(e) {
var x = e.clientX;
var y = e.clientY;
_this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', _this.onDrag);
_this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', _this.onDragEnd);
};
this.pointMoveTo({
x: x, y: y
});
_this.onDrag = function (e) {
var x = e.clientX;
var y = e.clientY;
_this.pointMoveTo({
x: x,
y: y
});
};
this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', this.onDrag);
this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', this.onDragEnd);
};
_this.onDragEnd = function (e) {
var x = e.clientX;
var y = e.clientY;
_this.pointMoveTo({
x: x,
y: y
});
_this.removeListeners();
};
Alpha.prototype.onDrag = function onDrag(e) {
var x = e.clientX;
var y = e.clientY;
this.pointMoveTo({
x: x, y: y
});
};
_this.getBackground = function () {
var _this$props$color = _this.props.color,
red = _this$props$color.red,
green = _this$props$color.green,
blue = _this$props$color.blue;
Alpha.prototype.onDragEnd = function onDragEnd(e) {
var x = e.clientX;
var y = e.clientY;
this.pointMoveTo({
x: x, y: y
});
this.removeListeners();
};
var opacityGradient = 'linear-gradient(to right, ' + rgbaColor(red, green, blue, 0) + ' , ' + rgbaColor(red, green, blue, 100) + ')'; // eslint-disable-line max-len
return opacityGradient;
};
Alpha.prototype.getBackground = function getBackground() {
var _colr$fromHsvObject$t = colr.fromHsvObject(this.props.hsv).toRgbObject(),
r = _colr$fromHsvObject$t.r,
g = _colr$fromHsvObject$t.g,
b = _colr$fromHsvObject$t.b;
_this.getPrefixCls = function () {
return _this.props.rootPrefixCls + '-alpha';
};
var opacityGradient = 'linear-gradient(to right, ' + rgbaColor(r, g, b, 0) + ' , ' + rgbaColor(r, g, b, 100) + ')'; // eslint-disable-line max-len
return opacityGradient;
};
_this.pointMoveTo = function (coords) {
var rect = (0, _reactDom.findDOMNode)(_this).getBoundingClientRect();
var width = rect.width;
var left = coords.x - rect.left;
Alpha.prototype.getPrefixCls = function getPrefixCls() {
return this.props.rootPrefixCls + '-alpha';
};
left = Math.max(0, left);
left = Math.min(left, width);
Alpha.prototype.pointMoveTo = function pointMoveTo(coords) {
var rect = _reactDom2["default"].findDOMNode(this).getBoundingClientRect();
var width = rect.width;
var left = coords.x - rect.left;
var alpha = Math.round(left / width * 100);
left = Math.max(0, left);
left = Math.min(left, width);
_this.props.onChange(alpha);
};
var alpha = Math.floor(left / width * 100);
_this.removeListeners = function () {
if (_this.dragListener) {
_this.dragListener.remove();
_this.dragListener = null;
}
if (_this.dragUpListener) {
_this.dragUpListener.remove();
_this.dragUpListener = null;
}
};
this.props.onChange(alpha);
};
return _this;
}
Alpha.prototype.removeListeners = function removeListeners() {
if (this.dragListener) {
this.dragListener.remove();
this.dragListener = null;
}
if (this.dragUpListener) {
this.dragUpListener.remove();
this.dragUpListener = null;
}
Alpha.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeListeners();
};

@@ -138,12 +129,5 @@

{ className: prefixCls },
_react2["default"].createElement('div', {
ref: 'bg',
className: prefixCls + '-bg',
style: { background: this.getBackground() }
}),
_react2["default"].createElement('div', { ref: 'bg', className: prefixCls + '-bg', style: { background: this.getBackground() } }),
_react2["default"].createElement('span', { style: { left: this.props.alpha + '%' } }),
_react2["default"].createElement('div', {
className: prefixCls + '-handler',
onMouseDown: this.onMouseDown
})
_react2["default"].createElement('div', { className: prefixCls + '-handler', onMouseDown: this.onMouseDown })
);

@@ -159,3 +143,3 @@ };

Alpha.propTypes = {
hsv: _propTypes2["default"].object,
color: _propTypes2["default"].object,
onChange: _propTypes2["default"].func,

@@ -162,0 +146,0 @@ rootPrefixCls: _propTypes2["default"].string,

243

lib/Board.js

@@ -7,6 +7,2 @@ 'use strict';

var _colr = require('colr');
var _colr2 = _interopRequireDefault(_colr);
var _react = require('react');

@@ -28,2 +24,6 @@

var _color = require('./helpers/color');
var _color2 = _interopRequireDefault(_color);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

@@ -39,4 +39,2 @@

var colr = new _colr2["default"]();
var WIDTH = 200;

@@ -53,100 +51,115 @@ var HEIGHT = 150;

var events = ['onBoardMouseDown', 'onBoardDrag', 'onBoardDragEnd', 'onBoardTouchStart', 'onBoardTouchMove', 'onBoardTouchEnd'];
events.forEach(function (m) {
_this[m] = _this[m].bind(_this);
});
return _this;
}
_this.onBoardMouseDown = function (e) {
var x = e.clientX;
var y = e.clientY;
_this.pointMoveTo({
x: x,
y: y
});
_this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', _this.onBoardDrag);
_this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', _this.onBoardDragEnd);
};
Board.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeListeners();
this.removeTouchListeners();
};
_this.onBoardTouchStart = function (e) {
if (e.touches.length !== 1) {
return;
}
Board.prototype.onBoardMouseDown = function onBoardMouseDown(e) {
var x = e.clientX;
var y = e.clientY;
this.pointMoveTo({
x: x,
y: y
});
this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', this.onBoardDrag);
this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', this.onBoardDragEnd);
};
var x = e.targetTouches[0].clientX;
var y = e.targetTouches[0].clientY;
_this.pointMoveTo({
x: x,
y: y
});
_this.touchMoveListener = (0, _addEventListener2["default"])(window, 'touchmove', _this.onBoardTouchMove);
_this.touchEndListener = (0, _addEventListener2["default"])(window, 'touchend', _this.onBoardTouchEnd);
};
Board.prototype.onBoardTouchStart = function onBoardTouchStart(e) {
if (e.touches.length !== 1) {
return;
}
_this.onBoardTouchMove = function (e) {
if (e.preventDefault) {
e.preventDefault();
}
var x = e.targetTouches[0].clientX;
var y = e.targetTouches[0].clientY;
this.pointMoveTo({
x: x,
y: y
});
this.touchMoveListener = (0, _addEventListener2["default"])(window, 'touchmove', this.onBoardTouchMove);
this.touchEndListener = (0, _addEventListener2["default"])(window, 'touchend', this.onBoardTouchEnd);
};
var x = e.targetTouches[0].clientX;
var y = e.targetTouches[0].clientY;
_this.pointMoveTo({
x: x,
y: y
});
};
Board.prototype.onBoardTouchMove = function onBoardTouchMove(e) {
if (e.preventDefault) {
e.preventDefault();
}
_this.onBoardTouchEnd = function () {
_this.removeTouchListeners();
};
var x = e.targetTouches[0].clientX;
var y = e.targetTouches[0].clientY;
this.pointMoveTo({
x: x,
y: y
});
};
_this.onBoardDrag = function (e) {
var x = e.clientX;
var y = e.clientY;
_this.pointMoveTo({
x: x,
y: y
});
};
Board.prototype.onBoardTouchEnd = function onBoardTouchEnd() {
this.removeTouchListeners();
};
_this.onBoardDragEnd = function (e) {
var x = e.clientX;
var y = e.clientY;
_this.pointMoveTo({
x: x,
y: y
});
_this.removeListeners();
};
Board.prototype.onBoardDrag = function onBoardDrag(e) {
var x = e.clientX;
var y = e.clientY;
this.pointMoveTo({
x: x,
y: y
});
};
_this.getPrefixCls = function () {
return _this.props.rootPrefixCls + '-board';
};
Board.prototype.onBoardDragEnd = function onBoardDragEnd(e) {
var x = e.clientX;
var y = e.clientY;
this.pointMoveTo({
x: x,
y: y
});
this.removeListeners();
};
_this.removeTouchListeners = function () {
if (_this.touchMoveListener) {
_this.touchMoveListener.remove();
_this.touchMoveListener = null;
}
if (_this.touchEndListener) {
_this.touchEndListener.remove();
_this.touchEndListener = null;
}
};
Board.prototype.getPrefixCls = function getPrefixCls() {
return this.props.rootPrefixCls + '-board';
};
_this.removeListeners = function () {
if (_this.dragListener) {
_this.dragListener.remove();
_this.dragListener = null;
}
if (_this.dragUpListener) {
_this.dragUpListener.remove();
_this.dragUpListener = null;
}
};
Board.prototype.removeTouchListeners = function removeTouchListeners() {
if (this.touchMoveListener) {
this.touchMoveListener.remove();
this.touchMoveListener = null;
}
if (this.touchEndListener) {
this.touchEndListener.remove();
this.touchEndListener = null;
}
};
_this.pointMoveTo = function (pos) {
var rect = _reactDom2["default"].findDOMNode(_this).getBoundingClientRect();
var left = pos.x - rect.left;
var top = pos.y - rect.top;
Board.prototype.removeListeners = function removeListeners() {
if (this.dragListener) {
this.dragListener.remove();
this.dragListener = null;
}
if (this.dragUpListener) {
this.dragUpListener.remove();
this.dragUpListener = null;
}
left = Math.max(0, left);
left = Math.min(left, WIDTH);
top = Math.max(0, top);
top = Math.min(top, HEIGHT);
var color = _this.props.color;
color.saturation = left / WIDTH;
color.lightness = 1 - top / HEIGHT;
_this.props.onChange(color);
};
return _this;
}
Board.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeListeners();
this.removeTouchListeners();
};

@@ -157,31 +170,20 @@

* @param {object} pos X Y 全局坐标点
* @return {undefined}
*/
Board.prototype.pointMoveTo = function pointMoveTo(pos) {
var rect = _reactDom2["default"].findDOMNode(this).getBoundingClientRect();
var left = pos.x - rect.left;
var top = pos.y - rect.top;
Board.prototype.render = function render() {
var prefixCls = this.getPrefixCls();
var color = this.props.color;
left = Math.max(0, left);
left = Math.min(left, WIDTH);
top = Math.max(0, top);
top = Math.min(top, HEIGHT);
var hsv = {
h: this.props.hsv.h,
s: parseInt(left / WIDTH * 100, 10),
v: parseInt((1 - top / HEIGHT) * 100, 10)
var hueHsv = {
h: color.hue,
s: 1,
v: 1
};
this.props.onChange(hsv);
};
Board.prototype.render = function render() {
var prefixCls = this.getPrefixCls();
var hsv = this.props.hsv;
var hueHsv = [hsv.h, 100, 100];
var hueColor = colr.fromHsvArray(hueHsv).toHex();
var x = hsv.s / 100 * WIDTH - 4;
var y = (1 - hsv.v / 100) * HEIGHT - 4;
var hueColor = new _color2["default"](hueHsv).toHexString();
var x = color.saturation * WIDTH - 4;
var y = (1 - color.lightness) * HEIGHT - 4;
return _react2["default"].createElement(

@@ -208,7 +210,12 @@ 'div',

/**
* hsv
* h: range(0, 359)
* s: range(0, 1)
* v: range(0, 1)
*/
exports["default"] = Board;
Board.propTypes = {
hsv: _propTypes2["default"].object,
color: _propTypes2["default"].object,
onChange: _propTypes2["default"].func,

@@ -215,0 +222,0 @@ rootPrefixCls: _propTypes2["default"].string

37

lib/ColorPicker.js

@@ -7,2 +7,4 @@ 'use strict';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
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; };

@@ -16,4 +18,2 @@

var _reactDom2 = _interopRequireDefault(_reactDom);
var _propTypes = require('prop-types');

@@ -35,5 +35,5 @@

var _colr = require('colr');
var _color = require('./helpers/color');
var _colr2 = _interopRequireDefault(_colr);
var _color2 = _interopRequireDefault(_color);

@@ -50,4 +50,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var colr = new _colr2["default"]();
function refFn(field, component) {

@@ -124,3 +122,3 @@ this[field] = component;

if (open) {
_reactDom2["default"].findDOMNode(_this3.pickerPanelInstance).focus();
(0, _reactDom.findDOMNode)(_this3.pickerPanelInstance).focus();
}

@@ -133,6 +131,2 @@ });

var _props = this.props,
onOpen = _props.onOpen,
onClose = _props.onClose;
if (this.state.open !== open) {

@@ -142,5 +136,6 @@ this.setState({

}, function () {
if (typeof callback === 'function') {
callback();
}
if (typeof callback === 'function') callback();
var _props = _this4.props,
onOpen = _props.onOpen,
onClose = _props.onClose;

@@ -152,2 +147,3 @@ if (_this4.state.open) {

}
_this4.props.onChange(_this4.state);
});

@@ -158,7 +154,7 @@ }

ColorPicker.prototype.getRootDOMNode = function getRootDOMNode() {
return _reactDom2["default"].findDOMNode(this);
return (0, _reactDom.findDOMNode)(this);
};
ColorPicker.prototype.getTriggerDOMNode = function getTriggerDOMNode() {
return _reactDom2["default"].findDOMNode(this.triggerInstance);
return (0, _reactDom.findDOMNode)(this.triggerInstance);
};

@@ -191,3 +187,3 @@

if (!this.state.open) {
_reactDom2["default"].findDOMNode(this).focus();
(0, _reactDom.findDOMNode)(this).focus();
}

@@ -206,4 +202,9 @@ };

var RGBA = colr.fromHex(this.state.color).toRgbArray();
var _RGB = _slicedToArray(new _color2["default"](this.state.color).RGB, 3),
r = _RGB[0],
g = _RGB[1],
b = _RGB[2];
var RGBA = [r, g, b];
RGBA.push(this.state.alpha / 100);

@@ -210,0 +211,0 @@

197

lib/Panel.js

@@ -15,5 +15,5 @@ 'use strict';

var _colr = require('colr');
var _color = require('./helpers/color');
var _colr2 = _interopRequireDefault(_colr);
var _color2 = _interopRequireDefault(_color);

@@ -62,4 +62,2 @@ var _Board = require('./Board');

var colr = new _colr2["default"]();
var Panel = function (_React$Component) {

@@ -73,18 +71,12 @@ _inherits(Panel, _React$Component);

var color = props.color || props.defaultColor;
var hsv = colr.fromHex(color).toHsvObject();
_initialiseProps.call(_this);
var alpha = typeof props.alpha === 'undefined' ? props.defaultAlpha : Math.min(props.alpha, props.defaultAlpha);
var color = new _color2["default"](props.color || props.defaultColor);
_this.state = {
paramsHsv: hsv,
hsv: hsv,
color: color,
alpha: alpha
};
var events = ['onChange', 'onAlphaChange', 'onFocus', 'onBlur', 'onSystemColorPickerOpen'];
// bind methods
events.forEach(function (m) {
_this[m] = _this[m].bind(_this);
});
return _this;

@@ -95,6 +87,5 @@ }

if (nextProps.color) {
var hsv = colr.fromHex(nextProps.color).toHsvObject();
var color = new _color2["default"](nextProps.color);
this.setState({
hsv: hsv,
paramsHsv: hsv
color: color
});

@@ -109,72 +100,15 @@ }

Panel.prototype.onChange = function onChange(hsvObject) {
var syncParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
/**
* 响应 alpha 的变更
* @param {Number} alpha Range 0~100
*/
var hsv = hsvObject;
var state = {
hsv: hsv
};
if (syncParams) {
state.paramsHsv = hsv;
}
this.setState(state);
var ret = {
color: this.getHexColor(hsv),
hsv: hsv,
alpha: this.state.alpha
};
this.props.onChange(ret);
};
/**
* color change
* @param {Object} color tinycolor instance
* @param {Boolean} syncParams Sync to <Params />
*/
Panel.prototype.onSystemColorPickerOpen = function onSystemColorPickerOpen(e) {
// only work with broswer which support color input
if (e.target.type === 'color') {
this.systemColorPickerOpen = true;
}
};
Panel.prototype.onAlphaChange = function onAlphaChange(alpha) {
if (this.props.alpha === undefined) {
this.setState({
alpha: alpha
});
}
this.props.onChange({
color: this.getHexColor(),
hsv: this.state.hsv,
alpha: alpha
});
};
Panel.prototype.onFocus = function onFocus() {
if (this._blurTimer) {
clearTimeout(this._blurTimer);
this._blurTimer = null;
} else {
this.props.onFocus();
}
};
Panel.prototype.onBlur = function onBlur() {
var _this2 = this;
if (this._blurTimer) {
clearTimeout(this._blurTimer);
}
this._blurTimer = setTimeout(function () {
// if is system color picker open, then stop run blur
if (_this2.systemColorPickerOpen) {
_this2.systemColorPickerOpen = false;
return;
}
_this2.props.onBlur();
}, 100);
};
Panel.prototype.getHexColor = function getHexColor(hsv) {
return colr.fromHsvObject(hsv || this.state.hsv).toHex();
};
Panel.prototype.render = function render() {

@@ -186,5 +120,6 @@ var _cx;

enableAlpha = _props.enableAlpha;
var _state = this.state,
color = _state.color,
alpha = _state.alpha;
var hsv = this.state.hsv;
var alpha = this.state.alpha;

@@ -205,7 +140,3 @@ var wrapClasses = (0, _classnames2["default"])((_cx = {}, _defineProperty(_cx, prefixCls + '-wrap', true), _defineProperty(_cx, prefixCls + '-wrap-has-alpha', enableAlpha), _cx));

{ className: prefixCls + '-inner' },
_react2["default"].createElement(_Board2["default"], {
rootPrefixCls: prefixCls,
hsv: hsv,
onChange: this.onChange
}),
_react2["default"].createElement(_Board2["default"], { rootPrefixCls: prefixCls, color: color, onChange: this.handleChange }),
_react2["default"].createElement(

@@ -217,7 +148,3 @@ 'div',

{ className: prefixCls + '-wrap-ribbon' },
_react2["default"].createElement(_Ribbon2["default"], {
rootPrefixCls: prefixCls,
hsv: hsv,
onChange: this.onChange
})
_react2["default"].createElement(_Ribbon2["default"], { rootPrefixCls: prefixCls, color: color, onChange: this.handleChange })
),

@@ -230,4 +157,4 @@ enableAlpha && _react2["default"].createElement(

alpha: alpha,
hsv: hsv,
onChange: this.onAlphaChange
color: color,
onChange: this.handleAlphaChange
})

@@ -241,5 +168,5 @@ ),

alpha: alpha,
onChange: this.onChange,
onChange: this.handleChange,
onInputClick: this.onSystemColorPickerOpen,
hsv: hsv
color: color
})

@@ -253,6 +180,6 @@ )

rootPrefixCls: prefixCls,
hsv: this.state.paramsHsv,
color: color,
alpha: alpha,
onAlphaChange: this.onAlphaChange,
onChange: this.onChange,
onAlphaChange: this.handleAlphaChange,
onChange: this.handleChange,
mode: this.props.mode,

@@ -269,2 +196,64 @@ enableAlpha: this.props.enableAlpha

var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onSystemColorPickerOpen = function (e) {
// only work with broswer which support color input
if (e.target.type === 'color') {
_this2.systemColorPickerOpen = true;
}
};
this.onFocus = function () {
if (_this2._blurTimer) {
clearTimeout(_this2._blurTimer);
_this2._blurTimer = null;
} else {
_this2.props.onFocus();
}
};
this.onBlur = function () {
if (_this2._blurTimer) {
clearTimeout(_this2._blurTimer);
}
_this2._blurTimer = setTimeout(function () {
// if is system color picker open, then stop run blur
if (_this2.systemColorPickerOpen) {
_this2.systemColorPickerOpen = false;
return;
}
_this2.props.onBlur();
}, 100);
};
this.handleAlphaChange = function (alpha) {
var color = _this2.state.color;
color.alpha = alpha;
_this2.setState({
alpha: alpha,
color: color
});
_this2.props.onChange({
color: color.toHexString(),
alpha: alpha
});
};
this.handleChange = function (color) {
var alpha = _this2.state.alpha;
color.alpha = alpha;
_this2.setState({ color: color });
_this2.props.onChange({
color: color.toHexString(),
alpha: color.alpha
});
};
};
exports["default"] = Panel;

@@ -276,5 +265,5 @@

className: _propTypes2["default"].string,
color: _validationColor2["default"],
color: _validationColor2["default"], // Hex string
defaultAlpha: _propTypes2["default"].number,
defaultColor: _validationColor2["default"],
defaultColor: _validationColor2["default"], // Hex string
enableAlpha: _propTypes2["default"].bool,

@@ -281,0 +270,0 @@ mode: _propTypes2["default"].oneOf(['RGB', 'HSL', 'HSB']),

303

lib/Params.js

@@ -15,6 +15,2 @@ 'use strict';

var _colr = require('colr');
var _colr2 = _interopRequireDefault(_colr);
var _classnames = require('classnames');

@@ -24,2 +20,10 @@

var _color = require('./helpers/color');
var _color2 = _interopRequireDefault(_color);
var _percentage = require('./helpers/percentage');
var _percentage2 = _interopRequireDefault(_percentage);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

@@ -37,4 +41,3 @@

var colr = new _colr2["default"]();
var modesMap = ['RGB', 'HSB', 'HSL'];
var modesMap = ['RGB', 'HSB'];

@@ -47,156 +50,127 @@ var Params = function (_React$Component) {

// 管理 input 的状态
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
var color = colr.fromHsvObject(props.hsv);
_this.getChannelInRange = function (value, index) {
var channelMap = {
RGB: [[0, 255], [0, 255], [0, 255]],
HSB: [[0, 359], [0, 100], [0, 100]]
};
var mode = _this.state.mode;
var range = channelMap[mode][index];
var result = parseInt(value, 10);
if (isNaN(result)) {
result = 0;
}
result = Math.max(range[0], result);
result = Math.min(result, range[1]);
return result;
};
// 管理 input 的状态
_this.state = {
mode: props.mode,
color: color,
hex: color.toHex().substr(1)
_this.getPrefixCls = function () {
return _this.props.rootPrefixCls + '-params';
};
var events = ['onHexHandler', 'onAlphaHandler', 'onColorChannelChange', 'onModeChange', 'getChannelInRange', 'getColorByChannel'];
_this.handleHexHandler = function (event) {
var hex = event.target.value;
var color = null;
events.forEach(function (e) {
if (_this[e]) {
_this[e] = _this[e].bind(_this);
if (_color2["default"].isValidHex(hex)) {
color = new _color2["default"](hex);
}
});
return _this;
}
Params.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.hsv !== this.props.hsv) {
var color = colr.fromHsvObject(nextProps.hsv);
this.setState({
hex: color.toHex().substr(1),
color: color
});
}
};
if (color !== null) {
_this.setState({
color: color,
hex: hex
});
_this.props.onChange(color, false);
} else {
_this.setState({
hex: hex
});
}
};
Params.prototype.onHexHandler = function onHexHandler(event) {
var value = event.target.value;
var color = null;
try {
color = _colr2["default"].fromHex(value);
} catch (e) {
/* eslint no-empty:0 */
}
_this.handleModeChange = function () {
var mode = _this.state.mode;
if (color !== null) {
this.setState({
color: color,
hex: value
var modeIndex = (modesMap.indexOf(mode) + 1) % modesMap.length;
mode = modesMap[modeIndex];
_this.setState({
mode: mode
});
this.props.onChange(color.toHsvObject(), false);
} else {
this.setState({
hex: value
});
}
};
};
Params.prototype.onModeChange = function onModeChange() {
var mode = this.state.mode;
var modeIndex = (modesMap.indexOf(mode) + 1) % modesMap.length;
var state = this.state;
_this.handleAlphaHandler = function (event) {
var alpha = parseInt(event.target.value, 10);
if (isNaN(alpha)) {
alpha = 0;
}
alpha = Math.max(0, alpha);
alpha = Math.min(alpha, 100);
mode = modesMap[modeIndex];
var colorChannel = this.getColorChannel(state.color, mode);
this.setState({
mode: mode,
colorChannel: colorChannel
});
};
_this.props.onAlphaChange(alpha / 100);
};
Params.prototype.onAlphaHandler = function onAlphaHandler(event) {
var alpha = parseInt(event.target.value, 10);
if (isNaN(alpha)) {
alpha = 0;
}
alpha = Math.max(0, alpha);
alpha = Math.min(alpha, 100);
_this.updateColorByChanel = function (channel, value) {
var color = _this.props.color;
var mode = _this.state.mode;
this.setState({
alpha: alpha
});
this.props.onAlphaChange(alpha);
};
if (mode === 'HSB') {
if (channel === 'H') {
color.hue = parseInt(value, 10);
} else if (channel === 'S') {
color.saturation = parseInt(value, 10) / 100;
} else if (channel === 'B') {
color.lightness = parseInt(value, 10) / 100;
}
} else {
if (channel === 'R') {
color.red = parseInt(value, 10);
} else if (channel === 'G') {
color.green = parseInt(value, 10);
} else if (channel === 'B') {
color.blue = parseInt(value, 10);
}
}
Params.prototype.onColorChannelChange = function onColorChannelChange(index, event) {
var value = this.getChannelInRange(event.target.value, index);
var colorChannel = this.getColorChannel();
return color;
};
colorChannel[index] = value;
_this.handleColorChannelChange = function (index, event) {
var value = _this.getChannelInRange(event.target.value, index);
var mode = _this.state.mode;
var color = this.getColorByChannel(colorChannel);
var channel = mode[index];
this.setState({
hex: color.toHex().substr(1),
color: color
});
this.props.onChange(color.toHsvObject(), false);
};
var color = _this.updateColorByChanel(channel, value);
Params.prototype.getChannelInRange = function getChannelInRange(value, index) {
var channelMap = {
RGB: [[0, 255], [0, 255], [0, 255]],
HSB: [[0, 360], [0, 100], [0, 100]],
HSL: [[0, 360], [0, 100], [0, 100]]
_this.setState({
hex: color.hex,
color: color
}, function () {
_this.props.onChange(color, false);
});
};
var mode = this.state.mode;
var range = channelMap[mode][index];
var result = parseInt(value, 10);
if (isNaN(result)) {
result = 0;
}
result = Math.max(range[0], result);
result = Math.min(result, range[1]);
return result;
};
Params.prototype.getColorByChannel = function getColorByChannel(colorChannel) {
var colorMode = this.state.mode;
var color = void 0;
switch (colorMode) {
case 'RGB':
color = colr.fromRgbArray(colorChannel);
break;
case 'HSB':
color = colr.fromHsvArray(colorChannel);
break;
case 'HSL':
color = colr.fromHslArray(colorChannel);
break;
default:
color = colr.fromRgbArray(colorChannel);
}
return color;
};
_this.state = {
mode: props.mode,
hex: props.color.hex,
color: props.color // instanceof tinycolor
};
return _this;
}
Params.prototype.getPrefixCls = function getPrefixCls() {
return this.props.rootPrefixCls + '-params';
};
Params.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var nextColor = nextProps.color;
Params.prototype.getColorChannel = function getColorChannel(colrInstance, mode) {
var color = colrInstance || this.state.color;
var colorMode = mode || this.state.mode;
var result = void 0;
switch (colorMode) {
case 'RGB':
result = color.toRgbArray();
break;
case 'HSB':
result = color.toHsvArray();
break;
case 'HSL':
result = color.toHslArray();
break;
default:
result = color.toRgbArray();
}
return result;
this.setState({
color: nextColor,
hex: nextColor.hex
});
};

@@ -208,6 +182,16 @@

var prefixCls = this.getPrefixCls();
var colorChannel = this.getColorChannel();
var enableAlpha = this.props.enableAlpha;
var _state = this.state,
mode = _state.mode,
color = _state.color;
var colorChannel = color[mode];
if (mode === 'HSB') {
colorChannel[0] = parseInt(colorChannel[0], 10);
colorChannel[1] = (0, _percentage2["default"])(colorChannel[1]);
colorChannel[2] = (0, _percentage2["default"])(colorChannel[2]);
}
var paramsClasses = (0, _classnames2["default"])((_cx = {}, _defineProperty(_cx, prefixCls, true), _defineProperty(_cx, prefixCls + '-has-alpha', enableAlpha), _cx));

@@ -225,20 +209,27 @@

maxLength: '6',
onChange: this.onHexHandler,
onChange: this.handleHexHandler,
value: this.state.hex.toUpperCase()
}),
_react2["default"].createElement('input', { type: 'number', ref: 'channel_0',
_react2["default"].createElement('input', {
type: 'number',
ref: 'channel_0',
value: colorChannel[0],
onChange: this.onColorChannelChange.bind(null, 0)
onChange: this.handleColorChannelChange.bind(null, 0)
}),
_react2["default"].createElement('input', { type: 'number', ref: 'channel_1',
_react2["default"].createElement('input', {
type: 'number',
ref: 'channel_1',
value: colorChannel[1],
onChange: this.onColorChannelChange.bind(null, 1)
onChange: this.handleColorChannelChange.bind(null, 1)
}),
_react2["default"].createElement('input', { type: 'number', ref: 'channel_2',
_react2["default"].createElement('input', {
type: 'number',
ref: 'channel_2',
value: colorChannel[2],
onChange: this.onColorChannelChange.bind(null, 2)
onChange: this.handleColorChannelChange.bind(null, 2)
}),
enableAlpha && _react2["default"].createElement('input', { type: 'number',
value: this.props.alpha,
onChange: this.onAlphaHandler
enableAlpha && _react2["default"].createElement('input', {
type: 'number',
value: Math.round(this.props.alpha),
onChange: this.handleAlphaHandler
})

@@ -256,20 +247,14 @@ ),

'label',
{ className: prefixCls + '-lable-number',
onClick: this.onModeChange
},
this.state.mode[0]
{ className: prefixCls + '-lable-number', onClick: this.handleModeChange },
mode[0]
),
_react2["default"].createElement(
'label',
{ className: prefixCls + '-lable-number',
onClick: this.onModeChange
},
this.state.mode[1]
{ className: prefixCls + '-lable-number', onClick: this.handleModeChange },
mode[1]
),
_react2["default"].createElement(
'label',
{ className: prefixCls + '-lable-number',
onClick: this.onModeChange
},
this.state.mode[2]
{ className: prefixCls + '-lable-number', onClick: this.handleModeChange },
mode[2]
),

@@ -294,3 +279,3 @@ enableAlpha && _react2["default"].createElement(

enableAlpha: _propTypes2["default"].bool,
hsv: _propTypes2["default"].object,
color: _propTypes2["default"].object.isRequired,
mode: _propTypes2["default"].oneOf(modesMap),

@@ -297,0 +282,0 @@ onAlphaChange: _propTypes2["default"].func,

44

lib/Preview.js

@@ -15,5 +15,5 @@ 'use strict';

var _colr = require('colr');
var _color = require('./helpers/color');
var _colr2 = _interopRequireDefault(_colr);
var _color2 = _interopRequireDefault(_color);

@@ -30,4 +30,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var colr = new _colr2["default"]();
var Preview = function (_React$Component) {

@@ -37,27 +35,31 @@ _inherits(Preview, _React$Component);

function Preview() {
var _temp, _this, _ret;
_classCallCheck(this, Preview);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.onChange = function (e) {
var value = e.target.value;
var color = new _color2["default"](value);
_this.props.onChange(color);
e.stopPropagation();
}, _this.getPrefixCls = function () {
return _this.props.rootPrefixCls + '-preview';
}, _temp), _possibleConstructorReturn(_this, _ret);
}
Preview.prototype.onChange = function onChange(e) {
var value = e.target.value;
var color = colr.fromHex(value);
this.props.onChange(color.toHsvObject());
e.stopPropagation();
};
Preview.prototype.getPrefixCls = function getPrefixCls() {
return this.props.rootPrefixCls + '-preview';
};
Preview.prototype.render = function render() {
var prefixCls = this.getPrefixCls();
var hex = colr.fromHsvObject(this.props.hsv).toHex();
var hex = this.props.color.toHexString();
return _react2["default"].createElement(
'div',
{ className: prefixCls },
_react2["default"].createElement('span', { style: {
_react2["default"].createElement('span', {
style: {
backgroundColor: hex,
opacity: this.props.alpha / 100 }
opacity: this.props.alpha / 100
}
}),

@@ -67,3 +69,3 @@ _react2["default"].createElement('input', {

value: hex,
onChange: this.onChange.bind(this),
onChange: this.onChange,
onClick: this.props.onInputClick

@@ -82,3 +84,3 @@ })

rootPrefixCls: _propTypes2["default"].string,
hsv: _propTypes2["default"].object,
color: _propTypes2["default"].object,
alpha: _propTypes2["default"].number,

@@ -85,0 +87,0 @@ onChange: _propTypes2["default"].func,

135

lib/Ribbon.js

@@ -7,4 +7,2 @@ '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; };
var _react = require('react');

@@ -44,72 +42,72 @@

var events = ['onMouseDown', 'onDrag', 'onDragEnd', 'pointMoveTo', '_setHuePosition'];
events.forEach(function (e) {
if (_this[e]) {
_this[e] = _this[e].bind(_this);
}
});
return _this;
}
_this.onMouseDown = function (e) {
var x = e.clientX;
var y = e.clientY;
Ribbon.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeListeners();
};
_this.pointMoveTo({
x: x,
y: y
});
Ribbon.prototype.onMouseDown = function onMouseDown(e) {
var x = e.clientX;
var y = e.clientY;
_this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', _this.onDrag);
_this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', _this.onDragEnd);
};
this.pointMoveTo({
x: x, y: y
});
_this.onDrag = function (e) {
var x = e.clientX;
var y = e.clientY;
_this.pointMoveTo({
x: x,
y: y
});
};
this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', this.onDrag);
this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', this.onDragEnd);
};
_this.onDragEnd = function (e) {
var x = e.clientX;
var y = e.clientY;
_this.pointMoveTo({
x: x,
y: y
});
_this.removeListeners();
};
Ribbon.prototype.onDrag = function onDrag(e) {
var x = e.clientX;
var y = e.clientY;
this.pointMoveTo({
x: x, y: y
});
};
_this.getPrefixCls = function () {
return _this.props.rootPrefixCls + '-ribbon';
};
Ribbon.prototype.onDragEnd = function onDragEnd(e) {
var x = e.clientX;
var y = e.clientY;
this.pointMoveTo({
x: x, y: y
});
this.removeListeners();
};
_this.pointMoveTo = function (coords) {
var rect = _reactDom2["default"].findDOMNode(_this).getBoundingClientRect();
var width = rect.width;
var left = coords.x - rect.left;
left = Math.max(0, left);
left = Math.min(left, width);
Ribbon.prototype.getPrefixCls = function getPrefixCls() {
return this.props.rootPrefixCls + '-ribbon';
};
var huePercent = left / width;
var hue = huePercent * 360;
Ribbon.prototype.pointMoveTo = function pointMoveTo(coords) {
var rect = _reactDom2["default"].findDOMNode(this).getBoundingClientRect();
var width = rect.width;
var left = coords.x - rect.left;
left = Math.max(0, left);
left = Math.min(left, width);
var huePercent = left / width;
var hue = huePercent * 360;
// 新的对象, 避免引用
var hsv = _extends({}, this.props.hsv, {
h: hue
});
this.props.onChange(hsv);
};
var color = _this.props.color;
Ribbon.prototype.removeListeners = function removeListeners() {
if (this.dragListener) {
this.dragListener.remove();
this.dragListener = null;
}
if (this.dragUpListener) {
this.dragUpListener.remove();
this.dragUpListener = null;
}
color.hue = hue;
_this.props.onChange(color);
};
_this.removeListeners = function () {
if (_this.dragListener) {
_this.dragListener.remove();
_this.dragListener = null;
}
if (_this.dragUpListener) {
_this.dragUpListener.remove();
_this.dragUpListener = null;
}
};
return _this;
}
Ribbon.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeListeners();
};

@@ -119,5 +117,5 @@

var prefixCls = this.getPrefixCls();
var HSV = this.props.hsv;
var hue = HSV.h;
var hue = this.props.color.hue;
var per = hue / 360 * 100;
return _react2["default"].createElement(

@@ -127,6 +125,3 @@ 'div',

_react2["default"].createElement('span', { ref: 'point', style: { left: per + '%' } }),
_react2["default"].createElement('div', {
className: prefixCls + '-handler',
onMouseDown: this.onMouseDown
})
_react2["default"].createElement('div', { className: prefixCls + '-handler', onMouseDown: this.onMouseDown })
);

@@ -143,5 +138,5 @@ };

rootPrefixCls: _propTypes2["default"].string,
hsv: _propTypes2["default"].object,
color: _propTypes2["default"].object,
onChange: _propTypes2["default"].func
};
module.exports = exports['default'];

6

package.json
{
"name": "rc-color-picker",
"version": "1.1.7",
"version": "1.2.0",
"description": "color-picker ui component for react",

@@ -60,6 +60,6 @@ "main": "./lib/index.js",

"classnames": "^2.2.5",
"colr": "~1.2.1",
"prop-types": "^15.5.8",
"rc-trigger": "1.x",
"rc-util": "^4.0.2"
"rc-util": "^4.0.2",
"tinycolor2": "^1.4.1"
},

@@ -66,0 +66,0 @@ "peerDependencies": {

assets/index.css

Sorry, the diff of this file is not supported yet

dist/rc-color-picker.css

Sorry, the diff of this file is not supported yet

dist/rc-color-picker.css.map

Sorry, the diff of this file is not supported yet

dist/rc-color-picker.js

Sorry, the diff of this file is too big to display

dist/rc-color-picker.js.map

Sorry, the diff of this file is not supported yet

dist/rc-color-picker.min.css

Sorry, the diff of this file is not supported yet

dist/rc-color-picker.min.js

Sorry, the diff of this file is too big to display

dist/rc-color-picker.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc