@wix/design-system/dist/cjs/ColorPicker/ColorPickerConverter.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _Box = _interopRequireDefault(require("../Box"));
var _SegmentedToggle = _interopRequireDefault(require("../SegmentedToggle"));
var _ToggleButton = _interopRequireDefault(require("../ToggleButton"));
var _ColorPickerConverterSt = require("./ColorPickerConverter.st.css.js");
var _ColorPickerConverterHex = _interopRequireDefault(require("./ColorPickerConverterHex"));
var _ColorPickerConverterHsb = _interopRequireDefault(require("./ColorPickerConverterHsb"));
var _ColorPickerConverterRGB = _interopRequireDefault(require("./ColorPickerConverterRGB"));
var _utils = require("./utils");
var _ColorPickerEyeDropper = require("./ColorPickerEyeDropper");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ColorPicker/ColorPickerConverter.js";
var HEX = 'HEX';
var RGB = 'RGB';
var HSB = 'HSB';
class ColorPickerConverter extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeConverter: HEX
    };
    this.changeConverter = (evt, value) => {
      this.setState({
        activeConverter: value
      });
    };
  }
  render() {
    var {
      dataHook,
      current,
      showConverter,
      showInput,
      addTooltipContent,
      allowEmpty,
      hexPlaceholder,
      showEyeDropper,
      eyeDropperLabel
    } = this.props;
    var dataHooks = {
      hex: 'color-picker-hex-input',
      rgb: 'color-picker-rgb-inputs',
      hsb: 'color-picker-hsb-inputs'
    };
    var {
      activeConverter
    } = this.state;
    if (!showConverter && !showInput) {
      return null;
    }
    if (!showConverter) {
      return /*#__PURE__*/_react.default.createElement(_Box.default, {
        direction: "horizontal",
        gap: "small",
        align: "center",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 66,
          columnNumber: 9
        }
      }, showEyeDropper && /*#__PURE__*/_react.default.createElement(_ColorPickerEyeDropper.EyeDropper, {
        eyeDropperLabel: eyeDropperLabel,
        allowEmpty: allowEmpty,
        onChange: this.props.onChange,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 68,
          columnNumber: 13
        }
      }), /*#__PURE__*/_react.default.createElement(_ColorPickerConverterHex.default, {
        placeholder: hexPlaceholder,
        dataHook: dataHooks.hex,
        current: current,
        onChange: this.props.onChange,
        onEnter: this.props.onEnter,
        onAdd: this.props.onAdd,
        addTooltipContent: addTooltipContent,
        allowEmpty: allowEmpty,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 74,
          columnNumber: 11
        }
      }));
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ColorPickerConverterSt.st)(_ColorPickerConverterSt.classes.root),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 89,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ColorPickerConverterSt.st)(_ColorPickerConverterSt.classes.colorModelSwitcher),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 90,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_SegmentedToggle.default, {
      selected: activeConverter,
      onClick: (evt, value) => this.changeConverter(evt, value),
      size: "medium",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 91,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_SegmentedToggle.default.Button, {
      value: HEX,
      dataHook: _constants.DataHooks.hexConverterBtn,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 96,
        columnNumber: 13
      }
    }, HEX), /*#__PURE__*/_react.default.createElement(_SegmentedToggle.default.Button, {
      value: RGB,
      dataHook: _constants.DataHooks.rgbConverterBtn,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 102,
        columnNumber: 13
      }
    }, RGB), /*#__PURE__*/_react.default.createElement(_SegmentedToggle.default.Button, {
      value: HSB,
      dataHook: _constants.DataHooks.hsbConverterBtn,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 108,
        columnNumber: 13
      }
    }, HSB)), showEyeDropper && /*#__PURE__*/_react.default.createElement(_ColorPickerEyeDropper.EyeDropper, {
      eyeDropperLabel: eyeDropperLabel,
      allowEmpty: allowEmpty,
      onChange: this.props.onChange,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 116,
        columnNumber: 13
      }
    })), activeConverter === HEX && /*#__PURE__*/_react.default.createElement(_ColorPickerConverterHex.default, {
      placeholder: hexPlaceholder,
      dataHook: dataHooks.hex,
      current: current,
      onChange: this.props.onChange,
      onAdd: this.props.onAdd,
      onEnter: this.props.onEnter,
      addTooltipContent: addTooltipContent,
      allowEmpty: allowEmpty,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 125,
        columnNumber: 11
      }
    }), activeConverter === RGB && /*#__PURE__*/_react.default.createElement(_ColorPickerConverterRGB.default, {
      dataHook: dataHooks.rgb,
      current: current,
      onChange: this.props.onChange,
      onAdd: this.props.onAdd,
      addTooltipContent: addTooltipContent,
      allowEmpty: allowEmpty,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 137,
        columnNumber: 11
      }
    }), activeConverter === HSB && /*#__PURE__*/_react.default.createElement(_ColorPickerConverterHsb.default, {
      dataHook: dataHooks.hsb,
      current: current,
      onChange: this.props.onChange,
      onAdd: this.props.onAdd,
      addTooltipContent: addTooltipContent,
      allowEmpty: allowEmpty,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 147,
        columnNumber: 11
      }
    }));
  }
}
exports.default = ColorPickerConverter;
ColorPickerConverter.propTypes = {
  current: _propTypes.default.object.isRequired,
  showConverter: _propTypes.default.bool.isRequired,
  showInput: _propTypes.default.bool.isRequired,
  onChange: _propTypes.default.func.isRequired,
  onEnter: _propTypes.default.func.isRequired,
  onAdd: _propTypes.default.func,
  allowEmpty: _propTypes.default.bool,
  hexPlaceholder: _propTypes.default.string,
  showEyeDropper: _propTypes.default.bool,
  eyeDropperLabel: _propTypes.default.string
};
//# sourceMappingURL=ColorPickerConverter.js.map