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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }

import React from 'react';
import Popover from '../../Popover';
import ColorPicker from '../../ColorPicker';
import DATA_HOOKS from '../DataHooks';
import { st, classes } from './ColorViewer.st.css';
import Color from 'color';
export var ColorViewer = /*#__PURE__*/function (_React$Component) {
  _inherits(ColorViewer, _React$Component);

  var _super = _createSuper(ColorViewer);

  function ColorViewer() {
    var _this;

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

    _defineProperty(_assertThisInitialized(_this), "onChange", function (_color) {
      var color = _typeof(_color) === 'object' ? _color : Color(_color);

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

    return _this;
  }

  _createClass(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.createElement(Popover, _extends({
        placement: placement,
        appendTo: appendTo,
        onClickOutside: active ? onClickOutside : null
      }, popoverProps, {
        dataHook: DATA_HOOKS.COLOR_INPUT_POPOVER,
        showArrow: true,
        fixed: true,
        shown: active
      }), /*#__PURE__*/React.createElement(Popover.Element, null, /*#__PURE__*/React.createElement("div", {
        "data-hook": DATA_HOOKS.COLOR_INPUT_VIEWER,
        onClick: disabled ? undefined : onClick,
        style: {
          backgroundColor: value
        },
        className: st(classes.root, {
          size: size
        }),
        "data-size": size
      }, value === '' && /*#__PURE__*/React.createElement("div", {
        "data-hook": DATA_HOOKS.COLOR_INPUT_VIEWER_LINE,
        className: classes.line
      }))), /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(ColorPicker, {
        dataHook: DATA_HOOKS.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.Component);

_defineProperty(ColorViewer, "defaultProps", {
  popoverProps: {}
});