wix-style-react/dist/src/ColorPicker/ColorPickerConverter.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Tabs = _interopRequireDefault(require("../Tabs"));
var _ColorPickerConverterHex = _interopRequireDefault(require("./ColorPickerConverterHex"));
var _ColorPickerConverterRGB = _interopRequireDefault(require("./ColorPickerConverterRGB"));
var _ColorPickerConverterHsb = _interopRequireDefault(require("./ColorPickerConverterHsb"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ColorPicker/ColorPickerConverter.js";
var HEX = 'HEX';
var RGB = 'RGB';
var HSB = 'HSB';
var tabs = [{
  id: HEX,
  title: HEX,
  dataHook: 'hex-tab'
}, {
  id: RGB,
  title: RGB,
  dataHook: 'rgb-tab'
}, {
  id: HSB,
  title: HSB,
  dataHook: 'hsb-tab'
}];
class ColorPickerConverter extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: HEX
    };
    this.changeTab = this.changeTab.bind(this);
  }
  render() {
    var {
      dataHook,
      current,
      showConverter,
      showInput,
      addTooltipContent,
      allowEmpty,
      hexPlaceholder
    } = this.props;
    var dataHooks = {
      hex: 'color-picker-hex-input',
      rgb: 'color-picker-rgb-inputs',
      hsb: 'color-picker-hsb-inputs'
    };
    if (!showConverter && !showInput) {
      return null;
    }
    if (!showConverter) {
      return /*#__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: 61,
          columnNumber: 9
        }
      });
    }
    var {
      activeTab
    } = this.state;
    return /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 77,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
      minWidth: 0,
      items: tabs,
      activeId: activeTab,
      type: "uniformFull",
      onClick: this.changeTab,
      size: "small",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 78,
        columnNumber: 9
      }
    }), activeTab === 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: 87,
        columnNumber: 11
      }
    }), activeTab === 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: 99,
        columnNumber: 11
      }
    }), activeTab === 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: 109,
        columnNumber: 11
      }
    }));
  }
  changeTab(_ref) {
    var {
      id
    } = _ref;
    this.setState({
      activeTab: id
    });
  }
}
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
};
//# sourceMappingURL=ColorPickerConverter.js.map