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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _ColorPicker = _interopRequireDefault(require("../ColorPicker"));
var _color = _interopRequireDefault(require("color"));
var _Popover = _interopRequireDefault(require("../Popover"));
var _FillButton = _interopRequireDefault(require("../FillButton"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Swatches/AddColor.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var EMPTY_COLOR = (0, _color.default)('#00000000');
class AddColor extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      color: EMPTY_COLOR,
      shown: false
    };
    this.toggleColorPicker = () => this.setState({
      shown: !this.state.shown
    });
    this.hideColorPicker = () => this.setState({
      shown: false,
      color: EMPTY_COLOR
    });
    this.setColor = color => {
      this.setState({
        color
      });
      if (this.props.onChange) {
        this.props.onChange(color.hex());
      }
    };
    this.confirm = () => {
      this.hideColorPicker();
      this.props.onAdd(this.state.color.hex());
    };
    this.cancel = () => {
      this.hideColorPicker();
      if (this.props.onCancel) {
        this.props.onCancel();
      }
    };
  }
  render() {
    var {
      tooltip,
      iconSize,
      popoverProps: customPopoverProps
    } = this.props;
    var {
      shown,
      color
    } = this.state;
    var isEmptyColor = color.alpha() === 0;
    var noColorSelected = !shown || isEmptyColor;
    var buttonColor = noColorSelected ? undefined : color.hex();
    var popoverProps = _objectSpread({
      appendTo: 'window',
      placement: 'top',
      showArrow: true,
      shown,
      onClickOutside: this.cancel
    }, customPopoverProps);
    return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
      dataHook: _constants.dataHooks.addButtonPopover
    }, popoverProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 67,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement(_Popover.default.Element, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 68,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_FillButton.default, {
      dataHook: _constants.dataHooks.addButton,
      iconSize: iconSize,
      fill: buttonColor,
      onClick: this.toggleColorPicker,
      tooltipProps: {
        disabled: shown,
        timeout: 0,
        content: tooltip
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 69,
        columnNumber: 11
      }
    })), /*#__PURE__*/_react.default.createElement(_Popover.default.Content, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 77,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
      allowEmpty: false,
      dataHook: _constants.dataHooks.addButtonColorPicker,
      onCancel: this.cancel,
      onChange: this.setColor,
      onConfirm: this.confirm,
      showConverter: false,
      showInput: false,
      value: isEmptyColor ? '' : color,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 78,
        columnNumber: 11
      }
    })));
  }
}
var _default = exports.default = AddColor;
//# sourceMappingURL=AddColor.js.map