primereact
Version:
[](https://gitter.im/primefaces/primereact?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
639 lines (590 loc) • 22.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColorPicker = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _DomHandler = require('../utils/DomHandler');
var _DomHandler2 = _interopRequireDefault(_DomHandler);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _ColorPickerPanel = require('./ColorPickerPanel');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ColorPicker = exports.ColorPicker = function (_Component) {
_inherits(ColorPicker, _Component);
function ColorPicker(props) {
_classCallCheck(this, ColorPicker);
var _this = _possibleConstructorReturn(this, (ColorPicker.__proto__ || Object.getPrototypeOf(ColorPicker)).call(this, props));
_this.onPanelClick = _this.onPanelClick.bind(_this);
_this.onInputClick = _this.onInputClick.bind(_this);
_this.onInputKeydown = _this.onInputKeydown.bind(_this);
return _this;
}
_createClass(ColorPicker, [{
key: 'onHueMousedown',
value: function onHueMousedown(event) {
if (this.props.disabled) {
return;
}
this.hueDragging = true;
this.bindDocumentMouseMoveListener();
this.bindDocumentMouseUpListener();
this.pickHue(event);
_DomHandler2.default.addClass(this.container, 'ui-colorpicker-dragging');
}
}, {
key: 'pickHue',
value: function pickHue(event) {
var top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
this.hsbValue = this.validateHSB({
h: Math.floor(360 * (150 - Math.max(0, Math.min(150, event.pageY - top))) / 150),
s: 100,
b: 100
});
this.updateColorSelector();
this.updateHue();
this.updateModel();
}
}, {
key: 'onColorMousedown',
value: function onColorMousedown(event) {
if (this.props.disabled) {
return;
}
this.colorDragging = true;
this.bindDocumentMouseMoveListener();
this.bindDocumentMouseUpListener();
this.pickColor(event);
_DomHandler2.default.addClass(this.container, 'ui-colorpicker-dragging');
}
}, {
key: 'pickColor',
value: function pickColor(event) {
var rect = this.colorSelector.getBoundingClientRect();
var top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
var left = rect.left + document.body.scrollLeft;
var saturation = Math.floor(100 * Math.max(0, Math.min(150, event.pageX - left)) / 150);
var brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, event.pageY - top))) / 150);
this.hsbValue = this.validateHSB({
h: this.hsbValue.h,
s: saturation,
b: brightness
});
this.updateColorHandle();
this.updateInput();
this.updateModel();
}
}, {
key: 'updateModel',
value: function updateModel() {
switch (this.props.format) {
case 'hex':
this.onChange(this.HSBtoHEX(this.hsbValue));
break;
case 'rgb':
this.onChange(this.HSBtoRGB(this.hsbValue));
break;
case 'hsb':
this.onChange(this.hsbValue);
break;
default:
break;
}
}
}, {
key: 'toHSB',
value: function toHSB(value) {
var hsb = void 0;
if (value) {
switch (this.props.format) {
case 'hex':
hsb = this.HEXtoHSB(value);
break;
case 'rgb':
hsb = this.RGBtoHSB(value);
break;
case 'hsb':
hsb = value;
break;
default:
break;
}
} else {
hsb = this.HEXtoHSB(this.props.defaultColor);
}
return hsb;
}
}, {
key: 'updateHSBValue',
value: function updateHSBValue(value) {
this.hsbValue = this.toHSB(value);
}
}, {
key: 'areHSBEqual',
value: function areHSBEqual(val1, val2) {
return val1.h === val2.h && val1.s === val2.s && val1.b === val2.b;
}
}, {
key: 'onChange',
value: function onChange(value) {
if (this.props.onChange) {
this.props.onChange({
value: value
});
}
}
}, {
key: 'updateColorSelector',
value: function updateColorSelector() {
var hsbValue = this.validateHSB({
h: this.hsbValue.h,
s: 100,
b: 100
});
this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
}
}, {
key: 'updateColorHandle',
value: function updateColorHandle() {
this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
}
}, {
key: 'updateHue',
value: function updateHue() {
this.hueHandle.style.top = Math.floor(150 - 150 * this.hsbValue.h / 360) + 'px';
}
}, {
key: 'updateInput',
value: function updateInput() {
if (this.input) {
this.input.style.backgroundColor = '#' + this.HSBtoHEX(this.hsbValue);
}
}
}, {
key: 'show',
value: function show() {
this.panel.element.style.zIndex = String(_DomHandler2.default.generateZIndex());
this.alignPanel();
_DomHandler2.default.fadeIn(this.panel.element, 250);
this.panel.element.style.display = 'block';
this.bindDocumentClickListener();
}
}, {
key: 'hide',
value: function hide() {
this.panel.element.style.display = 'none';
this.unbindDocumentClickListener();
}
}, {
key: 'onInputClick',
value: function onInputClick() {
if (this.documentClickListener) {
this.selfClick = true;
}
this.togglePanel();
}
}, {
key: 'togglePanel',
value: function togglePanel() {
if (!this.panel.element.offsetParent) this.show();else this.hide();
}
}, {
key: 'onInputKeydown',
value: function onInputKeydown(event) {
switch (event.which) {
//space
case 32:
this.togglePanel();
event.preventDefault();
break;
//escape and tab
case 27:
case 9:
this.hide();
break;
default:
break;
}
}
}, {
key: 'onPanelClick',
value: function onPanelClick() {
this.selfClick = true;
}
}, {
key: 'bindDocumentClickListener',
value: function bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = this.onDocumentClick.bind(this);
document.addEventListener('click', this.documentClickListener);
}
}
}, {
key: 'onDocumentClick',
value: function onDocumentClick() {
if (!this.selfClick) {
this.hide();
this.unbindDocumentClickListener();
}
this.selfClick = false;
}
}, {
key: 'unbindDocumentClickListener',
value: function unbindDocumentClickListener() {
if (this.documentClickListener) {
document.removeEventListener('click', this.documentClickListener);
this.documentClickListener = null;
}
}
}, {
key: 'bindDocumentMouseMoveListener',
value: function bindDocumentMouseMoveListener() {
if (!this.documentMouseMoveListener) {
this.documentMouseMoveListener = this.onDocumentMouseMove.bind(this);
document.addEventListener('mousemove', this.documentMouseMoveListener);
}
}
}, {
key: 'onDocumentMouseMove',
value: function onDocumentMouseMove(event) {
if (this.colorDragging) {
this.pickColor(event);
}
if (this.hueDragging) {
this.pickHue(event);
}
}
}, {
key: 'unbindDocumentMouseMoveListener',
value: function unbindDocumentMouseMoveListener() {
if (this.documentMouseMoveListener) {
document.removeEventListener('mousemove', this.documentMouseMoveListener);
this.documentMouseMoveListener = null;
}
}
}, {
key: 'bindDocumentMouseUpListener',
value: function bindDocumentMouseUpListener() {
if (!this.documentMouseUpListener) {
this.documentMouseUpListener = this.onDocumentMouseUp.bind(this);
document.addEventListener('mouseup', this.documentMouseUpListener);
}
}
}, {
key: 'onDocumentMouseUp',
value: function onDocumentMouseUp() {
this.colorDragging = false;
this.hueDragging = false;
_DomHandler2.default.removeClass(this.container, 'ui-colorpicker-dragging');
this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener();
}
}, {
key: 'unbindDocumentMouseUpListener',
value: function unbindDocumentMouseUpListener() {
if (this.documentMouseUpListener) {
document.removeEventListener('mouseup', this.documentMouseUpListener);
this.documentMouseUpListener = null;
}
}
}, {
key: 'validateHSB',
value: function validateHSB(hsb) {
return {
h: Math.min(360, Math.max(0, hsb.h)),
s: Math.min(100, Math.max(0, hsb.s)),
b: Math.min(100, Math.max(0, hsb.b))
};
}
}, {
key: 'validateRGB',
value: function validateRGB(rgb) {
return {
r: Math.min(255, Math.max(0, rgb.r)),
g: Math.min(255, Math.max(0, rgb.g)),
b: Math.min(255, Math.max(0, rgb.b))
};
}
}, {
key: 'validateHEX',
value: function validateHEX(hex) {
var len = 6 - hex.length;
if (len > 0) {
var o = [];
for (var i = 0; i < len; i++) {
o.push('0');
}
o.push(hex);
hex = o.join('');
}
return hex;
}
}, {
key: 'HEXtoRGB',
value: function HEXtoRGB(hex) {
var hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
return { r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: hexValue & 0x0000FF };
}
}, {
key: 'HEXtoHSB',
value: function HEXtoHSB(hex) {
return this.RGBtoHSB(this.HEXtoRGB(hex));
}
}, {
key: 'RGBtoHSB',
value: function RGBtoHSB(rgb) {
var hsb = {
h: 0,
s: 0,
b: 0
};
var min = Math.min(rgb.r, rgb.g, rgb.b);
var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min;
hsb.b = max;
if (max !== 0) {}
hsb.s = max !== 0 ? 255 * delta / max : 0;
if (hsb.s !== 0) {
if (rgb.r === max) {
hsb.h = (rgb.g - rgb.b) / delta;
} else if (rgb.g === max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1;
}
hsb.h *= 60;
if (hsb.h < 0) {
hsb.h += 360;
}
hsb.s *= 100 / 255;
hsb.b *= 100 / 255;
return hsb;
}
}, {
key: 'HSBtoRGB',
value: function HSBtoRGB(hsb) {
var rgb = {
r: null, g: null, b: null
};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if (s === 0) {
rgb = {
r: v,
g: v,
b: v
};
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if (h === 360) h = 0;
if (h < 60) {
rgb.r = t1;rgb.b = t2;rgb.g = t2 + t3;
} else if (h < 120) {
rgb.g = t1;rgb.b = t2;rgb.r = t1 - t3;
} else if (h < 180) {
rgb.g = t1;rgb.r = t2;rgb.b = t2 + t3;
} else if (h < 240) {
rgb.b = t1;rgb.r = t2;rgb.g = t1 - t3;
} else if (h < 300) {
rgb.b = t1;rgb.g = t2;rgb.r = t2 + t3;
} else if (h < 360) {
rgb.r = t1;rgb.g = t2;rgb.b = t1 - t3;
} else {
rgb.r = 0;rgb.g = 0;rgb.b = 0;
}
}
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
}
}, {
key: 'RGBtoHEX',
value: function RGBtoHEX(rgb) {
var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
for (var key in hex) {
if (hex[key].length === 1) {
hex[key] = '0' + hex[key];
}
}
return hex.join('');
}
}, {
key: 'HSBtoHEX',
value: function HSBtoHEX(hsb) {
return this.RGBtoHEX(this.HSBtoRGB(hsb));
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.updateHSBValue(this.props.value);
this.updateUI();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.updateUI();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.unbindDocumentClickListener();
this.unbindDocumentMouseMoveListener();
this.unbindDocumentMouseUpListener();
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
if (this.colorDragging) {
return false;
} else {
var oldValue = this.hsbValue;
this.updateHSBValue(nextProps.value);
var newValue = this.toHSB(nextProps.value);
var equals = newValue.h === oldValue.h && newValue.s === oldValue.s && newValue.b === oldValue.b;
return !equals;
}
}
}, {
key: 'updateUI',
value: function updateUI() {
this.updateHue();
this.updateColorHandle();
this.updateInput();
this.updateColorSelector();
}
}, {
key: 'alignPanel',
value: function alignPanel() {
if (this.props.appendTo) {
_DomHandler2.default.absolutePosition(this.panel.element, this.container);
this.panel.element.style.minWidth = _DomHandler2.default.getWidth(this.container) + 'px';
} else {
_DomHandler2.default.relativePosition(this.panel.element, this.container);
}
}
}, {
key: 'renderColorSelector',
value: function renderColorSelector() {
var _this2 = this;
return _react2.default.createElement(
'div',
{ ref: function ref(el) {
return _this2.colorSelector = el;
}, className: 'ui-colorpicker-color-selector', onMouseDown: this.onColorMousedown.bind(this) },
_react2.default.createElement(
'div',
{ className: 'ui-colorpicker-color' },
_react2.default.createElement('div', { ref: function ref(el) {
return _this2.colorHandle = el;
}, className: 'ui-colorpicker-color-handle' })
)
);
}
}, {
key: 'renderHue',
value: function renderHue() {
var _this3 = this;
return _react2.default.createElement(
'div',
{ ref: function ref(el) {
return _this3.hueView = el;
}, className: 'ui-colorpicker-hue', onMouseDown: this.onHueMousedown.bind(this) },
_react2.default.createElement('div', { ref: function ref(el) {
return _this3.hueHandle = el;
}, className: 'ui-colorpicker-hue-handle' })
);
}
}, {
key: 'renderContent',
value: function renderContent() {
var colorSelector = this.renderColorSelector();
var hue = this.renderHue();
return _react2.default.createElement(
'div',
{ className: 'ui-colorpicker-content' },
colorSelector,
hue
);
}
}, {
key: 'renderInput',
value: function renderInput() {
var _this4 = this;
if (!this.props.inline) {
var inputClassName = (0, _classnames2.default)('ui-colorpicker-preview ui-inputtext ui-state-default ui-corner-all', {
'ui-state-disabled': this.props.disabled
});
return _react2.default.createElement('input', { ref: function ref(el) {
return _this4.input = el;
}, type: 'text', className: inputClassName, readOnly: 'readonly', id: this.props.inputId, tabIndex: this.props.tabIndex, disabled: this.props.disabled,
onClick: this.onInputClick, onKeyDown: this.onInputKeydown });
} else {
return null;
}
}
}, {
key: 'render',
value: function render() {
var _this5 = this;
var className = (0, _classnames2.default)('ui-colorpicker ui-widget', this.props.className, { 'ui-colorpicker-overlay': !this.props.inline });
var content = this.renderContent();
var input = this.renderInput();
return _react2.default.createElement(
'div',
{ ref: function ref(el) {
return _this5.container = el;
}, id: this.props.id, style: this.props.style, className: className },
input,
_react2.default.createElement(
_ColorPickerPanel.ColorPickerPanel,
{ ref: function ref(el) {
return _this5.panel = el;
}, appendTo: this.props.appendTo, onClick: this.onPanelClick,
inline: this.props.inline, disabled: this.props.disabled },
content
)
);
}
}]);
return ColorPicker;
}(_react.Component);
ColorPicker.defaultProps = {
id: null,
value: null,
style: null,
className: null,
defaultColor: 'ff0000',
inline: false,
format: "hex",
appendTo: null,
disabled: false,
tabIndex: null,
inputId: null,
onChange: null
};
ColorPicker.propsTypes = {
id: _propTypes2.default.string,
value: _propTypes2.default.any,
style: _propTypes2.default.object,
className: _propTypes2.default.string,
defaultColor: _propTypes2.default.string,
inline: _propTypes2.default.bool,
format: _propTypes2.default.string,
appendTo: _propTypes2.default.any,
disabled: _propTypes2.default.bool,
tabIndex: _propTypes2.default.string,
inputId: _propTypes2.default.string,
onChange: _propTypes2.default.func
};