choerodon-ui/pro/lib/color-picker/ColorPicker.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

var _typeMismatch = require("choerodon-ui/dataset/validator/rules/typeMismatch");

var _icon = _interopRequireDefault(require("../../../lib/icon"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _round = _interopRequireDefault(require("lodash/round"));

var _pull = _interopRequireDefault(require("lodash/pull"));

var _concat = _interopRequireDefault(require("lodash/concat"));

var _classnames = _interopRequireDefault(require("classnames"));

var _TriggerField2 = _interopRequireDefault(require("../trigger-field/TriggerField"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _EventManager = _interopRequireDefault(require("../_util/EventManager"));

var _DocumentUtils = require("../_util/DocumentUtils");

var _enum = require("../data-set/enum");

var _localeContext = require("../locale-context");

var _enum2 = require("./enum");

var _presetColorMap = require("./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) {
  (0, _inherits2["default"])(ColorPicker, _TriggerField);

  var _super = (0, _createSuper2["default"])(ColorPicker);

  function ColorPicker(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, ColorPicker);
    _this = _super.call(this, props, context);
    _this.eventManager = new _EventManager["default"](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;
    };

    (0, _mobx.runInAction)(function () {
      _this.gradientHidden = true;
    });
    _this.popupView = null;
    return _this;
  }

  (0, _createClass2["default"])(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 ((0, _isBoolean["default"])(preset)) {
        return preset;
      }

      return this.getContextConfig('colorPreset');
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      var label = this.getProp('label');
      return {
        valueMissing: (0, _localeContext.$l)('ColorPicker', label ? 'value_missing' : 'value_missing_no_label', {
          label: label
        }),
        typeMismatch: (0, _localeContext.$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 (0, _concat["default"])(list, Array(COLOR_LINE_LENGTH - list.length).fill(FILL_COLOR));
      }

      return list;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(ColorPicker.prototype), "getOmitPropsKeys", this).call(this).concat(['mode', 'preset']);
    }
  }, {
    key: "getDefaultAction",
    value: function getDefaultAction() {
      return this.getContextConfig('selectTrigger') || (0, _get2["default"])((0, _getPrototypeOf2["default"])(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;
        (0, _mobx.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 = (0, _get2["default"])((0, _getPrototypeOf2["default"])(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);
        }

        (0, _get2["default"])((0, _getPrototypeOf2["default"])(ColorPicker.prototype), "syncValueOnBlur", this).call(this, value);
      }

      if (preset && !gradientHidden) {
        this.setGradientHidden(true);
      }
    }
  }, {
    key: "getFieldType",
    value: function getFieldType() {
      return _enum.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 === _enum2.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 = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-color"), !isButtonMode), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-button-color"), isButtonMode), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-prefix-border"), !isButtonMode && this.getBorder(r, g, b)), _classNames));
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-prefix")
      }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
        className: "".concat(prefixCls, "-popup-footer")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-popup-footer-slide-bar")
      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
        ref: this.saveHueRef,
        className: "".concat(prefixCls, "-popup-footer-slider")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        onClick: this.handleHueClick,
        className: "hue"
      }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, huePointerProps))), /*#__PURE__*/_react["default"].createElement("div", {
        ref: this.saveOpacityRef,
        className: "".concat(prefixCls, "-popup-footer-slider")
      }, /*#__PURE__*/_react["default"].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["default"].createElement("div", (0, _extends2["default"])({}, opacityPointerProps)))), /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-popup-footer-color"),
        style: {
          background: "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")")
        }
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-popup-footer-input")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-popup-footer-input-color")
      }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
        name: _enum2.ColorUnit.hex,
        value: value,
        autoComplete: "off"
      }, inputProps)), /*#__PURE__*/_react["default"].createElement("span", null, _enum2.ColorUnit.hex)), Object.keys(RGBA).map(function (item) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-popup-footer-input-color"),
          key: item
        }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
          name: item,
          value: value ? _this3.RGBA[item] : '',
          autoComplete: "off",
          ref: item === 'a' ? _this3.saveFooterAlphaRef : undefined
        }, inputProps)), /*#__PURE__*/_react["default"].createElement("span", null, _enum2.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 ((0, _isEmpty["default"])(this.hueColor)) {
        this.setColor(this.getValue());
      }

      return /*#__PURE__*/_react["default"].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["default"].createElement("div", {
        className: "".concat(prefixCls, "-popup-view-picker-name")
      }, (0, _localeContext.$l)('ColorPicker', 'pick_color_view')), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-popup-body"),
        style: {
          backgroundColor: (0, _defaultTo["default"])(this.hueColor, '#ff0000')
        }
      }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, gradientProps)), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, 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["default"].createElement("div", {
        className: className
      }, (0, _toConsumableArray2["default"])(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["default"].createElement("div", {
          className: (0, _classnames["default"])("".concat(className, "-block"), (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(className, "-block-border"), border), (0, _defineProperty2["default"])(_classNames2, "".concat(className, "-block-active"), active), _classNames2)),
          style: {
            backgroundColor: item
          },
          key: key,
          onClick: function onClick() {
            return _this5.handlePreset(item);
          }
        }, active && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          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["default"].createElement("div", {
          className: "".concat(prefixCls, "-popup-view-preset")
        }, /*#__PURE__*/_react["default"].createElement("div", {
          onClick: function onClick() {
            return _this6.setGradientHidden(true);
          }
        }, this.getPresetData(_presetColorMap.commonColorMap, value), this.getPresetData(_presetColorMap.defaultColorMap, value), /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-popup-picker-name")
        }, (0, _localeContext.$l)('ColorPicker', 'used_view')), this.getPresetData(this.colorPickUsed)), /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-popup-view-gradient")
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-popup-picker-name"),
          onClick: this.onExpandChange
        }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: "color_lens-o"
        }), /*#__PURE__*/_react["default"].createElement("span", null, (0, _localeContext.$l)('ColorPicker', 'custom_view'))), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          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 ((0, _isNil["default"])(r) || r > 255) r = 255;
      if ((0, _isNil["default"])(g) || g > 255) g = 255;
      if ((0, _isNil["default"])(b) || b > 255) b = 255;
      if ((0, _isNil["default"])(a) || a > 1) a = 1;

      if (r !== RGBA.r) {
        RGBA.r = (0, _round["default"])(r);
      }

      if (g !== RGBA.g) {
        RGBA.g = (0, _round["default"])(g);
      }

      if (b !== RGBA.b) {
        RGBA.b = (0, _round["default"])(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 (!(0, _isNil["default"])(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((0, _round["default"])(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 ? (0, _round["default"])(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((0, _DocumentUtils.transformZoomData)(e.clientX), (0, _DocumentUtils.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, (0, _round["default"])(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((0, _DocumentUtils.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((0, _DocumentUtils.transformZoomData)(e.clientX), opacityPointer, opacity, true),
            left = _setSliderPointer2.left,
            wrapW = _setSliderPointer2.wrapW;

        var a = (0, _round["default"])(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 === _enum2.ColorUnit.hex) {
        value = "#".concat(value);
        this.prepareSetValue(value);

        if (_typeMismatch.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);
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(ColorPicker.prototype), "handleFocus", this).call(this, e);
    }
  }, {
    key: "handleFooterFocus",
    value: function handleFooterFocus() {
      this.setFooterEditFlag(true);
    }
  }, {
    key: "setPopup",
    value: function setPopup(statePopup) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(ColorPicker.prototype), "setPopup", this).call(this, statePopup);
      var value = this.getValue();

      if (value && statePopup) {
        this.setColor(value);
      } else if (value && _typeMismatch.colorHexReg.test(value)) {
        var colorPickUsed = this.colorPickUsed;
        var valueIndex = colorPickUsed.indexOf(value);

        if (valueIndex === -1) {
          colorPickUsed = (0, _toConsumableArray2["default"])(new Set([value].concat((0, _toConsumableArray2["default"])(colorPickUsed)))).slice(0, COLOR_LINE_LENGTH);
        } else {
          colorPickUsed = (0, _toConsumableArray2["default"])(new Set([value].concat((0, _toConsumableArray2["default"])((0, _pull["default"])(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 !== _enum2.ViewMode.button) {
        return 'palette';
      }

      return '';
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var prefixCls = this.prefixCls;
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(ColorPicker.prototype), "getWrapperClassNames", this).call(this, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-button"), this.props.mode === _enum2.ViewMode.button));
    }
  }, {
    key: "renderLengthInfo",
    value: function renderLengthInfo() {
      return undefined;
    }
  }]);
  return ColorPicker;
}(_TriggerField2["default"]);

ColorPicker.displayName = 'ColorPicker';
ColorPicker.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _TriggerField2["default"].defaultProps), {}, {
  suffixCls: 'color-picker',
  clearButton: false,
  mode: _enum2.ViewMode["default"]
});
(0, _tslib.__decorate)([_mobx.observable], ColorPicker.prototype, "hueColor", void 0);
(0, _tslib.__decorate)([_mobx.observable], ColorPicker.prototype, "footerEditFlag", void 0);
(0, _tslib.__decorate)([_mobx.observable], ColorPicker.prototype, "gradientHidden", void 0);
(0, _tslib.__decorate)([_mobx.observable], ColorPicker.prototype, "gradienLeft", void 0);
(0, _tslib.__decorate)([_mobx.observable], ColorPicker.prototype, "gradienTop", void 0);
(0, _tslib.__decorate)([_mobx.action], ColorPicker.prototype, "setHueColor", null);
(0, _tslib.__decorate)([_mobx.action], ColorPicker.prototype, "setFooterEditFlag", null);
(0, _tslib.__decorate)([_mobx.action], ColorPicker.prototype, "setGradientHidden", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "setColor", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "positionToHSV", null);
(0, _tslib.__decorate)([_mobx.action], ColorPicker.prototype, "hexToRGB", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "setGradientPointer", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleGPClick", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "setSliderPointer", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleHueClick", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleOpacityClick", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleFooterInput", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleGPMouseDown", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "onGPMouseUp", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleHPMouseDown", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleOpacityMouseDown", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "onHPMouseUp", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "onOpacityMouseUp", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "onExpandChange", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleFocus", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handleFooterFocus", null);
(0, _tslib.__decorate)([_mobx.action], ColorPicker.prototype, "setPopup", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handlePreset", null);
(0, _tslib.__decorate)([_autobind["default"]], ColorPicker.prototype, "handlePopupAnimateAppear", null);
ColorPicker = (0, _tslib.__decorate)([_mobxReact.observer], ColorPicker);
var _default = ColorPicker;
exports["default"] = _default;
//# sourceMappingURL=ColorPicker.js.map