@wix/design-system/dist/cjs/ColorInput/components/ColorViewer.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ColorViewer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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.js");
var _color2 = _interopRequireDefault(require("color"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ColorInput/components/ColorViewer.js";
class ColorViewer extends _react.default.Component {
  constructor() {
    super(...arguments);
    this.onChange = _color => {
      var color = typeof _color === 'object' ? _color : (0, _color2.default)(_color);
      this.props.onChange(color.alpha() === 0 ? '' : color.hex());
    };
  }
  render() {
    var {
      value,
      disabled,
      active,
      onClick,
      onConfirm,
      onCancel,
      size,
      placement = 'bottom',
      appendTo = 'parent',
      onClickOutside,
      children,
      onAddColor,
      addTooltipContent,
      placeholder,
      onTabOut: _onTabOut,
      popoverProps
    } = this.props;
    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,
      onTabOut: e => {
        popoverProps.onTabOut == null || popoverProps.onTabOut(e);
        _onTabOut(e);
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 40,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement(_Popover.default.Element, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 54,
        columnNumber: 9
      }
    }, /*#__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
      }),
      "data-size": size,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 55,
        columnNumber: 11
      }
    }, value === '' && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _DataHooks.default.COLOR_INPUT_VIEWER_LINE,
      className: _ColorViewerSt.classes.line,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 63,
        columnNumber: 15
      }
    }))), /*#__PURE__*/_react.default.createElement(_Popover.default.Content, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 70,
        columnNumber: 9
      }
    }, /*#__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,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 71,
        columnNumber: 11
      }
    }, children)));
  }
}
exports.ColorViewer = ColorViewer;
ColorViewer.defaultProps = {
  popoverProps: {}
};
//# sourceMappingURL=ColorViewer.js.map