choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,215 lines (1,053 loc) • 38.2 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { colorHexReg } from 'choerodon-ui/dataset/validator/rules/typeMismatch';
import Icon from '../../../es/icon';
import { observer } from 'mobx-react';
import { action, observable, runInAction } from 'mobx';
import defaultTo from 'lodash/defaultTo';
import isBoolean from 'lodash/isBoolean';
import isEmpty from 'lodash/isEmpty';
import isNil from 'lodash/isNil';
import round from 'lodash/round';
import pull from 'lodash/pull';
import concat from 'lodash/concat';
import classNames from 'classnames';
import TriggerField from '../trigger-field/TriggerField';
import autobind from '../_util/autobind';
import EventManager from '../_util/EventManager';
import { transformZoomData } from '../_util/DocumentUtils';
import { FieldType } from '../data-set/enum';
import { $l } from '../locale-context';
import { ViewMode, ColorUnit } from './enum';
import { defaultColorMap, commonColorMap } from './presetColorMap';
var FILL_COLOR = '#FFFFFF';
var COLOR_LINE_LENGTH = 9;
var COLOR_STORAGE_ITEM = 'color.picker.customized.used'; // 相对亮度计算公式：L = 0.2126 * R + 0.7152 * G + 0.0722 * B
// 最高亮度：L = (0.2126 * 255 + 0.7152 * 255 + 0.0722 * 255) - 1.05
var COLOR_MAX_LIGHT = 253.95;
function getNodeRect(node) {
return node.getBoundingClientRect();
}
var ColorPicker = /*#__PURE__*/function (_TriggerField) {
_inherits(ColorPicker, _TriggerField);
var _super = _createSuper(ColorPicker);
function ColorPicker(props, context) {
var _this;
_classCallCheck(this, ColorPicker);
_this = _super.call(this, props, context);
_this.eventManager = new EventManager(typeof window === 'undefined' ? undefined : document);
_this.footerInputRef = null;
_this.HSV = {
h: 0,
s: 1,
v: 1,
a: 1
};
_this.RGBA = {
r: 255,
g: 0,
b: 0,
a: 1
};
_this.saveGradientRef = function (node) {
return _this.gradient = node;
};
_this.saveSelectPointerRef = function (node) {
return _this.selectPointer = node;
};
_this.saveHuePointerRef = function (node) {
return _this.huePointer = node;
};
_this.saveHueRef = function (node) {
return _this.hue = node;
};
_this.saveOpacityRef = function (node) {
return _this.opacity = node;
};
_this.saveOpacityPointerRef = function (node) {
return _this.opacityPointer = node;
};
_this.saveFooterAlphaRef = function (node) {
return _this.footerInputRef = node;
};
runInAction(function () {
_this.gradientHidden = true;
});
_this.popupView = null;
return _this;
}
_createClass(ColorPicker, [{
key: "multiple",
get: function get() {
return false;
}
}, {
key: "range",
get: function get() {
return false;
}
}, {
key: "preset",
get: function get() {
var preset = this.props.preset;
if (isBoolean(preset)) {
return preset;
}
return this.getContextConfig('colorPreset');
}
}, {
key: "defaultValidationMessages",
get: function get() {
var label = this.getProp('label');
return {
valueMissing: $l('ColorPicker', label ? 'value_missing' : 'value_missing_no_label', {
label: label
}),
typeMismatch: $l('ColorPicker', 'type_mismatch')
};
}
}, {
key: "colorPickUsed",
get: function get() {
var list = JSON.parse(localStorage.getItem(COLOR_STORAGE_ITEM) || '[]');
if (list.length < COLOR_LINE_LENGTH) {
return concat(list, Array(COLOR_LINE_LENGTH - list.length).fill(FILL_COLOR));
}
return list;
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(ColorPicker.prototype), "getOmitPropsKeys", this).call(this).concat(['mode', 'preset']);
}
}, {
key: "getDefaultAction",
value: function getDefaultAction() {
return this.getContextConfig('selectTrigger') || _get(_getPrototypeOf(ColorPicker.prototype), "getDefaultAction", this).call(this);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var _this2 = this;
var popup = this.popup;
if (popup) {
var _this$HSV = this.HSV,
h = _this$HSV.h,
s = _this$HSV.s,
v = _this$HSV.v,
a = _this$HSV.a;
var huePointer = this.huePointer,
opacityPointer = this.opacityPointer,
selectPointer = this.selectPointer,
hue = this.hue,
opacity = this.opacity,
gradient = this.gradient;
var _this$hsvToRGB = this.hsvToRGB(h, s, v, a),
Alpha = _this$hsvToRGB.a;
if (huePointer && hue) {
var _getNodeRect = getNodeRect(hue),
width = _getNodeRect.width;
this.setSliderPointer(width * h / 360, huePointer, hue, false);
}
if (opacityPointer && opacity) {
var _getNodeRect2 = getNodeRect(opacity),
_width = _getNodeRect2.width;
this.setSliderPointer(_width * Alpha, opacityPointer, opacity, false);
}
if (selectPointer && gradient) {
var _getNodeRect3 = getNodeRect(gradient),
_width2 = _getNodeRect3.width,
height = _getNodeRect3.height;
var left = s * _width2;
var top = height - v * height;
this.setGradientPointer(left, top, selectPointer, gradient, false);
}
}
if (!this.gradientHidden && this.popupView) {
var offsetTop = this.popupView.offsetTop;
var _this$popupView$getBo = this.popupView.getBoundingClientRect(),
_left = _this$popupView$getBo.left,
_top = _this$popupView$getBo.top,
_width3 = _this$popupView$getBo.width,
_height = _this$popupView$getBo.height;
var _window = window,
innerWidth = _window.innerWidth,
innerHeight = _window.innerHeight;
runInAction(function () {
if (_left + _width3 > innerWidth && _left > _width3) {
_this2.gradienLeft = -_width3;
}
if (_top + _height > innerHeight) {
_this2.gradienTop = offsetTop - (_top + _height - innerHeight);
}
});
}
}
}, {
key: "getValue",
value: function getValue() {
var value = _get(_getPrototypeOf(ColorPicker.prototype), "getValue", this).call(this);
return typeof value === 'string' ? value : undefined;
}
}, {
key: "getBorder",
value: function getBorder() {
var r = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 255;
var g = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var b = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
return 0.2126 * r + 0.7152 * g + 0.0722 * b > COLOR_MAX_LIGHT;
}
}, {
key: "syncValueOnBlur",
value: function syncValueOnBlur(value) {
var footerEditFlag = this.footerEditFlag,
gradientHidden = this.gradientHidden,
preset = this.preset;
if (!footerEditFlag) {
if (value !== '' && value[0] !== '#' && !value.startsWith('rgb') && !value.startsWith('hls')) {
value = "#".concat(value);
}
_get(_getPrototypeOf(ColorPicker.prototype), "syncValueOnBlur", this).call(this, value);
}
if (preset && !gradientHidden) {
this.setGradientHidden(true);
}
}
}, {
key: "getFieldType",
value: function getFieldType() {
return FieldType.color;
}
}, {
key: "getPrefix",
value: function getPrefix() {
var _classNames;
var prefixCls = this.prefixCls,
_this$props = this.props,
mode = _this$props.mode,
renderer = _this$props.renderer;
var backgroundColor = this.getValue();
var isButtonMode = mode === ViewMode.button;
if (isButtonMode && renderer) {
return this.processRenderer(backgroundColor);
}
var _ref = backgroundColor && this.hexToRGB ? this.hexToRGB(backgroundColor) : this.RGBA,
r = _ref.r,
g = _ref.g,
b = _ref.b;
var className = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-color"), !isButtonMode), _defineProperty(_classNames, "".concat(prefixCls, "-button-color"), isButtonMode), _defineProperty(_classNames, "".concat(prefixCls, "-prefix-border"), !isButtonMode && this.getBorder(r, g, b)), _classNames));
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-prefix")
}, /*#__PURE__*/React.createElement("span", {
className: className,
style: {
backgroundColor: backgroundColor
}
}));
}
}, {
key: "getPopupFooter",
value: function getPopupFooter() {
var _this3 = this;
var prefixCls = this.prefixCls,
RGBA = this.RGBA;
var className = "".concat(prefixCls, "-popup-footer-slider-pointer");
var huePointerProps = {
onMouseDown: this.handleHPMouseDown,
ref: this.saveHuePointerRef,
className: className
};
var opacityPointerProps = {
onMouseDown: this.handleOpacityMouseDown,
ref: this.saveOpacityPointerRef,
className: className
};
var inputProps = {
onInput: this.handleFooterInput,
onFocus: this.handleFooterFocus
};
var r = RGBA.r,
g = RGBA.g,
b = RGBA.b,
a = RGBA.a;
var value = (this.getEditorTextInfo().text || '').replace('#', '');
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-footer")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-footer-slide-bar")
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
ref: this.saveHueRef,
className: "".concat(prefixCls, "-popup-footer-slider")
}, /*#__PURE__*/React.createElement("div", {
onClick: this.handleHueClick,
className: "hue"
}), /*#__PURE__*/React.createElement("div", _extends({}, huePointerProps))), /*#__PURE__*/React.createElement("div", {
ref: this.saveOpacityRef,
className: "".concat(prefixCls, "-popup-footer-slider")
}, /*#__PURE__*/React.createElement("div", {
onClick: this.handleOpacityClick,
className: "opacity",
style: {
background: "linear-gradient(to right, rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0), rgb(").concat(r, ", ").concat(g, ", ").concat(b, "))")
}
}), /*#__PURE__*/React.createElement("div", _extends({}, opacityPointerProps)))), /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-popup-footer-color"),
style: {
background: "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")")
}
})), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-footer-input")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-footer-input-color")
}, /*#__PURE__*/React.createElement("input", _extends({
name: ColorUnit.hex,
value: value,
autoComplete: "off"
}, inputProps)), /*#__PURE__*/React.createElement("span", null, ColorUnit.hex)), Object.keys(RGBA).map(function (item) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-footer-input-color"),
key: item
}, /*#__PURE__*/React.createElement("input", _extends({
name: item,
value: value ? _this3.RGBA[item] : '',
autoComplete: "off",
ref: item === 'a' ? _this3.saveFooterAlphaRef : undefined
}, inputProps)), /*#__PURE__*/React.createElement("span", null, ColorUnit[item]));
})));
}
}, {
key: "getGradientPopupContent",
value: function getGradientPopupContent() {
var _this4 = this;
var gradientHidden = this.gradientHidden,
prefixCls = this.prefixCls,
preset = this.preset;
var gradientProps = {
className: "".concat(prefixCls, "-popup-body-gradient"),
onClick: this.handleGPClick,
ref: this.saveGradientRef
};
var gradientPointerProps = {
onMouseDown: this.handleGPMouseDown,
ref: this.saveSelectPointerRef,
className: "".concat(prefixCls, "-popup-body-selector")
};
if (isEmpty(this.hueColor)) {
this.setColor(this.getValue());
}
return /*#__PURE__*/React.createElement("div", {
ref: function ref(dom) {
_this4.popupView = dom;
},
className: "".concat(prefixCls, "-popup-view"),
style: {
display: preset && !gradientHidden || !preset ? 'block' : 'none',
top: this.gradienTop,
left: this.gradienLeft
}
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-view-picker-name")
}, $l('ColorPicker', 'pick_color_view')), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-body"),
style: {
backgroundColor: defaultTo(this.hueColor, '#ff0000')
}
}, /*#__PURE__*/React.createElement("div", _extends({}, gradientProps)), /*#__PURE__*/React.createElement("div", _extends({}, gradientPointerProps))), this.getPopupFooter());
}
}, {
key: "getPresetData",
value: function getPresetData(list, value) {
var _this5 = this;
var prefixCls = this.prefixCls,
hexToRGB = this.hexToRGB,
getBorder = this.getBorder;
var className = "".concat(prefixCls, "-popup-view-palettes");
var valueRgba = value ? hexToRGB(value) : {
r: undefined,
g: undefined,
b: undefined,
a: undefined
};
return /*#__PURE__*/React.createElement("div", {
className: className
}, _toConsumableArray(list).map(function (item, index) {
var _classNames2;
var _hexToRGB = hexToRGB(item),
r = _hexToRGB.r,
g = _hexToRGB.g,
b = _hexToRGB.b,
a = _hexToRGB.a;
var border = getBorder(r, g, b);
var vr = valueRgba.r,
vg = valueRgba.g,
vb = valueRgba.b,
va = valueRgba.a;
var active = r === vr && g === vg && b === vb && a === va;
var key = "".concat(item, "_").concat(index);
return /*#__PURE__*/React.createElement("div", {
className: classNames("".concat(className, "-block"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(className, "-block-border"), border), _defineProperty(_classNames2, "".concat(className, "-block-active"), active), _classNames2)),
style: {
backgroundColor: item
},
key: key,
onClick: function onClick() {
return _this5.handlePreset(item);
}
}, active && /*#__PURE__*/React.createElement(Icon, {
type: "check"
}));
}));
}
}, {
key: "getPopupContent",
value: function getPopupContent() {
var _this6 = this;
var prefixCls = this.prefixCls,
preset = this.preset;
if (preset) {
var value = this.getValue();
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-view-preset")
}, /*#__PURE__*/React.createElement("div", {
onClick: function onClick() {
return _this6.setGradientHidden(true);
}
}, this.getPresetData(commonColorMap, value), this.getPresetData(defaultColorMap, value), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-picker-name")
}, $l('ColorPicker', 'used_view')), this.getPresetData(this.colorPickUsed)), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-view-gradient")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-popup-picker-name"),
onClick: this.onExpandChange
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
type: "color_lens-o"
}), /*#__PURE__*/React.createElement("span", null, $l('ColorPicker', 'custom_view'))), /*#__PURE__*/React.createElement(Icon, {
type: "navigate_next"
})), this.getGradientPopupContent()));
}
return this.getGradientPopupContent();
}
}, {
key: "setHSV",
value: function setHSV(h, s, v, a) {
var HSV = this.HSV;
if (h !== undefined && h !== HSV.h) {
HSV.h = h;
}
if (v !== undefined && v !== HSV.v) {
HSV.v = v;
}
if (s !== undefined && s !== HSV.s) {
HSV.s = s;
}
if (a !== undefined && a !== HSV.a) {
HSV.a = a;
}
}
}, {
key: "setRGBA",
value: function setRGBA(r, g, b, a) {
var RGBA = this.RGBA;
if (isNil(r) || r > 255) r = 255;
if (isNil(g) || g > 255) g = 255;
if (isNil(b) || b > 255) b = 255;
if (isNil(a) || a > 1) a = 1;
if (r !== RGBA.r) {
RGBA.r = round(r);
}
if (g !== RGBA.g) {
RGBA.g = round(g);
}
if (b !== RGBA.b) {
RGBA.b = round(b);
}
if (a !== RGBA.a) {
RGBA.a = a;
}
}
}, {
key: "setHueColor",
value: function setHueColor(color) {
if (color !== this.hueColor) {
this.hueColor = color;
}
}
}, {
key: "setFooterEditFlag",
value: function setFooterEditFlag(footerEditFlag) {
if (footerEditFlag !== this.footerEditFlag) {
this.footerEditFlag = footerEditFlag;
}
}
}, {
key: "setGradientHidden",
value: function setGradientHidden(gradientHidden) {
if (gradientHidden !== this.gradientHidden) {
this.gradientHidden = gradientHidden;
}
}
}, {
key: "setColor",
value: function setColor(color) {
if (!isNil(color) && color.slice(0, 1) === '#' && color.length > 3) {
var gradient = this.gradient,
selectPointer = this.selectPointer,
hue = this.hue,
huePointer = this.huePointer,
opacity = this.opacity,
opacityPointer = this.opacityPointer;
var _this$hexToRGB = this.hexToRGB(color),
r = _this$hexToRGB.r,
g = _this$hexToRGB.g,
b = _this$hexToRGB.b,
a = _this$hexToRGB.a;
var _this$rgbToHSV = this.rgbToHSV(r / 255, g / 255, b / 255, a),
h = _this$rgbToHSV.h,
s = _this$rgbToHSV.s,
v = _this$rgbToHSV.v;
this.setHSV(h, s, v, a);
this.setRGBA(r, g, b, a);
var _this$hsvToRGB2 = this.hsvToRGB(h, 1, 1, 1),
hr = _this$hsvToRGB2.r,
hg = _this$hsvToRGB2.g,
hb = _this$hsvToRGB2.b,
ha = _this$hsvToRGB2.a;
var hueColor = this.rgbToHEX(hr, hg, hb, ha);
this.setHueColor(hueColor);
if (gradient && selectPointer && hue && huePointer) {
var _getNodeRect4 = getNodeRect(gradient),
height = _getNodeRect4.height,
width = _getNodeRect4.width;
var left = s * width;
var top = height - v * height;
var _getNodeRect5 = getNodeRect(hue),
hueWidth = _getNodeRect5.width;
var _getNodeRect6 = getNodeRect(opacity),
opacityWidth = _getNodeRect6.width;
var hueLeft = h / 360 * hueWidth;
var opacityLeft = a * opacityWidth;
this.setSliderPointer(hueLeft, huePointer, hue, false);
this.setSliderPointer(opacityLeft, opacityPointer, opacity, false);
this.setGradientPointer(left, top, selectPointer, gradient, false);
}
if (this.getValue() !== color) {
this.prepareSetValue(color);
}
}
}
}, {
key: "positionToHSV",
value: function positionToHSV(left, top, width, height) {
var _this$HSV2 = this.HSV,
h = _this$HSV2.h,
a = _this$HSV2.a;
if (width < 0) {
width = 0;
}
var s = left / width;
var v = 1 - top / height;
return {
h: h,
s: s,
v: v,
a: a
};
}
}, {
key: "rgbToHEX",
value: function rgbToHEX(r, g, b, a) {
function hex(num) {
var hexNum = Number(num).toString(16);
return hexNum.length === 1 ? "0".concat(hexNum) : hexNum[1] === '.' ? "0".concat(hexNum[0]) : hexNum;
}
if (a !== 1) {
return "#".concat(hex(r)).concat(hex(g)).concat(hex(b)).concat(hex(round(a * 255)));
}
return "#".concat(hex(r)).concat(hex(g)).concat(hex(b));
}
}, {
key: "hexToRGB",
value: function hexToRGB(hex) {
hex = hex.split('#')[1] || hex.split('#')[0];
var length = hex.length;
var results = '';
var hexArray = hex.split('');
if (length === 3 || length === 4) {
for (var i = 0; i < length; i++) {
results = "".concat(results).concat(hexArray[i]).concat(hexArray[i]);
}
} else if (length === 5) {
results = "".concat(hex).concat(hexArray[length - 1]);
} else {
results = hex;
}
var hasAlpha = results.length === 8;
results = results.slice(0, hasAlpha ? 8 : 6);
var result = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i.exec(results);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
a: hasAlpha ? round(parseInt(result[4], 16) / 255, 2) : 1
} : {
r: 255,
g: 0,
b: 0,
a: 1
};
}
}, {
key: "rgbToHSV",
value: function rgbToHSV(r, g, b, a) {
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var v = max;
var s;
var h;
if (v === 0) {
s = 0;
} else {
s = (max - min) / max;
}
if (max === min) {
h = 0;
} else {
var d = r === min ? g - b : b === min ? r - g : b - r;
var m = r === min ? 3 : b === min ? 1 : 5;
h = 60 * (m - d / (max - min));
}
if (h < 0) {
h += 360;
}
return {
h: h,
s: s,
v: v,
a: a
};
}
}, {
key: "hsvToRGB",
value: function hsvToRGB(h, s, v, a) {
h /= 60;
var h1 = Math.floor(h);
var f = h - h1;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
var rgb;
switch (h1) {
case 0:
rgb = {
r: v,
g: t,
b: p,
a: a
};
break;
case 1:
rgb = {
r: q,
g: v,
b: p,
a: a
};
break;
case 2:
rgb = {
r: p,
g: v,
b: t,
a: a
};
break;
case 3:
rgb = {
r: p,
g: q,
b: v,
a: a
};
break;
case 4:
rgb = {
r: t,
g: p,
b: v,
a: a
};
break;
default:
rgb = {
r: v,
g: p,
b: q,
a: a
};
break;
}
rgb.r = Math.floor(rgb.r * 255);
rgb.g = Math.floor(rgb.g * 255);
rgb.b = Math.floor(rgb.b * 255);
return rgb;
}
}, {
key: "setGradientPointer",
value: function setGradientPointer(x, y, pointer, wrap, isClient) {
var _getNodeRect7 = getNodeRect(wrap),
wrapX = _getNodeRect7.left,
wrapY = _getNodeRect7.top,
wrapW = _getNodeRect7.width,
wrapH = _getNodeRect7.height;
var _getNodeRect8 = getNodeRect(pointer),
pointerH = _getNodeRect8.height,
pointerW = _getNodeRect8.width;
var left;
var top;
if (isClient) {
left = x - wrapX < 0 ? 0 : x - wrapX > wrapW ? wrapW : x - wrapX;
top = y - wrapY < 0 ? 0 : y - wrapY > wrapH ? wrapH : y - wrapY;
} else {
left = x;
top = y;
}
pointer.style.left = "".concat(left - pointerH / 2, "px");
pointer.style.top = "".concat(top - pointerW / 2, "px");
return {
left: left,
top: top
};
}
}, {
key: "handleGPClick",
value: function handleGPClick(e) {
var gradient = this.gradient,
selectPointer = this.selectPointer,
setGradientPointer = this.setGradientPointer;
if (gradient && selectPointer) {
var positionToHSV = this.positionToHSV,
rgbToHEX = this.rgbToHEX,
hsvToRGB = this.hsvToRGB;
var _setGradientPointer = setGradientPointer(transformZoomData(e.clientX), transformZoomData(e.clientY), selectPointer, gradient, true),
left = _setGradientPointer.left,
top = _setGradientPointer.top;
var _getNodeRect9 = getNodeRect(gradient),
height = _getNodeRect9.height,
width = _getNodeRect9.width;
var _positionToHSV = positionToHSV(left, top, width, height),
h = _positionToHSV.h,
s = _positionToHSV.s,
v = _positionToHSV.v,
ha = _positionToHSV.a;
this.setHSV(undefined, s, v, undefined);
var _hsvToRGB = hsvToRGB(h, s, v, ha),
r = _hsvToRGB.r,
g = _hsvToRGB.g,
b = _hsvToRGB.b,
a = _hsvToRGB.a;
var hexColor = rgbToHEX(r, g, b, a);
this.setRGBA(r, g, b, round(a, 2));
this.prepareSetValue(hexColor);
}
}
}, {
key: "setSliderPointer",
value: function setSliderPointer(x, pointer, wrap, isClient) {
var _getNodeRect10 = getNodeRect(wrap),
wrapX = _getNodeRect10.left,
wrapW = _getNodeRect10.width;
var _getNodeRect11 = getNodeRect(pointer),
pointerW = _getNodeRect11.width;
var left;
if (isClient) {
left = x - wrapX < 0 ? 0 : x - wrapX > wrapW ? wrapW : x - wrapX;
} else {
left = x;
}
pointer.style.left = "".concat(left - pointerW / 2, "px");
return {
left: left,
wrapW: wrapW
};
}
}, {
key: "handleHueClick",
value: function handleHueClick(e) {
var hue = this.hue,
huePointer = this.huePointer,
setSliderPointer = this.setSliderPointer,
hsvToRGB = this.hsvToRGB,
rgbToHEX = this.rgbToHEX;
if (hue && huePointer) {
var _setSliderPointer = setSliderPointer(transformZoomData(e.clientX), huePointer, hue, true),
left = _setSliderPointer.left,
wrapW = _setSliderPointer.wrapW;
var h = Math.floor(left / wrapW * 360);
var _this$HSV3 = this.HSV,
s = _this$HSV3.s,
v = _this$HSV3.v,
ha = _this$HSV3.a;
this.setHSV(h, undefined, undefined, undefined);
var _hsvToRGB2 = hsvToRGB(h, 1, 1, 1),
r = _hsvToRGB2.r,
g = _hsvToRGB2.g,
b = _hsvToRGB2.b,
a = _hsvToRGB2.a;
var _hsvToRGB3 = hsvToRGB(h, s, v, ha),
valueR = _hsvToRGB3.r,
valueG = _hsvToRGB3.g,
valueB = _hsvToRGB3.b,
valueA = _hsvToRGB3.a;
var hueColor = rgbToHEX(r, g, b, a);
var valueColor = rgbToHEX(valueR, valueG, valueB, valueA);
this.setRGBA(valueR, valueG, valueB, valueA);
this.setHueColor(hueColor);
this.prepareSetValue(valueColor);
}
}
}, {
key: "handleOpacityClick",
value: function handleOpacityClick(e) {
var opacity = this.opacity,
opacityPointer = this.opacityPointer,
setSliderPointer = this.setSliderPointer,
hsvToRGB = this.hsvToRGB,
rgbToHEX = this.rgbToHEX;
if (opacity && opacityPointer) {
var _setSliderPointer2 = setSliderPointer(transformZoomData(e.clientX), opacityPointer, opacity, true),
left = _setSliderPointer2.left,
wrapW = _setSliderPointer2.wrapW;
var a = round(left / wrapW, 2);
var _this$HSV4 = this.HSV,
h = _this$HSV4.h,
s = _this$HSV4.s,
v = _this$HSV4.v;
var _hsvToRGB4 = hsvToRGB(h, s, v, a),
r = _hsvToRGB4.r,
g = _hsvToRGB4.g,
b = _hsvToRGB4.b;
this.setHSV(h, s, v, a);
this.setRGBA(r, g, b, a);
this.prepareSetValue(rgbToHEX(r, g, b, a));
}
}
}, {
key: "handleFooterInput",
value: function handleFooterInput(e) {
var _this7 = this;
var target = e.target,
name = e.target.name;
var value = target.value;
var rgba = this.RGBA;
if (name === ColorUnit.hex) {
value = "#".concat(value);
this.prepareSetValue(value);
if (colorHexReg.test(value)) {
var _this$hexToRGB2 = this.hexToRGB(value),
r = _this$hexToRGB2.r,
g = _this$hexToRGB2.g,
b = _this$hexToRGB2.b,
a = _this$hexToRGB2.a;
var _this$rgbToHSV2 = this.rgbToHSV(r / 255, g / 255, b / 255, a),
h = _this$rgbToHSV2.h,
s = _this$rgbToHSV2.s,
v = _this$rgbToHSV2.v;
var _this$hsvToRGB3 = this.hsvToRGB(h, 1, 1, 1),
hr = _this$hsvToRGB3.r,
hg = _this$hsvToRGB3.g,
hb = _this$hsvToRGB3.b,
ha = _this$hsvToRGB3.a;
this.setRGBA(r, g, b, a);
this.setHSV(h, s, v, a);
this.setHueColor(this.rgbToHEX(hr, hg, hb, ha));
}
} else {
var valueToNumber = Number(value);
if (!isNaN(valueToNumber) || name === 'a') {
if (name === 'a') {
if (valueToNumber >= 1) {
valueToNumber = 1;
} else if (value && value.slice(-1) === '.') {
var timer = setTimeout(function () {
clearTimeout(timer);
if (_this7.footerInputRef) {
_this7.footerInputRef.value = value;
}
}, 0);
return;
}
} else if (value > 255) {
valueToNumber = 255;
}
rgba[name] = valueToNumber;
var _r = rgba.r,
_g = rgba.g,
_b = rgba.b,
_a = rgba.a;
var _this$rgbToHSV3 = this.rgbToHSV(_r / 255, _g / 255, _b / 255, _a),
_h = _this$rgbToHSV3.h,
_s = _this$rgbToHSV3.s,
_v = _this$rgbToHSV3.v;
this.setRGBA(_r, _g, _b, _a);
this.setHSV(_h, _s, _v, _a);
this.prepareSetValue(this.rgbToHEX(_r, _g, _b, _a));
}
}
}
}, {
key: "handleGPMouseDown",
value: function handleGPMouseDown() {
this.eventManager.addEventListener('mousemove', this.handleGPClick).addEventListener('mouseup', this.onGPMouseUp);
}
}, {
key: "onGPMouseUp",
value: function onGPMouseUp() {
this.eventManager.removeEventListener('mousemove', this.handleGPClick).removeEventListener('mouseup', this.onGPMouseUp);
}
}, {
key: "handleHPMouseDown",
value: function handleHPMouseDown() {
this.eventManager.addEventListener('mousemove', this.handleHueClick).addEventListener('mouseup', this.onHPMouseUp);
}
}, {
key: "handleOpacityMouseDown",
value: function handleOpacityMouseDown() {
this.eventManager.addEventListener('mousemove', this.handleOpacityClick).addEventListener('mouseup', this.onOpacityMouseUp);
}
}, {
key: "onHPMouseUp",
value: function onHPMouseUp() {
this.eventManager.removeEventListener('mousemove', this.handleHueClick).removeEventListener('mouseup', this.onHPMouseUp);
}
}, {
key: "onOpacityMouseUp",
value: function onOpacityMouseUp() {
this.eventManager.removeEventListener('mousemove', this.handleOpacityClick).removeEventListener('mouseup', this.onOpacityMouseUp);
}
}, {
key: "onExpandChange",
value: function onExpandChange(e) {
e.stopPropagation();
this.setGradientHidden(!this.gradientHidden);
this.forceUpdate();
}
}, {
key: "handleFocus",
value: function handleFocus(e) {
this.setFooterEditFlag(false);
_get(_getPrototypeOf(ColorPicker.prototype), "handleFocus", this).call(this, e);
}
}, {
key: "handleFooterFocus",
value: function handleFooterFocus() {
this.setFooterEditFlag(true);
}
}, {
key: "setPopup",
value: function setPopup(statePopup) {
_get(_getPrototypeOf(ColorPicker.prototype), "setPopup", this).call(this, statePopup);
var value = this.getValue();
if (value && statePopup) {
this.setColor(value);
} else if (value && colorHexReg.test(value)) {
var colorPickUsed = this.colorPickUsed;
var valueIndex = colorPickUsed.indexOf(value);
if (valueIndex === -1) {
colorPickUsed = _toConsumableArray(new Set([value].concat(_toConsumableArray(colorPickUsed)))).slice(0, COLOR_LINE_LENGTH);
} else {
colorPickUsed = _toConsumableArray(new Set([value].concat(_toConsumableArray(pull(colorPickUsed, value)))));
}
localStorage.setItem(COLOR_STORAGE_ITEM, JSON.stringify(colorPickUsed));
}
}
}, {
key: "handlePreset",
value: function handlePreset(color) {
this.setColor(color);
this.setPopup(false);
}
}, {
key: "handlePopupAnimateAppear",
value: function handlePopupAnimateAppear() {
this.setColor(this.getValue());
}
}, {
key: "handlePopupAnimateEnd",
value: function handlePopupAnimateEnd() {// noop
}
}, {
key: "getPopupStyleFromAlign",
value: function getPopupStyleFromAlign() {
return undefined;
}
}, {
key: "getTriggerIconFont",
value: function getTriggerIconFont() {
var mode = this.props.mode;
if (mode !== ViewMode.button) {
return 'palette';
}
return '';
}
}, {
key: "getWrapperClassNames",
value: function getWrapperClassNames() {
var prefixCls = this.prefixCls;
return _get(_getPrototypeOf(ColorPicker.prototype), "getWrapperClassNames", this).call(this, _defineProperty({}, "".concat(prefixCls, "-button"), this.props.mode === ViewMode.button));
}
}, {
key: "renderLengthInfo",
value: function renderLengthInfo() {
return undefined;
}
}]);
return ColorPicker;
}(TriggerField);
ColorPicker.displayName = 'ColorPicker';
ColorPicker.defaultProps = _objectSpread(_objectSpread({}, TriggerField.defaultProps), {}, {
suffixCls: 'color-picker',
clearButton: false,
mode: ViewMode["default"]
});
__decorate([observable], ColorPicker.prototype, "hueColor", void 0);
__decorate([observable], ColorPicker.prototype, "footerEditFlag", void 0);
__decorate([observable], ColorPicker.prototype, "gradientHidden", void 0);
__decorate([observable], ColorPicker.prototype, "gradienLeft", void 0);
__decorate([observable], ColorPicker.prototype, "gradienTop", void 0);
__decorate([action], ColorPicker.prototype, "setHueColor", null);
__decorate([action], ColorPicker.prototype, "setFooterEditFlag", null);
__decorate([action], ColorPicker.prototype, "setGradientHidden", null);
__decorate([autobind], ColorPicker.prototype, "setColor", null);
__decorate([autobind], ColorPicker.prototype, "positionToHSV", null);
__decorate([action], ColorPicker.prototype, "hexToRGB", null);
__decorate([autobind], ColorPicker.prototype, "setGradientPointer", null);
__decorate([autobind], ColorPicker.prototype, "handleGPClick", null);
__decorate([autobind], ColorPicker.prototype, "setSliderPointer", null);
__decorate([autobind], ColorPicker.prototype, "handleHueClick", null);
__decorate([autobind], ColorPicker.prototype, "handleOpacityClick", null);
__decorate([autobind], ColorPicker.prototype, "handleFooterInput", null);
__decorate([autobind], ColorPicker.prototype, "handleGPMouseDown", null);
__decorate([autobind], ColorPicker.prototype, "onGPMouseUp", null);
__decorate([autobind], ColorPicker.prototype, "handleHPMouseDown", null);
__decorate([autobind], ColorPicker.prototype, "handleOpacityMouseDown", null);
__decorate([autobind], ColorPicker.prototype, "onHPMouseUp", null);
__decorate([autobind], ColorPicker.prototype, "onOpacityMouseUp", null);
__decorate([autobind], ColorPicker.prototype, "onExpandChange", null);
__decorate([autobind], ColorPicker.prototype, "handleFocus", null);
__decorate([autobind], ColorPicker.prototype, "handleFooterFocus", null);
__decorate([action], ColorPicker.prototype, "setPopup", null);
__decorate([autobind], ColorPicker.prototype, "handlePreset", null);
__decorate([autobind], ColorPicker.prototype, "handlePopupAnimateAppear", null);
ColorPicker = __decorate([observer], ColorPicker);
export default ColorPicker;
//# sourceMappingURL=ColorPicker.js.map