wix-style-react/dist/src/ColorInput/components/ColorViewer.js

wix-style-react

"use strict";

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

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

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

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

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

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

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

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

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

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

var _Popover = _interopRequireDefault(require("../../Popover"));

var _ColorPicker = _interopRequireDefault(require("../../ColorPicker"));

var _DataHooks = _interopRequireDefault(require("../DataHooks"));

var _ColorViewerSt = require("./ColorViewer.st.css");

var _color2 = _interopRequireDefault(require("color"));

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var ColorViewer = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(ColorViewer, _React$Component);

  var _super = _createSuper(ColorViewer);

  function ColorViewer() {
    var _this;

    (0, _classCallCheck2["default"])(this, ColorViewer);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (_color) {
      var color = (0, _typeof2["default"])(_color) === 'object' ? _color : (0, _color2["default"])(_color);

      _this.props.onChange(color.alpha() === 0 ? '' : color.hex());
    });
    return _this;
  }

  (0, _createClass2["default"])(ColorViewer, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          value = _this$props.value,
          disabled = _this$props.disabled,
          active = _this$props.active,
          onClick = _this$props.onClick,
          onConfirm = _this$props.onConfirm,
          onCancel = _this$props.onCancel,
          size = _this$props.size,
          _this$props$placement = _this$props.placement,
          placement = _this$props$placement === void 0 ? 'bottom' : _this$props$placement,
          _this$props$appendTo = _this$props.appendTo,
          appendTo = _this$props$appendTo === void 0 ? 'parent' : _this$props$appendTo,
          onClickOutside = _this$props.onClickOutside,
          children = _this$props.children,
          onAddColor = _this$props.onAddColor,
          addTooltipContent = _this$props.addTooltipContent,
          placeholder = _this$props.placeholder,
          popoverProps = _this$props.popoverProps;
      return /*#__PURE__*/_react["default"].createElement(_Popover["default"], (0, _extends2["default"])({
        placement: placement,
        appendTo: appendTo,
        onClickOutside: active ? onClickOutside : null
      }, popoverProps, {
        dataHook: _DataHooks["default"].COLOR_INPUT_POPOVER,
        showArrow: true,
        fixed: true,
        shown: active
      }), /*#__PURE__*/_react["default"].createElement(_Popover["default"].Element, null, /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _DataHooks["default"].COLOR_INPUT_VIEWER,
        onClick: disabled ? undefined : onClick,
        style: {
          backgroundColor: value
        },
        className: (0, _ColorViewerSt.st)(_ColorViewerSt.classes.root, {
          size: size
        }),
        "data-size": size
      }, value === '' && /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": _DataHooks["default"].COLOR_INPUT_VIEWER_LINE,
        className: _ColorViewerSt.classes.line
      }))), /*#__PURE__*/_react["default"].createElement(_Popover["default"].Content, null, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
        dataHook: _DataHooks["default"].COLOR_INPUT_COLOR_PICKER,
        showConverter: false,
        showInput: true,
        onCancel: onCancel,
        onChange: this.onChange,
        onConfirm: onConfirm,
        value: value,
        onAdd: onAddColor,
        allowEmpty: true,
        addTooltipContent: addTooltipContent,
        emptyPlaceholder: placeholder
      }, children)));
    }
  }]);
  return ColorViewer;
}(_react["default"].Component);

exports.ColorViewer = ColorViewer;
(0, _defineProperty2["default"])(ColorViewer, "defaultProps", {
  popoverProps: {}
});