/*!
 * 
 * pandora v0.0.34
 *
 * Copyright 2015-present, Gingkoo, Inc.
 * All rights reserved.
 *
 */
"use strict";
(self["webpackChunkpandora"] = self["webpackChunkpandora"] || []).push([[554],{

/***/ 89064:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "ColorControl": function() { return /* binding */ ColorControl; }
/* harmony export */ });
/* harmony import */ var _babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(15671);
/* harmony import */ var _babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(43144);
/* harmony import */ var _babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(97326);
/* harmony import */ var _babel_runtime_helpers_esm_inherits__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(60136);
/* harmony import */ var _babel_runtime_helpers_esm_createSuper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(29388);
/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(92222);
/* harmony import */ var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(70655);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(67294);
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(73935);
/* harmony import */ var react_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(93565);
/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(58400);
/* harmony import */ var _Overlay__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(99412);
/* harmony import */ var uncontrollable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(14289);
/* harmony import */ var _PopOver__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(26368);
/* harmony import */ var _theme__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(36060);
/* harmony import */ var _utils_helper__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(70693);
/* harmony import */ var _locale__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(28380);






/**
 * @file ColorPicker
 * @description 颜色选择器组件
 *
 */











var ColorControl = /*#__PURE__*/function (_React$PureComponent) {
  (0,_babel_runtime_helpers_esm_inherits__WEBPACK_IMPORTED_MODULE_11__/* ["default"] */ .Z)(ColorControl, _React$PureComponent);
  var _super = (0,_babel_runtime_helpers_esm_createSuper__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(ColorControl);
  function ColorControl(props) {
    var _this;
    (0,_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_13__/* ["default"] */ .Z)(this, ColorControl);
    _this = _super.call(this, props);
    _this.state = {
      isOpened: false,
      isFocused: false,
      inputValue: _this.props.value || ''
    };
    _this.open = _this.open.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.close = _this.close.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.focus = _this.focus.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.blur = _this.blur.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.handleChange = _this.handleChange.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.handleFocus = _this.handleFocus.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.handleBlur = _this.handleBlur.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.clearValue = _this.clearValue.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.handleInputChange = _this.handleInputChange.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.handleClick = _this.handleClick.bind((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(_this));
    _this.preview = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createRef();
    _this.input = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createRef();
    return _this;
  }
  (0,_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_15__/* ["default"] */ .Z)(ColorControl, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var props = this.props;
      if (prevProps.value !== props.value) {
        this.setState({
          inputValue: props.value || ''
        });
      }
    }
  }, {
    key: "handleFocus",
    value: function handleFocus() {
      this.setState({
        isFocused: true
      });
    }
  }, {
    key: "handleBlur",
    value: function handleBlur() {
      this.setState({
        isFocused: false,
        inputValue: this.props.value
      });
    }
  }, {
    key: "focus",
    value: function focus() {
      this.input.current && this.input.current.focus();
    }
  }, {
    key: "blur",
    value: function blur() {
      this.input.current && this.input.current.blur();
    }
  }, {
    key: "open",
    value: function open(fn) {
      if (this.props.disabled) {
        return;
      }
      this.setState({
        isOpened: true
      }, fn);
    }
  }, {
    key: "close",
    value: function close() {
      this.setState({
        isOpened: false
      });
    }
  }, {
    key: "clearValue",
    value: function clearValue() {
      var _this$props = this.props,
        onChange = _this$props.onChange,
        resetValue = _this$props.resetValue;
      onChange(resetValue || '');
    }
  }, {
    key: "handleClick",
    value: function handleClick() {
      this.state.isOpened ? this.close() : this.open(this.focus);
    }
  }, {
    key: "handleInputChange",
    value: function handleInputChange(e) {
      var _this2 = this;
      if (!this.props.allowCustomColor) {
        return;
      }
      var onChange = this.props.onChange;
      this.setState({
        inputValue: e.currentTarget.value
      }, function () {
        var isValidated = _this2.validateColor(_this2.state.inputValue);
        if (isValidated) {
          onChange(_this2.state.inputValue);
        }
      });
    }
  }, {
    key: "validateColor",
    value: function validateColor(value) {
      if (value === '') {
        return false;
      }
      if (value === 'inherit') {
        return false;
      }
      if (value === 'transparent') {
        return false;
      }
      var image = document.createElement('img');
      image.style.color = 'rgb(0, 0, 0)';
      image.style.color = value;
      if (image.style.color !== 'rgb(0, 0, 0)') {
        return true;
      }
      image.style.color = 'rgb(255, 255, 255)';
      image.style.color = value;
      return image.style.color !== 'rgb(255, 255, 255)';
    }
  }, {
    key: "handleChange",
    value: function handleChange(color) {
      var _this$props2 = this.props,
        onChange = _this$props2.onChange,
        format = _this$props2.format;
      if (format === 'rgba') {
        onChange("rgba(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ", ").concat(color.rgb.a, ")"));
      } else if (format === 'rgb') {
        onChange("rgb(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ")"));
      } else if (format === 'hsl') {
        onChange("hsl(".concat(Math.round(color.hsl.h), ", ").concat(Math.round(color.hsl.s * 100), "%, ").concat(Math.round(color.hsl.l * 100), "%)"));
      } else {
        onChange(color.hex);
      }
      // closeOnSelect && this.close();
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;
      var _this$props3 = this.props,
        ns = _this$props3.classPrefix,
        className = _this$props3.className,
        popoverClassName = _this$props3.popoverClassName,
        value = _this$props3.value,
        placeholder = _this$props3.placeholder,
        disabled = _this$props3.disabled,
        popOverContainer = _this$props3.popOverContainer,
        format = _this$props3.format,
        clearable = _this$props3.clearable,
        placement = _this$props3.placement,
        cx = _this$props3.classnames,
        presetColors = _this$props3.presetColors,
        allowCustomColor = _this$props3.allowCustomColor;
      var __ = this.props.translate;
      var isOpened = this.state.isOpened;
      var isFocused = this.state.isFocused;
      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", {
        className: cx("ColorPicker", {
          'is-disabled': disabled,
          'is-focused': isFocused
        }, className)
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", {
        ref: this.input,
        type: "text",
        autoComplete: "off",
        size: 10,
        className: cx('ColorPicker-input'),
        value: this.state.inputValue || '',
        placeholder: __(placeholder),
        disabled: disabled,
        onChange: this.handleInputChange,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        onClick: this.handleClick
      }), clearable && !disabled && value ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("a", {
        onClick: this.clearValue,
        className: cx('ColorPicker-clear')
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_icons__WEBPACK_IMPORTED_MODULE_4__.Icon, {
        icon: "close",
        className: "icon"
      })) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", {
        onClick: this.handleClick,
        className: cx('ColorPicker-preview')
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("i", {
        ref: this.preview,
        className: "".concat(ns, "ColorPicker-previewIcon"),
        style: {
          background: this.state.inputValue || '#ccc'
        }
      })), isOpened ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Overlay__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
        placement: placement || 'auto',
        target: function target() {
          return (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.findDOMNode)(_this3);
        },
        onHide: this.close,
        container: popOverContainer || function () {
          return (0,react_dom__WEBPACK_IMPORTED_MODULE_2__.findDOMNode)(_this3);
        },
        rootClose: false,
        show: true
      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_PopOver__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {
        classPrefix: ns,
        className: cx('ColorPicker-popover', popoverClassName),
        onHide: this.close,
        overlay: true
      }, allowCustomColor ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(react_color__WEBPACK_IMPORTED_MODULE_3__/* .SketchPicker */ .xS, {
        disableAlpha: !!~['rgb', 'hex'].indexOf(format),
        color: value,
        presetColors: presetColors,
        onChangeComplete: this.handleChange
      }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(react_color__WEBPACK_IMPORTED_MODULE_3__/* .GithubPicker */ .Lf, {
        color: value,
        colors: presetColors,
        onChangeComplete: this.handleChange
      }))) : null);
    }
  }]);
  return ColorControl;
}(react__WEBPACK_IMPORTED_MODULE_1__.PureComponent);
ColorControl.defaultProps = {
  format: 'hex',
  clearable: true,
  placeholder: 'ColorPicker.placeholder',
  allowCustomColor: true
  // closeOnSelect: true
};

(0,tslib__WEBPACK_IMPORTED_MODULE_16__/* .__decorate */ .gn)([_utils_helper__WEBPACK_IMPORTED_MODULE_9__.autobind, (0,tslib__WEBPACK_IMPORTED_MODULE_16__/* .__metadata */ .w6)("design:type", Function), (0,tslib__WEBPACK_IMPORTED_MODULE_16__/* .__metadata */ .w6)("design:paramtypes", [String]), (0,tslib__WEBPACK_IMPORTED_MODULE_16__/* .__metadata */ .w6)("design:returntype", void 0)], ColorControl.prototype, "validateColor", null);
/* harmony default export */ __webpack_exports__["default"] = ((0,_theme__WEBPACK_IMPORTED_MODULE_8__/* .themeable */ .YY)((0,_locale__WEBPACK_IMPORTED_MODULE_10__/* .localeable */ .eA)((0,uncontrollable__WEBPACK_IMPORTED_MODULE_6__/* .uncontrollable */ .nm)(ColorControl, {
  value: 'onChange'
}))));

/***/ })

}]);
//# sourceMappingURL=color_picker.js.map