wix-style-react/dist/es/src/Swatches/AddColor.js

wix-style-react

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 ColorPicker from '../ColorPicker';
import Color from 'color';
import Popover from '../Popover';
import FillButton from '../FillButton';
import { dataHooks } from './constants';
var EMPTY_COLOR = Color('#00000000');

var AddColor = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(AddColor, _React$PureComponent);

  var _super = _createSuper(AddColor);

  function AddColor() {
    var _this;

    _classCallCheck(this, AddColor);

    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), "state", {
      color: EMPTY_COLOR,
      shown: false
    });

    _defineProperty(_assertThisInitialized(_this), "toggleColorPicker", function () {
      return _this.setState({
        shown: !_this.state.shown
      });
    });

    _defineProperty(_assertThisInitialized(_this), "hideColorPicker", function () {
      return _this.setState({
        shown: false,
        color: EMPTY_COLOR
      });
    });

    _defineProperty(_assertThisInitialized(_this), "setColor", function (color) {
      _this.setState({
        color: color
      });

      if (_this.props.onChange) {
        _this.props.onChange(color.hex());
      }
    });

    _defineProperty(_assertThisInitialized(_this), "confirm", function () {
      _this.hideColorPicker();

      _this.props.onAdd(_this.state.color.hex());
    });

    _defineProperty(_assertThisInitialized(_this), "cancel", function () {
      _this.hideColorPicker();

      if (_this.props.onCancel) {
        _this.props.onCancel();
      }
    });

    return _this;
  }

  _createClass(AddColor, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          tooltip = _this$props.tooltip,
          iconSize = _this$props.iconSize;
      var _this$state = this.state,
          shown = _this$state.shown,
          color = _this$state.color;
      var isEmptyColor = color.alpha() === 0;
      var noColorSelected = !shown || isEmptyColor;
      var buttonColor = noColorSelected ? undefined : color.hex();
      return /*#__PURE__*/React.createElement(Popover, {
        dataHook: dataHooks.addButtonPopover,
        appendTo: "window",
        placement: "top",
        showArrow: true,
        shown: shown,
        onClickOutside: this.cancel
      }, /*#__PURE__*/React.createElement(Popover.Element, null, /*#__PURE__*/React.createElement(FillButton, {
        dataHook: dataHooks.addButton,
        iconSize: iconSize,
        fill: buttonColor,
        onClick: this.toggleColorPicker,
        tooltipProps: {
          disabled: shown,
          timeout: 0,
          content: tooltip
        }
      })), /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(ColorPicker, {
        allowEmpty: false,
        dataHook: dataHooks.addButtonColorPicker,
        onCancel: this.cancel,
        onChange: this.setColor,
        onConfirm: this.confirm,
        showConverter: false,
        showInput: false,
        value: isEmptyColor ? '' : color
      })));
    }
  }]);

  return AddColor;
}(React.PureComponent);

export default AddColor;