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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
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 { observer } from 'mobx-react';
import { action, observable } from 'mobx';
import defaultTo from 'lodash/defaultTo';
import isEmpty from 'lodash/isEmpty';
import isNil from 'lodash/isNil';
import TriggerField from '../trigger-field/TriggerField';
import autobind from '../_util/autobind';
import EventManager from '../_util/EventManager';
import { FieldType } from '../data-set/enum';
import { $l } from '../locale-context';

function getNodeRect(node) {
  return node.getBoundingClientRect();
}

var ColorPicker = /*#__PURE__*/function (_TriggerField) {
  _inherits(ColorPicker, _TriggerField);

  var _super = _createSuper(ColorPicker);

  function ColorPicker() {
    var _this;

    _classCallCheck(this, ColorPicker);

    _this = _super.apply(this, arguments);
    _this.eventManager = new EventManager(typeof window === 'undefined' ? undefined : document);
    _this.HSV = {
      h: 0,
      s: 1,
      v: 1,
      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;
    };

    return _this;
  }

  _createClass(ColorPicker, [{
    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: "componentDidUpdate",
    value: function componentDidUpdate() {
      var popup = this.popup;

      if (popup) {
        var _this$HSV = this.HSV,
            h = _this$HSV.h,
            s = _this$HSV.s,
            v = _this$HSV.v;
        var huePointer = this.huePointer,
            selectPointer = this.selectPointer,
            hue = this.hue,
            gradient = this.gradient;

        if (huePointer && hue) {
          var _getNodeRect = getNodeRect(hue),
              width = _getNodeRect.width;

          this.setHuePointer(width * h / 360, huePointer, hue, false);
        }

        if (selectPointer && gradient) {
          var _getNodeRect2 = getNodeRect(gradient),
              _width = _getNodeRect2.width,
              height = _getNodeRect2.height;

          var left = s * _width;
          var top = height - v * height;
          this.setGradientPointer(left, top, selectPointer, gradient, false);
        }
      }
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur(value) {
      if (value !== '' && value[0] !== '#' && !value.startsWith('rgb') && !value.startsWith('hls')) {
        value = "#".concat(value);
      }

      _get(_getPrototypeOf(ColorPicker.prototype), "syncValueOnBlur", this).call(this, value);
    }
  }, {
    key: "getFieldType",
    value: function getFieldType() {
      return FieldType.color;
    }
  }, {
    key: "getPrefix",
    value: function getPrefix() {
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-prefix")
      }, /*#__PURE__*/React.createElement("span", {
        className: "".concat(prefixCls, "-color"),
        style: {
          backgroundColor: this.getValue()
        }
      }));
    }
  }, {
    key: "getPopupFooter",
    value: function getPopupFooter() {
      var prefixCls = this.prefixCls;
      var huePointerProps = {
        onMouseDown: this.handleHPMouseDown,
        ref: this.saveHuePointerRef,
        className: "".concat(prefixCls, "-popup-footer-slider-pointer")
      };
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-popup-footer")
      }, /*#__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 opacity")
      }, /*#__PURE__*/React.createElement("div", {
        ref: this.saveOpacityPointerRef,
        className: "".concat(prefixCls, "-popup-footer-slider-pointer")
      })));
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      var prefixCls = this.prefixCls;
      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", {
        className: "".concat(prefixCls, "-popup-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: "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: "setHueColor",
    value: function setHueColor(color) {
      if (color !== this.hueColor) {
        this.hueColor = color;
      }
    }
  }, {
    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;

        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);

        var _this$hsvToRGB = this.hsvToRGB(h, 1, 1, 1),
            hr = _this$hsvToRGB.r,
            hg = _this$hsvToRGB.g,
            hb = _this$hsvToRGB.b,
            ha = _this$hsvToRGB.a;

        var hueColor = this.rgbToHEX(hr, hg, hb, ha);
        this.setHueColor(hueColor);

        if (gradient && selectPointer && hue && huePointer) {
          var _getNodeRect3 = getNodeRect(gradient),
              height = _getNodeRect3.height,
              width = _getNodeRect3.width;

          var left = s * width;
          var top = height - v * height;

          var _getNodeRect4 = getNodeRect(hue),
              hueWidth = _getNodeRect4.width;

          var hueLeft = h / 360 * hueWidth;
          this.setHuePointer(hueLeft, huePointer, hue, false);
          this.setGradientPointer(left, top, selectPointer, gradient, false);
        }
      }
    }
  }, {
    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 = num.toString(16);
        return hexNum.length === 1 ? "0".concat(hexNum) : hexNum;
      }

      if (a !== 1) {
        return "#".concat(hex(r)).concat(hex(g)).concat(hex(b)).concat(hex(a * 255 / 10));
      }

      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;
      }

      results = results.slice(0, 6);
      var result = /^#?([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: 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 _getNodeRect5 = getNodeRect(wrap),
          wrapX = _getNodeRect5.left,
          wrapY = _getNodeRect5.top,
          wrapW = _getNodeRect5.width,
          wrapH = _getNodeRect5.height;

      var _getNodeRect6 = getNodeRect(pointer),
          pointerH = _getNodeRect6.height,
          pointerW = _getNodeRect6.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(e.clientX, e.clientY, selectPointer, gradient, true),
            left = _setGradientPointer.left,
            top = _setGradientPointer.top;

        var _getNodeRect7 = getNodeRect(gradient),
            height = _getNodeRect7.height,
            width = _getNodeRect7.width;

        var _positionToHSV = positionToHSV(left, top, width, height),
            h = _positionToHSV.h,
            s = _positionToHSV.s,
            v = _positionToHSV.v,
            opacity = _positionToHSV.a;

        this.setHSV(undefined, s, v, undefined);

        var _hsvToRGB = hsvToRGB(h, s, v, opacity),
            r = _hsvToRGB.r,
            g = _hsvToRGB.g,
            b = _hsvToRGB.b,
            a = _hsvToRGB.a;

        var hexColor = rgbToHEX(r, g, b, a);
        this.prepareSetValue(hexColor);
      }
    }
  }, {
    key: "setHuePointer",
    value: function setHuePointer(x, pointer, wrap, isClient) {
      var _getNodeRect8 = getNodeRect(wrap),
          wrapX = _getNodeRect8.left,
          wrapW = _getNodeRect8.width;

      var _getNodeRect9 = getNodeRect(pointer),
          pointerW = _getNodeRect9.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");

      if (left === wrapW) {
        return {
          left: 0,
          wrapW: wrapW
        };
      }

      return {
        left: left,
        wrapW: wrapW
      };
    }
  }, {
    key: "handleHueClick",
    value: function handleHueClick(e) {
      var hue = this.hue,
          huePointer = this.huePointer,
          setHuePointer = this.setHuePointer,
          hsvToRGB = this.hsvToRGB,
          rgbToHEX = this.rgbToHEX;

      if (hue && huePointer) {
        var _setHuePointer = setHuePointer(e.clientX, huePointer, hue, true),
            left = _setHuePointer.left,
            wrapW = _setHuePointer.wrapW;

        var h = Math.floor(left / wrapW * 360);
        var _this$HSV3 = this.HSV,
            s = _this$HSV3.s,
            v = _this$HSV3.v,
            opacity = _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, opacity),
            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.setHueColor(hueColor);
        this.prepareSetValue(valueColor);
      }
    }
  }, {
    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: "onHPMouseUp",
    value: function onHPMouseUp() {
      this.eventManager.removeEventListener('mousemove', this.handleHueClick).removeEventListener('mouseup', this.onHPMouseUp);
    }
  }, {
    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() {
      return 'palette';
    }
  }, {
    key: "renderLengthInfo",
    value: function renderLengthInfo() {
      return undefined;
    }
  }]);

  return ColorPicker;
}(TriggerField);

ColorPicker.displayName = 'ColorPicker';
ColorPicker.defaultProps = _objectSpread(_objectSpread({}, TriggerField.defaultProps), {}, {
  suffixCls: 'color-picker',
  clearButton: false
});

__decorate([observable], ColorPicker.prototype, "hueColor", void 0);

__decorate([action], ColorPicker.prototype, "setHueColor", 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, "setHuePointer", null);

__decorate([autobind], ColorPicker.prototype, "handleHueClick", null);

__decorate([autobind], ColorPicker.prototype, "handleGPMouseDown", null);

__decorate([autobind], ColorPicker.prototype, "onGPMouseUp", null);

__decorate([autobind], ColorPicker.prototype, "handleHPMouseDown", null);

__decorate([autobind], ColorPicker.prototype, "onHPMouseUp", null);

__decorate([autobind], ColorPicker.prototype, "handlePopupAnimateAppear", null);

ColorPicker = __decorate([observer], ColorPicker);
export default ColorPicker;
//# sourceMappingURL=ColorPicker.js.map